mojaラボ成分解析もJSONPでクロスドメインで使えるようにしました！
GET URLの構築
送信するURLはコチラです。
http://labs.mojalog.com/mojascript/elemanalysis/crtPie.php
リクエストURL例
http://labs.mojalog.com/mojascript/elemanalysis/crtPie.php?item=%E3%81%AA%E3%81%BE%E3%81%88&userdict=%E3%83%96%E3%83%AD%E3%82%B0%0D%0A%E7%94%9F%E6%B4%BB&fmt=callback
リクエストパラメータ例
item=%E3%81%AA%E3%81%BE%E3%81%88【なまえ】
userdict=%E3%83%96%E3%83%AD%E3%82%B0%0D%0A%E7%94%9F%E6%B4%BB【ブログ(改行)生活】
fmt=callback【callbackというメソッド名で実装する】
| パラメータ | 値 | 説明 |
|---|
| item | string(URLエンコード) | 解析対象テキストです |
| userdict | string(URLエンコード) | ※解析マッピングシードです。改行で区切って複数のシードが設定可能です。（最大２０個） |
| fmt | string(コールバックメソッド名) | 実装するスクリプトのコールバック関数名を与えます |
※解析マッピングシードとは、「××」が○パーセントという結果の、「××」を生成するワードです。
このワード１つ１つを連想検索エンジンに送信し、受信に成功した場合、１件当たり５０個の関連ワードを受信します。
（例：「ブログ」を送信した結果）
http://labs.preferred.jp/reflexa/api.php?q=%E3%83%96%E3%83%AD%E3%82%B0&format=xml
この結果の総数（最大１０００個）から成分解析を行います。
レスポンスフィールド例
callback ([{"title" : "ブロガー", "value" : "93"},{"title" : "申し入れ", "value" : "6"},{"title" : "Blogger", "value" : "1"}]);
パラメータのfmtを省略した場合RESTで結果を返却します。
<?xml version="1.0" encoding="UTF-8" ?>
<pie>
<slice title="ブロガー">93</slice>
<slice title="申し入れ">6</slice>
<slice title="Blogger">1</slice>
</pie>
HTMLサンプル
サンプルhtmlはコチラになります。このhtmlサンプルはJSONscriptRequestというライブラリを使用しています。
javascriptのライブラリは、
JSON and the Dynamic Script Tag: Easy, XML-less Web Services for JavaScript
こちらからダウンロードしてきてください。「1.My JSONscriptRequest class」ってとこにアンカされてます。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
<title>sample html</title>
<script type="text/javascript" src="jsr_class.js"></script>
<script type="text/javascript">
var jsrInst;
function getItems(){
jsrInst = new JSONscriptRequest('http://labs.mojalog.com/mojascript/elemanalysis/crtPie.php?item=' + encodeURI( document.getElementById( 'item' ).value ) + '&userdict=' + encodeURI( document.getElementById( 'userdict' ).value ) + '&fmt=json');
jsrInst.buildScriptTag();
jsrInst.addScriptTag();
}
// コールバックがjsonなのでjsonというメソッド。
function json( data ) {
var html = "";
for( idx = 0; idx < data.length; idx++ ){
html = html + data[ idx ].title + "：" + data[ idx ].value + "％<br />";
}
// スライスしたリファラはご自由に使ってください
document.getElementById('result').innerHTML = document.getElementById( 'item' ).value + "を構成する成分の分析結果<br />" + html;
jsrInst.removeScriptTag();
}
</script>
</head>
<body>
<input type="text" id="item">
<!--ユーザに解析マッピングシードを変更させたくない場合は非表示にする-->
<span style="display:none">
<textarea id="userdict">成分
原料
</textarea>
</span>
<input type="button" onclick="getItems()" value="解析">
<div id="result"></div>
</body>
</html>
HTMLサンプルamCharts適用版
コチラのサンプルは、amChartsのPIE & DONUT CHARTを使用したものです。ダウンロードページにリンクを張っておきます。
- まず、（現在のバージョン）ampie_1.2.5.zipというアーカイブをダウンロードして解凍します。
- 解凍したディレクトリを開くと、「examples」というディレクトリがあるかと思います。そこに、コチラからダウンロードしたexamples.zipを解凍し、そのままかぶせてください。
- さらに、JSON and the Dynamic Script Tag: Easy, XML-less Web Services for JavaScriptをダウンロードして解凍します
- jsr_class.jsというファイルをexamplesディレクトリの中に放り込みます
それぞれのファイルをかぶせると、ディレクトリはこんな感じの状態(画像参照)になるかと思います。test.htmlを開いてデータを送信し、受信した内容がレンダリングされることを確認してください。ブラウザのフラッシュのバージョンによっては、グラフが正しく表示されない可能性があります。
一応、受信したJSON形式のデータをフラッシュに食わせて表示されるところまで確認が取れています。
- IE
- fire fox
- sleipnir
- bugbrowser
ちなみに、examples.zip内のampie_data.xmlは初期化データが入っています。これは、initPieメソッドで表示されるデータが空であって欲しいためです。もっといい方法があれば適宜変更するなどしてください。
ampie_settings.xmlはフラッシュのコンフィグファイルです。グラフのカラーや大きさ、タイトルヘッダなどはここで変更を加えます。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
<title>sample</title>
<script type="text/javascript" src="../ampie/swfobject.js"></script>
<script type="text/javascript" src="jsr_class.js"></script>
<script type="text/javascript">
function initPie(){
var so = new SWFObject("../ampie/ampie.swf", "ampie", "520", "400", "7", "#FFFFFF");
so.addVariable("path", "../ampie/");
so.addVariable("chart_id", "ampie");
// グラフのコンフィグセッティング
so.addVariable("settings_file", escape("ampie_settings.xml"));
// 空のグラフデータ
so.addVariable("data_file", escape("ampie_data.xml"));
so.addVariable("preloader_color", "#999999");
so.write("flashcontent");
}
var jsrInst;
function getItems(){
jsrInst = new JSONscriptRequest( 'http://labs.mojalog.com/mojascript/elemanalysis/crtPie.php?item=' + encodeURI( document.getElementById( 'item' ).value ) + '&userdict=' + encodeURI( document.getElementById( 'userdict' ).value ) + '&fmt=json' );
jsrInst.buildScriptTag();
jsrInst.addScriptTag();
}
// コールバックがjsonなのでjsonというメソッド。
function json( data ) {
var html = "";
// 0件返却時のampie.swfエラー抑止
var xml = "<slice title=\"\">0</slice>";
for( idx = 0; idx < data.length; idx++ ){
html = html + data[ idx ].title + "：" + data[ idx ].value + "％<br />";
xml = xml + "<slice title=\"" + data[ idx ].title + "\">" + data[ idx ].value + "</slice>";
}
// 分析結果のレンダリングはご自由に
document.getElementById( 'result' ).innerHTML = document.getElementById( 'item' ).value + "を構成する成分の分析結果<br />" + html;
jsrInst.removeScriptTag();
var flashMovie = document.getElementById("ampie");
flashMovie.setData('<pie>' + xml + '</pie>');
}
</script>
</head>
<body>
<input type="text" id="item">
<!--ユーザに解析マッピングシードを変更させたくない場合は非表示にする-->
<span style="display:none">
<textarea id="userdict"></textarea>
</span>
<input type="button" onclick="initPie();getItems()" value="解析">
<div id="result"></div>
<div id="flashcontent"></div>
</body>
</html>
ざっくりですが、こんな感じです。これでご自身のページにも簡単（では無いかもしれませんが）に成分解析ページがつくれますね！適宜、ファイルのアップロードパスなどを調整してご自身のブログやホームページに使ってみてください。ほいでわ
