謎の技術研究部ホームタグ謎の技術研究部とはTop›プログラミング›Gatsby.js2020-04-25Gatsby.jsにGoogleカスタム検索エンジンを設置する方法Gatsby.jsにGoogleカスタム検索エンジンに指示されたコードを貼り付けると検索フォームが消えてしまう不具合がある。更新2021/12/05:サイトの再デザインに伴い、この方法よりよい方法を色々探したが結果的にこの方法が最善であることを確認(HTMLでフォームからデザインするのはおすすめしない)また、現在ではGoogleの検索に自動で入ってくるCSSを上書きする形でデザインを変更している。当然ではあるが下記の記事に書いてある内容は2021/12/05現在でも使用可能。検索窓が消える検索窓が消える現象は少々不可解である。モードで初め表示されないのでリロードしてみるとなぜか表示される。「キャッシュのせいか?」と思い内部リンクをクリックしてページを遷移すると何故かまた消える。こんどはビルドした本番をNetlify側で確認すると一瞬表示されるが直ぐに消えてしまうという状況になる。タグはJSX内では動作しないことは直感的に分かると思う。そこでscriptタグをHelmetに移動すれば動作する・・・のだが結局上記のエラーが出てしまうのだ。一度表示されてすぐ消えるというのはDOMがマウントされたあとでGatsby側に何かしらの処理があり消去されているのではないかと考えた。デバッグで見ると検索フォーム用のdivが丸っと削除されているからだ。普段はできるだけ簡単な設置方法にフォーカスしているが今回は経緯を記述させてもらった。ここから私の環境で無事に動作する方法を紹介するが、そもそも公式のコードではなぜ動作しないのかという理由までは分かっていない。参考サイトまず参考にしたサイトを先にリンクさせて頂く。次のサイトは何れも非常に参考になった。この場を借りてお礼を申し上げたい。いう設置方法の仕組みを利用した設置方法(Gatsby専用の解説ではない)どうやら自前で検索窓をカスタマイズしたい場合のAPIのようだ。こちらは日本語情報が非常に少ないため大変助かる記事だ。loadこちらのサイトに「私はこう解決した」という例が幾つか乗っているが何れも私の環境では動作しなかった。AnnieTaylor氏の回答は上のAPIと組み合わせれば使えるのでは、と考えた。いうファイルを新規作成した。名称はなんでもいいだろう。searchこれは1のサイトより引用させてもらったコードをGatsby.js用に改変している。識別コードのような箇所(cx)の記述を忘れないように。余談:1のサイトでは窓を配置するためのdivタグにアレンジが加えられているがアレンジしてしまうとGatsbyでは動作しなかった。よって公式コードと同じdivタグにしてある。これを貼り付けたいJSXに読み込んで使うと...build時にエラーが出る。ツリーであるウェブページのコンテンツへのエントリーポイントとして働きます。これは以前のVue.jsの記事(mountedの項)でほんの少しだけ触れたがReactのフック(Reactではフック、Vue.jsではライフサイクルフックと呼ぶ)でマウント後に処理するのかマウント前に処理するのかという問題だ。DOMのdocumentが配置される前に処理が実行されたためにエラーとなっている。フック」で調べたら公式に日本語ページがあった。副作用フック先程のエラーの内容から「documentが見つからない」と言っているが正にこの内容が公式の副作用フックの箇所に記述されている。DOMがマウントされた後でなければdocumentの要素にはアクセスできないのだ。そこで参考サイト2のコードここで参考サイト2のコードが出てくる。DOMがマウントされた後で描画するコードを追加する。componentsフォルダにhooksというフォルダを作ってClientOnly.jsというファイルを作成した。フォルダは整理のため。ClientOnlyこれは「マウントされた後で引数で渡された引数のタグを挿入する」というコードだ。実際に描画させたいJSXのページに次の上記2つをimport。'../hooks/ClientOnly'描画するためには次のタグにて読み込む。</ClientOnly>上記コード通りClientOnlyにSearchを引き渡す事でマウント後に処理させる。完成あとは挿入したい箇所にJSXを書いていくだけだ。意外にオシャレGoogleカスタム検索エンジンの表示結果は思ったよりスマートでオシャレだ。Gatsby系のBLOGを調べるとどのサイトもGoogleカスタム検索は避けているように見える。これは昔の仕様で見た目が悪く使いにくかったかったため熟練のエンジニアは直感的に避けているのだろう。次のように検索結果に混ざって広告は挿入されるがオーバーレイ表示の使用感が思ったより良い。通しては描画できるのだが、公式の出している簡易版コードではなぜ動作しないのかは残念ながら分かっていない。APIの使い方の初期段階はこれでクリアしたことになるので、もう少し学習コストを払うことにより検索窓のカスタマイズも自由に行えるようになるのではないだろうか。知っておいて損はない実装方法だと思う。仮想トイレプログラミングや仮想通貨のシステムトレードに関する情報を発信中。どんな情報を流しても詰まらないトイレ。謎の技術研究部とはプライバシーポリシーホーム(自動スクロールなし)ご意見、お問い合わせ。