はじめに

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

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

インストール

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

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

簡単なテスト

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

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

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

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

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

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

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

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

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

<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>

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

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

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

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

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