GatsbyJSで認証サイトを実装するチュートリアルをやった時のまとめです。

GatsbyJSで認証サイトを実装する

アクセス解析をするためにブログにGoogleアナリティクスを導入しました。 
今後イベント取得の度に、リリースをするのは面倒なので、Googleタグマネージャーを設定して、アナリティクスの計測を設定しています。
今回はGatsby製のブログにGoogleタグマネージャーを設定する方法をまとめておきます。
<h2 id="Googleタグマネージャーのコンテナ作成">Googleタグマネージャーのコンテナ作成</h2>
最初にGoogleタグマネージャーのコンテナを作成しておきます。
<img src="/images/posts/gatsbyjs-gtm/gtm-container-new.png" alt="コンテナの作成" width="714" height="619" />
<h2 id="Googleアナリティクスの設定">Googleアナリティクスの設定</h2>
管理 &gt; +プロパティを作成 から新たに計測用のプロパティを作成しておきます。
<h2 id="プラグインの追加">プラグインの追加</h2>
<h3 id="gatsby-plugin-google-tagmanager">gatsby-plugin-google-tagmanager</h3>
<a href="https://www.gatsbyjs.org/packages/gatsby-plugin-google-tagmanager/" target="_blank">gatsby-plugin-google-tagmanager</a> を利用してGoogleタグマネージャーをページに埋め込みます。 
（&lt;head&gt;タグに直接&lt;script&gt;タグを埋め込む方法がが分からず、公式のプラグインがあったので利用しました。）
<h3 id="インストール">インストール</h3>
<pre class="language-bash"><code class="language-bash">$ yarn add gatsby-plugin-google-tagmanager
</code></pre>
gastby-config.js にプラグインの設定を追記します。
<pre class="language-javascript"><code class="language-javascript">{
 resolve: `gatsby-plugin-google-tagmanager`,
 options: {
 id: `GTM-5MKNQWX`,

 // Include GTM in development.
 // Defaults to false meaning GTM will only be loaded in production.
 includeInDevelopment: false,

 // datalayer to be set before GTM is loaded
 // should be an object or a function that is executed in the browser
 // Defaults to null
 defaultDataLayer: { platform: "gatsby" },

 // Specify optional GTM environment details.
 gtmAuth: "xNwDtuXDGlgZTO1P8TF2cg",
 gtmPreview: "env-1",
 dataLayerName: 'dataLayer',
 }
}
</code></pre>
設定する値は 管理 &gt; Live（公開中）&gt; コードを取得 の埋め込みコードから確認することができます。
<img src="/images/posts/gatsbyjs-gtm/gtm-script.png" alt="Googleタグマネージャーの埋め込みコード" width="1171" height="368" />
<h2 id="Googleタグマネージャーの設定">Googleタグマネージャーの設定</h2>
<h3 id="トリガーの作成">トリガーの作成</h3>
GatsbyJSはSPAでCSRで動作するため、変更の履歴をトリガーとして作成しておきます。
<h3 id="変数の作成">変数の作成</h3>
GAのトラッキングIDを設定した Googleアナリティクス設定 を変数として設定します。
<img src="/images/posts/gatsbyjs-gtm/gtm-ga-variable.png" alt="Googleアナリティクスの変数を作成" width="720" height="290" />
<h3 id="タグの作成">タグの作成</h3>
Googleアナリティクスにページビューを送信するタグを作成します。
Googleアナリティクスの設定には上で作成した変数を指定し、トリガーには「ページビュー」と「履歴の変更」の2つを設定しました。
初回のページ読み込みもトリガーさせるために、「ページビュー」も指定しています。
<img src="/images/posts/gatsbyjs-gtm/gtm-tag.png" alt="タグの作成" width="731" height="384" />
<h2 id="リリース前の確認">リリース前の確認</h2>
Googleタグマネージャーのプレビューモードを利用すれば、ローカルで埋め込みが正常に出来ているか確認できます。
ワークスペース &gt; プレビュー をクリックしてプレビューモードにした後に、ローカルで ページを表示します。
その際は次の設定を true に変更しておく必要があります。
<pre class="language-javascript"><code class="language-javascript">// Include GTM in development.
// Defaults to false meaning GTM will only be loaded in production.
includeInDevelopment: true,
</code></pre>
ワークスペース &gt; プレビュー をクリックしてプレビューモードにした後に、ローカルでサーバーを立ち上げてページを表示します。
正常にタグが埋め込まれている場合は、ローカルで表示したページ下部にGoogleタグマネージャーのプレビュー画面が表示されます。
<h2 id="リリース">リリース</h2>
以上の設定を終えたら、Googleタグマネージャーの公開 と プラグイン追加の変更を本番環境にリリースすれば導入は完了です。
<h2 id="おまけ">おまけ</h2>
自分のアクセスを計測対象外とするために <a href="https://chrome.google.com/webstore/detail/google-analytics-opt-out/fllaojicojecljbmefodhfapmkghcbnh" target="_blank">Google Analytics オプトアウト アドオン (by Google)</a> を利用しています。 
「ga.jsと連携して...」と書いてありますが、Googleタグマネージャーを経由する場合でも正常に動作してくれました。

Gatsby製のブログにGoogleタグマネージャー経由でGoogleアナリティクスを導入する

<a href="https://github.com/gatsbyjs/gatsby-starter-blog" target="_blank">gatsbyjs/gatsby-starter-blog</a> で作成したブログはデフォルトの状態ではコードのシンタックハイライトが無く非常に見辛いです。 
プラグインを設定してシンタックハイライトを導入します
<h2 id="プラグインの導入">プラグインの導入</h2>
gatsby-starter-blog には最初から <a href="https://gatsbyjs.org/packages/gatsby-remark-prismjs" target="_blank">gatsby-remark-prismjs</a> がプラグインとしてインストールされています。 
そのため、新たにプラグインをインストールする必要はなく、ハイライトのcss読み込み設定を修正するだけでシンタックハイライトを有効化できます。
<pre class="language-js"><code class="language-js"> {
 resolve: `gatsby-transformer-remark`,
 options: {
 plugins: [
 {
 resolve: `gatsby-remark-images`,
 options: {
 maxWidth: 590,
 },
 },
 {
 resolve: `gatsby-remark-responsive-iframe`,
 options: {
 wrapperStyle: `margin-bottom: 1.0725rem`,
 },
 },
 `gatsby-remark-prismjs`,
 `gatsby-remark-copy-linked-files`,
 `gatsby-remark-smartypants`,
 ],
 }, {
 resolve: `gatsby-transformer-remark`,
 options: {
 plugins: [
 {
 resolve: `gatsby-remark-images`,
 options: {
 maxWidth: 590,
 },
 },
 {
 resolve: `gatsby-remark-responsive-iframe`,
 options: {
 wrapperStyle: `margin-bottom: 1.0725rem`,
 },
 },
 `gatsby-remark-prismjs`, // 初期状態でインストール済み
 `gatsby-remark-copy-linked-files`,
 `gatsby-remark-smartypants`,
 ],
 },
</code></pre>
<h3 id="CSSの読み込み設定">CSSの読み込み設定</h3>
gatsby-browser.jsにて prismjs のテーマのCSS読み込みを追記します。 
デフォルトで利用できるテーマの一覧は <a href="https://github.com/PrismJS/prism/tree/1d5047df37aacc900f8270b1c6215028f6988eb1/themes" target="_blank">PrismJS/prism/themes</a> で確認できます。
<pre class="language-js"><code class="language-js">import "prismjs/themes/prism-tomorrow.css"
</code></pre>
<h2 id="シンタックハイライトを利用">シンタックハイライトを利用</h2>
pre記法に言語タグを指定することでシンタックハイライトを利用できます。 
利用可能な言語タグの一覧は <a href="https://prismjs.com/#supported-languages" target="_blank">prismjs</a> の公式ページに記載してあります。
<pre class="language-js"><code class="language-js">```js
console.log('シンタックハイライトだよ')
```
</code></pre>

gatsby-starter-blogでコードのシンタックスハイライトを設定

<h2 id="Netfify CMSとは？">Netfify CMSとは？</h2>
任意の静的サイトジェネレーターと組み合わせて利用可能なNetlifyが提供するCMSツールです。 
テキスト編集やプレビュー機能、画像アップロードなどの機能をWebベースのUIとして提供してくれます。 
また、GitHubのAPIを内部で利用しており、管理画面上で記事作成 =&gt; githubにpush =&gt; netlifyにデプロイ のフローを自動で実施してくれます。
<h2 id="GastbyJSのテンプレートからブログを作成">GastbyJSのテンプレートからブログを作成</h2>
立ち上げるブログが無いと何も始まりません。
最初に GatbyJS の <a href="https://github.com/gatsbyjs/gatsby-starter-blog" target="_blank">gatsbyjs/gatsby-starter-blog</a> を利用してテンプレートからブログを作成します。
<pre class="language-shell"><code class="language-shell">$ yarn add global gatsby-cli
$ gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
</code></pre>
たった2行でブログの作成が完了しました！ 
デザインの修正とかやりだすと、やる事が増えて結局途中で諦めてしまう可能性がある（自分の性格上そうなる）ので、とりあえず公開する事だけを目標とします。
デザインとかは後からゆっくり修正していきましょう。
<h3 id="Netlify CMS をインストール">Netlify CMS をインストール</h3>
続いて Netlify CMS をインストールします。
<pre class="language-shell"><code class="language-shell">$ cd blog
$ yarn add netlify-cms-app gatsby-plugin-netlify-cms
</code></pre>
<code>static/admin/gatsby-config.yml</code> ファイルを作成して次の内容を貼り付けます。
<pre class="language-yaml"><code class="language-yaml">backend:
 name: git-gateway
 branch: master

media_folder: static/images/uploaded
public_folder: /images/uploaded

collections:
 - name: "blog"
 label: "Blog"
 folder: "content/blog"
 create: true
 slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
 editor:
 preview: true # プレビュー表示を有効化
 publish_mode: editorial_workflow # ワークフロー管理を有効化
 fields:
 - { label: "Title", name: "title", widget: "string" }
 - { label: "Publish Date", name: "date", widget: "datetime" }
 - { label: "Description", name: "description", widget: "string" }
 - { label: "Body", name: "body", widget: "markdown" }
</code></pre>
画像をアップロードする空ディレクトリを追加します。
<pre class="language-shell"><code class="language-shell">$ mkdir -p static/images/uploaded
$ touch static/images/uploaded/.gitkeep
</code></pre>
最後に <code>gatsby-config.js</code> にプラグインを追記します。
<pre><code>plugins: [`gatsby-plugin-netlify-cms`]
</code></pre>
CMSのインストールはこれだけです。 すごい簡単で感動ですね。
実際にローカル環境で確認してみましょう。
<pre><code>$ yarn development
</code></pre>
http://localhost:8000/admin にアクセスしてCMSのログイン画面が表示されたらOKです。
ログインするには後述する Netlify の認証設定が必要です。
<h3 id="ブログを公開する">ブログを公開する</h3>
ここまで来たら、いよいよNetlifyにブログを公開します。
最初にGitHubにリポジトリをデプロイします。
<pre class="language-shell"><code class="language-shell">$ git add .
$ git commit -m "Initial Commit"
$ git remote add origin https://github.com/YOUR_USERNAME/NEW_REPO_NAME.git
$ git push -u origin master
</code></pre>
続いて Netlify のページ上で <code>New Site From Git</code> を選択して手順に沿ってブログを公開します。
ビルド設定は次ように設定します。
<pre><code>Build Command: gatsby build
Publish directory: public/
</code></pre>
&lt;ブログのドメイン名&gt;/admin にアクセスすれば管理画面を表示できます。
<img src="/images/posts/netlify-cms/blog-template.png" alt="テンプレートの画面" width="1930" height="1460" />
テンプレートのままですが、自分のブログが公開されました (*'ω'ﾉﾉﾞ☆ﾊﾟﾁﾊﾟﾁ
<h2 id="CMSの管理ユーザーの作成">CMSの管理ユーザーの作成</h2>
CMSの管理画面にログインするために Netlify の認証設定をして管理ユーザーを作成しましょう。 Netlifyの管理画面から公開したサイトを選択して次の手順に沿ってアカウント作成の作業を進めます。
<ol>
<li>Settings &gt; Identity &gt; Enable Identity を選択</li>
<li>Registration preferences &gt; Edit Settings &gt; Invite only を選択 この設定をしないと誰でもアカウントを作成して管理画面にログインできてしまうので、よほどの理由がない限りは設定しておくことをオススメします</li>
<li>Services &gt; Git Gateway &gt; Enable Git Gateway をクリック</li>
<li>Identityタブに移動 &gt; Invite users をクリック 自分のメールアドレスを指定して自分を管理者として招待 送信された招待メールからアカウントを作成</li>
</ol>
これでCMSの管理画面にログイン出来るようになりました。
<h2 id="記事を投稿する">記事を投稿する</h2>
最後にCMSで最初の記事を投稿していきます。
<ol>
<li>/admin にアクセスして、管理画面にログイン</li>
<li><code>new blog</code> をクリック</li>
<li>記事を書いて <code>Save</code> をクリック</li>
<li>問題なければ Publish をクリック</li>
</ol>
以上で記事が公開されます。

GatsbyJS + Netlify CMS でエンジニアブログを立ち上げる

神奈川の田舎で働いてるフロントエンドエンジニアのブログ