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

テンプレート設定ファイルのサンプル

<?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	◯	動的フィールドの型を指定します。

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

# 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=产品信息

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>

ファイル配置場所の例

• 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