アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

「似ている」を探そう

今日から8月ですね!我が家の猫も夏毛に生え替わるようで、私も毛だらけです。志田です。

さて、今回は「似ている」を探したいと思います。なにかとなにかがどのくらい似ているのか、という情報があれば、それが役に立つシーンはたくさんありますよね。
ブログの似ている記事を探したり、趣味の似ているユーザを探したり、用途は様々です。
「何が似ているのか」という尺度にも様々あるように、類似度というのはいろいろな観点から調べることができます。

今回は、アシアルブログから似ている記事を探してみたいと思います。
手順としては、Mecabというライブラリを使って記事を形態素解析し、単語に分けます。
そして、元となる記事とその他の記事全体を見て、コサイン類似度という手法を用いて記事同士の類似度を測定し、似ている記事を3件見つけます。

(1) ブログ記事を取得する


ブログ記事を取得し、ディレクトリに保存しておきます。
アシアルブログですと、URLの後ろについた番号が記事のIDとなっているので、entry/ID.htmlというような形式で保存しました。総数757件!
結構な量だったので、50件ずつダウンロード保存しました。(門脇さん、ブログに負担がかかってたらゴメンナサイ…)

(2) ブログ記事から本文をスクレイピングする


先ほど取得したブログ記事には、HTMLヘッダや再度メニューなど、類似度の分析に必要のない部分まで含まれています。
これを、本文だけ取得(スクレイピング)していきたいと思います。
また、ソースコードが含まれていると「if」「$i」といった構文が多く出現して本文の類似度に結びつかなくなると考え、ソースコード部分も省くことにしました。



include('parser/simple_html_dom.php');
for($i=1; $i<839; $i++){
  $file = "entry/$i.html";
  if(is_file($file)){
    $html = file_get_html($file);

    //本文抜き出し
    $div = $html->find('div[class=item-paragraph]');
    $string = $div[0]->outertext;
    //本文からソースコードを消す
    $div = $html->find('ol[class=boxcode-main]');
    foreach($div as $d){
      $string = str_replace($d->outertext, '', $string);
    }
    //ファイルに保存
    file_put_contents($file, $string);
  }
}


HTMLのパースには、PHP Simple Html Dom Perserを利用しました。
PHP Simple Html Dom Perser
これを利用することで、本文からクラスがitem-paragraphであるdivを取得(アシアルブログの本文です)し、本文からboxcode-mainというolタグ(ソースコード)を削除します。
(後で気づいたけれど、番号なしソースコードは省けていないかもしれません…)

(3) 本文を形態素解析する


形態素解析をすると、文章を意味のある単語で区切ることができます。
例えば、「すもももももももものうち」という文章ならば、「すもも:名詞」「も:助詞」「もも:名詞」「も:助詞」…というように、単語と品詞、その他の情報というように分割してくれます。
今回は、形態素解析エンジンにMeCabを使いました。

PHPMeCabを利用するには、MeCab本体とphp-mecabをインストールする必要があります。
インストールは下記のブログが非常にわかりやすかったです。
PHPでMecab利用 - リハビリ日記
また、PHP5.3系を使っている方は、下記のブログを参考にphp_mecab0.4.1をインストールしてください。
2010-07-06 - なんというていたらく



$mecab = new Mecab_Tagger();

$search = array(' &nbsp;', '<', '>', '"');
for($i = 1; $i < 100; $i++){
  $file = 'entry/'.$i.'.html';
  if(is_file($file)){
    $body = str_replace($search, '', strip_tags(file_get_contents($file)));
    $node = $mecab->parseToNode($body);
    while($node){
      //品詞ID38、41、47のものだけ取得
      if($node->posid == 38 || ($node->posid >= 41  & & $node->posid <= 47) ){
        $result[] = $node->surface;
      }
      $node = $node->getNext();
    }
    //出現回数が10回以上の単語のみにする
    $omomi = omomi($result, 10);
   
    $omomi_str = '';
    if(is_array($omomi)){
      foreach($omomi as $key => $value){
        $omomi_str .= $key.",";
      }
      $omomi_str = mb_convert_encoding($omomi_str, 'UTF-8', "auto");
      $sql = "INSERT INTO blog_test VALUES($i, '$omomi_str')";
      mysql_query($sql);
      $result = array();
    }
  }
}


形態素解析した結果、品詞ID38(一般名詞)、41(固有名詞:一般)、47(固有名詞:地名)のものだけ取得するようにしました。
この品詞IDを指定することで、助詞がむやみにキーワード化するのを避けます。
品詞IDリストは、MeCab 品詞IDを参考にしてください。
途中、omomi(名前がダサい)という関数にかけ、出現頻度が10回以上の単語を抽出しています。
出現頻度が高い単語で類似度をとった方がより似ているというのと、出現頻度が低いものまで含めてしまうと、長い記事のときたくさんキーワードがとれてしまい、
コサイン類似度を求めるときに処理が重くなるからです。



function omomi($ary, $limit = 1){
  $return = array();
  foreach($ary as $a){
    if(isset($return[$a])){
      $return[$a]++;
    } else {
      $return[$a] = 1;
    }
  }
  arsort($return);

  reset($return);
  if(current($return) >= $limit){
    foreach($return as $key => $r){
      if($r < $limit){
        unset($return[$key]);
      }
    }
  }
  return $return;
}


関数omomiでは、受け取った配列の出現回数をカウントし、第二引数で渡された出現頻度以上の単語のみの配列を返します。
こうして、各記事の形態素解析と、出現頻度による単語の抽出、DBに保存までを行いました。

(4) コサイン類似度を求める


それでは、ある記事に対する似ている記事を、記事全件から探していきます。
ここで用いるのが、文書の類似度を求めるときなどに利用されるコサイン類似度というものです。
これは、2つの記事のベクトルがどれだけ似ているかというものを調べます。

コサイン類似度では特定の計算式を用い、1に近づくほど似ているという結果になります。(1だと全く同一の内容、0.8~0.9だとかなり似ている、といったように)
今回ですと、ブログから形態素解析を行って意味のある名詞を多く取り出したので、文書の成分が似ているものがヒットするはずです。

コサイン類似度の計算関数は、下記のようになっています。



function cosSim($w1 = null, $w2 = null){
    $w = array_values(array_unique(array_merge($w1, $w2)));
    for($i=0; $i<count($w); $i++){
        $m1[$i] = false;
        $m2[$i] = false;
    }

    //$wが$m1にあるか調べる
    foreach($w1 as $wi){
        $key = array_search($wi, $w);
        if($key !== FALSE)
            $m1[$key] = true;
    }

    //$wが$m2にあるか調べる
    foreach($w2 as $wi){
        $key = array_search($wi, $w);
        if($key !== FALSE)
            $m2[$key] = true;
    }

    //Cos類似度用計算
    //分子
    $and = 0;
    for($i=0; $i<count($m1); $i++){
        if($m1[$i]  & & $m2[$i])
            $and++;
    }
     
    //分母
    $m1and = 0;
    foreach($m1 as $m){
        if($m)
            $m1and++;
    }
    $m2and = 0;
    foreach($m2 as $m){
        if($m)
            $m2and++;
    }
   
    $m1and = sqrt($m1and);
    $m2and = sqrt($m2and);
   
    if($and == 0 || $m1and == 0 || $m2and == 0){
        return 0;
    } else {
        return $and/($m1and * $m2and);
    }
}


コサイン類似度の関数では、元となる記事の単語配列$w1と、比べたい記事の単語配列$w2を渡し、配列をマージ・ユニーク化します。
マージされた配列を元に、元記事と比べたい記事のどちらにも存在する単語を検索し、そのヒット数を調べます。
最後に、コサイン類似度の計算式に当てはめます。

似ている記事は、下記のようにして求めました。
($_POST['number']で元記事の番号を指定した場合のプログラムです)



//似ている記事を探す
if(isset($_POST['number'])){
  $result = mysql_query('select * from blog_test', $con);
  while($row = mysql_fetch_row($result)){
    $blog[$row[0]] = $row[1];
  }

  //カンマで区切って配列にする
  foreach($blog as $key => $value){
    $row = explode(",", $value);
    $blog[$key] = $row;
  }

  echo "<table border=1><tr><th>記事番号</th><th>記事のキーワード</th>";
  echo "<th>似ている記事番号</th><th>似ている記事のキーワード</th></tr>";

  $moto_key = intval($_POST['number']);
  $result = array();
  foreach($blog as $key2 => $value2){
    if($moto_key != $key2  & & count($blog[$moto_key]) != 0  & & count($value2) != 0){
      $result[$key2] = cosSim($blog[$moto_key], $value2);
    }
  }
  arsort($result);
  echo "<tr><th>".$moto_key.".html</th><td>".aryToStr($blog[$moto_key]).'</td><td>';

  //似ている記事番号と類似度を3つ表示
  $i=0;
  foreach($result as $k => $v){
    echo "<b>".$k.".html</b> : ".$v."<BR>";
    $i++;
    if($i == 3){
      break;
    }
  }
  echo '</td><td>';

  //似ている記事のキーワードを3つ表示
  $i=0;
  foreach($result as $k => $v){
    echo aryToStr($blog[$k])."<HR>";
    $i++;
    if($i == 3){
      break;
    }
  }
  echo '</td></tr>';
  echo '</table>';
}

//配列を渡すとカンマ区切りで表示する
function aryToStr($ary){
  $str = '';
  foreach($ary as $r){
    $str .= $r.", ";
  }
  return $str;
}


上記のプログラム、ちょっとテーブルタグが入っていて汚いですが;結果は$resultに3件入っています。

これを実行し、824番の記事(【デザイナー必見】iPhone/AndroidアプリをHTML+Javascriptで作成(PhoneGapのススメ))と似ている記事を検索します。
824番の記事からは、「PhoneGap」「アプリ」というキーワードがとれました。
検索した結果、下記のような類似記事を3件見つけることができました!



421番(iPhone 開発合宿@伊香保)キーワード:アプリ 類似度:0.82
828番(【PhoneGap】Xcode4でPhoneGapプロジェクトを作成する方法)キーワード:プロジェクト、PhoneGap、Xcode 類似度:0.58
738番(iPhoneアプリ開発開始時に気をつけるべきファイルの取り扱い (2))キーワード:ID、App、アプリ 類似度:0.58

このように、記事の本文からも似たものを探すことができます。場合によっては、ブログ記事に自分でつけたカテゴリやキーワードといったタグ情報よりも、より似ている記事が見つけられるかと思います。

ブログの内容によっては、MeCabの辞書ファイルに独自の単語を入れた方がいい場合や、キーワードの出現頻度(重み)を増減させたほうがいいものなど、あると思います。
動かしながらベストな数値を見つけてみて下さい。

似ているといっても、何がどのくらい似ているのかという尺度はいろいろあります。
音楽ならアーティスト、ジャンルといったタグから、曲調、テンポといった曲の成分まで、どれを比べるかによって類似度を調べる分類器が違ってきます。
こうして見つかった類似性をどのように活かしていくかによっても、楽しみが広がりますね。

参考
MeCab: Yet Another Part-of-Speech and Morphological Analyzer
PHP Simple Html Dom Perser
PHPでMecab利用 - リハビリ日記
2010-07-06 - なんというていたらく
PHPエクステンションのリポジトリ始めました - 讃容日記

選択文字列を翻訳したり地図検索したりするブックマークレットを作ってみました

こんちわ。松田です。

つい最近、JavaScriptを使ってマウスカーソルの選択範囲の文字列を取得する方法を知りました。
これを使って遊んでたら楽しかったので、せっかくなのでブログのネタにしたいと思います。

参考URL:http://wiki.bit-hive.com/tomizoo/pg/JavaScript%20Range%A4%CE%BB%C8%A4%A4%CA%FD

まずは選択範囲の文字列取得方法です。
ものすごーくはしょって説明すると、


// IEの場合
document.selection.createRange().text

// Mozilla系の場合
window.getSelection()

で取得できます。意外と簡単。
重要な部分をかなり省いたので詳しくは上記URLを参考にしてください。


そしてこれを利用していろいろ作ってみました。
マウスカーソルで文字列をドラッグし、範囲選択した状態でボタンを押してみてください。
たぶん実用性はありません。
(でも時間が無かったのでIE用にしか作ってません。隙をみて作ります。。)



・選択範囲をリンクに変える

選択範囲の単語をWikipediaへのリンクにしてくれます。
ググったほうが早い!




<script type="text/javascript">
//<![CDATA[
document.getElementById('button1').onclick = function() {
  try {
		var text = null;
	  if (document.all) {
	    // IE
      var range = document.selection.createRange();
      text = range.text;
	    if (document.selection.type != 'Control') {
		    var container = document.createElement("div");  
		    var encap_node = document.createElement('a');
		    encap_node.href = 'http://ja.wikipedia.org/wiki/' + encodeURIComponent(text);
		    container.appendChild(encap_node);  
		    encap_node.innerHTML = text;  
		    range.pasteHTML(container.innerHTML); 
	    }
	  } else {
			// Mozzilla
			text = window.getSelection();
	  }
  } catch(e) {
  }
};
//]]>
</script>







・選択範囲を翻訳する

英語だったら日本語に、日本語だったら英語に直してくれます。
辞書引くよりは早い!けどブラウザのプラグインで事足りそう

翻訳処理自体はmuumoo.jpさんの翻訳APIをお借りしてます。





<script type="text/javascript">
//<![CDATA[
document.getElementById('button2').onclick = function() {
  try {
	  if (document.all) {
			// IE
	    var range = document.selection.createRange();
	    if (document.selection.type != 'Control') {
	      var params = 'text=' + encodeURIComponent(range.text);
	      // prototype.js使ってます
	      new Ajax.Request('/scripts/333/honyaku.php', {method: 'post', parameters: params, onComplete: function (request) {
	        var res = request.responseText;
	        range.text = res;
	      }});
	    }
    } else {
			// Mozilla
		}
  } catch(e) {
  }
};
//]]>
</script>

honyaku.php(サーバー側)




※追記:ブックマークレットから翻訳スクリプトを呼び出すと、このブログ以外のドメインでは動作しないバグがあったので作り直しました。
現在ブックマークレット版翻訳機能は下のスクリプトで動いています。
new Ajax()・・・部分をクロスドメイン可能な形式に変更し、honyaku.phpでは翻訳結果を「echo "showString({$result})";」で返すようにしました。


<script type="text/javascript">
//<![CDATA[
try {
  if (document.all) {
    // IE
    var range = document.selection.createRange();
    if (document.selection.type != 'Control') {
      // このscriptが 「showString('翻訳結果');」を返す
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'http://blog.asial.co.jp/scripts/333/honyaku2.php?text=' + encodeURIComponent(range.text);
      document.body.appendChild(script);
  } else {
    // Mozilla
  }
} catch(e) {
  alert('error ga okitappoi desu..');
}

// ↑のscriptの結果によって呼び出される
function showString(str) {
  try {
    if (document.all) {
      // IE
      var range = document.selection.createRange();
      if (document.selection.type != 'Control') {
        range.text = str;
      }
    } else {
      // Mozilla
    }
  } catch(e) {
  }
}
//]]>
</script>








・選択範囲内にある地名をGoogleMapで表示させる

ネタが足りなかったのでオマケで作ろうとしたら、これに一番時間をとられました。
選択範囲の文字列をYahoo!形態素解析APIに渡して名詞部分だけをリスト化し、それをGoogleMapのGeocodingをつかって表示してます。
無理やりです。

名詞は全部地名としてGoogleMapにぶん投げちゃうので、予期せぬマーカーが立つかもしれません。
↓の文字列等で試してみてください。
[東京から新宿に向かってたはずなのに青梅についてました]

これ作ってて気付いたんですけど、「地名」って地名があるんですね。ややこしい。




<script type="text/javascript">
//<![CDATA[
document.getElementById('button3').onclick = function() {
  try {
	  if (document.all) {
			// IE
	    var range = document.selection.createRange();
	    if (document.selection.type != 'Control') {
	      var div = document.createElement('div');
	      div.style.position = 'absolute';
	      div.style.left     = '10px';
	      div.style.top      = (document.documentElement.scrollTop || document.body.scrollTop + 10) + 'px';
	      div.style.width    = '300px';
	      div.style.height   = '300px';
	      div.style.border   = 'solid 1px black';
	      div.style.display  = 'block';
	      
	      var iframe = document.createElement('iframe');
	      iframe.src = 'http://blog.asial.co.jp/scripts/333/map.php?text=' + encodeURIComponent(range.text);
	      iframe.height = 300;
	      iframe.width  = 300;
	      div.appendChild(iframe);
	      document.body.appendChild(div);
	    }
    } else {
			// Mozilla
		}
  } catch(e) {
  }
};
//]]>
</script>

map.php(サーバー側)






で。
これだけだと役に立つも何もこのページでしか使えないので、お約束のブックマークレットにしてみました。
下のリンクをお気に入りに登録して、文字列を選択した状態でお気に入りをクリックして下さい。
これで好きなサイトで使いまくりです。
(これも現在IEのみ対応です。。。)

選択範囲をリンク
選択範囲を翻訳
選択範囲の地名を地図で表示

このブックマークレットで使用しているb_link.php, b_honyaku.php, b_map.phpは、それぞれ上のほうで紹介したスクリプトのtry{}内をechoしているだけなので省きます。