intra-mart Accel Platform IM-ContentsSearch プログラミングガイド 第5版 2018-12-01

7. 標準の全文検索画面の拡張

この章では、標準の全文検索画面を拡張して任意の画面を検索結果画面へ表示する方法について説明します。

7.1. はじめに

標準の全文検索結果画面にて拡張可能な項目は以下の通りです。

独自に定義したTYPEによる絞り込み条件の追加

  • 検索時の絞り込み条件
  • 検索結果の絞り込み条件一覧

TYPEごとの独自の検索結果テンプレートを用いた検索結果画面のカスタマイズ

  • 画面のデザイン
  • 表示する情報
  • JavaScript(リンク押下時のアクションなど)
拡張を行う場合は、設定ファイルの作成が必要となります。

7.2. 設定ファイルを作成する

作成が必要な設定ファイルは以下の通りです。
  • テンプレート設定ファイル

    TYPEに対応する表示名や、実装したテンプレートの配置場所などを指定します。
  • 表示用プロパティファイル

    テンプレート設定ファイルでは、画面に表示する名称はプロパティのキーで設定します。
    そのため、テンプレート設定ファイルに設定したキーに対応するプロパティファイルの値が必要になります。

7.2.1. テンプレート設定ファイルの詳細

検索結果のTYPEに対応するテンプレート情報を設定します。
テンプレート設定ファイルのサンプル
<?xml version="1.0" encoding="UTF-8"?>
<contentssearch-template-config>
  <template-pages>
    <!-- TYPEの指定 -->
    <template-page type="product_master" sort-key="20">

      <!-- TYPEの画面表示用プロパティキー -->
      <type-display-key>CAP.SAMPLE.PRODUCT.MASTER.CONTENTSSEARCH.CONTENTS.TYPE</type-display-key>

      <!-- 任意の検索結果画面 -->
      <template-path>im_contents_search/template/sample_product_master/product_master.jssp</template-path>

      <!-- テンプレートに渡す動的フィールド -->
      <require-dynamic-fields>
        <field type="string">code</field>
        <field type="int">price</field>
      </require-dynamic-fields>

    </template-page>

    <!-- "product_master"の子のTYPEを指定 -->
    <template-page type="Base" sort-key="1">

        <!-- 親のTYPEを指定 -->
        <parent-type>product_master</parent-type>

        <type-display-key>CAP.SAMPLE.PRODUCT.MASTER.CONTENTSSEARCH.CONTENTS.TYPE.BASE</type-display-key>
        <template-path>im_contents_search/template/sample_product_master/product_master.jssp</template-path>
        <require-dynamic-fields>
            <field type="string">code</field>
            <field type="int">price</field>
        </require-dynamic-fields>

    </template-page>

    <!-- 省略(Product, eBuilder) -->

  </template-pages>
</contentssearch-template-config>
それぞれの設定値について説明します。
No. タグ (: 属性) 必須 説明
1 template-pages
テンプレートページ設定のルートタグです。
2 template-page
テンプレートページ設定を記述します。TYPEごとに指定する必要があります。
3 template-page : type
設定を適用するTYPEを指定します。
4 template-page : sort-key  
設定したTYPEを一覧に表示する際のソート順を数値で指定します。
小さな値ほど上に表示され、省略した場合は最下部に表示されます。
5 type-display-key
TYPEを画面に表示する名称のプロパティキーを指定します。
6 template-path  
テンプレート画面の実装があるパスを指定します。拡張子には .jssp を指定してください。
省略した場合は標準テンプレートが利用されます。
7 required-dynamic-fields  
テンプレート画面の実行パラメータに渡す検索結果コンテンツの動的フィールドを指定します。
8 field
動的フィールドの名称を指定します。
9 field : type
動的フィールドの型を指定します。

7.2.2. 表示用プロパティファイルの詳細

表示用プロパティファイルに画面表示用の名称を設定します。
専用のプロパティファイルを用意しなくても、任意のプロパティファイルにキーを追加することで設定可能です。

表示用プロパティファイルのサンプル:日本語、英語、中国語(中華人民共和国)

# conf/message/path/to/sample/sample_message_ja.properties
CAP.SAMPLE.PRODUCT.MASTER.CONTENTSSEARCH.CONTENTS.TYPE=製品情報
# conf/message/path/to/sample/sample_message_en.properties
CAP.SAMPLE.PRODUCT.MASTER.CONTENTSSEARCH.CONTENTS.TYPE=Product Information
# conf/message/path/to/sample/sample_message_zh_CN.properties
CAP.SAMPLE.PRODUCT.MASTER.CONTENTSSEARCH.CONTENTS.TYPE=产品信息

7.3. 独自の検索結果テンプレートを実装する

独自の検索結果テンプレートを実装する方法について説明します。
検索結果テンプレートの実装は、 スクリプト開発モデル を利用します。
検索結果画面における赤枠部分が1つの検索結果テンプレートが表示する範囲になります。
検索結果
尚、独自の検索結果テンプレートが設定されていない場合には標準で用意されているテンプレートが利用されます。
標準で用意されている検索結果テンプレートは簡素なため、独自のテンプレートを用意することを推奨します。
標準テンプレートの検索結果サンプル
標準テンプレート

7.3.1. 検索結果テンプレートの実装

独自の検索結果テンプレートの実装方法をサンプルを用いて解説します。

JavaScriptファイル

はじめに表示用データを用意する処理(JavaScriptファイル)を作成します。
テンプレートでは init 関数に、引数 content が与えられます。
通常の スクリプト開発モデル における実装と違い、リクエストパラメータは格納されません。
content には以下のパラメータが設定されています。
  • 標準フィールド
    id, type, url, id_original, title, text, attachment, record_date
  • テンプレート設定ファイルで指定された動的フィールド
    サンプルの場合 : code, price
  • スニペット(検索文字にマッチした文字列のハイライト)
    snippets
  • TYPEのパンくずリスト
    typeBreadcrumbs
以下は、引数に与えられた content を用いて、画面表示用の $data を作成するサンプルになります。
JavaScriptファイルの実装サンプル
var $data = {};
var $format = {};

function init(content) {

  // 日時のフォーマットIDを設定
  $format.datetimeFormatId = ["IM_DATETIME_FORMAT_DATE_STANDARD", "IM_DATETIME_FORMAT_TIME_TIMESTAMP"];

  // 標準フィールドデータ格納
  // ID
  $data.id = content.id;
  // タイトルの接頭詞
  var titlePrefix = MessageManager.getMessage("CAP.SAMPLE.PRODUCT.MASTER.CONTENTSSEARCH.TITLE.PREFIX");
  // タイトル
  $data.title = titlePrefix + " " + content.title;

  // 更新日時
  $data.recordDate = content.record_date;

  // 詳細画面URL
  var idOriginal = content.id_original;
  $data.url = content.url + "/" + idOriginal;

  // 動的フィールドデータ格納
  // 製品番号
  $data.code = content.code;
  // 価格
  $data.price = content.price;

  // 表示用データ格納
  // スニペット
  $data.snippets = content.snippets;

  // パンくずリスト
  $data.breadcrumbs = content.typeBreadcrumbs;

}

HTMLファイル

次に画面(HTMLファイル)を作成します。
JavaScriptファイルで作成した $data を利用して、画面を作成します。
検索結果テンプレート画面は全文検索結果画面のdiv要素として埋め込まれるため、divタグから開始する必要があります。
また、標準のデザインと合わせる事ができるよう、独自のCSSを定義しています。
以下のサンプルを参考に、画面を作成してください。
画面の実装サンプル
<!-- div要素から開始します -->
<div>

  <!-- タイトル(リンククリックで詳細画面を表示) -->
  <h3 class="imcs-content-detail-title">
    <a target="_blank" id="<imart type="string" value=$data.id escapeXml="true" escapeJs="true" />" href="javascript:void(0);">
      <imart type="string" value=$data.title escapeXml="true" escapeJs="true" />
    </a>
  </h3>

  <!-- サブタイトル(RECOED_DATE および TYPE) -->
  <div class="imcs-content-detail-subtitle">
    <span class="imcs-content-detail-subtitle-date">
      <imart type="imuiAccountDateTimeFormatter" value=$data.recordDate formatId=$format.datetimeFormatId />
    </span>
    <span>
      <imart type="string" value=$data.breadcrumbs escapeXml="true" escapeJs="true" />
    </span>
  </div>

  <div>
    <!-- 任意のデータ(動的フィールドなど)の表示 -->
    <div class="imcs-content-detail-option">
      <div class="imcs-content-detail-option-row">
        <div class="imcs-iac-infomation-content-detail-option-cell" >
          <span class="imcs-content-detail-option-label">
            <imart type="message" id="CAP.SAMPLE.PRODUCT.MASTER.CONTENTSSEARCH.CODE" escapeXml="true" escapeJs="false" />
          </span>
          <span class="imcs-content-detail-option-value">
            <imart type="string" value=$data.code escapeXml="true" escapeJs="false" />
          </span>
          <span class="imcs-content-detail-option-label imcs-iac-infomation-content-detail-option-label">
            <imart type="message" id="CAP.SAMPLE.PRODUCT.MASTER.CONTENTSSEARCH.PRICE" escapeXml="true" escapeJs="false" />
          </span>
          <span class="imcs-content-detail-option-value">
            <imart type="string" value=$data.price escapeXml="true" escapeJs="false" />
          </span>
        </div>
      </div>
    </div>

    <!-- スニペットの表示 -->
    <div class="imcs-content-detail-snippets">
      <imart type="repeat" list=$data.snippets item="snippet">
        <imart type="string" value=snippet escapeXml="false" escapeJs="false" />
      </imart>
    </div>
  </div>

  <!-- 詳細画面をポップアップで開くためのJavaScript -->
  <script type="text/javascript">
      jQuery(function($) {
        var target = "PRODUCT_INFO_DETAIL";
        $("#<imart type="string" value=$data.id />").click(function() {
            window.open("", target, "status=yes,resizable=yes,scrollbars=yes,height=600,width=998");
            $("<form/>", {
              "action" : "<imart type="string" value=$data.url escapeXml="false" />",
              "method" : "post",
              "target" : target
            }).appendTo('body').submit();
            return false;
        });
      });
    </script>
</div>

7.3.2. 作成したファイルの配置

作成した JavaScriptファイル と HTMLファイル を配置します。
ファイルの配置場所は、テンプレート設定ファイルの template-path に指定したパスと合わせる必要があります。
ファイル配置場所の例
  • JavaScriptファイル - {project_path}/src/main/jssp/src/im_contents_search/template/sample_product_master/product_master.js
  • HTMLファイル - {project_path}/src/main/jssp/src/im_contents_search/template/sample_product_master/product_master.html