mojaラボ成分解析もJSONP対応であなたのページに使えます！ (mojalog)

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>

ざっくりですが、こんな感じです。これでご自身のページにも簡単（では無いかもしれませんが）に成分解析ページがつくれますね！適宜、ファイルのアップロードパスなどを調整してご自身のブログやホームページに使ってみてください。ほいでわ

★このコンテンツに目的の情報はありませんでしたか？

[ Entry Tags ]

JSON PHP javascript tips ソフトウェア技術

日	月	火	水	木	金	土
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

mojalog

ストップモーションアニメつくったり、ソフトウェア技術の紹介をしたり料理したりのブログです。