Yahoo!WEBサービスを使ってみたまとめ

Webサービス事始め「漢字かな交じり文」から「ローマ字」に変換するAIRアプリを作成

WEBサービスに関していままで地図などを一方的に利用するだけで、
「WEBサービスに対して何かを送って返ってきた返事を元に何かする」といった
キャッチボール的なプログラムを作ったのは初めて(Flash/Flex/AIR)

今回は先日発見したYahoo! Web APIの「テキスト解析Web API」の「ルビ振り」機能を試してみた。
これを契機として「ローカルサーチ」やALPSLABが提供している「標高API」を利用してGPS対応マッピングツールとしてのGMM2.exeの機能強化に生かせればなと。

目的はWindows用プログラム上にWEBAPIを組み込むための事前調査です。
利用するYahoo! Web APIはレスポンスが「XML」「PHPserialize」「JSONP」と選べるそうなので、「XML」を処理するに使っている言語で一番XMLの扱いが楽なActionScriptとFlexの組み合わせで作るAIRアプリで試すことにしました。


1.アプリケーションIDの登録

「アプリケーションを特定するもの」ということでアプリケーション毎に必要
開発者を特定するための物じゃないのね。
アプリケーションIDの登録


「Yahoo! JAPAN ID」を使ってログイン後、アプリケーションIDの登録を行う
記述した内容は、サイト(アプリケーション名)にサイト（アプリケーション）の説明

一度内容確認が表示されて改めて「登録」を押す事になるが全然反応ない。

反応がない状態で、入力した内容をコピーしてほっておいたら、「こんな画面」
どうにも違うだろってことで、再度やり直してもダメx2回だったため

しばらくしてから取得



2.AIRの準備

「1.アプリケーションIDの登録」を待ってる間ズンズン進める。

AIRでやることは、漢字を入力するフォームの準備とWEB APIを送受信する機構


2-1.フォームの準備とクレジット表示

変換したい文字列を入力するTextInputと「変換」ボタン、変換後の文字列を表示するためのTextAreaを用意した。あと クレジットの表示にあるように「Yahoo! JAPANの提供するAPIを利用するすべてのサイトやアプリケーションには、クレジットを表示する必要があります。」となっていることから、同ページに用意されているGIFイメージをボタンに貼り付けた。

こんな感じ


2-2.フォームイベント処理

変換ボタンを押すと所定のイベント処理を行うよう設定

普段VisualStudio(以降VS)使ってるから思うのだけれども、FlexBuilderでフォームに対するイベントハンドラを定義するのって面倒ね、VSならダブルクリック一発で定義関数を自動作成してくれるから.....

この部分



2-3.イベント処理の中身

漢字文章の TextInputに入ってる文字列を Yahoo! WEB APIを使って、
「漢字かな交じり文」から「ローマ字」へ変換する

adobeが公開しているURL 要求とネットワーキングを読むと
Flexでネットワークの通信を行う方法には以下の3つがあり

* URLLoaderを利用
* HTTPServiceコンポーネントを利用
* Socket

今回はActionScriptで書きたいということで、URLLoaderを利用する。
(HTTPServiceはFlexに癒着している気がして使う気にならない、Socketは今回の目的にはおおげさ)

サンプルソースとして参考になったのは、
ITProのFlex 2.0でリッチなWebアプリを作ろう
ココでのサンプルをほぼ全部流用して、目的のYahoo! Web APIを実行するプログラムを組んだ。
URLLoaderのラッパー関数は、こりゃええと思った。これからも使わせてもらうつもり。

2-4.ソース抜粋

private function execURLLoader_02():void
{
  var req:URLRequest = new URLRequest();
  req.url = "http://jlp.yahooapis.jp/FuriganaService/V1/furigana";
  req.method = URLRequestMethod.GET;
			
  var uv:URLVariables = new URLVariables();
  uv.appid="アプリケーションID";
  //uv.grade="1";	//無指定の場合、ひらがなを含むテキストにふりがなを付ける
  req.data = uv;
  uv.sentence=TextInput_kanji.text;

  doLoad(req); //URLLoaderのラッパー関数
}

// URLLoaderのラッパー関数 サンプルそのまま
private function doLoad(req:URLRequest):void
{
  var loader:URLLoader = new URLLoader();
  loader.addEventListener(Event.COMPLETE, onComplete);
  loader.addEventListener(Event.OPEN, onOpen);
  loader.addEventListener(HTTPStatusEvent.HTTP_STATUS, onHttpStatus);
  loader.addEventListener(ProgressEvent.PROGRESS, onProgress);
  loader.addEventListener(IOErrorEvent.IO_ERROR, onIoError);
  loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onSecurityError);
  loader.load(req);
}

// レスポンスデータの受信完了
private function onComplete(e:Event):void
{		
  var loader:URLLoader = e.currentTarget as URLLoader;
  var responseXML:XML = new XML(loader.data);
  
  //フォームに結果 アルファベットあり
  TextArea_roman.text=toRoman2(responseXML);
}

//返事からローマ字部分を抜き出し
private function toRoman2(responseXML:XML):String
{
  //namespace設定 単純な方法
  namespace ns = "urn:yahoo:jp:jlp:FuriganaService";
  use namespace ns;
  //namespace設定方法2		
  //namespace yahoo = "urn:yahoo:jp:jlp:FuriganaService";

  var result:String="";

  for each (var Result:XML in responseXML.Result.WordList.Word) {
    var Surface:String=Result.Surface.text(); 
    var Roman:String=Result.Roman.text(); 

  //アルファベットや句読点はRomanには入らない
  //Surfaceには入る
    if(Roman.length==0){
      Roman=Surface;
      Roman=Roman.replace(/[。、・※／]/,""); //正規表現で記号等を削除(全部ではない)
    }				
    result=result+Roman;
  }
  return result;
}

と大体こんな感じ
もうちょっと正規表現部分に全角数字や記号(→)等の処理を追加すれば完全な「漢字かな交じり文」から「ローマ字」変換として利用できる。いらんけど。

今回の目的は.NET上で動作するGMM2.exeに組み込むために
Yahoo! WEB APIがどのように動くかわかればよいので、ここまでです。
(.NET上に※漢字→ローマ字変換は存在しないが、全角数字や記号→半角変換用関数は存在)

できあがり


4.公開
ソースの大部分はITProのFlex 2.0でリッチなWebアプリを作ろうを改変して使っています。

AIRアプリ:AIRK2R「AIRK2R.air」
ソース:AIRK2R「AIRK2Rのソース」

5.まとめ

AS3では「URLLoader」とそれに連なる「URLRequest」を使えばOK

------------------------------
参考:
・Flex 2.0でリッチなWebアプリを作ろう:ITPro連載 中垣 茂氏
・Yahoo!デベロッパーネットワークYahoo!Japan
・Yahooの新サービス「かな漢字変換Webサービス」を試してみたよPHP,MySQL,Flexな日々＋イラストとか
・日本語形態素解析って読みたくないようなタイトルだけど役に立ちそうなので利用する