WIZ-CODE.blog

JavaScriptやAjaxをテーマとしたブログです。

*

サーバーサイドとの連携にチャレンジ

   

Ajaxの普及によって、それまで評価があまり高くなかったJavaScriptを一気に主要なウェブ技術に押し上げました。とはいうものの、クライアントサイドでできることの幅がかなり広がったとはいえ、PHPなどのサーバーサイド技術に比べて根本的な制約を受けているといえます。JSONPにしても、サイト側でそうしたAPIを用意してくれなければクロスドメインの制約で機能の限られたアプリしか作れません。 そういうわけで、ツイッターやYahoo!のAPIを勉強しているうちに、これまでのJavaScriptオンリーからサーバー側との連携を意識した試みをやろうという感じになりました。 たとえば、ツイッターで人気のキーワードを拾うのはJSONの範囲で可能ですが、そのキーワードを解析するとなるとJavaScriptだけでは困難になります。Yahoo!デベロッパーにはテキスト解析APIというのがあり、最近はそれを使ってテキスト構文の解析などを試験的に行っていますが、これはXMLしか返さないので、どうしてもPHPなどを使って処理する必要があります。 ただ、このケースではAjaxで処理できるようにXMLをPHPなどを使ってJSONに変換できればいいだけなので、サーバー側でやることは最低限のことで済みます。一連の流れを順を追って見ていきます。

１、まずHTMLでテキスト送信するフォームを作成 

 


	
	


 

２、Ajaxでリクエストを行う 

 


 


 
google.load('jquery', '1.5');

google.setOnLoadCallback(function () {
	var form = jQuery('#ask_webai'),
		text = form.find('input[type=text]');

	form.submit(function (event) {
		event.preventDefault();
		jQuery.getJSON(
			// XMLをJSONに変換するPHPファイルを用意する
			'http://wiz-code.digick.jp/php/yahoo-xml-request.php',
			{
				'appid': 'my-developper-ID',
				'sentence': text.val()
			},
			//返ってきたデータを処理する
			function (data) {
				if (data) {
					var chunk = data.Result.ChunkList.Chunk;
					jQuery.each(chunk, function (index, object) {
						// 文節ごとのデータを表示
						console.dir( object.MorphemList.Morphem );
					});
				}
			}
		);
	});
});
 

３、そして最後にサーバー側のファイル（yahoo-xml-request.php）を用意します。自分はPHPしか分からないのでPHPで書いています。 

 
<?php
$param = array();

$param['appid'] = $_GET['appid'];
$param['sentence'] = $_GET['sentence'];

// Yahoo!テキスト解析APIのリクエストURL
$url = "http://jlp.yahooapis.jp/DAService/V1/parse?";
$url .= http_build_query($param);

$xml = simplexml_load_file($url) or die("XMLパースエラー");
$json = json_encode($xml);

header("Content-Type: text/javascript; charset=utf-8");
echo $json;
?>
 

このサンプルでは日本語係り受け解析APIというのを利用しています。ようは日本語を品詞レベルに分解して、文節同士の関係を解析するものです。ふとこれでAIみたいのが作れるのではないかと思い、本来の流れからそれてちょっとした試作を作ることにしました。ただ、このAPIは複雑にツリー化したJSONを返してくるので、分析するのが非常に煩雑です。とりあえず、ユーザーが投げた言葉（平叙文）を疑問形に変換して投げ返すものを作りました。 ⇒ウェブAIに挑戦　芸能人？にラブコールを送れ！ ちなみにAIに疑問文を投げかけても正しい返答は来ませんのであしからず……。

 - JavaScript/Ajax, ゲーム , , ,