April 26, 2007 7:34 PM by takuo

はじめまして。
4月からメンバーに入れて頂いた、スズキタクオです。

今回、Flashから、
ホットペッパーAPIを使ってレストランを検索できる
簡単なサンプルを作ってみました。

サンプルは、
自由度が高いインタフェースが作りやすいというFlashの利点を活かした
Webサービスを作りたい！という所からスタートしています。

実はサンプルの制作にあたって、AS2.0でXMLをパースする所でつまづいていたら、
となりの席の石橋さんがXML2ObjectSimple.asという簡単にxmlを解析してFlashのオブジェクトにしてくれるステキなAS.ライブラリをサクっと作って下さったので、
そのライブラリを使って実装しております。

どんなサンプルを作るか？

サンプルは、他のAPI用に使ったり、
機能を追加したりと容易にカスタマイズができるよう

1.プログラミングが苦手な人(僕)でも作れる位、サーバーサイドはシンプルにすること。
2.最小限のカスタマイズで他のAPI用に使えるように汎用性を持たせること。
3.独自の機能はつけないでシンプルな構成にすること。(検索、スクロール、進む、戻るのみ)

という目標を勝手に立てて作ってみました。

どうやって作るか?

Flashから外部のドメインへのアクセスはFlash固有の
クロスドメインの制限により禁止されています。
そのため、APIを利用するには、API側にcrossdomain.xmlが設置されているか、
PHPやPerl、Rubyなどでプロキシー問題を回避する必要が出てきます。

そこで今回は、このプロキシー問題を回避するためにFlashのバックエンドに
PHPを用意して以下のような構成にしてみました。

Flash
↓(入力したキーワードをphpへ送信)
php
↓(phpからAPIへリクエスト)
API
↓(APIからのレスポンス)
php
↓(結果をサイトに表示)
Flash

ここからPHPとFlashに分けてそれぞれ説明していきます。

PHPのコード

PHPの役割は、Flashから渡されたキーワードをホットペッパーAPIへリクエストします。 今回はクロスドメイン対策の為だけという使い方に割り切っていますので、 下記のような必要最低限のコードにしています。

search.php

<?php

//HotpepperAPI

$req ="http://api.hotpepper.jp/GourmetSearch/V110/?key=guest&Order=0&"; 

$req .= $_SERVER["QUERY_STRING"];

header("Content-Type: text/xml; charset=utf-8");

echo file_get_contents($req);

?>

これで、リクエスト先のurlを変えれば
他のWEBサービスにも使えるのでは無いかなとおもっています。

Flashのコード

次にFlash側のコードを見ていきたいと思います。 まず今回のFlashの役割は主に2つです。

1.入力されたキーワードをPHPに渡す。
2.PHPから帰ってきたxmlをFlashで表示する。

PHPにキーワードを渡す

TextInputのコンポーネントを使い、 ユーザーが入力したキーワードと一緒に、 1ページあたりに表示する件数、何件目からのデータが欲しいか等のパラメータを PHPに渡してあげます。

var url = new LoadVars();
url.Keyword = current_keyword;
url.Count = display_num;
url.Start = 1+display_num*(page_number-1);
SearchData.load("search.php?"+url.toString());

という形で先ほどのsearch.phpへ渡しています。

url.toString()を使うと、UTF-8形式にキーワードを変換する事が出来るので、
それをphpの最後に?を付けて渡しています。

APIから帰ってきたデータをFlashで処理する

PHPからxml形式で帰ってきたデータの処理は全て、Flash側で行っています。
ここからは、個人差があると思うので、いちがいに言うことは出来ないのですが、
個人的に、Flash AS2.0でxmlをパースする部分をもっと簡単にできないかなと
思っておりました。

そこで、先ほど書いた、
Xpath APIの用に簡単にアクセスできて、なおかつ強制配列をしてくれるライブラリ
XML2ObjectSimple.asのライブラリが大活躍してくれます。

このライブラリを簡単に言うと、
sephiroth.it : XML2Objectに強制配列の機能+強制配列だと思って頂ければと思います。

XML2ObjectSimple.asを使うと、xmlの解析が以下のようになります。
(※Hotpepperの例)

var parser = new XML2ObjectSimple();
var LD = parser.parseXML(SearchData,true,['Shop']);
LD = LD.Results;
Shop_res = LD.Shop[0];

これで、Shop_resを付ければ、xmlのShop以下に簡単にアクセスする事が出来るように
なります。

例えば、店名なら、

this.shopname = Shop_res.ShopName;

というような形。

お店の住所なら

this.shopadress = Shop_res.ShopAdress;

という形で簡単に得る事が出来ます。

またこのライブラリを使うと、xmlをObjectととして解析してくれる以外に、
ForceArrayやForceNumと同じように、
レスポンスの結果が1件だったとしてもちゃんとShop以下を配列にしてくれる
利点があります。

サンプルのダウンロード

こちらで、今回のサンプルデータをまとめたものを
ダウンロードする事ができますので、ダウンロードして
どんどんカスタマイズして頂ければと幸いです。(Flash8が必要になりますが。。。)

僕の方でもこのサンプルをベースに色々とバージョンアップしていきたいと
思ってますので、こんな機能が欲しいなどありましたら、
気軽に教えてもらえればと思っています！

tags：API  Flash  HotPepper