実装編¶

この章のゴール¶

この章を読むことで、画面を修正し、
ポップファインドを利用した検索結果が表示されるようになります。

Info

ここでは検索結果の実装方法について説明しています。
キーワードランキング機能やレコメンド機能を使用する方法は応用編を参照してください。

検索窓(フォーム)の作成¶

外部からポップファインドに接続を行う為の検索窓(フォーム)を作成します。
基本的には、ポップファインドを使用するHTML(search.htmlとします)に対して、
検索キーワード入りのGETメソッドで遷移するフォームを作成します。

記述例

<form class="" method="get" action="search.html">
  <input type="text" name="q" id="q" value="" placeholder="検索キーワード">
  <input type="submit" name="" value="検索">
</form>

Info

UTF-8以外の文字コードで作成されたページからポップファインドに遷移する方法は応用編を参照してください。

検索結果画面の作成¶

head要素内の修正¶

head要素内に

並び順リソースファイルの読み込み
CSSファイルの読み込み
meta要素の記述

を行います。

並び順リソースファイルの読み込み¶

script要素を追加し、前節で作成した並び順リソースファイルが読み込まれるようにします。

記述例

<script type="text/javascript" charset="UTF-8" src="js/popfind/sitesearch_sort.js"></script>

情報

属性絞り込み機能の実装方法
表示メッセージの変更方法
ランキングの表示方法
ハッシュタグ機能の実装方法
については、応用編のそれぞれの項を参照してください。

CSSファイルの読み込み¶

ポップファインド用の CSS は自動で読み込まれます。

CSS ファイル名	読み込み条件
ec.css	mode が ec の場合
cp.css	mode が cp の場合

注意

デザインのカスタマイズを行うためにポップファインド用の CSS の読み込みを停止させたい場合、設定パラメータの styleSheetAutoLoading に false を設定してください。

meta要素の記述¶

meta要素を追加し、検索結果画面自体がインデックスされることを防ぎます

記述例

<meta name="robots" content="noindex,nofollow">

body 要素内の修正¶

body 要素内に

検索窓の追加
ポップファインドコンポーネントの追加
ポップファインド設定タグの追加
タグマネージャーの追加

を行います。

検索窓の追加¶

検索窓を設置します。
検索窓は、

input要素のnameはq固定
form要素のmethodはget固定
form要素のactionに検索結果画面URLを指定

という決まりがあり、その他の要素やデザインは自由になります。

修正例を以下に示します

修正前

<body>
  <div id="header">
  ここはヘッダー
  </div>
  <div id="contents">
    <div id="main">
    </div>
  </div>
  <div id="footer">
  ここはフッター
  </div>
</body>

修正後

<body>
  <div id="header">
  ここはヘッダー
    <form class="" method="get" action="search.html">
      <input type="text" name="q" id="q" value="" placeholder="検索キーワード">
      <input type="submit" name="" value="検索">
    </form>
  </div>
  <div id="contents">
    <div id="main">
    </div>
  </div>
  <div id="footer">
  ここはフッター
  </div>
</body>

ポップファインドコンポーネントの追加¶

表示をしたいコンポーネントを、識別子=コンポーネント名 を持った空の要素として追加します。

利用可能なコンポーネントについて詳しくは「コンポーネントリファレンス」を参照ください。

修正例を以下に示します

修正前

<body>
  <div id="header">
  ここはヘッダー
    <form class="" method="get" action="search.html">
      <input type="text" name="q" id="q" value="" placeholder="検索キーワード">
      <input type="submit" name="" value="検索">
    </form>
  </div>
  <div id="contents">
    <div id="main">
    </div>
  </div>
  <div id="footer">
  ここはフッター
  </div>
</body>

修正後

<body>
  <div id="header">
  ここはヘッダー
    <form class="" method="get" action="search.html">
      <input type="text" name="q" id="q" value="" placeholder="検索キーワード">
      <input type="submit" name="" value="検索">
    </form>
  </div>
  <div id="contents">
    <div id="main">
      <div data-[モード]="sortselector"></div>
      <div data-[モード]="countselector"></div>
      <div data-[モード]="lastmodifiedselector"></div>
      <div data-[モード]="searchstatus"></div>
      <div data-[モード]="pagenator"></div>
      <div data-[モード]="searchresults"></div>
      <div data-[モード]="pagenator"></div>
    </div>
  </div>
  <div id="footer">
  ここはフッター
  </div>
</body>

情報

修正例で示した data-[モード] という識別子は、ご契約時に発行されたモードを組み合わせた値にします。
識別子は、後述する設定タグのキー名と合わせる必要があります。
複数のタグを追加する場合、data-[モード]-1 、data-[モード]-2 のように重複しない値を指定します。

ポップファインド設定タグ・タグマネージャーの追加¶

次に、設定パラメータのついたポップファインド設定タグとタグマネージャーを追加します。

ポップファインド設定タグは、タグマネージャーより前に記述する必要があります。

設定パラメータの内容について詳しくは、「設定パラメータリファレンス」をご参照ください。

Info

UID は、ご契約後に弊社からご連絡いたします。

修正前

<body>
  <div id="header">
  ここはヘッダー
    <form class="" method="get" action="search.html">
      <input type="text" name="q" id="q" value="" placeholder="検索キーワード">
      <input type="submit" name="" value="検索">
    </form>
  </div>
  <div id="contents">
    <div id="main">
      <div data-[モード]="sortselector"></div>
      <div data-[モード]="countselector"></div>
      <div data-[モード]="lastmodifiedselector"></div>
      <div data-[モード]="searchstatus"></div>
      <div data-[モード]="pagenator"></div>
      <div data-[モード]="searchresults"></div>
      <div data-[モード]="pagenator"></div>
    </div>
  </div>
  <div id="footer">
  ここはフッター
  </div>
</body>

修正後

<body>
  <div id="header">
  ここはヘッダー
    <form class="" method="get" action="search.html">
      <input type="text" name="q" id="q" value="" placeholder="検索キーワード">
      <input type="submit" name="" value="検索">
    </form>
  </div>
  <div id="contents">
    <div id="main">
      <div data-[モード]="sortselector"></div>
      <div data-[モード]="countselector"></div>
      <div data-[モード]="lastmodifiedselector"></div>
      <div data-[モード]="searchstatus"></div>
      <div data-[モード]="pagenator"></div>
      <div data-[モード]="searchresults"></div>
      <div data-[モード]="pagenator"></div>
    </div>
  </div>
  <div id="footer">
  ここはフッター
  </div>
    <script type="text/javascript">
      // ポップファインド設定タグ
      var popfindConf = popfindConf || {};
      popfindConf["data-[モード]"] = {
          uid: "[UID]",
          mode: "[モード]",
          inputId: "q",
          // その他のポップファインド設定パラメータ
      };
      // タグマネージャー
      (function() {
        var script = document.createElement("script");
        script.setAttribute("src", "https://js.poplink.jp/[タグマネージャーの ID]/poptagmanager.js?ts=" + Date.now());
        script.setAttribute("defer", true);
        document.head.appendChild(script);
      })();
    </script>
</body>

注意

ポップファインド設定タグは、設定パラメータの箇所を除き、上記の通りに利用してください。

注意

タグマネージャーは、上記の通りに利用してください。例えば、JavaScriptファイルをローカルにコピーして使用したり、下記以外の手順で実行した場合、弊社からのサポートが受けられなくなる場合があります。

また、以下の変数はポップファインド内部やリソースファイルで使用されています。サイト構築時に変数名が重複した場合、正しく動作しなくなる可能性があるためご注意ください。

popfindJS
popfindConf
その他 sitesearch から始まるグローバル変数名