MODxのajaxSearchを仕込んでみました

新千円玉のサイトに検索システムを入れてみました。MODxには標準でajaxSearchというかっこいい検索スニペットがあるのですが、ややバージョンの古いものがついているので、まずはこれを新しくします。

AjaxSearch

こちらから1.7.0.2をダウンロードしてきました。これを開き、readmeを参考にセットアップします。

1.まずは「snippet.ajaxSearch.php」というファイルを開きます。次にMODxの管理ページから「リソース→リソース管理→スニペット→AjaxSearch」を開いて、中身を新しいAjaxSearchと入れ替えます。ついでに説明も変えておくといいかも。

2.次に「assets/snippets」の下に「ajaxSearch」というディレクトリを作成します。またはちさんはFTPソフトで作成しましたが、管理ページからも作れるかな？

3.ダウンロードした書庫内の「js/ajaxSearch.js」に検索中に表示される画像などの指定があるので必要があれば変更します。またはちさんはしてません。

4.書庫内のファイルをすべて2.で作成したディレクトリ内にアップロードします。

5.検索窓をつけたいところにスニペット呼び出しコードを書きます。最低限次のコードを書いておけば動作します。

[!AjaxSearch!]

ここまでやるととりあえず検索窓が表示されるはずです。実際に検索しようとすると…またはちさんの環境ではまず

AjaxSearch: database_connection_charset is null. Check your config file

というエラーが出ました。このエラーメッセージでググると、英語のサイトが出てきました。

＞means that your $database_connection_charset variable of your /manager/includes/config.inc.php file is an empty value

ふむふむ、「manager/includes/config.inc.php」の「database_connection_charset」という項目に値が入っていない、とな。というわけでそのファイルを落としてきて開くと、なるほど9行目にそんなものがあります。

$database_connection_charset = 'utf8';

こう付け加えてアップロードしてやると、無事に検索そのものは動きました。そしてたぶん文字化けします。ググるといろいろと対策が出てきますが、またはちさんはこちらの方法で解消しました。

AjaxSearch 日本語検索＆文字化け修正対策の情報

.htaccessにmbstring関係の設定を付け加えて問題解消。他に悪影響も今のところないようです。

オプションに関してはreadmeに書いてあります。それほど難しい英語ではないので読めばある程度はわかると思いますが、次のサイトにわかりやすい解説がありました。

AjaxSearch

こちらの解説とreadmeを併せて読めばだいたい行けるんじゃないでしょうか。

またはちさんはハイライト表示もしたかったのでreadme通りにやってみます。

a.「管理ページ→リソース→リソース管理→プラグイン」に行き、「プラグインの生成」をクリックします。

b.書庫の「plugin.searchHighlight.tpl」の中身をコピーして「Search_Highlight」という名前でプラグインを作成します。

c.多分プラグイン一覧画面になっていると思うのですが、もう一度ハイライトプラグインを開き、「システムイベント」タブに切り替えます。「OnWebPagePrerender」という項目にチェックを入れてください。

d.テンプレートのどこかに「<!--search_terms-->」というフレーズを入れておくと、ここに現在の検索語とハイライト表示を消すリンクが生成されます。入れなくてもいいです。またはちさんのところでは最初は出ていたのですが、場所を変えているうちに出なくなってしまいました。おっかしいなー…まあない方がすっきりしていていいのでそのままにしておきます。

e.あとは検索をするだけです、と書いてありますが、実際にはcssで背景色とかを指定してやらないと意味がありません。またはちさんは背景を黄色にしています。readmeの例では「AS_ajax_hightlight1,2,3」とかいうクラスが例示してありますが、1,2,3ってなんだ？「You need to create as many classes as terms you think a user will search for.」って複数の検索語に対応して色を変えられるってことかしらん。とりあえず「AS_ajax_hightlight」に対して「background-color:#FFFF66;」を指定しています。

6.cssを書いて自分の好きなように見かけをいじれ、ということで例が書いてあります。まあここはお好きなように。

7.more resultsを使いたいときはなんとかしろと書いてあるようです。検索結果のページングとかが必要になるはずなのでこのあたりもしなくてはならんはずですが、とりあえず飛ばします。後日また勉強しよう。

8.これで動くはず、だそうです。

文字化けとハイライトがちゃんと出来ればだいたい問題なし。スルルッと検索結果が出てくるのはなかなか面白いです。