top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_497

Flex:◇チュートリアルをいろいろ発展させる「AmazonAPI」(1) ・・・ 【Flex:5日目】

 2008-11-25
 やっと一つ目のチュートリアル を終えただけだが
 早速、これを発展させていろいろ試そう。

 まずは、前に
  ・PHP で一通りのアプローチを試みた
   AmazonAPI を使ってみたい。

 いろいろ調べて
 これであっているかどうか、不安を抱えながらも
 前に進める

 ◎Flex3 + AmazonAPI テスト制作

 追記に ▼

※この連載は、はじめて「Flex」に取り組んだmetaboyが、
 60日間体験版を利用して、ゆっくりと学んでゆく、詳細な記録です。
                      (本日の作業時間:3.0時間
【Flex:5日目】


[ 1 ][ 2 ][ 3 ][ 4 ] 回へ

FC2ブログランキングにほんブログ村 IT技術ブログ Webサイト構築へブログ王ランキング人気ブログランキング人気ホームページランキングへ


more**************************************************
【作業詳細】
**************************************************

===============================
[ AmazonAPIへのアプローチ ]
===============================

  相当しらべたが、なかなか掴めない。
 前に紹介した、
 ・Amazon Windowshop Beta:こ、これは!掛け値なしに凄い! ・・・ 【FLASH】
 は、Flex でできているようだが

 何度か、RESTでのアプローチを試みるが
 うまく行かない。

  ▼

 やはり、こういうときも、先人のお知恵をお借りする。
 探した!
 あった!

今年の1月の記事ではあったが、
Amazonからデータ取得してGridDataにぶち込んでみるテスト
 ※l4lさん ありがとうございました!

 丁寧な解説で よくあかる。
 そうか、flash.net パッケージ を利用するわけだ。
  > flash.net パッケージ

 ・データグリッドを利用して、詳細な情報を
  取得されている方法を示されており、試してみたところ
  バッチリ!

  しかし、これをこのままいただいて表示しても
  私の学習にはならない。

 そこで、先回創った「チュートリアル」のスタイルなどを
 変えないで、

  必要な部分のみ参照して利用させていただくことで
  理解を深める

 これを実行した。

===============================
[ flash.net パッケージ を利用 ]
===============================

 □まず、これを、mx:Application タグ に組み込む
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundGradientColors="[0xFFFFFF,0xAAAAAA]"
horizontalAlign="left"
verticalGap="15" horizontalGap="15" xmlns:net="flash.net.*">

flash.net については、後で学習が必要だぞ、と。


===============================
[ 必要なコントロール ]
 ActionScript3.0 において
===============================

 □ActionScript3.0 をハンドリングするところで
  mx:Script に必要(であろう)コントロール
  を組み込む
 		import mx.controls.Image;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;

※これらも、後で学習が必要だぞ、と。


===============================
[ Amazonへのアクセス ]
===============================

 □最初のチュートリアルで Flickr API
  アクセスしていた
private function requestPhotos():void{
photoService.cancel();
var params:Object = new Object();
params.format = 'rss_200_enc';
params.tags = searchTerms.text;
photoService.send(params);
}

 を ▼

private function searchAmazon():void{
if(searchTerms.text==""||searchTerms.text==null)return;

var param:Object = new Object();
param.Service = "AWSECommerceService";
param.AWSAccessKeyId = "(私のAmazonアクセスID)";
param.AssociateTag = "(私のAmazonアフィリエイトID)";
param.ResponseGroup = "Medium";
param.Operation = "ItemSearch";
param.SearchIndex = "Books";
param.Keywords = searchTerms.text;
searchAmazonService.send(param);
}

 と変更。
 ※対象は、書籍に限定。


===============================
[ 結果表示における生成 ]
 結果を利用して、表示ソースを
 生成する部分
===============================

 □ソース内の namespace に理解グレーながらも
  まずは表示できるよう調整
private function searchResult(event:ResultEvent):void{
default xml namespace = new Namespace("http://webservices.amazon.com/AWSECommerceService/2005-10-05");

var xml:XMLList = XML(event.result)..Item;
var datas:Array=[];
var l:int = xml.length();
for(var i:int=0;i var data:Object = {};

data.Title = xml[i]..Title[0]?xml[i]..Title[0].toString():"";
data.SmallImage = xml[i]..SmallImage.URL[0];
data.MediumImage = xml[i]..MediumImage.URL[0];
data.LargeImage = xml[i]..LargeImage.URL[0];
data.Image = (data.SmallImage?data.SmallImage:data.MediumImage);
datas.push(data);
}
if(datas.length>0){
resultTileList.dataProvider = datas;
}else{
resultTileList.dataProvider = [];
Alert.show("検索結果0件...");
}
}

 ※namespaceで呼んでいる「2005-10-05」が古くて気になったが
  これは、前にPHPで利用した「2008-08-19」に変えるとうまくゆかなかった
  ので、まずは、このままで・・・


===============================
[ レイアウト部分 ]
 データグリッドは利用しないで、
 最初のチュートリアルのままで
===============================

 ※実を言うと、勘違いもありここではまったが
  さきほど 脱出。
<mx:HTTPService id="searchAmazonService"
url="http://ecs.amazonaws.jp/onca/xml"
result="searchResult(event)" fault="searchFault(event)" resultFormat="e4x"/>

 ※resultFormat なんかも気がかり・・・

<mx:TileList width="100%" height="100%" id="resultTileList"
itemRenderer="AmazonTestThumbnail">
</mx:TileList>

 ※前に創った別ファイルの「カスタムコンポーネント」も
  同じ形式のまま実装


===============================
[ カスタムコンポーネント ]
 別ファイルの表示部分も
 同じ形式を保ち実装
===============================

 ※実を言うと、勘違いもありここではまったが
  さきほど 脱出。
<mx:Image width="75" height="75"
source="{data.Image}"/>

<mx:Text text="{data.Title}"/>

 ※ここも本当は変なことやっていて、少しはまり・・・

そして
おぉ!うまくいったようだ。
改造チュートリアル:テスト「AmazonAPI を実行」
 ※"PHP" と入れて検索・・・

  ▼

改造チュートリアル:テスト「AmazonAPI を実行」

**************************************************
【今回の最終ソース】
・AmazonTest.mxml
**************************************************
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundGradientColors="[0xFFFFFF,0xAAAAAA]"
horizontalAlign="left"
verticalGap="15" horizontalGap="15" xmlns:net="flash.net.*">

<mx:Script>
<![CDATA[
import mx.controls.Image;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;

import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;

[Bindable]
private function searchAmazon():void{
if(searchTerms.text==""||searchTerms.text==null)return;

var param:Object = new Object();
param.Service = "AWSECommerceService";
param.AWSAccessKeyId = "(私のAmazonアクセスID)";
param.AssociateTag = "(私のAmazonアフィリエイトID)";
param.ResponseGroup = "Medium";
param.Operation = "ItemSearch";
param.SearchIndex = "Books";
param.Keywords = searchTerms.text;
searchAmazonService.send(param);
}

private function searchResult(event:ResultEvent):void{
default xml namespace = new Namespace("http://webservices.amazon.com/AWSECommerceService/2005-10-05");

var xml:XMLList = XML(event.result)..Item;
var datas:Array=[];
var l:int = xml.length();
for(var i:int=0;i<l;i++){
var data:Object = {};

data.Title = xml[i]..Title[0]?xml[i]..Title[0].toString():"";
data.SmallImage = xml[i]..SmallImage.URL[0];
data.MediumImage = xml[i]..MediumImage.URL[0];
data.LargeImage = xml[i]..LargeImage.URL[0];
data.Image = (data.SmallImage?data.SmallImage:data.MediumImage);
datas.push(data);
}
if(datas.length>0){
resultTileList.dataProvider = datas;
}else{
resultTileList.dataProvider = [];
Alert.show("検索結果0件...");
}
}
private function searchFault(event:FaultEvent):void{

}

]]>
</mx:Script>

<mx:HTTPService id="searchAmazonService"
url="http://ecs.amazonaws.jp/onca/xml"
result="searchResult(event)" fault="searchFault(event)" resultFormat="e4x"/>

<mx:HBox width="100%">
<mx:Label text="さて、何をお探ししましょう?キーワードを入れてくださいませ!" width="272"/>
<mx:TextInput width="133" id="searchTerms"
enter="searchAmazon()" />
<mx:Button label="検索" click="searchAmazon()"/>
</mx:HBox>
<mx:TileList width="100%" height="100%" id="resultTileList"
itemRenderer="AmazonTestThumbnail">
</mx:TileList>
</mx:Application>


**************************************************
・AmazonTestThumbnail.mxml
**************************************************
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="125" height="125"
paddingBottom="5"
paddingLeft="5"
paddingTop="5"
paddingRight="5"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
horizontalAlign="center">
<mx:Image width="75" height="75"
source="{data.Image}"/>

<mx:Text text="{data.Title}"/>
</mx:VBox>


[ 1 ][ 2 ][ 3 ][ 4 ] 回へ
commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/497-553aa04f
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。