CMSのポテンシャルを引き出す─MODxで作る商用サイト

第11回 MODxとSimpleSearchスニペット

この記事を読むのに必要な時間:およそ 4 分

はじめに

2011/07/07にMODx Revolution-2.1.2がリリースされました。多くのバグフィックスなどが含まれているようですので,時間のある方はアップグレードを検討してください。すでにアップグレード方法については解説済みですので,今回は詳細については触れません。

今回は,MODxで検索フォームを実現するためのスニペットである「SimpleSearch」を紹介します。なかみつ園でも,ページ右上の検索フォームとして活用させてもらっていますが,商用サイトを構築する上で,検索機能は非常に重要な要素のひとつです。

インストール

ご想像のとおり,本スニペットもパッケージマネージャーからインストールすることになります。⁠システム」から「プロバイダから取得」に進み,⁠simplesearch」を検索,インストールを行ってください。執筆時点での最新バージョンは1.4.0です。また,詳しいドキュメントはSimpleSearchのMODx Documentationにて参照可能です。

ドキュメント中にも記されているよう,SimpleSearchスニペットは検索フォーム表示用の「SimpleSearchForm」と結果表示用の「SimpleSearch」という2つのスニペットから構成されています。

簡単なテスト

まずはわかりやすい例として,検索フォーム用のページを通常のコンテンツとは別に用意する場合を考えてみましょう。次のような検索用リソースを作成してみてください。キーワード検索時に古い情報が表示されてしまわないように,スニペットをコールする場合には,!を付けてキャッシュを無効にしています。

表1 検索用ページの作成

タイトル検索
エイリアスsearch
リソースコンテンツ[[!SimpleSearchForm]]
<h2>検索結果</h2>
[[!SimpleSearch]]

これだけで,http://www.example.com/search.html から各リソースの検索を行うことができます。

図1 キーワード検索を実行している様子

図1 キーワード検索を実行している様子

チャンクを用いた高度なデザイン

前述の例では,スニペットコール時に特にパラメータを指定していなかったため,デフォルトの素っ気無い検索フォームが表示されてしまいました。なかみつ園では検索フォームをテンプレートのヘッダ部分に設置することで,どのページからでもリソースの検索ができるようにしています。さらに,ちょっとしたチャンクやJavaScriptを使うことで,デフォルトよりも少し便利な検索フォームを実現しているつもりです。

今回はこのようなフォームを実現するための方法も簡単に紹介しておきます。

まず,テンプレート内での検索フォームの呼び出しですが,実際には次のような記述を行っています。ここで,landing=`20`というパラメータでは検索結果を表示するためのリソースのIDを指定しています。

リスト1 検索フォームの呼び出し(テンプレートのヘッダ部分に設置)

[[!SimpleSearchForm? &landing=`20` &tpl=`my_search`]]

tpl=`my_search`というパラメータは,⁠検索フォーム表示時にmy_searchというチャンクを利用」することを意味します。⁠my_search」チャンクの内容は次のとおりです。冒頭部分のJavaScriptは,マウスカーソルをフォーカスさせた場合にテキストボックスの内容を削除,逆にアンフォーカスされた場合には,再びテキストボックス内に「検索キーワードを入力」という表示を行うためのものです。

また,[[+名前]]という記述は,プレースホルダーと呼ばれる,⁠スニペットが提供する専用タグ」です。[[+landing]]には結果表示に使用するためのリソースID,[[+method]]にはフォームのメソッドなどが代入されます。

リスト2 my_searchチャンクの内容

<script type="text/javascript">
<!--
function erase_words(obj){
  if(obj.value==obj.defaultValue){
    obj.value="";
    obj.style.color="#000";
  }
}
function put_words(obj){
  if(obj.value==""){
    obj.value=obj.defaultValue;
    obj.style.color="#999";
  }
}
//-->
</script>

<form action="[[~[[+landing]]]]"method="[[+method]]">
  <input type="text"id="keywords4"name="[[+searchIndex]]"value="検索キーワードを入力"size="20"onFocus="erase_words(this)"onBlur="put_words(this)"style="color: #999;"/>
  <input type="hidden"name="id"value="[[+landing]]"/>
</form>

以上により,検索フォームの表示は次のようになります。

図2 カスタマイズした検索フォーム

図2 カスタマイズした検索フォーム

検索結果表示用のリソースは次のように作成します。今回も結果表示のデザインを変更するため,containerTplというパラメータで「my_search_results」というチャンクを参照させています。

表2 検索結果用リソース(リソースID=20)

タイトル検索結果
エイリアスsearch-result
メニューに表示しないチェック
リソースコンテンツ<p>[[!SimpleSearch? &containerTpl=`my_search_results` &highlightTag=`strong` &hideMenu=`0`?]]</p>

チャンク名: my_search_results

<p>[[+resultInfo]]</p>
[[+results]] 
検索結果[[+paging]]

以上で準備完了です。適当なページから検索を行ってみてください。

図3 検索結果

図3 検索結果

どうでしょうか?少しは検索機能もおしゃれになりました……よね?

著者プロフィール

中満英生(なかみつひでお)

大学時代に出会ったSolarisがきっかけでUNIXの世界へ。その後ホスティングプロバイダ,データセンターで実務経験を積む傍ら,雑誌記事の執筆や技術セミナーの講師を務める。サーバ設定の他,セキュリティに関する著作や技術者エッセイも執筆経験あり。

コメント

コメントの記入