mono7555eの投稿 - Crieit

GatsbyJSで次の記事、前の記事へのリンクを生成する方法

2019-10-08T08:41:01+09:00

オリジナルの記事はこちら

こんにちは。mono（@mono7555e）です。

記事ページで他の記事へ行く術がなく直帰率が高くなっていたので他の記事への遷移を追加することにしました。

ちょっとひと手間かかりますがGatsbyJSでも実現できましたのでご紹介したいと思います。

ページ生成時に前後の記事情報を渡す

exports.createPages = async ({ actions, graphql }) => {
  const { createPage } = actions
  const template = path.resolve(`src/templates/blog.tsx`)
  await graphql(`
    {
      allMarkdownRemark(
        sort: { order: DESC, fields: [frontmatter___published_at] }
        limit: 2000
      ) {
        edges {
          node {
            fields {
              slug
            }
            frontmatter {
              title
              image
            }
          }
        }
      }
    }
  `).then(result => {
    if (result.errors) {
      return Promise.reject(result.errors)
    }
    const pages = result.data.allMarkdownRemark.edges
    pages.forEach(({ node }, index) => {
      const prev = index === 0 ? null : pages[index - 1].node
      const next = index === pages.length - 1 ? null : pages[index + 1].node
      createPage({
        path: node.fields.slug,
        component: template,
        context: {
          slug: node.fields.slug,
          prev,
          next,
        },
      })
    })
  })
}

重要なのはconst prev = ～とconst next ～の部分と、contextでそれを設定している部分です。
それ以外のところは自由です。

設定された前後の記事情報を元にリンクを生成

ちょっとごちゃごちゃしてしまったので前後の記事用のコンポーネントに分割しました。

import React from "react"
import { Box, Card, CardActionArea, CardContent, Typography } from "@material-ui/core"

import Image from "../atoms/image"

const PrevNext = ({ prev, next }) => {
  return(
    
      { prev == null ? null : _link(prev, `prev`)}
      { next == null ? null : _link(next, `next`)}
    
  )
}
export default PrevNext

const _link = ({ fields, frontmatter }, direction) =>{
  return(
    {{ width: `40%` }}>
      
        { direction == 'prev' ? '前の記事' : '次の記事'}
      
      {{ width: `100%`, height: `100%`}}>
        {{ display: 'flex', alignItems: `stretch`, height: `100%` }}>
          {{ width: `35%` }}>
            {{ height: `100%` }} />
          
          {{ flex: `1` }}>
            
              {frontmatter.title}
            
          
        
      
    
  )
}

このブログはMaterial-UIを使っているのでちょっとややこしい感じになりますが、単純にリンクをするだけであればもう少し簡単に書けると思います。

あとは作った前後の記事用のコンポーネントをテンプレートから呼び出すだけです。

// importなどなど
export default function Template({ data, pageContext }) {
  // 中略
  return (
    
      
        {/* その他コンポーネント読み込み */}
        
      
    
  )
}

まとめ

やってみると結構かんたんでした。

今はイメージとタイトルだけですが、タグや日付など各記事が持っている情報を利用できるのでよりリッチな前後の記事へのリンクが設置できると思います。

gatsby-transformer-remarkで出力されるコンポーネントをカスタマイズする方法

2019-10-08T08:32:43+09:00

オリジナルの記事はこちら

こんにちは。mono（@mono7555e）です。

このブログがGatsbyJSで作られていること、gatsby-transformer-remarkを使ってMakrdownを読み込んでいることは以前にもご紹介しましたが、今回はそこで出力されるHTML（コンポーネント）をカスタマイズする方法をご紹介したいと思います。

かなり簡単で、ずばりrehype-reactを使うとやりたいことが出来ます。

独自コンポーネントを読み込む

前述の例では、既存コンポーネントを独自コンポーネントに置き換える方法でしたが、独自コンポーネントを追加することも出来ます。

まずは読み込みたいコンポーネントを作ります。

```jsx:title=src/components/atoms/custom.tsx
import React from 'react'

const Custom = () => {
return(

独自コンポーネント

)
}
export default Custom


Markdownファイルのコンポーネントを読み込みたい場所にタグを追加します。

```md
↓コンポーネント読み込み↓



↑コンポーネント読み込み↑

※ちなみにと書きたくなりますがこれだとダメでした

それが置き換えられるようにrehypeReactを設定します。

import rehypeReact from "rehype-react"
import Custom from "../components/custom"
// 中略
export const renderAst = new rehypeReact({
  createElement: React.createElement,
  components: {
    'custom': Custom,
  },
}).Compiler

これでと書かれたところCustomコンポーネントになって出力されるようになります。

まとめ

gatsby-transformer-remarkを使っている際にカスタマイズをしたい場合rehype-reactを使えば簡単なことであれば大体のことは出来ると思います。

もし、さらにより細かいカスタマイズを行いたい場合は今回のように置き換えるのではなくて、コンポーネント自体を読み込めるようになるMDXを使うと良さそうです。

お問い合わせフォームを作るならNetlify Formsがオススメ！

2019-10-08T08:27:14+09:00

オリジナルの記事はこちら

こんにちは。mono（@mono7555e）です。

今回は私のブログのお問い合わせフォームにも使っているNetlify Formsのご紹介です。
ブログやサイトにお問い合わせフォームを設置したい時に簡単に使えるのでオススメです。

Netlify Formsとは

Netlifyについては以前ご紹介していますのでそちらをご覧ください。

https://www.mono7555e.com/gatsbyjs-and-netlify/

そのNetlifyのサービスの1つで「Forms」というフォームの送信内容を受け取ってくれるサービスがあります。

利用方法は簡単で、

タグにnetlifyまたはdata-netlify="true"要素を追加して、Netlifyに反映するだけです。

以下、公式ドキュメントのサンプルです。


  
    Your Name: 
  
  
    Your Email: 
  
  
    Your Role: 
  
  
    Message:

タグのdata-netlify="true"以外は普通のフォームなのが分かると思います。

タグにdata-netlify="true"をつける以外に制約はないので、フォームの見た目などのカスタマイズは自由です。

価格

月に100件、アップロードデータサイズ10MBまでは無料で使えます。

それ以上になると、19ドル/月の費用がかかります。詳しくは公式サイトをご覧ください。

主な機能

ファイル添付

type="file"のフィールドを追加すれば、それだけでファイルもアップロードできるようになります。


  ...
  
  ...

スパムフィルタリング

送信された内容はAkismetを使ってフィルタリングされます。

フィルタリングされたものはダッシュボード画面から確認出来るので、誤ってスパム判定されて確認できないということはないです。

メールアドレスの形式が間違っている場合などもフィルタリングされて弾かれるみたいです。

さらに、「reCAPTCHA 2」などを使ってフォームを保護することができるので必要であれば使ってみると良さそうです。

詳しくは公式ドキュメントをご覧ください。

エクスポート

送られてきた内容は基本的にはNetlifyのダッシュボード画面から確認することになりますが、CSV形式でのエクスポート機能もあります。

ダウンロードできるのはスパム判定されていないもののみです。

サンクスページ

サンクスページを用意して

タグのactionにサンクスページのパスを設定するだけでOKです。


  ...
  
  ...

何も設定していない場合はNetlifyが用意した画面が表示されます。

カスタマイズ等はできないので自前で用意する方が良いでしょう。

GatsbyJSで利用する場合の注意点

GatsbyJSやその他静的サイトジェネレーターからも利用可能ですが、サンプルのままだと動かないので一部コードの追加が必要になります。

以下のようなコードを

に追加します。

valueの内容はタグのname属性に合わせて変更してください。

サンプル


  {/* 以下のコードを追加 */}
  
  ...

Netlify Forms以外の選択肢

このブログがGatsbyJS+Netlifyという構成で作られていたのでNetlify Formsを使ってお問い合わせフォームを構築しましたが、Netlifyを使っていない場合や難しく感じた場合はGoogleフォームを使うのが良いと思います。

まとめ

以前からTwitterのDMにてご依頼等いただくことがありましたが、企業さまだと少々お手間だったようなので、お問い合わせフォームを設置することにしました。

Netlify Formsなら簡単に設置できますし、スパムも自動で判別してくれるので管理の手間も少なくオススメです。

参考

公式ドキュメント

https://www.netlify.com/docs/form-handling/

ReactアプリにNetlify Formsを入れる方法（公式ブログ）

https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/

いまブログを始めるならGatsbyJS+Netlifyがオススメ！

2019-10-08T08:07:21+09:00

オリジナルの記事はこちら

こんにちは。mono（@mono7555e）です。

今回は新しくブログを立ち上げた際に使ったGatsbyJSとNetlifyのご紹介です。
新しくブログを立ち上げようとしている方やWordPressに疲れた方には参考になるんじゃないかと思います。

GatsbyJSとは

https://www.gatsbyjs.org/

GatsbyJSはReactで作られた静的サイトジェネレーターです。
JSONやYAML、XMLなど扱うデータを全て一回GraphQLで取り出せるように変換してくれるので、様々なデータが扱いやすく、コンポーネント化がしやすいという特長があります。

また、プラグインも豊富で大抵の場合、既にプラグインがあるのでそれを使うように設定してあげればOKです。

今回のブログ立ち上げの際にもMarkdownで記事が書けるというのを必須事項にあげていたのでgatsby-transformer-remarkというプラグインを利用してMakrdownファイルをGraphQLで扱えるようにしました。

他にもsitemap.xmlを生成してくれるgatsby-plugin-sitemap、Google Tag Managerのタグを入れてくれるgatsby-plugin-google-tagmanagerなど利用しています。

なぜWordPressを使わなかったのか

ブログを立ち上げるとなると真っ先に思い浮かぶのがWordPressだと思います。
ですが、今回は使うのをやめました。
WordPressを使った経験はある方なら分かると思うのですが色々つらみを感じているからです。

セキュリティが不安

WordPressはかなり使われているので様々な方面から狙われやすいです。
セキュリティパッチ等のアップデートを忘れているとすぐに狙われて乗っ取られたり、悪意のあるコードを埋め込められたりする恐れがあります。

前述の通りセキュリティが不安なのでセキュリティパッチが降ってきたらすぐに適用したいのですがカスタマイズをバリバリやっていたりプラグインを使っている場合、それらが邪魔をしてアップデートが出来ないことがままあります。
また、WordPressだけでなくPHPやWebサーバーの管理等も必要なのでその辺りも大変です（レンタルサーバーの場合はその辺り任せられるので楽ですが、カスタマイズがしづらい場合もあります。）

PHP書くの辛い

最後はかなり個人的な理由です。
WordPressはPHPで作られているので、ある程度カスタマイズをしようと思うとPHPでコードを書く必要があるのですが、PHPは書いててあまり楽しい言語ではないので出来れば避けたいと思っています。

なぜブログサービスを使わなかったのか

WordPress以外にもブログをはじめるのに使えるサービスがいくつかありますが、Markdown、アフィリエイト、カスタマイズ性の辺りがマッチせず使うのを諦めました。

有名なところだとAmebaブログ、ライブドアブログ、fc2ブログなどがありますが、それらのブログサービスはMarkdownで記事が書けないので除外しました。

Markdownが使えるのは、調べた限りだとMedium、note、Qiita、はてなブログぐらいですが、それらも他の部分がネックになりました。

Medium

使ったことがないので何とも言えないところですが、日本で使っている人が少ない印象で、検索に引っかかることもないのでSEOにも強くなさそうな印象です。
2017年に日本から撤退しているのも気になりました。

note

アフィリエイトが貼れなかったり、カスタマイズも出来ないのがちょっと辛いかなと。
ただ、有料記事が販売できたりするのでブログとは別に利用しようと思っています。

https://note.mu/mono7555e

Qiita

noteと同様にアフィリエイト、カスタマイズが出来ないのと、プログラミングに関するものしか投稿できないというのがネックです。
もしかしたらめちゃくちゃコードを見せるような記事はQiitaに書くかもしれません。

一応登録だけはしました。

https://qiita.com/mono7555e

WordPress以外
独自ドメインが使える
Markdownで書ける
カスタマイズしやすい

これらを満たすのがGatsbyJSとNetlifyの組み合わせだったので使用しています。

同じような条件で検討されている方はGatsbyJSとNetlifyの組み合わせがオススメなので是非試してみてください。