この記事は、外部デベロッパーが作成して送信したものです。YouTube API チームは、Ben Longoria 氏に貴重な時間と専門知識を提供していただきましたことを感謝いたします。
Ben Longoria、ウィスコンシン大学マディソン校、アカデミック テクノロジー
2009 年 2 月
はじめに
図 1: TubeLoc Chromeless Player のデモ
参りました。本稿執筆時点で、YouTube Player API はリリースから 1 年が経過しようとしています。インターネットの年数に換算すると、この API に基づいて構築された優れたプロジェクトが数多くあります。YouTube Developer API ブログをフォローするだけで、この API を活用して素晴らしい成果を上げているデベロッパーが多数いることがわかります。
現在の YouTube API プレーヤー アプリケーションは ActionScript 2 で記述されていますが、これは引き続き優れた言語ですが、多くのユーザーが ActionScript 3 や Flex を使用しています。問題は、ActionScript 2 アプリケーションと ActionScript 3 アプリケーションを通信させるために、いくつかのハードルを飛び越えなければならないことです。「でも、これは以前聞いたことがあるような...すでに何か対応策があるんじゃないの？」と思われるかもしれません。
すでに多くのデベロッパーがこの方法を把握し、YouTube API デベロッパー フォーラムでその知恵を共有しています。また、デベロッパーが簡単に使用できるように、AS3 Chromeless Wrapper プロジェクトと Flex Embedded Player プロジェクトも用意されています。
ActionScript 3 または MXML でのみ Player API 機能を再利用する簡単な方法を探していました。Flex が苦手なプロジェクト向けの Flex フリーのクラスと、Flex を愛するプロジェクト向けの使いやすい Flex コンポーネント。TubeLoc は両方の要件を満たしています
TubeLoc（YouTube と LocalConnection のマッシュアップ）は、YouTube ActionScript 2 Player API のアダプターとして機能する ActionScript 3 ライブラリです。フル クロームまたはクロームレスの YouTube プレーヤーを使用して、ActionScript 3 または Flex アプリケーションに YouTube 動画機能を簡単に追加できます。TubeLoc は、ActionScript 2 メディエーター SWF との通信に LocalConnection クラスを使用します。ActionScript 2 SWF は、公式の YouTube API プレーヤーと通信します。では、このツールはどのように使うのでしょうか。
現状
まず、Google Code プロジェクトからライブラリの最新リリースをダウンロードする必要があります。リリース zip アーカイブを解凍すると、as3 ディレクトリが見つかります。その下に、サンプルクラスがいくつか含まれる src ディレクトリがあります。これらを参考にして、src ディレクトリの com/enefekt/tubeloc には 2 つのファイルがあります。Movie.as は Flex プロジェクトで使用でき、MovieSprite.as は ActionScript 3 プロジェクトで使用できます。com/enefekt/tubeloc/event には、プレーヤーから送信できるさまざまな通知に対応するさまざまなイベントクラスがあります。
このチュートリアルの例を試す前に、as3 ディレクトリの src ディレクトリがクラスパスにあることを確認してください。この手順は、開発に使用するツールによって異なるため、開発環境のドキュメントをご確認ください。
デモまたはアプリケーションをコンパイルしたら、YouTube Player API と通信する ActionScript 2 SWF が必要になります。この SWF は、リリース アーカイブ（as3/lib/as2_tubeloc.swf）にあります。SWF アプリケーションを埋め込む HTML ファイルの横に配置します。
my_app/ my_app.html as2_tubeloc.swf my_app.swf
注: この SWF へのパスは、ライブラリの playerWrapperUrl プロパティを使用して変更できます。
Movie.as を使用する
次に、TubeLoc の Flex バージョンの使用方法について説明します。まず、フル クローム プレーヤー（すべてのコントロールを含む）について説明します。次に、BYOC クロムレス プレーヤーについて説明します。MXML でフル クローム プレーヤーを使用する方法は次のとおりです。
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
わかります。辛いですよね。まったく何も知りませんでした。では、思い切って Chromeless にしましょう。
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
これで、もう 1 つの属性が追加され、さらに面倒になりました。したがって、MXML ファイル全体は次のようになります。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:tubeloc="com.enefekt.tubeloc.*"> <!-- TubeLoc Movie Component --> <tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" /> </mx:Application>
注: mx:Application 要素で、Movie コンポーネントのパッケージに tubeloc Namespace を追加します。これで、コンポーネントをデモのように使用できるようになります。後ほど、このコンポーネントで設定および呼び出せる内容について説明します。
MovieSprite.as を使用する
次に、ActionScript 3 バージョンの TubeLoc の使用方法について説明します。このバージョンでは、Flex フレームワークのクラスは必要ありません。Flash Player ネイティブ クラスのみを使用します。まず、フル クローム プレーヤーの作成方法を説明します。次に、クロムレス プレーヤーの作成方法を説明します。以下に完全な例を示します。
package {
import flash.display.Sprite;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import com.enefekt.tubeloc.MovieSprite;
import com.enefekt.tubeloc.event.*;
[SWF(backgroundColor="#FFFFFF")]
public class MainChromed extends Sprite {
private var youtubeMovie:MovieSprite;
public function MainChromed() {
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
youtubeMovie = new MovieSprite("7tTNOX8jfno");
youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
youtubeMovie.x = 10;
youtubeMovie.y = 10;
addChild(youtubeMovie);
}
private function onPlayerReady(event_p:PlayerReadyEvent):void {
youtubeMovie.width = 640;
youtubeMovie.height = 480 + MovieSprite.CHROME_HEIGHT;
}
}
}
まず、必要な TubeLoc クラスをインポートします。次に、コンストラクタで MovieSprite クラスのインスタンスを作成し、動画 ID を MovieSprite のコンストラクタに渡します。次に、PlayerReadyEvent のイベント リスナーを追加します。onPlayerReady イベント ハンドラで、動画のサイズを設定します。注: フル クローム プレーヤーを使用しているため、MovieSprite クラスの静的プロパティ CHROME_HEIGHT を利用しています。これにより、クロムの高さを考慮してムービーのサイズを調整できます。
では、クロムレス プレーヤーはどうでしょうか？
package {
import flash.display.Sprite;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import com.enefekt.tubeloc.MovieSprite;
import com.enefekt.tubeloc.event.*;
[SWF(backgroundColor="#FFFFFF")]
public class MainChromeless extends Sprite {
private var youtubeMovie:MovieSprite;
public function MainChromeless() {
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
youtubeMovie = new MovieSprite(null, true);
youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
youtubeMovie.x = 10;
youtubeMovie.y = 10;
addChild(youtubeMovie);
}
private function onPlayerReady(event_p:PlayerReadyEvent):void {
youtubeMovie.width = 640;
youtubeMovie.height = 480;
youtubeMovie.loadVideoById("7tTNOX8jfno");
}
}
}
では、どのような違いがあるのでしょうか。コンストラクタでは、動画 ID として null を渡します。2 つ目の true パラメータは、Chromeless に移行することを MovieSprite クラスに伝えます。また、onPlayerReady イベント ハンドラにも違いがあります。ここでは、loadVideoById メソッドを使用して ID で動画を読み込みます。
何を呼び出せますか？
では、呼び出せるイベントと、処理する必要があるイベントは何ですか？ダウンロードしたリリース アーカイブには、詳細を確認できるコードのドキュメントが含まれています。概要として、Movie.as と MovieSprite.as の両方に次のメソッドがあります。
seekTo(seconds:Number, allowSeekAhead:Boolean=true):void setVolume(volume:Number):void getVolume():Number unMute():void mute():void clearVideo():void setSize(width:Number, height:Number):void loadVideoById(videoId:String, startSeconds:Number = 0):void [Chromeless player only] cueVideoById(videoId:String, startSeconds:Number = 0):void [Chromeless player only] stopVideo():void playVideo():void pauseVideo():void destroy():void
これらのメソッドに加えて、Movie.as コンポーネントでは次のプロパティにアクセスできます。
playerReady:Boolean chromeless:Boolean videoId:String stateDescription:String currentTime:Number duration:Number videoUrl:String videoEmbedCode:String volume:Number
サブスクライブできるイベントは次のとおりです。詳しくは、ドキュメントをご覧ください。
onError onStateChange onMovieStateUpdate onMovieProgress onPlayerReady onPlayerUnload
まとめ
この記事が、YouTube の機能とコンテンツを Flash アプリケーションに統合するうえで役に立ったとしたら幸いです。TubeLoc で開発する際には、ステージに 2 つの YouTube プレーヤーを同時に配置できないという制限に注意してください。
今後、この問題は解消される予定です。バグや機能の不足を見つけた場合は、Google Code プロジェクトにアクセスして、バグトラッカーで報告してください。最後までお読みいただきありがとうございました。
著者のプロフィール
Ben Longoria は、ウィスコンシン大学マディソン校のアカデミック アプリケーション デベロッパーです。Flash 5 以降、Flex 2 のリリース以降、Flash と Flex の開発に携わっています。過去 2 年間は、Mozilla をベースとしたアプリケーションの開発も行っています。Ben は、ブラウザとデスクトップの両方を対象としたクロスプラットフォーム アプリケーションなど、教育および学術プロジェクトに携わってきました。インターフェースとインタラクションの設計に積極的に取り組んでおり、使いやすいソフトウェアを作成することに喜びを感じています。彼のブログは http://enefekt.com/sansbrowser/ でご覧いただけます。また、InsideRIA に寄稿した記事もご覧いただけます。
このコンテンツは、クリエイティブ・コモンズ表示 3.0 米国ライセンスにより使用許諾されています。