Yama's Memorandum

Red5の利用：Flashファイルの作成とWPポスト上への埋め込み

前回、「CentOS上にRed5をインストール」を書いた。Red5を活用するには、Webあるいはブログページ上にRed5を介して配信される動画を埋め込むため仕組みが必要だ。この仕組みを提供するのがFlashファイル(swf)だ。swfはActionScriptで書いたコードをコンパイルして作成される。このエントリでは、ActionScriptコードの作成からコンパイル、そしてFlashファイル(swf)のWebページへの埋め込みに至る一連の手続きについてメモしてみた。

ActionScriptで作成したFleshファイルの埋め込み：　＠ITのサイトにActionScriptの解説記事「ActionScript入門」を見つけた。この解説記事、ActionScriptでFlashアプリケーションの作成方法を説明し、サンプルとして「福笑いFlashゲーム」のソースコードを提供（ダウンロード可能と）している。

ActionScriptとFlashについての基本を学ぶため、上記の解説記事に与えられているゲームをこのブログのポスト上で動作させてみることにした。この下に描画しているのが、この「福笑いFlashゲーム」の完成品だ。

このゲーム、Flashプレイヤーがプラグインされているブラウザ上で動作する。実際にゲームを実行し、動作することを確かめていただきたい。左上にある部品をドラッグすることにより「福笑いゲーム」を試すことができる。なお、ゲームの中身と詳細については、＠ITの解説記事を参照されたい。

以下、このゲームを完成させるまでの一連の手続きの概要を順を追って記述する。

ActionScript作成にはFlexSDKが必要：　ActionScriptは、JavaScriptなどのインタプリタ型言語でなく、コンパイル型の言語である。ActionScript言語で書かれたソースをコンパイルするには、当然のことながらコンパイラが必要だ。これは開発用キットFlexSDKに含まれており、Adobeから（無償で）ダウンロードすることができる。現在、最新版のFlexSDKとしてFlex3.3SDKが公開されている。

コンパイル環境を整えるには、まず、AdobeのダウンロードサイトにおいてFlex3.3SDKをダウンロードする。しかし、FlexSDKの利用の前提として、javaが動作する環境が必要だ。というのは、このFlex3.3SDKは、java上で動作するからだ。Javaのインストールについては、前回の「CentOS上にRed5をインストール」において、既に、記述した。

次に、ダウンロードしたFlex3.3SDK（flex_sdk_3.zip）を適当なディレクトリ配下で解凍してやる。私の場合、/opt配下にFlex用ディレクトリflx3sdkを作成し、ここに解凍、展開した。そして、ここで作成された/opt/flx3sdk/binにpathを通した。基本的には、ActionScriptのコンパイル環境の作成はこれだけで終了する。

簡単なActionScriptを作成してみる：　ActionScriptの開発環境が整っていることを確かめるため、簡単なActionScript（以下AS）ファイルを作成し、実際にコンパイルしてみた。

サンプルとしてsample.asなるファイルを作成した：

 package {
  import flash.display.*;
  import flash.text.*;

  public class sample extends Sprite {

      public function sample() {
          var textField:TextField = new TextField();
          textField.text = "Hello World!";
          addChild(textField);
      }
  }
}
        

これをコンパイルしてみる（ルート権限下でコンパイルしている）。

# mxmlc sample.as
設定ファイル "/opt/flx3sdk/frameworks/flex-config.xml" をロードしています
/directory/sample.swf (622 bytes)
        

swfobjectを用いたFlashファイルの埋め込み：　上記のコンパイル例でわかるように、ActionScriptのソースをコンパイルすると、Flashファイル(swf)が作られる。これをHTMLで書かれるWebページに埋め込むわけだ。Red5のパッケージのなかを見ると、Flashファイル(swf)をWebページに埋め込むのにswfobjectと呼ばれるJavaScriptライブラリが使われていることが分かる。このswfobjectライブラリの使用法については、「FlashをHTMLに貼るライブラリswfobject2を使う」に詳しく記述されている。

以前のエントリー「WPのPOST上でGoogle Visualization APIのサンプルを動かしてみた」でWordPressのポスト上でJavaScriptを動作させる方法について記述した。WPのポスト上でJavaScriptを動作させるのは比較的容易だ。

swfobject.jsをWSポストのエディタでHTML形式にて定義し、このライブラリに含まれるFlash埋め込みのためのメソッド embedswf()を用いればよい。このエントリのポスト上で実現するのにもちいたスクリプトが以下のコードだ。

 <script type="text/javascript" src="/Fukuwarai/assets/swfobject.js"></script>

<script type="text/javascript"> swfobject.embedSWF("/Fukuwarai/Lesson6_3.swf", "myContent", "400", "400", "8.0.0", "/Fukuwarai/assets/expressInstall.swf");
  </script>

<div id="myContent">
</div>
        

この例では、ブログのドキュメントルートにFukuwaraiというディレクトリを作成し、そのなかに＠ITの解説記事からダウンロードした「福笑いゲーム」のActionScriptコードをコンパイルした９つのswfファイルを配置し、このディレクトリ配下にswfobject.jsならびにexpressInstall.swfを配置するディレクトリassetsを作成している。なお、assetsのなかに配置したswfobject.js、expressInstall.swfはRed5のパッケージに含まれていたものをそのまま使用した。

なお、ここに含まれているexpressInstall.swfについては、特には議論しないが、Adobeサイトの「ラクラクかんたん！FlashVideo組み込み手法」に記述されている。参照されたい。

まとめ：　以上、我がブログのポスト上にFlashファイルを埋め込む方法を通じて、Red5から配信される動画を受けるためにクライアント側で必要となるActionScriptの作成、さらにはそのブログ、Webページ上へのFlashファイルの埋め込みについて、その概要をメモした。

クライアントのブラウザ上でRed5サーバーと動画・映像を送受信するためには、クライアント・サーバー間の通信などの諸機能をActionScriptでコーディングし、このエントリで記述した手続きでHTMLに埋め込むこと、そして当然のこのながらｒｔｍｐ通信を可能にする環境を整えればよい。