コーディングメソドロジー
第112回 Movable TypeのData API形式のJSONファイルとJavaScriptで検索システムを実装する

MovableType Data API とは

Movable Type 6 から導入されたWeb API で、API に定められているエンドポイントと呼ばれるURL にリクエストを送る（アク セスする）と、JSON 形式で結果を取得できたり、記事データなどを更新できたりする仕組みです。各エンドポイントによって 返してくれる情報も豊富にあり、記事情報のエンドポイントにアクセスした場合、記事タイトルや記事本文、登録カテゴリ、カスタムフィールドに登録した値などの情報が詰まっ たJSON 情報が返ってきます。詳細なエンドポイントやAPI リファレンスについては、Movable Type 公式ドキュメントサイトのData API ドキュメントページに載っていま すので、そちらをご覧ください。（URL：https://www.movabletype.jp/developers/data-api/）

検索システムの概要

検索フォームに入力されたキーワードを照合して、キーワードに合致した製品を一覧として表示する検索システムを実装する場合を例として 考えます。Data API のエンドポイントに検索毎にアクセスをすると、データ量が多い場合、検索結果表示までの動作が遅くなってしまったり、 アクセスしすぎてサーバー負荷が高くなってしまうなどの問題が出ることがあります。今回は、Data API そのままの利用でなく、Movable Type の再構築時に必要な情報だけ を詰めて軽量化したJSON ファイル（以下、Entries JSON と呼ぶ）を出力することで、出来るだけブラウザ側での対応で済み、負荷が小さくなる方法で実装します。

■ 実装する検索システムの仕組み

① 各種データの取得

Webサイトの検索ページをロードする時に、Entries JSON ファイルを取得してお きます。
検索ボタンが押されたら、検索フォームに入力されたテキスト情報の値と取得し たJSON データを比較・照合する処理関数に送るようにします。

② フォームに入力された値とデータの比較・照合

フォームに入力された値（文字列）と、Entries JSON 内のキーワード情報として 使用する値（記事タイトルなど）をfor 文などのループ処理で比較して比較を行い ます。また、orderAry のような名前の配列を用意しておき、処理のループ時に合 致した記事の順番を記録していきます。
ループ処理が最後まで終わったら、検索結果を出力する関数に orderAry の値を送 ります。

③ 検索結果の出力

検索結果の順序情報の配列（orderAry）をEntries JSON に適用して、コード1-1 のような記述をすることで出力するHTML を得ることが出来ます。
仕組みとしては、合致した記事の順番を記録したorderAry の中身の数だけループ 処理をして、entries.items[ orderAry[ i ] ] のように、orderAry の値を Entries JSON の配列に入れることによって、合致した記事の情報を得ています。
コード1-1 では、記事のパーマリンクと記事タイトルを取得して、HTML として 出力しています。

今回は、Movable Type から生成したJSON とJavaScript を元に単純なループ処 理を用いたキーワード検索をご紹介しました。Movable Type で検索を実装したい 場合は、ご紹介した方法も1 つの選択肢として覚えておくと良いと思います。