2004年10月 7日
Flash でAWS(アマゾンウェブサービス)を使う:チュートリアル
みんなXMLとXSLTなのかな。確かにあっちの方が便利そうだよな。
僕はAWSを使うときはSOAPを使うようにしてる。いろいろ複雑だけど、ページデザインがやりやすいので、初めてやった日からずっとSOAP。SOAPがなんなのかも知らないままSOAP。
今回はFlashMX2004Pro版に入っているData Componentsを使って、AWSに接続して、アマゾンの商品リストからキーワード検索を実行するFlashムービーを作るチュートリアルを公開することにした。
ホントはナイショにしておいて、シェアウェアで公開して、ムフフな人生を送りたかったんだ。
必要なのはFlashMX2004。Data ComponentsがインストールされていればOK。
用意ができたら続きへどうぞ。
目的:AWS3.0に接続して、商品検索を行い、リスト上位10個を表示。クリックするとアマゾンの商品サイトに遷移するようにする。
完成品はこちら。
1:インスタンスの配置
適当な大きさのステージに以下のコンポーネントを配置してください。(カッコ内はインスタンス名)
WebServiceConnector(tips_wsc)
DataHolder(holder)
ComboBox(cat)
List(itemList)
TextInput(input)
Button(submit_button)
2:WEBサービスの定義
WebServiceConnectorのインスタンスを選択して、メニューのウインドウ→開発パネル→コンポーネントインスペクタを開きます。

パラメーターのWSDLURLにはAWSのアドレスを入力します。
(現在は http://soap.amazon.co.jp/schemas3/AmazonWebServices.wsdl )
WEBサービスが定義され、operationが選択可能になります。
operationにはKeywordSearchRequestを選択。
その他はデフォルトで構いません。
そのままバインディングタブをクリックしてください。
3:送受信データの設定
バインディングタブで(+)をクリックするとバインディングの追加ウインドウが開きます。

リクエストで必要なのは
デベロッパートークン:devtag
アソシエイトID:tag
検索タイプ:type
地域:locale
カテゴリ:mode
ページ:page
キーワード:keyword
です。それらをリストから見つけてダブルクリックするか、パス表記を使用にチェックして
params.KeywordSearchRequest.tag
といった具合に手打ちしても構いません。
一度OKをクリックして追加されてしまうと、修正ができない(削除して追加し直し)ので、注意です。
受け取るデータは
詳細:details
のみです。
送受信するデータは仕様によって変更してください。僕は当初はTotalResultsを表示させるだけで満足してたりしました。
4:バインディングの設定
送信するべきパラメーターは、ユーザーが入力したり選択したりするものと、あらかじめ決められているものがあります。
コンポーネントインスペクタのバインディングタブでパラメーターをクリックすると、ウインドウ下部に設定項目が表示されます。今回はここのbound toを変更します。
devtag,tag,locale,type,pageについては今回は固定値(pageは変数にする必要がいずれ出てくるでしょう)なので、bound toを選択し、右に出ている虫眼鏡をクリックしてバインドウインドウを開き、

定数の使用にチェックして値を入力します。

devtagはデベロッパートークン。tagはアソシエイトID。localeはjp。typeはheavy。pageは1としました。
typeはliteでも構いません。むしろそっちの方がレスポンスは早いと思います。
定数の設定が終われば次は本格的なバインディングの設定です。
今回はユーザーが入力するのはコンボボックスとテキストフィールドです。
modeはコンボボックスにバインドされ、keywordはテキストフィールドにバインドされます。
先ほどと同じようにパラメーターを選択して、虫眼鏡をクリックして、バインドウインドウを開きます。

バインドさせたいコンポーネントを選び、スキーマを選択します。どちらもvalueにバインドしてください。


バインディングについてはマクロメディアのサイトなどで詳しく説明されていますので、わからないときは参考にしてください。サイトは最後に紹介します。
送信データの設定はこれで完了です。
次は受信データの処理です。
受信データのバインド先はDataHolderです。このコンポーネントはデータが受信できたというイベントを発生できるので、受信完了の処理をトリガーさせます。これについては後述します。
5:受信完了イベントの設定
ムービーの1フレーム目のアクションに以下のアクションを記述します。
//リスナー2
function onResultChange ( eventObj : Object ) : Void
{
var dataHolder = eventObj.target;
_global.dataResult = dataHolder.result;
itemList.removeAll();
for(i=0;i<_global.dataResult.length;i++){
itemList.addItem(_global.dataResult[i].ProductName);
}
}
//6
function openURL():Void{
row = itemList.selectedIndex;
getURL(_global.dataResult[row].Url,"_blank");
}
//イベントの待ち受け1
holder.addEventListener ( "result", onResultChange );
//4
submit_button.addEventListener("click", doSubmit);
//5
itemList.addEventListener("change", openURL);
//3
function doSubmit():Void {
tips_wsc.trigger();
}
1でDataHolderのイベントリスナーを追加しています。イベント名は"result"です。
データ受信が完了すると、onResultChageがコール(2)されます。
受信したデータはeventObj.target.resultに入っています。これらをループ処理でListに格納していきます。
6:その他の設定
上記アクションの3はリクエストの送信を行っています。trigger()でバインドされているパラメータをひっくるめてAWSにぶん投げてくれます。
5はリストの選択のイベントリスナーでコールされているのは6です。
何行目がクリックされたのかを調べて、あらかじめ保存してあったAWSからのResult内にあるURLを導き出しています。
最後にコンボボックスの値を設定します。これらはAWSの資料をみながらやってもいいと思います。
ラベルは「和書」とか「音楽」とかそれっぽいものにして、値にbooks-jpやmusic-jpなど決められた値を設定しておきます。
7:確認
すべて設定を終えたらムービーをプレビューしましょう。
適当な検索語を入力して、送信すれば、結果が表示されます。クリックすれば商品ページが開きます。
もし動作しなかった場合は、バインディングあたりをチェックしてみてください。
また、最後に言うのもなんですが、このチュートリアルはFlashをある程度使いこなせている人のためのもので、Flash初めて、AWSもしらないって人には敷居が高すぎるので、やらない方が無難です。
この件について質問等はサポートフォーラムに投げてください。適当なトピックがなければ、立てていただいて構いません。
ソースはこの場では配布しません。どうしても欲しいって人はメールで個別に相談してください。
参考サイト
Macromedia Flash MX Professional 2004 のデータバインディング機能について
DataHolderのresultについても触れられています。僕もここを参考にしています。
注意
AWS3.0専用です。4.0には対応していません。
エラー処理は入っていません。
トラックバック(1)
トラックバックURL: http://okamot.com/mt/hage-tb.cgi/391
下記参考URLのチュートリアルを元に、少々機能を強化したSWFファイルを作成し... 続きを読む
コメントする