ライブドア製レコメンデーション・エンジン Cicindela の動作を確かめるために、簡単なAjaxアプリケーションを作ってみました。スクリーンショット：
「好きなプログラミング言語」と「よく使うソフトウェア」についての情報を収集し、その結果に基づいておすすめの言語・ソフトを算出する、一種のアンケートです。
現実にはAjaxアプリケーションから直接 Cicindela のWeb APIを叩くのは難しいと思いますが（いたずらされ放題になってしまうので）、機能をテストするのには手軽です。以下に作り方を紹介しておきます。
- Cicindela はセットアップ済みとします（CentOS 5にセットアップする手順はこちら）
- カテゴリー機能を使います
- アイテムid・ユーザidは文字列です
- jQuery 1.3.2 を使います
- Firefox 3で動作確認します（ほかのブラウザでも動くと思いますが）
データベースの初期化
create_init_sql.pl を実行して使用するデータベースを作成します。DB名は sample としました。
perl create_init_sql.pl --db_name=sample | mysql -uroot
cicindelaの設定
lib/Cicindela/Config/_common.pm に集計セットを定義します。
'sample' => { datasource => [ 'dbi:mysql:sample;host=localhost', 'cicindela', 'cicindela' ], filters => [ 'PicksExtractor', 'InverseUserFrequency', 'ItemSimilarities', ], recommender => 'ItemSimilarities::LimitCategory', refresh_interval => 1, use_user_char_id => 1, use_item_char_id => 1, discard_user_id_char2int => '6 month', },
カテゴリ機能を使いたいので、フィルタとして ItemSimilarities を、レコメンダとして ItemSimilarities::LimitCategory を指定します。またユーザidとアイテムidに文字列を使用したいので、 use_*_char_id を設定します。結果を確認しやすくするために refresh_interval を 1 にしていますが、実運用時にはもっと大きな値を指定してください。
HTML
HTMLのbody内を抜粋すると次のようになります。SELECT 要素は後からJavaScriptで初期化するので、この段階では空っぽです。
<h2>追加</h2> <div class="insert"> <p>username: <input type="text" id="username" /></p> <fieldset><legend>好きな言語</legend> <select multiple="multiple" id="langs"></select> </fieldset> <fieldset><legend>よく使うソフト</legend> <select multiple="multiple" id="softs"></select> </fieldset> <p class="submit-space"><button id="insert">insert</button></p> </div> <h2>取得</h2> <div class="recommend"> <p><select id="items"></select></p> <fieldset><legend>おすすめ言語</legend> <div id="output-langs"></div> </fieldset> <fieldset><legend>おすすめソフト</legend> <div id="output-softs"></div> </fieldset> <p class="submit-space"><button id="get">get</button></p> </div> <h2>ログ</h2> <textarea id="log"></textarea>
JavaScript: データの定義
使用するデータは JavaScript のオブジェクトとして、次のような構造で定義します。langs と softs という2つのカテゴリがあり、それぞれに数値のid（1,2）が割り当てられています。
var data = { langs: { id: 1, list: ['Perl', 'PHP', 'Ruby', 'Python', 'Java', 'JavaScript', 'CSharp', 'Erlang', 'CommonLisp'] }, softs: { id: 2, list: ['Windows', 'Linux', 'Mac', 'Emacs', 'Vim', 'Eclipse', 'NetBeans', 'VisualStudio', 'Dreamweaver'] } };
JavaScript: SELECTの初期化
document の ready イベントにてSELECT要素を初期化します。Cicindela に渡す item_id としてアイテムの名前をそのまま使うので、OPTION要素の value 値にはアイテム名を設定しておきます。
$(function() { $.each(data, function(category_name, category_data) { var all_items = $('#items'); var category_items = $("#"+ category_name); $.each(category_data.list, function(i,l) { $('<option />').attr('value', l).text(l) .clone().appendTo(category_items) .clone().appendTo(all_items); }); }); });
続く。
[...] 前回の続きです。 [...]