PHP を使ってすぐに Flash ムービーを作る

Ming ライブラリーで Flash ムービーを動的にビルドする

リッチ・インターネット・アプリケーションが Web 2.0 の新しい流行語となっていますが、Web 2.0 を支える実体のなかで鍵となるコンポーネントは Adobe Flash です。この記事で、Flash ムービーをアプリケーションに統合し、Ming ライブラリーを使って Flash ムービーを動的に作成する方法を学んでください。

Jack Herrington (jherr@pobox.com), Senior Software Engineer, Leverage Software

Jack D. Herringtonは、20 年以上の経験を持つシニア・ソフトウェア・エンジニアです。彼の著書には、『Code Generation in Action』、『Podcasting Hacks』、『PHP Hacks』の 3 冊があります。また、30 を超える記事も執筆しています。



2006年 12月 19日

Web 2.0 はリッチ・インターネット・アプリケーション (RIA) を約束するものですが、そもそも RIA とは一体何でしょう。RIA は概して、Web アプリケーションに機敏な対話性を追加することを意味します。具体的に言うと、サーバーから新しいページを取得することなく、ページ上で即座に変更するウィジェット、Web フォーム、そしてレポートということになります。

RIA を作成する方法として挙げられるのは、Ajax、JavaScript、CSS (Cascading Style Sheets)、HTML を組み合わせた動的 HTML (DHTML) を使用する方法です (「参考文献」を参照)。しかし、DHTML だけが Web アプリケーションに対話性を追加する方法ではありません。もう 1 つの主要な方法は、Adobe Flash Player を使用する方法で、10 年以上にわたって Web サイトに対話性を追加してきました。

Flash は最初のバージョンでは動画作成用のツールでしたが、新しいバージョンでは Web サービス・アクセスを制御するインターフェース全体をホストすることが可能で、ECMAScript (JavaScript の正式バージョン) による完全なスクリプト・サポートを提供します。

Flash について

Flash Player は、Microsoft® Windows®、Mac OS X、および Linux® を実行するコンピューター上の Web ブラウザーと一体化するプラグインです。この記事を書いている時点での Flash Player の最新バージョンは V8 です。これは無料で入手でき、ほとんどのブラウザーにインストールされています。その人気は極めて高く、クライアントにも広範に普及しています。この普及率に貢献したのは新たに登場した YouTube および Google Video などのサービスで、どちらもビデオ・ストリームに Flash を使用しています。

Flash Player は方程式の片割れでしかありません。Flash Player が機能するには Flash ムービーが必要です。このようなムービーはほとんどの場合、.swf ファイル拡張子が付いたファイルで、Flash のいずれかの開発ツールでコンパイルされています。ただしこの記事を読むとわかるように、Ming ライブラリーを使用すれば、Web サーバーで画像を動的に作成してグラフィックを作成するのと同じように .swf ファイルを動的に作成できます。Ming ライブラリーは PHP コードに作成したオブジェクトとメソッドから、新規 .swf ファイル内に op コードを作成します。

Web サイトの .swf ファイルを表示するには、2 つの方法があります。まず 1 つは、単純に .swf ファイルの URL にナビゲートする方法です。こうすると、Web サーバーのコンテンツ・エリア全体が Flash ムービーに置き換えられます。この方法はデバッグには便利ですが、主要な方法は HTML Web ページ内の <object> タグにムービーを組み込み、<object> タグに URL で SWF ムービーを参照させることです。この <object> を使用した方法の利点は、ページのどこにでもムービーを配置し、その他の要素とまったく同様に JavaScript コードで動的にムービーを制御できるところにあります。

リスト 1 に示しているのは、SWF ムービーを参照する <object> タグの一例です。

リスト 1. 組み込み Flash ムービー
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#
        version=6,0,40,0"
WIDTH="550" HEIGHT="400">
<PARAM NAME="movie" VALUE="lines.swf">
<EMBED src="lines.swf" WIDTH="550" HEIGHT="400"
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

上記のタグのセットは、lines.swf という名前のムービーを参照しています。内部 <embed> タグによって、Flash Player がインストールされている限り、この Flash ムービーがどんな種類のブラウザーでも再生されることが確実にされています。

また、上記のタグは Flash Player の高さと幅をそれぞれ 550 および 400 ピクセルに指定しています。ここで重要なのは、Flash ムービーのグラフィックはベクトルを基準にしているという点です。つまり、Flash コマンドを使って線とテキストを描画すると、これらの要素が座標として保存され、表示エリアのサイズに合わせて拡大縮小します。上記を見ておわかりのように、Flash ムービーには自由自在に使える独自の座標系があるため、必要に応じてコードを簡潔に保てます。


Ming

この記事で紹介する Flash ムービーの最初の使い方として、Ming ライブラリーを使って動的にムービーを作成します。Ming ライブラリーとは、SWF ムービー内のデータ型 (スプライト、形状、テキスト、ビットマップ等) にマッピングされるオブジェクトのセットを備えた PHP ライブラリーのことです。Ming を作成してインストールする方法はプラットフォームに固有で、それほど簡単でもないためここでは説明しません (「参考文献」を参照)。この記事では、PHP の Windows バージョン用に事前にコンパイルされた拡張 php_ming.dll ライブラリーを使用します。

断っておきますが、Ming はまだ開発中です。この記事の時点ではライブラリーのバージョンは V0.4 で、それより前のコマンドには V0.4 以降のバージョンで使用できないものがあります。この記事は V0.4 を使って書いているため、記載しているコードを使用するには V0.4 が必要です。

リスト 2 は、Ming ライブラリーを使用してインプリメントしたサンプル、HelloWorld です。

リスト 2.Hello.php
<?php
$f = new SWFFont( '_sans' );

$t = new SWFTextField();
$t->setFont( $f );
$t->setColor( 0, 0, 0 );
$t->setHeight( 400 );
$t->addString( 'Hello World' );

$m = new SWFMovie();
$m->setDimension( 2500, 800 );
$m->add( $t );

$m->save( 'hello.swf' );
?>

コマンド・ラインで上記のコードを実行すると、hello.swf ファイルが生成されます。このファイルを Web ブラウザーで開くと図 1 のように表示されます。

図 1. Ming を使用した HelloWorld サンプル
Ming を使用した HelloWorld サンプル

コードをもう一度見てみると、最初に組み込みフォントの 1 つ (_sans) へのポインターの作成、テキスト・フィールドの作成とフォント、色、サイズの設定、そしてテキスト・コンテンツ (「Hello World」) の指定という流れになっています。続いて SWFMovie オブジェクトを作成してそのサイズを設定し、最後にテキスト要素をムービーに追加して、ムービーをファイルに保存しています。

ファイルを直接作成するもう 1 つの方法として、save メソッドの代わりに以下のコードを使用して、ページの出力として SWF ムービーを出力することもできます。

header( 'Content-type: application/x-shockwave-flash' );
$m->output( );

このプロセスは、PHP 内の ImageMagick ライブラリーを使用してビットマップ・グラフィックを作成する方法と似ています。ここではすべての Ming サンプルに save メソッドを使いますが、どちらの方法を使用してもかまいません。


テキストに動きをつける

テキストを Flash ムービーに組み込んでも、それを動かすことができなければあまり意味がありません。そこで、リスト 3 に例を組み立ててみました。以下の例には 2 つのテキストがあります。一方は初め小さくて徐々に大きくなるテキストで、もう一方は静止したままのテキストです。

リスト 3. Text.php
<?php
$f = new SWFFont( '_sans' );

$pt = new SWFTextField();
$pt->setFont( $f );
$pt->setColor( 0, 0, 0 );
$pt->setHeight( 400 );
$pt->addString( '1000' );

$tt = new SWFTextField();
$tt->setFont( $f );
$tt->setColor( 192, 192, 192, 90 );
$tt->setHeight( 350 );
$tt->addString( 'Points' );

$m = new SWFMovie();
$m->setDimension( 2500, 800 );

$pts = $m->add( $pt );
$pts->moveTo( 0, 0 );

$tts = $m->add( $tt );
$tts->moveTo( 1300, 200 );

for( $i = 0; $i < 10; $i++ ) {
  $m->nextframe();
  $pts->scaleTo( 1.0 + ( $i / 10.0 ), 1.0 + ( $i / 10.0 ) );
}

$m->save( 'text.swf' );
?>

上記のコードをコマンド・ラインで実行すると、text.swf が生成されます。このファイルを Web ブラウザーで開くと表示されるのが、図 2 の画像です。

図 2. text.swf ファイル
text.swf ファイル

「1000」というテキストは最初の時点ではかなり小さく、サイズは 350 ポイントです。それから scaleTo() メソッドを使って 750 ポイントまで大きくします。このようにするため、ムービー・オブジェクトで nextframe() を使用しています。

この仕組みを理解するには、Flash が動画を作成する方法について多少の知識が必要です。Flash の動画は、映画の動きのようにフレームを基準にして機能します。つまり、グラフィック・スプライトはフレームごとにムービーを動かします。1 つの重要な違いは、Flash はフレームごとのスナップショットを使わないという点です。Flash では各フレームでスプライト・オブジェクトの状態を保存します。

お気付きかもしれませんが、上記のリストでは「1000」というテキストを持つ変数 $pt を使っています。$pt をムービーに追加すると、add() メソッドから $pts という新しいオブジェクトが戻されます。このオブジェクトは SWFDisplayItem で、該当スプライトのインスタンスを表します。これにより、このインスタンスをフレームごとにムービー上で動かせるようになります。少々複雑ですが、「1000」テキスト・スプライトまたは「points」テキスト・スプライトの複数バージョンを同時に動かすことも可能です。


グラフィックを描画する

次に、ベクトル・グラフィックを操作してみましょう。まず、フレームの左上から右下を結ぶ 1 つの単純な線から始めます。

リスト 4. Line.php
<?php
$m = new SWFMovie();
$m->setDimension( 300, 300 );

$s = new SWFShape();
$s->setLine( 10, 0, 0, 0 );
$s->movePenTo( 10, 10 );
$s->drawLineTo( 290, 290 );
$m->add( $s );

$m->save( 'line.swf' );
?>

上記のスクリプトをコマンド・ラインで実行して出力される .swf ファイルを表示すると、図 3 の画像になります。

図 3. 単純な線の描画
単純な線の描画

もちろんこれはかなりシンプルで、それほど面白いものではありません。そこで何をしたかと言うと、新しい SWFShape オブジェクトを作成してペンの動きと線を追加しました。そして、その形状スプライトをムービーに追加したわけです。

この画像をもっと面白いものにするため、テキストで行ったときと同じタイプのフレーム動画を使用します。ただし今回は、以下のコードを使ってムービーの中心を基準に線を回転させます。

リスト 5. 回転する線
<?php
$m = new SWFMovie();
$m->setDimension( 300, 300 );

$s = new SWFShape();
$s->setLine( 5, 0, 0, 0 );
$s->movePenTo( -100, -100 );
$s->drawLineTo( 100, 100 );
$ts = $m->add( $s );

$ts->moveTo( 150, 150 );

for( $i = 0; $i < 100; $i++ ) {
  $ts->rotate( 10 );
  $m->nextframe();
}

$m->save( 'rotate.swf' );
?>

上記では、-100, -100 から 100, 100 へ線を描画しています。つまり、線の中心は 0,0 座標に置かれます。このようにすると、形状を回転させるときに線の中心が回転軸となります。

この形状をムービーに追加するときには、フレームの中心に戻される SWFDisplayItem を動かします。次に、rotate() メソッドを使ってこれを回転させ、そのたびにフレームをインクリメントします。


画像を使用する

テキストとベクトル・グラフィックの基本 (線、円、円弧、曲線、四角など) も素晴らしいものですが、Flash ムービーの画像にアクセスできれば理想的です。ありがたいいことに、Ming ライブラリーを使うと画像も簡単に使用できるようになります。以下のリストを見てください。

リスト 6. 画像の使用
<?php
$img = new SWFBitmap( file_get_contents( 'megan.jpg' ) );

$s = new SWFShape();
$imgf = $s->addFill( $img );
$s->setRightFill( $imgf );
$s->movePenTo( 0, 0 );
$s->drawLineTo( $img->getWidth(), 0 );
$s->drawLineTo( $img->getWidth(), $img->getHeight() );
$s->drawLineTo( 0, $img->getHeight() );
$s->drawLineTo( 0, 0 );

$m = new SWFMovie();
$m->setDimension( $img->getWidth() * 2, $img->getHeight() * 2 );
$is = $m->add( $s );
$is->moveTo( $img->getWidth() / 2, $img->getHeight() / 2 );

for( $i = 0; $i < 10; $i++ )
{ 
$is->skewx( 0.02 );
$is->skewy( -0.03 );
$m->nextframe();
}

$m->save( 'image.swf' );
?>

上記のスクリプトをコマンド・ラインで実行し、ブラウザーに image.swf を表示すると、図 4 のようになります。

図 4. 生成された画像ムービー
生成された画像ムービー

上記のスクリプトではまず、ローカル .jpeg ファイルを読み取っています (この場合は私の娘、Megan の写真)。次に四角の形状を作成して、そこに画像を収めます。それから 10 のフレームでスキュー効果を使って、画像を少々動かしています。


ここから先の展開

この記事では、Ming ライブラリーで実行可能なことを表面的に触れただけです。ここでまだ紹介していない特徴の 1 つには対話機能があり、この機能では単純なスクリプトを要素に付け加えることができます。(対話性に関して言えば、あなたが非常に複雑な Flash ムービーを心に描いているのなら、Flash 開発ツールを使って Web アプリケーション内で Web サービスと対話する Flash ムービーを作成することも考慮できます。)

さらに複雑な Flash ムービーを作成する場合、別のオプションとして、 Adobe Flex や Laszlo などのオーサリング・ツールを使用することもできます。Adobe Flex と Laszlo にはどちらも Flash ムービーのユーザー・インターフェースをレイアウトするための XML 構文があり、インターフェースに対話性を提供する JavaScript を開発する近道となります。


XML Chart と XML Gauge

私が感心した Flash SWF は、maani.us で入手できる XML Chart と XML Gauge の 2 つです (「参考文献」を参照)。この 2 つのムービーは、PHPアプリケーションで XML ページを作成するだけで、Web サイトに動的ゲージとグラフを簡単に提供できます。

最初のステップとして、サイトから SWF をダウンロードします。次にダウンロードした SWF を Web ページの <object> タグに組み込み、XML データ・フィードの URL を指定します。コントロールに必要なフォーマットで XML をエクスポートする PHP を作成すると、これらのムービーの XML フォーマットがサイト上で見事に文書化され、このフォーマットを作成しやすくなります。


まとめ

Flash を使用すると、わかりやすい方法で Web アプリケーションに極めて高い対話性を追加することができます。始めは最近人気が出てきたウィジェット・スタイルのコントロールのような小さなもので使ってみてください。Ming、Flex、Laszlo の習得に時間をかける前に XML Chart と XML Gauge を使えば、このようなタイプの Flash ウィジェットを試してみるいい機会になります。どのように手をつけるにせよ、Flash について、そして Web 2.0 PHP アプリケーションの可能性と対話性を拡大するために Flash ができることについて、理解する価値はあります。

参考文献

学ぶために

  • Adobe SystemsFlash のあらゆる情報源です。
  • Ming ライブラリーについては PHP サイトに記載されています。
  • Rich Ajax slide shows with DHTML and XML」では、DHTML と Ajax を使ってスライドショーを作成する方法を紹介しています。
  • maani.us は XML Chart および XML Gauge のホーム・ページです。
  • ECMAScript 標準では、Flash ランタイムの言語インタープリターを説明しています。
  • IBM developerWorks の PHP project resources にアクセスして、PHP のスキルを向上させてください。
  • developerWorks ですべての PHP 関連記事を調べてください。
  • オープン・ソース技術を使用して開発し、IBM の製品と併用するときに役立つ広範囲のハウツー情報、ツール、およびプロジェクト・アップデートについては、developerWorks Open source ゾーンを参照してください。
  • developerWorks technical events and webcasts で最新情報を入手してください。
  • Safari Books Online では、オープン・ソース技術に関する豊富な資料を紹介しています。
  • developerWorks には、ソフトウェア開発者向けの興味深いポッドキャスト・インタービューと議論が記載されています。

製品や技術を入手するために

  • Laszlo Systems は Flash 用の Laszlo XML 言語を作成します。
  • Adobe Flex は、Adobe バージョンの Flash 用 XML 言語です。
  • Ming ライブラリーは SourceForge でホストされています。
  • IBM ソフトウェアの試用版を使用して、次のオープン・ソース開発プロジェクトを革新してください。ダウンロード、あるいは DVD で入手できます。

議論するために

  • developerWorks PHP Developer Forum は、PHP 開発者がさまざまな議題を話し合うための場所です。PHP のスクリプト、関数、構文、変数に関する質問、PHP のデバッグ、そして PHP 開発者に関係するあらゆる話題を投稿してください。
  • developerWorks blogs から developerWorks コミュニティーに加わってください。

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Open source, XML, Web development
ArticleID=237183
ArticleTitle=PHP を使ってすぐに Flash ムービーを作る
publish-date=12192006