新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


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

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


今日はFlex3とYouTubeのAPIを使用して、YouTubeの画像検索RIAを開発したいと思います。


難しいんじゃないかなあ…と思いましたが意外と簡単にできるもんです。
さすがFlex!!



ちなみに仕様はこんな感じです。
・キーワードを入力できる
・検索するとサムネイル画像が表示される
・画像をダブルクリックすると、指定したYouTube動画をFlex上で再生できる



使用する主なコンポーネントは
・TextInput キーワード入力
・Button 検索ボタン
・TileList サムネイル画像表示
・player 動画再生



まず、だいたいの形を書いてみました

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:ApplicationControlBar width="100%">
<mx:TextInput/>
<mx:Button label="youtube search"/>
</mx:ApplicationControlBar>
<mx:HDividedBox width="100%" height="100%">
<mx:TileList width="100%" height="100%"></mx:TileList>
</mx:HDividedBox>
</mx:Application>



■ApplicationControlBar
グローバルナビゲーションやアプリケーションコマンドのコンポーネントを保持するコンテナ

■HDividedBox
HBox コンテナと同様に子を水平にレイアウトしますが、それぞれの子の間にはドラッグ可能な仕切りが挿入されます。仕切りをドラッグすると、各子に割り当てられる領域のサイズを変更できます



次にボタンクリック時の動作を設定します
・スクリプトの記述

<mx:Script>
<![CDATA[
import mx.controls.Alert;
public function send_request():void {
Alert.show(keyword.text);
}
]]>
</mx:Script>


・TextInputに id="keyword"を設定
・Buttonに click="send_request()"を設定



これにより、TextInoutに入力されたデータがButtonクリックによって出力されていることがわかります。




次にYouTubeのAPIを利用して、画像のサムネイルを表示してみましょう。

Youtubeのキーワード検索をする場合は
http://gdata.youtube.com/feeds/api/videos?vq=[検索キーワード]

と設定する事により、XMLが取得できます。

実際にブラウザでアクセスしてみるとXML画取得できる事がわかります。

Flex上でYouTubeのAPIにアクセスするには以下のクラスを使用します



■HTTPService
HTTPService オブジェクトの send() メソッドを呼び出すと、指定した URL に対して HTTP 要求が実行され、HTTP 応答が返されます。
指定する URL にパラメータを渡すこともできます。
サーバーベースのプロキシサービスを経由しない場合は、HTTP GET メソッドまたは POST メソッドだけを使用できます。


次のように取得してみました

<mx:HTTPService
id="youtubeapi"
url="http://gdata.youtube.com/feeds/api/videos"
method="GET"
result="youtubeapi_result(event)" />




次に先ほど作成したスクリプトのsend_request()メソッドにAPIへリクエストをする処理を加えます。
※Alert()は削除しましょー

import mx.rpc.events.ResultEvent;
import mx.controls.Alert;
public function send_request():void {
  var uv:URLVariables = new URLVariables;
  uv.vq = keyword.text;
  youtubeapi.request = uv;
  youtubeapi.send();
}





■youtubeapi.result
URL に渡すパラメータとして使用される、名前と値のペアのオブジェクトです。

■youtubeapi.send()
HTTPService 要求を実行します。

■URLVariables
Flashアプリケーションとサーバーの間で転送するための変数を設定できます




これにより入力されたキーワードをAPIへ送信できます。





また、FlexからYouTubeAPIにリクエストを受け取るために以下のメソッドを加えます

public function youtubeapi_result(event:ResultEvent):void {
  Alert.show("get youtube result");
}





次回へつづくー
スポンサーサイト

テーマ:Adobe Flex3 - ジャンル:コンピュータ

<<山本モナがまた不倫!? | ホーム | Dragon Ash降谷建志とMEGUMIが入籍 >>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://kanamehackday.blog17.fc2.com/tb.php/85-8faed25d
この記事にトラックバックする(FC2ブログユーザー)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。