差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン | 最新のリビジョン両方とも次のリビジョン | ||
javascript:gatsby [2021/08/03 18:52] – 削除 techwiki | javascript:gatsby [2021/08/03 18:52] – 作成 techwiki | ||
---|---|---|---|
行 1: | 行 1: | ||
+ | ======Gatsby.js====== | ||
+ | =====Gatsby.jsのプロジェクトを作成する方法===== | ||
+ | <code bash> | ||
+ | gatsby new xxx https:// | ||
+ | </ | ||
+ | |||
+ | '' | ||
+ | ('' | ||
+ | |||
+ | '' | ||
+ | |||
+ | ---- | ||
+ | [[https:// | ||
+ | |||
+ | 1番人気の'' | ||
+ | 2番人気の'' | ||
+ | |||
+ | 初心者は'' | ||
+ | チュートリアルは'' | ||
+ | カスタマイズのための情報も多い。 | ||
+ | |||
+ | =====Gatsby.jsサービスのURLとポートを変更する方法===== | ||
+ | ====デフォルトのURLとポート(develop)==== | ||
+ | <code bash> | ||
+ | npm run develop | ||
+ | </ | ||
+ | Gatsby.jsでWebサイトを作成後、 | ||
+ | '' | ||
+ | のコマンドでWebサービスが起動する。 | ||
+ | |||
+ | ブラウザに | ||
+ | '' | ||
+ | というURLを入力すると、Gatsby.jsで作成したサイトが表示される。 | ||
+ | |||
+ | |||
+ | ====デフォルトのURLとポート(production)==== | ||
+ | <code bash> | ||
+ | npm run build | ||
+ | npm run serve | ||
+ | </ | ||
+ | '' | ||
+ | でプロジェクトをビルド後、 | ||
+ | '' | ||
+ | のコマンドでWebサービスが起動する。 | ||
+ | |||
+ | ブラウザに | ||
+ | '' | ||
+ | というURLを入力すると、Gatsby.jsで作成したサイトが表示される。 | ||
+ | |||
+ | ====Gatsby.jsサービスのホストを設定==== | ||
+ | デフォルトの設定では、 | ||
+ | '' | ||
+ | '' | ||
+ | (IPアドレス指定でページを表示できない) | ||
+ | |||
+ | そのため、コマンドを実行した端末上からしかアクセスできない。 | ||
+ | スマホで表示が確認できないため、レスポンシブが機能しているか確認しづらい。 | ||
+ | |||
+ | サービスの起動オプションにhostを設定することで、IPアドレスでのアクセスを可能にする。 | ||
+ | |||
+ | ---- | ||
+ | |||
+ | '' | ||
+ | '' | ||
+ | |||
+ | <code - package.json抜粋> | ||
+ | { | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | 上記の部分を、下記のように変更。 | ||
+ | <code - package.json抜粋> | ||
+ | { | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | '' | ||
+ | '' | ||
+ | のようなURLでサイトを表示できるようになる。 | ||
+ | |||
+ | IPアドレスは、'' | ||
+ | |||
+ | '' | ||
+ | '' | ||
+ | '' | ||
+ | |||
+ | ====Gatsby.jsサービスのポートを設定==== | ||
+ | <code - package.json抜粋> | ||
+ | { | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | '' | ||
+ | デフォルトの'' | ||
+ | |||
+ | Gatsby.jsで複数のサイトを起動したとき、デフォルトのポートのままでは競合するので、ポートの変更が必須となる。 | ||
+ | |||
+ | =====Gatsby.jsから不要なプラグインを削除する===== | ||
+ | 不要なプラグインなどは削除した方が全体のファイルサイズが小さくなり、ビルド時間の短縮になる。 | ||
+ | ====prismjsをアンインストール==== | ||
+ | '' | ||
+ | |||
+ | Gatsby.jsのサイトでソースコードを表示させないなら不要。 | ||
+ | |||
+ | <code bash> | ||
+ | npm uninstall prismjs | ||
+ | npm uninstall gatsby-remark-prismjs | ||
+ | </ | ||
+ | |||
+ | '' | ||
+ | '' | ||
+ | |||
+ | ---- | ||
+ | ===prismjs関連の設定を削除=== | ||
+ | ==gatsby-config.js== | ||
+ | '' | ||
+ | <code javascript gatsby-config.js> | ||
+ | `gatsby-remark-prismjs`, | ||
+ | </ | ||
+ | |||
+ | |||
+ | ---------- | ||
+ | ==gatsby-browser.js== | ||
+ | '' | ||
+ | <code javascript gatsby-browser.js> | ||
+ | import " | ||
+ | </ | ||
+ | |||
+ | |||
+ | ====gatsby-plugin-google-analyticsをアンインストール==== | ||
+ | '' | ||
+ | |||
+ | Google Tag Managerを通してGoogle Analyticsを利用するので | ||
+ | 直接Google Analyticsを扱う'' | ||
+ | |||
+ | < | ||
+ | npm uninstall gatsby-plugin-google-analytics | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | ===gatsby-plugin-google-analytics関連の設定を削除=== | ||
+ | '' | ||
+ | |||
+ | <code javascript gatsby-config.js> | ||
+ | // { | ||
+ | // | ||
+ | // | ||
+ | // | ||
+ | // }, | ||
+ | // }, | ||
+ | </ | ||
+ | |||
+ | 元々コメントアウトされているので、消さなくても影響はない。 | ||
+ | しかし、'' | ||
+ | |||
+ | ====不要なフォントをアンインストール==== | ||
+ | <code bash> | ||
+ | npm uninstall typeface-merriweather | ||
+ | npm uninstall typeface-montserrat | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | ===フォント関連の設定を削除=== | ||
+ | '' | ||
+ | |||
+ | <code javascript gatsby-browser.js> | ||
+ | // custom typefaces | ||
+ | import " | ||
+ | import " | ||
+ | </ | ||
+ | |||
+ | =====グローバルcssを削除する方法===== | ||
+ | ====グローバルcssの設定を削除==== | ||
+ | '' | ||
+ | <code javascript gatsby-browser.js> | ||
+ | // normalize CSS across browsers | ||
+ | import " | ||
+ | // custom CSS styles | ||
+ | import " | ||
+ | </ | ||
+ | |||
+ | ====グローバルcssのファイルを削除==== | ||
+ | 下記のファイルを削除 | ||
+ | * ./ | ||
+ | * ./ | ||
+ | |||
+ | =====MuiThemeProviderを作成する方法===== | ||
+ | グローバルcssを削除した代わりに、 | ||
+ | Material UIの'' | ||
+ | |||
+ | ====material-ui関連のプラグインをインストール==== | ||
+ | <code bash> | ||
+ | npm install @material-ui/ | ||
+ | npm install gatsby-plugin-material-ui | ||
+ | </ | ||
+ | |||
+ | '' | ||
+ | '' | ||
+ | |||
+ | ====material-ui関連の設定==== | ||
+ | '' | ||
+ | <code javascript gatsby-config.js抜粋> | ||
+ | " | ||
+ | </ | ||
+ | |||
+ | ====MuiThemeProviderコンポーネントを作成==== | ||
+ | '' | ||
+ | |||
+ | <code javascript MuiThemeProvider.jsx> | ||
+ | import React from " | ||
+ | import { CssBaseline } from " | ||
+ | import { | ||
+ | ThemeProvider, | ||
+ | createMuiTheme, | ||
+ | responsiveFontSizes, | ||
+ | } from " | ||
+ | |||
+ | const MuiThemeProvider = ({ children }) => { | ||
+ | let theme = createMuiTheme({ | ||
+ | // 背景色を適用すると、cssが適用される前に一瞬白背景が映るので画面がちらつく | ||
+ | // palette: { | ||
+ | // | ||
+ | // | ||
+ | // }, | ||
+ | // }, | ||
+ | // フォントを適用すると、最初にブラウザのデフォルトフォントで表示され、 | ||
+ | // 一瞬後にここで指定したフォントに切り替わるので画面がちらつく | ||
+ | // typography: { | ||
+ | // | ||
+ | // }, | ||
+ | }) | ||
+ | theme = responsiveFontSizes(theme) | ||
+ | |||
+ | return ( | ||
+ | < | ||
+ | < | ||
+ | {children} | ||
+ | </ | ||
+ | ) | ||
+ | } | ||
+ | export default MuiThemeProvider | ||
+ | </ | ||
+ | |||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | 残りは各コンポーネント単位で、'' | ||
+ | |||
+ | ====MuiThemeProviderコンポーネントを適用==== | ||
+ | '' | ||
+ | <code javascript gatsby-browser.js抜粋> | ||
+ | import React from " | ||
+ | import MuiThemeProvider from " | ||
+ | export const wrapRootElement = ({ element }) => { | ||
+ | return < | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | '' | ||
+ | |||
+ | =====dotenvで環境変数を設定する方法===== | ||
+ | dotenvを使うと、開発環境と本番環境などステージ別で環境変数を定義することができる。 | ||
+ | |||
+ | ====dotenvをインストール==== | ||
+ | <code bash> | ||
+ | npm install dotenv | ||
+ | </ | ||
+ | |||
+ | ====.envファイルを作成==== | ||
+ | プロジェクトのルートディレクトリに下記の2つのファイルを作成する。 | ||
+ | * .env.development | ||
+ | * .env.production | ||
+ | |||
+ | '' | ||
+ | '' | ||
+ | |||
+ | ====.gitignoreに.envの除外設定を追加==== | ||
+ | < | ||
+ | .env* | ||
+ | </ | ||
+ | |||
+ | '' | ||
+ | |||
+ | 一般的に、'' | ||
+ | そのため、Githubなどにアップロードしてはならない。 | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ====.envをインポート==== | ||
+ | '' | ||
+ | |||
+ | <code javascript gatsby-confi.js> | ||
+ | const fs = require(" | ||
+ | const envPath = `.env.${process.env.NODE_ENV}` | ||
+ | if (fs.existsSync(envPath)) { | ||
+ | require(" | ||
+ | path: envPath, | ||
+ | }) | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | '' | ||
+ | よって、'' | ||
+ | |||
+ | '' | ||
+ | よって、'' | ||
+ | |||
+ | Gatsby Cloudなどのホスティングサービスにデプロイするときは、 | ||
+ | git対象管理外の'' | ||
+ | |||
+ | そのため、ホスティングサービスに備え付けの管理画面から環境変数を別途設定する。 | ||
+ | |||
+ | =====Gatsby.jsでサイトマップを作成する方法===== | ||
+ | ====gatsby-plugin-sitemapをインストール==== | ||
+ | < | ||
+ | npm install gatsby-plugin-sitemap | ||
+ | </ | ||
+ | sitemap生成用のプラグインをインストール。 | ||
+ | |||
+ | ====gatsby-plugin-sitemapを設定==== | ||
+ | '' | ||
+ | <code javascript gatsby-config.js抜粋> | ||
+ | { | ||
+ | resolve: " | ||
+ | options: { | ||
+ | output: "/", | ||
+ | }, | ||
+ | }, | ||
+ | </ | ||
+ | |||
+ | ====npm run buildを実行==== | ||
+ | <code bash> | ||
+ | npm run build | ||
+ | </ | ||
+ | ビルドのタイミングで、'' | ||
+ | * sitemap-0.xml | ||
+ | * sitemap-index.xml | ||
+ | というファイルが作成される。 | ||
+ | |||
+ | ====gatsby-plugin-sitemapのバグ==== | ||
+ | '' | ||
+ | '' | ||
+ | (2021年7月現在) | ||
+ | |||
+ | '' | ||
+ | '' | ||
+ | '' | ||
+ | '' | ||
+ | |||
+ | しかし、''/ | ||
+ | ''/ | ||
+ | ''/ | ||
+ | |||
+ | ''/ | ||
+ | |||
+ | ====Google Search Consoleにサイトマップを登録する==== | ||
+ | [[/ | ||
+ | サイトマップとして'' | ||
+ | |||
+ | '' | ||
+ | |||
+ | =====Gatsby.jsにcanonicalを設定する方法===== | ||
+ | '' | ||
+ | |||
+ | '' | ||
+ | '' | ||
+ | どちらが正規のURLかを宣言する。 | ||
+ | |||
+ | ====gatsby-plugin-canonical-urlsをインストール==== | ||
+ | <code bash> | ||
+ | npm install gatsby-plugin-canonical-urls | ||
+ | </ | ||
+ | |||
+ | canonical設定用のプラグインをインストール。 | ||
+ | |||
+ | ====gatsby-plugin-canonical-urlsを設定==== | ||
+ | '' | ||
+ | <code javascript gatsby-config.js抜粋> | ||
+ | { | ||
+ | resolve: `gatsby-plugin-canonical-urls`, | ||
+ | options: { | ||
+ | siteUrl: process.env.SITE_URL, | ||
+ | stripQueryString: | ||
+ | }, | ||
+ | }, | ||
+ | </ | ||
+ | |||
+ | '' | ||
+ | 開発環境と本番環境でURLが変わるので、環境変数で管理する。 | ||
+ | |||
+ | ====gatsby-plugin-canonical-urlsで追加されるタグ==== | ||
+ | '' | ||
+ | htmlの'' | ||
+ | '' | ||
+ | のようなタグが追加される。 | ||
+ | |||
+ | =====Gatsby.jsにOGPを設定する方法===== | ||
+ | ====react-helmetプラグインをインストール==== | ||
+ | <code bash> | ||
+ | npm install react-helmet | ||
+ | npm install gatsby-plugin-react-helmet | ||
+ | </ | ||
+ | |||
+ | '' | ||
+ | '' | ||
+ | |||
+ | ====react-helmetプラグインを設定==== | ||
+ | '' | ||
+ | <code javascript gatsby-config.js> | ||
+ | " | ||
+ | </ | ||
+ | |||
+ | ====react-helmetでheadにmetaタグを追加する方法==== | ||
+ | '' | ||
+ | |||
+ | <code javascript Seo.jsx> | ||
+ | import React from " | ||
+ | import { Helmet } from " | ||
+ | |||
+ | const Seo = ({location}) => { | ||
+ | // helmetに渡すメタデータ | ||
+ | let metaDatas = [ | ||
+ | // OGPの設定、全ページ共通 | ||
+ | { | ||
+ | property: " | ||
+ | content: " | ||
+ | }, | ||
+ | { | ||
+ | property: " | ||
+ | content: " | ||
+ | }, | ||
+ | { | ||
+ | name: " | ||
+ | content: " | ||
+ | }, | ||
+ | { | ||
+ | name: " | ||
+ | content: " | ||
+ | }, | ||
+ | { | ||
+ | name: " | ||
+ | content: " | ||
+ | }, | ||
+ | |||
+ | // OGPの設定、ページごとに異なる部分 | ||
+ | { | ||
+ | property: " | ||
+ | content: " | ||
+ | }, | ||
+ | { | ||
+ | property: " | ||
+ | content: " | ||
+ | }, | ||
+ | { | ||
+ | property: " | ||
+ | content: " | ||
+ | }, | ||
+ | { | ||
+ | property: " | ||
+ | content: " | ||
+ | }, | ||
+ | { | ||
+ | property: " | ||
+ | content: " | ||
+ | }, | ||
+ | |||
+ | // OGP以外のメタデータ | ||
+ | { | ||
+ | name: " | ||
+ | content: " | ||
+ | }, | ||
+ | ] | ||
+ | |||
+ | return ( | ||
+ | <Helmet | ||
+ | htmlAttributes={{ | ||
+ | lang: " | ||
+ | prefix: "og: http:// | ||
+ | }} | ||
+ | title=" | ||
+ | meta={metaDatas} | ||
+ | > | ||
+ | </ | ||
+ | ) | ||
+ | } | ||
+ | export default Seo | ||
+ | </ | ||
+ | |||
+ | '' | ||
+ | |||
+ | ---- | ||
+ | <code javascript Seo.js抜粋> | ||
+ | <Helmet | ||
+ | htmlAttributes={{ | ||
+ | lang: " | ||
+ | prefix: "og: http:// | ||
+ | }} | ||
+ | > | ||
+ | </ | ||
+ | </ | ||
+ | の部分の効果により、htmlのソースに | ||
+ | '' | ||
+ | のようなタグが出力される。 | ||
+ | |||
+ | ---- | ||
+ | <code javascript Seo.js抜粋> | ||
+ | <Helmet | ||
+ | title=" | ||
+ | > | ||
+ | </ | ||
+ | </ | ||
+ | の部分の効果により、htmlソースの'' | ||
+ | ''< | ||
+ | のようなタグが出力される。 | ||
+ | |||
+ | ---- | ||
+ | <code javascript Seo.js抜粋> | ||
+ | <Helmet | ||
+ | meta={metaDatas} | ||
+ | > | ||
+ | </ | ||
+ | </ | ||
+ | の部分の効果により、htmlソースの'' | ||
+ | '' | ||
+ | <meta data-react-helmet=" | ||
+ | <meta data-react-helmet=" | ||
+ | <meta data-react-helmet=" | ||
+ | <meta data-react-helmet=" | ||
+ | <meta data-react-helmet=" | ||
+ | <meta data-react-helmet=" | ||
+ | <meta data-react-helmet=" | ||
+ | <meta data-react-helmet=" | ||
+ | <meta data-react-helmet=" | ||
+ | <meta data-react-helmet=" | ||
+ | <meta data-react-helmet=" | ||
+ | '' | ||
+ | のようなタグが出力される。 | ||
+ | |||
+ | |||
+ | =====gatsbyjs.ioから独自ドメインへリダイレクトする方法===== | ||
+ | Gatsby.jsで作成したプロジェクトをGatsby Cloudへデプロイすると、 | ||
+ | '' | ||
+ | のようなURLが割り当てられる。 | ||
+ | |||
+ | Gatsby Cloudでは独自ドメインの設定が可能。 | ||
+ | '' | ||
+ | |||
+ | このとき、 | ||
+ | '' | ||
+ | '' | ||
+ | |||
+ | Gatsby Cloudには301リダイレクトの機能がないので | ||
+ | '' | ||
+ | '' | ||
+ | |||
+ | つまり、 | ||
+ | '' | ||
+ | のようなタグを生成する。 | ||
+ | |||
+ | ---- | ||
+ | |||
+ | <code javascript Seo.jsx> | ||
+ | import React, { useState, useEffect } from " | ||
+ | import { Helmet } from " | ||
+ | |||
+ | const Seo = ({location}) => { | ||
+ | const [refreshContent, | ||
+ | |||
+ | useEffect(() => { | ||
+ | if (location.host.endsWith(" | ||
+ | const urlRedirect = `http:// | ||
+ | |||
+ | setRefreshContent(`0; | ||
+ | } else { | ||
+ | setRefreshContent(undefined) | ||
+ | } | ||
+ | }, [location]) | ||
+ | |||
+ | let metaDatas = [ | ||
+ | { | ||
+ | property: " | ||
+ | content: " | ||
+ | }, | ||
+ | { | ||
+ | property: " | ||
+ | content: " | ||
+ | }, | ||
+ | 中略 | ||
+ | ] | ||
+ | |||
+ | if (refreshContent !== undefined) { | ||
+ | metaDatas = metaDatas.concat([ | ||
+ | { | ||
+ | " | ||
+ | content: refreshContent, | ||
+ | }, | ||
+ | ]) | ||
+ | } | ||
+ | |||
+ | return ( | ||
+ | <Helmet | ||
+ | htmlAttributes={{ | ||
+ | lang: " | ||
+ | prefix: "og: http:// | ||
+ | }} | ||
+ | title=" | ||
+ | meta={metaDatas} | ||
+ | > | ||
+ | </ | ||
+ | ) | ||
+ | } | ||
+ | export default Seo | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | <code javascript Seo.jsx抜粋> | ||
+ | if (location.host.endsWith(" | ||
+ | const urlRedirect = `http:// | ||
+ | |||
+ | setRefreshContent(`0; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | 元のURLが | ||
+ | '' | ||
+ | '' | ||
+ | '' | ||
+ | |||
+ | '' | ||
+ | '' | ||
+ | |||
+ | '' | ||
+ | '' | ||
+ | |||
+ | ---- | ||
+ | <code javascript Seo.jsx抜粋> | ||
+ | if (refreshContent !== undefined) { | ||
+ | metaDatas = metaDatas.concat([ | ||
+ | { | ||
+ | " | ||
+ | content: refreshContent, | ||
+ | }, | ||
+ | ]) | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | '' | ||
+ | のようなタグを出力するために、'' | ||
+ | |||
+ | 元々のURLが'' | ||
+ | '' | ||
+ | ''< | ||
+ | =====Gatsby.jsにGoogle Analyticsを設定する方法===== | ||
+ | ====Google Analyticsでの作業==== | ||
+ | [[google: | ||
+ | |||
+ | '' | ||
+ | |||
+ | ====Google Tag Managerでの作業==== | ||
+ | ===コンテナIDを発行=== | ||
+ | [[google: | ||
+ | |||
+ | ''< | ||
+ | |||
+ | < | ||
+ | <!-- Google Tag Manager --> | ||
+ | < | ||
+ | new Date().getTime(), | ||
+ | j=d.createElement(s), | ||
+ | ' | ||
+ | })(window, | ||
+ | <!-- End Google Tag Manager --> | ||
+ | </ | ||
+ | のようなコード自体は、プラグインが自動的に挿入してくれるので、自分で設定は不要。 | ||
+ | |||
+ | ---- | ||
+ | |||
+ | ===gatsby-route-change トリガーを作成=== | ||
+ | |||
+ | '' | ||
+ | URLを疑似的に変更して、変更のあるDOMだけを再描画している。 | ||
+ | この疑似的なページ移動を計測するために専用のトリガー設定が必要。 | ||
+ | |||
+ | ---- | ||
+ | '' | ||
+ | |||
+ | ---- | ||
+ | '' | ||
+ | |||
+ | '' | ||
+ | ---- | ||
+ | '' | ||
+ | |||
+ | '' | ||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | ---- | ||
+ | |||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | ---- | ||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | ---- | ||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | ---- | ||
+ | '' | ||
+ | |||
+ | ====ローカルでの作業==== | ||
+ | ===GTM用プラグインをインストール=== | ||
+ | <code bash> | ||
+ | npm install gatsby-plugin-google-tagmanager | ||
+ | </ | ||
+ | |||
+ | '' | ||
+ | |||
+ | ---- | ||
+ | ===環境変数を設定(.env)=== | ||
+ | '' | ||
+ | '' | ||
+ | を追加。 | ||
+ | |||
+ | ---- | ||
+ | ===環境変数を設定(Gatsby Colud)=== | ||
+ | [[https:// | ||
+ | |||
+ | ---- | ||
+ | サイトを選択。 | ||
+ | |||
+ | ---- | ||
+ | '' | ||
+ | |||
+ | ---- | ||
+ | |||
+ | '' | ||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | ---- | ||
+ | ===gatsby-config.jsを編集=== | ||
+ | '' | ||
+ | |||
+ | < | ||
+ | { | ||
+ | resolve: `gatsby-plugin-google-tagmanager`, | ||
+ | options: { | ||
+ | id: process.env.GTM_CONTAINER_ID, | ||
+ | includeInDevelopment: | ||
+ | defaultDataLayer: | ||
+ | routeChangeEventName: | ||
+ | }, | ||
+ | }, | ||
+ | </ | ||
+ | |||
+ | '' | ||
+ | |||
+ | '' | ||
+ | [[google: | ||
+ | |||
+ | =====Gatsby.jsにGoogle AdSenseを導入する方法===== | ||
+ | ====Google AdSenseでの作業==== | ||
+ | [[google: | ||
+ | - Google AdSenseにサブドメインを追加 | ||
+ | - Google AdSenseの自動広告用のコードを取得 | ||
+ | - ディスプレイ広告を作成・広告コードを取得 | ||
+ | - 関連コンテンツを作成・広告コードを取得 | ||
+ | |||
+ | ====ローカルでの作業==== | ||
+ | ===html.jsを作成=== | ||
+ | プロジェクトの'' | ||
+ | '' | ||
+ | |||
+ | ---- | ||
+ | ''< | ||
+ | |||
+ | <code javascript html.js> | ||
+ | import React from " | ||
+ | import PropTypes from " | ||
+ | |||
+ | export default function HTML(props) { | ||
+ | return ( | ||
+ | <html {...props.htmlAttributes}> | ||
+ | < | ||
+ | <meta charSet=" | ||
+ | <meta httpEquiv=" | ||
+ | <meta | ||
+ | name=" | ||
+ | content=" | ||
+ | /> | ||
+ | {props.headComponents} | ||
+ | |||
+ | {process.env.GATSBY_FLAG_ADSENSE === " | ||
+ | <script | ||
+ | data-ad-client=" | ||
+ | async | ||
+ | src=" | ||
+ | ></ | ||
+ | )} | ||
+ | </ | ||
+ | <body {...props.bodyAttributes}> | ||
+ | {props.preBodyComponents} | ||
+ | <div | ||
+ | key={`body`} | ||
+ | id=" | ||
+ | dangerouslySetInnerHTML={{ __html: props.body }} | ||
+ | /> | ||
+ | {props.postBodyComponents} | ||
+ | </ | ||
+ | </ | ||
+ | ) | ||
+ | } | ||
+ | |||
+ | HTML.propTypes = { | ||
+ | htmlAttributes: | ||
+ | headComponents: | ||
+ | bodyAttributes: | ||
+ | preBodyComponents: | ||
+ | body: PropTypes.string, | ||
+ | postBodyComponents: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | 追加した部分だけ抜粋。 | ||
+ | |||
+ | <code javascript html.js> | ||
+ | {process.env.GATSBY_FLAG_ADSENSE === " | ||
+ | <script | ||
+ | data-ad-client=" | ||
+ | async | ||
+ | src=" | ||
+ | ></ | ||
+ | )} | ||
+ | </ | ||
+ | |||
+ | '' | ||
+ | 環境変数'' | ||
+ | |||
+ | 開発環境では'' | ||
+ | 本番環境だけ'' | ||
+ | ---- | ||
+ | |||
+ | ===AdsenseMain.jsxを作成=== | ||
+ | '' | ||
+ | |||
+ | <code javascript AdsenseMain.jsx> | ||
+ | import React, { useEffect } from " | ||
+ | |||
+ | const AdsenseMain = ({ path }) => { | ||
+ | useEffect(() => { | ||
+ | if (window) { | ||
+ | window.adsbygoogle = window.adsbygoogle || [] | ||
+ | window.adsbygoogle.push({}) | ||
+ | } | ||
+ | }, [path]) | ||
+ | |||
+ | return ( | ||
+ | <ins | ||
+ | className=" | ||
+ | style={{ display: " | ||
+ | data-ad-client=" | ||
+ | data-ad-slot=" | ||
+ | data-ad-format=" | ||
+ | data-full-width-responsive=" | ||
+ | ></ | ||
+ | ) | ||
+ | } | ||
+ | export default AdsenseMain | ||
+ | </ | ||
+ | |||
+ | '' | ||
+ | |||
+ | <code javascript> | ||
+ | useEffect(() => { | ||
+ | if (window) { | ||
+ | window.adsbygoogle = window.adsbygoogle || [] | ||
+ | window.adsbygoogle.push({}) | ||
+ | } | ||
+ | }, [path]) | ||
+ | </ | ||
+ | 上記の部分が、広告コードの | ||
+ | ''< | ||
+ | に相当する。 | ||
+ | |||
+ | '' | ||
+ | |||
+ | コンポーネントの引数'' | ||
+ | |||
+ | ---- | ||
+ | |||
+ | ===AdsenseMatched.jsxを作成=== | ||
+ | '' | ||
+ | |||
+ | <code javascript AdsenseMatched.jsx> | ||
+ | import React, { useEffect } from " | ||
+ | |||
+ | const AdsenseMatched = ({ path }) => { | ||
+ | useEffect(() => { | ||
+ | if (window) { | ||
+ | window.adsbygoogle = window.adsbygoogle || [] | ||
+ | window.adsbygoogle.push({}) | ||
+ | } | ||
+ | }, [path]) | ||
+ | |||
+ | return ( | ||
+ | <ins | ||
+ | className=" | ||
+ | style={{ display: " | ||
+ | data-ad-client=" | ||
+ | data-ad-slot=" | ||
+ | data-ad-format=" | ||
+ | ></ | ||
+ | ) | ||
+ | } | ||
+ | export default AdsenseMatched | ||
+ | </ | ||
+ | |||
+ | '' | ||
+ | |||
+ | ---- | ||
+ | ===広告用のコンポーネントを読み込む=== | ||
+ | '' | ||
+ | |||
+ | <code javascript> | ||
+ | {process.env.GATSBY_FLAG_ADSENSE === " | ||
+ | < | ||
+ | )} | ||
+ | </ | ||
+ | |||
+ | <code javascript> | ||
+ | {process.env.GATSBY_FLAG_ADSENSE === " | ||
+ | < | ||
+ | )} | ||
+ | </ | ||
+ | |||
+ | '' | ||
+ | 環境変数'' | ||
+ | =====aタグのかわりにgatsbyのLinkタグを使う===== | ||
+ | '' | ||
+ | |||
+ | '' | ||
+ | (ページの表示が速くなる) | ||
+ | |||
+ | '' | ||
+ | |||
+ | <code javascript> | ||
+ | import { Link } from " | ||
+ | 中略 | ||
+ | |||
+ | <Link | ||
+ | to="/ | ||
+ | > | ||
+ | xxx | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | =====aタグのかわりにmaterial-uiのLinkタグを使う===== | ||
+ | < | ||
+ | warning | ||
+ | https:// | ||
+ | react/ | ||
+ | </ | ||
+ | |||
+ | '' | ||
+ | |||
+ | ---- | ||
+ | |||
+ | <code javascript> | ||
+ | <a | ||
+ | href=" | ||
+ | target=" | ||
+ | rel=" | ||
+ | > | ||
+ | example.com | ||
+ | </a> | ||
+ | </ | ||
+ | '' | ||
+ | |||
+ | ---- | ||
+ | |||
+ | <code javascript> | ||
+ | import { Link as MuiLink } from " | ||
+ | |||
+ | 中略 | ||
+ | |||
+ | <MuiLink | ||
+ | href=" | ||
+ | target=" | ||
+ | rel=" | ||
+ | > | ||
+ | example.com | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | または、'' | ||
+ | |||
+ | '' | ||
+ | '' | ||
+ | |||
+ | =====gitの改行変換機能を無効化する方法===== | ||
+ | < | ||
+ | warning: LF will be replaced by CRLF in xxxxx.md. | ||
+ | The file will have its original line endings in your working directory | ||
+ | </ | ||
+ | という警告が大量に表示されるときの対処方法。 | ||
+ | |||
+ | Gatsby.jsで'' | ||
+ | このとき改行の数だけwarningが表示されてうっとうしい。 | ||
+ | |||
+ | ---- | ||
+ | |||
+ | <code bash> | ||
+ | git config --global core.autoCRLF false | ||
+ | </ | ||
+ | |||
+ | gitコマンドで、改行変換機能をオフにする。 | ||
+ | |||
+ | =====Gatsby.jsその他===== | ||
+ | [[/ |