たたみラボ

  • about
  • member
  • r&d
  • blog
  • tatamicast

blog

RSS

Flashでレストランサーチ

icon 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が必要になりますが。。。)

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

COMMENTS

>>自由度が高いインタフェースが作りやすいというFlash

誰にとって自由度が高いの?


なぜ今さらAS2.0なの?
だからXMLパースするのに苦労するんじゃいの?

サンプル見たけど、Flashで作る意味は?

April 27, 2007 9:49 PM by とおりすがり  

>とおりすがりさま
コメント及びアドバイスありがとうございます。
また、返事が遅くなってしまい大変申し訳ございません!

とおりすがりさんのおっしゃる通り、
AS3.0の方がXMLのパースは簡単そうですし、また
今更AS2.0感もあり、サンプルを作りながら途中、
自責の念にもかられました^^;

あと、同時にFlashを使う上での利点と欠点をきちんと把握した上での作成も大事ですね。

コメントを拝見して、色々と勉強になりました。
ありがとうございます。

May 9, 2007 8:21 AM by suzuki  

何これ、使い方がよう分からん。何がしたいんか。ラボのレベルなのか。。。もっとラボっぽい新しい事をやらんとね。

May 22, 2007 12:47 AM by 匿名  

おぉ、いろいろ楽しいモン作ってねぇ~
ガンガン期待してまーっす。

May 25, 2007 11:25 AM by Sickie  

大変情けない質問で申し訳ございません。
こちらのサンプルで、お店ごとの表示方法はどこに書かれているのでしょうか。
XML2ObjectSimple.as にはxmlの解析のみで表示に関わることは書いておらず、hotpepperapi.fla の中身のタイムライン上のasの

---
//パースしたデータをboxに埋め込む
for (var i=0; i<LD.item.length; i++){
var box:MovieClip = _root.cont.attachMovie("box", "box"+i, i, { Shop_res : LD.item[i] });
box._x = 0;
box._y = 200*i+33;
}
---

ここで作られていることはわかるのですが、xmlの各値をどこで検索後のレイアウトにしているか分からないのです。
何卒お願いいたします。

January 14, 2008 6:02 PM by 匿名  

大変申し訳ございません。
自己解決いたしました。
ご迷惑おかけいたしました。

January 14, 2008 6:25 PM by 匿名  

POST COMMENT




(書式を変更するような一部のHTMLタグを使うことができます)

必ず利用規約に同意いただいた上で送信ください。

ページトップへ



(C) RECRUIT MEDIA COMMUNICATIONS CO., LTD.