web開発支援サイト
http://webyoutility.web.fc2.com/
今日はFlex３と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");
}
次回へつづくー
