Flash ActionScript2.0 実践講座5:YouTube APIをFlashから使う

本日の予定

今週はいよいよ、外部WebサービスのAPIをFlashから呼びだして利用してみます。今回はYouTubeのサービスを利用してYouTubeの独自のインターフェイスをFlashで構築してみましょう。

完成イメージ

FlaTube ver 0.1

本日のスライド

サンプルファイル

目次

今日の内容

Flash + YouTube

Flash + YouTube

APIとは?

Web API

従来のプログラミングとWeb APIの比較

Web APIと従来のプログラミングの比較

YouTube Developper APIs

YouTube API

YouTube APIの利用方法

利用可能なAPIの機能

RESTインターフェイスを用いた、データの取得方法

“youtube.videos.list_by_tag”の仕様

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);
	}
}

Comments

コメントはありません

Add Comment

このアイテムは閉鎖されました。このアイテムへのコメントの追加、投票はできません。

トップページに戻る