Google Programmable SearchをAMPページで使用する方法

ウェブサイトに強力な検索機能を付けられるGoogle Programmable Search（旧カスタム検索エンジン）ですが、そのままだとAMPページでは使えません。
この記事では、AMPのサイトにProgrammable Searchの検索窓を埋め込む方法を紹介します。

Contents

Google Programmable Searchとは
AMPページにProgrammable Searchを設置する方法
- デザインの設定
- HTMLの実装
設置例
追記：収益化したいんだが？

Google Programmable Searchとは

Googleの検索エンジンを利用して、特定のサイトのみ検索対象にしたり、検索窓をサイトに埋め込んだりできるサービスです。

無料で使える上、収益化設定をオンにすれば、広告がクリックされた回数に応じて報酬が受け取れます。
（但し、以下で紹介する方法では2021年4月30日以降は収益分配の対象外となります。）

Programmable Search Engine by Google
Help people find what they need on your website. Add a customizable search box to your web pages and show fast, relevant results powered by Google.
programmablesearchengine.google.com

AMPページにProgrammable Searchを設置する方法

カスタム検索エンジンの作成は、上記サイトの右上「使ってみる」から行えます。

設定項目が多いですが、作成するだけなら名前と検索対象サイトを入力するだけなので簡単です。
以下では、AMPページに設置する為に必要な部分だけ説明しますので、カスタマイズは必要に応じて行ってください。

デザインの設定

実装の都合上、検索結果を検索窓と同画面で表示するタイプのデザインは使えません。
（検索窓の下に大きな余白ができていても良い、という場合は「HTMLの実装」で実装する高さを大きく取れば可能ですが…。）

Programmable Searchの左側のメニューの「デザイン」→「レイアウト」タブで、一番下の「Googleがホスト」を選択します。
「検索結果の表示先」は「新しいウィンドウ」に設定してください。

それが終わったら「カスタマイズ」タブにて、「全般」の背景色を、検索窓を埋め込む部分の背景色と同じにします。

保存したらコードを取得します。

HTMLの実装

Programmable Searchで発行される埋め込み用のタグはJavaScriptのため、そのままではAMPページに実装する事ができません。

そこで、検索窓のスクリプトを記述したHTMLファイルを用意し、それをamp-iframeで読み込みます。
まずは検索窓を設置する部分のコード。

<amp-iframe id="search" width="350" height="50" src="(検索窓用のファイルまでのパス)/search.html" sandbox="allow-scripts allow-popups" layout="responsive">
	<amp-img layout="fill" src="(プレースホルダ用の画像URL)" placeholder></amp-img>
</amp-iframe>

別途head内でamp-iframeに必要なスクリプトを読み込んでください。
プレースホルダ用の画像を準備しないのであれば、2行目は削除して構いません。

検索窓用のファイル search.html には、Programmable Searchで発行されるスクリプトタグを記述します。
以下の様になるはずです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script async src="https://cse.google.com/cse.js?cx=partner-pub-(あなたの検索エンジンのID)"></script>
<div class="gcse-searchbox-only"></div>
</body>
</html>