PHPが出力した結果を受け取って表示処理を行う
前項で作成したreplace.phpが出力するXMLをAjax内で受け取ります。Ajax.RequestのonSuccessメソッドを使って通信が成功した段階でXMLを受け取る処理とします。
new Ajax.Request(
"./replace.php",
{
"method": "post",
"parameters": "str=" + $('text').innerHTML,
onSuccess: function(request) {
# 略
}
}
}
);
上記の記述でreplace.phpにPOSTしてreplace.phpが出力した結果を受け取ることができます。結果の受け取りにはAjax.Requestの書式があり、「onSuccess: function(request)」の部分で記述している「request」の中に出力結果がXMLHttpRequestオブジェクトとして入ります。このオブジェクトを解析して処理された後の文章を最初の文章と置換して新着キーワードがハイライトされた文章をHTML内に表示します。
「request」内のXMLはJavascriptのresponseXMLメソッドで取得できます。replace.phpが出力したXMLの各要素にアクセスするJavascriptのイメージは以下の図のようになります。
XMLを解析して返却された文章を元の文章と置き換えるJavascriptは以下のようになります。
function analyzeResult(Req){
var resElms = Req.responseXML.getElementsByTagName('replace');
var textElm = resElms[0].getElementsByTagName('text')[0].firstChild.nodeValue;
$('text').innerHTML = textElm;
}
取り出した要素の入れ替えにも$()関数が使えますので<div id="text">のinnerHTMLを形態素解析後の文章に入れ替えます。
最終的なAjax.Requestを使った部分のコードは以下のようになります。
function execute() {
new Ajax.Request(
"./replace.php",
{
"method": "post",
"parameters": "str=" + $('text').innerHTML,
onSuccess: function(request) {
// 文章の入れ替え
analyzeResult(request);
}
}
);
}
# 略
<button onclick="execute()">実行</button>
実行ボタンを押すと文章が形態素解析され、ハイライトされたものに置き換えられます。
実行結果は以下のようになります。
まとめ
php_mecabとAjaxを使ってHTML内の文章のキーワードをハイライトさせる方法について説明しました。サンプルで紹介したはてなキーワード内の新着キーワード取得スクリプトと辞書ファイル作成スクリプト、辞書コンパイルのコマンドを定期的に自動で実行することでインターネット上で話題になっている言葉にキャッチアップしてMeCab辞書を最新の状態にし続けることができます。また、MeCab_Taggerクラスは辞書の書式を反映しますので、特別な用語の辞書のみにオリジナルの書式を入れておくことでMeCabに直接手を加えることなく、形態素解析の結果をコントロールするようなことも可能です。
サンプルのようにサイト内のキーワード検出だけでなく、グループウェアや社内SNS内の情報共有やアフィリエイト関連ツールなどとしてさまざまな使い方ができるのではないでしょうか。
