<< FlashOOP詳細(4):アプリケーションフレームワーク、XMLデータの読み込み | top | 第1回、個人制作プレゼンテーション >>
Flash ActionScript2.0 実践講座5:YouTube APIをFlashから使う
本日の予定
今週はいよいよ、外部WebサービスのAPIをFlashから呼びだして利用してみます。今回はYouTubeのサービスを利用してYouTubeの独自のインターフェイスをFlashで構築してみましょう。
完成イメージ
本日のスライド
サンプルファイル
目次
今日の内容
Flash + YouTube
- FlashからYouTubeのAPIを利用してみる!
- 先週のXMLの読み込みの応用
- YouTubeのAPIをFLashから利用する
Flash + YouTube
APIとは?
- Application Program Interface
- あるプラットフォーム(OSやミドルウェア)向けのソフトウェアを開発する際に使用できる命令や関数の集合のこと
- 個々の開発者は規約に従ってその機能を「呼び出す」だけで、自分でプログラミングすることなくその機能を利用したソフトウェアを作成することができる
Web API
- Web上にあるサービスをプログラムから利用するための窓口
- 自分で作成するプログラムに、最新のWebサービスの機能を取り込んで、組みあわせていくことが可能となる
- 代表的なWeb API
- Google (Web APIs, AdSense API, Google Maps API)
- Yahoo
- Amazon
- Flickr
- YouTube
- はてな
従来のプログラミングとWeb APIの比較

YouTube Developper APIs

- http://www.youtube.com/dev
- YouTubeに関する様々な機能を、APIとして提供している
- 利用するには、Developper IDの取得が必要
YouTube APIの利用方法
- YouTubeで公開しているAPIをhttp経由で呼び出す
- 全ての応答は、必要な情報をXML形式に整形されている
- APIのインターフェイスとして、2種類提供されている
- 今回はREST版のインターフェイスを利用してサンプルを作成していきます
利用可能なAPIの機能
- ユーザ情報
- youtube.users.get_profile //登録情報
- youtube.users.list_favorite_videos //お気に入りムービーリスト
- youtube.users.list_friends //お友達リスト
- ムービー情報
- youtube.videos.get_details //個別のムービーの詳細情報
- youtube.videos.list_by_tag (now with paging) //タグ検索
- youtube.videos.list_by_user //ユーザ検索
- youtube.videos.list_featured //おすすめムービーリスト
RESTインターフェイスを用いた、データの取得方法
- 下記のURLにパラメータを付加してアクセスする
- 例えば、お薦めのムービーリストをAPIを通じて取得したい場合
- Webブラウザで上記のアドレスにアクセスすると(dev_idには正しいDevelopper IDが必要)、XMLファイルが表示されるはず
http://www.youtube.com/api2_rest
http://www.youtube.com/api2_rest ?method=youtube.videos.list_featured&dev_id=xxxxxxx
“youtube.videos.list_by_tag”の仕様
- 必要となるパラメータ
- method:youtube.videos.list_by_tag
- dev_id:デベロッパーID
- tag:検索するタグ
- page(オプション):表示するページ数
- per_page(オプション):1ページに表示する検索結果の数
- 応答のサンプル
http://www.youtube.com/api2_rest? method=youtube.videos.list_by_tag&dev_id=xxxxxxx &tag=YouTube&page=1&per_page=16
FlaTubeクラス
// FlaTube :
// YouTube APIをFlashから利用するための簡単なサンプル
// 2006/10/14, 田所淳 (http://yoppa.org/)
//GUIコンポーネントのクラスパス
import mx.controls.*;
//XmlParserのクラスパス
import org.yoppa.flatube.XmlParser;
//FlaTubeクラス開始
class org.yoppa.flatube.FlaTube {
//デベロッパーID
private static var DEV_ID:String = "k03Nk18nOnI";
//1画面に表示するサムネイル数
private static var PER_PAGE:Number = 36;
//このオブジェクトのターゲットパス
private var target_mc:MovieClip;
//GUIコンポーネントの要素
private var searchLabel:Label;
private var searchInput:TextInput;
private var searchButton:Button;
private var newSearchButton:Button;
private var nextButton:Button;
private var prevButton:Button;
private var movieCloseButton:Button;
//現在のページ数
private var pageNum:Number;
//サムネールの土台のムービークリップのリスト
public var thumbMcList:Array = new Array();
//コンストラクタ
public function FlaTube(target:MovieClip) {
//このムービーのターゲットパス
target_mc = target;
//今のページを1に
pageNum = 1;
newSearch();
}
//新規サーチワード入力
private function newSearch():Void {
//このオブジェクトへのリンク
var thisObj:FlaTube = this;
//サーチのラベル
searchLabel = target_mc.createClassObject(mx.controls.Label, "searchLabel", target_mc.getNextHighestDepth(), {text:"Search by tag"});
searchLabel.move(10, 20);
searchLabel.setSize(80, searchLabel.height);
//サーチのテキスト入力
searchInput = target_mc.createClassObject(mx.controls.TextInput, "searchArea", target_mc.getNextHighestDepth());
searchInput.setSize(150, searchInput.height);
searchInput.move(searchLabel._x+searchLabel.width+5, searchLabel._y);
//サーチ実行ボタン
searchButton = target_mc.createClassObject(mx.controls.Button, "searchButton", target_mc.getNextHighestDepth(), {label:"Go!"});
searchButton.setSize(80, searchButton.height);
searchButton.move(searchInput._x+searchInput.width+5, searchInput._y);
searchButton.clickHandler = function(e:Object):Void {
thisObj.pageNum = 1;
thisObj.beginSearch();
};
//サムネイルの土台を表示
createThumbBase();
//再検索ボタン
newSearchButton = target_mc.createClassObject(mx.controls.Button, "searchButton", target_mc.getNextHighestDepth(), {label:"New Search"});
newSearchButton.setSize(80, 20);
newSearchButton.setStyle("fontSize", 10);
newSearchButton.move(10, 640);
newSearchButton.clickHandler = function(e:Object):Void {
thisObj.searcgAgain();
};
//次のページ
nextButton = target_mc.createClassObject(mx.controls.Button, "nextButton", target_mc.getNextHighestDepth(), {label:"next >"});
nextButton.setSize(80, 20);
nextButton.setStyle("fontSize", 10);
nextButton.move(Stage.width-nextButton.width-10, newSearchButton._y);
nextButton.clickHandler = function(e:Object):Void {
thisObj.showNextPage();
};
//前のページ
prevButton = target_mc.createClassObject(mx.controls.Button, "prevButton", target_mc.getNextHighestDepth(), {label:"< prev"});
prevButton.setSize(80, 20);
prevButton.setStyle("fontSize", 10);
prevButton.move(nextButton._x-prevButton.width-5, newSearchButton._y);
prevButton.clickHandler = function(e:Object):Void {
thisObj.showPrevPege();
};
}
//検索ワード再設定
private function searcgAgain():Void {
for (var i:Number = 0; i<PER_PAGE; i++) {
thumbMcList[i].thumb_mc.removeMovieClip();
}
searchInput.text = "";
searchButton.visible = true;
}
//検索開始
private function beginSearch():Void {
//サムネイルの土台を初期化
createThumbBase();
//XMLファイルを読みこむためのクラスをインスタンス化
var list = new XmlParser();
//XMLファイルを読みこんで、showThumb関数をコールバック
list.list_by_tag(searchInput.text, PER_PAGE, pageNum, DEV_ID, showThumb, this);
}
//サムネイル表示スペースをタイル状に並べる
private function createThumbBase():Void {
for (var i:Number = 0; i<PER_PAGE; i++) {
var thumb_mc:MovieClip = target_mc.attachMovie("thumbBase_mc", "thumb_mc"+i, i);
thumbMcList.push(thumb_mc);
if (i == 0) {
thumbMcList[i]._x = 10;
thumbMcList[i]._y = 50;
} else {
thumbMcList[i]._x = thumbMcList[i-1]._x+130;
thumbMcList[i]._y = thumbMcList[i-1]._y;
if (thumbMcList[i]._x>Stage.width-130) {
thumbMcList[i]._x = 10;
thumbMcList[i]._y = thumbMcList[i-1]._y+97;
}
}
}
}
//サムネールのロード
private function showThumb(listByTagObj:Object):Void {
var thisObj:FlaTube = this;
for (var i:Number = 0; i<PER_PAGE; i++) {
var mclListener:Object = new Object();
//var loading_mc:MovieClip;
var thumb_mc:MovieClip;
thumb_mc = thumbMcList[i].createEmptyMovieClip("thumb_mc", thumbMcList[i].getNextHighestDepth());
mclListener.onLoadStart = function(this_mc:MovieClip) {
};
mclListener.onLoadInit = function(this_mc:MovieClip) {
this_mc._width = 130;
this_mc._height = 97;
this_mc.url = listByTagObj.urlList[this_mc._parent.getDepth()];
this_mc.id = listByTagObj.idList[this_mc._parent.getDepth()];
this_mc.onRelease = function():Void {
//thisObj.showMovie(this_mc.id);
getURL("http://www.youtube.com/watch?v="+this_mc.id, "_blank");
};
};
var image_mcl:MovieClipLoader = new MovieClipLoader();
image_mcl.addListener(mclListener);
image_mcl.loadClip(listByTagObj.thumbnailUrlList[i], thumb_mc);
}
//ボタンの表示or非表示の設定
newSearchButton.visible = true;
nextButton.visible = true;
prevButton.visible = true;
if (pageNum<2) {
prevButton.enabled = false;
} else {
prevButton.enabled = true;
}
if (listByTagObj.thumbnailUrlList.length<PER_PAGE) {
nextButton.enabled = false;
} else {
nextButton.enabled = true;
}
}
//サムネイル一覧、次のページ
public function showNextPage():Void {
pageNum++;
beginSearch();
}
//サムネイル一覧、前のページ
public function showPrevPege():Void {
pageNum--;
beginSearch();
}
}
XmlParserクラス
// FlaTube - List By Tag
// タグをキーにして、YouTube内のビデオを検索
// 2006/10/14, 田所淳 (http://yoppa.org/)
// ----
class org.yoppa.flatube.XmlParser {
private var url:String;
//XMLデータを外部ファイルから読み込む
public function list_by_tag(tag:String, per_page:Number, page:Number, devId:String, callFunc:Function, callObj:Object):Void {
//URLを設定
url = "http://www.youtube.com/api2_rest?method=youtube.videos.list_by_tag&dev_id="+devId+"&tag="+tag+"&per_page="+per_page+"&page="+page;
//XMLオブジェクトを作る
var listByTagXml:XML = new XML();
//空白行を無視する
listByTagXml.ignoreWhite = true;
//読み込み完了のイベントハンドラ
listByTagXml.onLoad = function(success:Boolean) {
if (success) {
//読み込みに成功 → XMLの解析開始
//コールバック用オブジェクトの初期化
var listByTagObj = new Object();
//ルートノードの定義
var rootNode = this.firstChild;
var authorList:Array = new Array();
var idList:Array = new Array();
var descriptionList:Array = new Array();
var tagList:Array = new Array();
var titleList:Array = new Array();
var urlList:Array = new Array();
var thumbnailUrlList:Array = new Array();
//videolistノード内をパース
for (var aNode = rootNode.firstChild.firstChild; aNode != null; aNode=aNode.nextSibling) {
//vieoノード内をパース
for (var aaNode = aNode.firstChild; aaNode != null; aaNode=aaNode.nextSibling) {
//ノードネームで解析
switch (aaNode.nodeName) {
case "author" :
authorList.push(aaNode.firstChild.nodeValue);
break;
case "id" :
idList.push(aaNode.firstChild.nodeValue);
break;
case "title" :
titleList.push(aaNode.firstChild.nodeValue);
break;
case "description" :
descriptionList.push(aaNode.firstChild.nodeValue);
break;
case "tags" :
tagList.push(aaNode.firstChild.nodeValue);
break;
case "url" :
urlList.push(aaNode.firstChild.nodeValue);
break;
case "thumbnail_url" :
thumbnailUrlList.push(aaNode.firstChild.nodeValue);
break;
}
}
listByTagObj.authorList = authorList;
listByTagObj.idList = idList;
listByTagObj.titleList = titleList;
listByTagObj.descriptionList = descriptionList;
listByTagObj.tagList = tagList;
listByTagObj.urlList = urlList;
listByTagObj.thumbnailUrlList = thumbnailUrlList;
}
//解析完了後、解析結果weatherObjをコールバックする
callFunc.call(callObj, listByTagObj);
} else {
//XMLの取得に失敗
//エラー処理を行う場合はここから呼び出す
trace("XMLの取得に失敗");
}
};
//(ローカルの)XMLファイルの読み込みを実行する
listByTagXml.load(url);
}
}
<< FlashOOP詳細(4):アプリケーションフレームワーク、XMLデータの読み込み | top | 第1回、個人制作プレゼンテーション >>


Comments
コメントはありません
Add Comment
トップページに戻る