OpenLaszlo: Flashならではの表現力 - OpenLaszloのSWFコンパイル

ページオプション JavaScript を要するドキュメントオプションは表示されません サンプルコード

レベル: 中級

十河 学 (togawamanabu@gmail.com), 開発者, (株)ネットエイト所属

2007年 11月 02日

2回目の記事でOpenLaszlo4を使って一つのソースコードからSWFとDHTMLの両方を出力させる方法がわかっていただけたでしょうか。今回はブラウザに搭載されたJavascriptでは表現できない機能をswfコンパイルを使うことで実現する方法を紹介したいと思います。ここではフォントの埋め込み、画像やフォントの回転、プログラムによる描画といった表現力の向上と、ビデオ、オーディオのストリーミング機能を使ったビデオ配信やweb会議システムの構築などリッチメディアを扱う方法をオープンソースのストリーミングサーバーRed5を使って作成する方法を説明します。

3.1. はじめに

2回目の記事でOpenLaszlo4を使って一つのソースコードからSWFとDHTMLの両方を出力させる方法がわかっていただけたでしょうか。今回はブラウザに搭載されたJavascriptでは表現できない機能をswfコンパイルを使うことで実現する方法を紹介したいと思います。ここではフォントの埋め込み、画像やフォントの回転、プログラムによる描画といった表現力の向上と、ビデオ、オーディオのストリーミング機能を使ったビデオ配信やweb会議システムの構築などリッチメディアを扱う方法をオープンソースのストリーミングサーバーRed5を使って作成する方法を説明します。
なお記事中のLZXのコードは一部しか示していませんが、ソースコードと実行サンプルへリンクがありますので併せてそちらもご参照ください

3.2. swf出力で表現力を向上

LZX言語の中でもswfコンパイルのみに対応している表現を紹介します。これらの機能を使ったままDHTMLでコンパイルするとコンパイル時にワーニングが表示されます。

3.2.1. フォントの埋め込みと文字、画像の回転。

まずはフォントの埋め込みと、画像や文字の回転を使ったサンプルアプリケーションです。

実行サンプル:http://www.openlaszlo.jp/lps-4.0.3/ibm_devworks/font_rotation_sample.lzx?lzt=html
ソースコード:http://www.openlaszlo.jp/lps-4.0.3/ibm_devworks/font_rotation_sample.lzx?lzt=source

ここではフリーフォントFerroRossoをswfに埋め込みタイトルを表示しています。ブラウザではCSSのfont-familyを使ってフォントを指定することはできますが、ローカルに存在するフォントしか正しく表示できませんので、任意のフォントを表示させるには画像として書く出す必要がありました。swfでは次のコードのように<font>を使って任意のttfファイルを指定してテキストを表示することができます。

                
<font name="MyFont" src="FerroRosso.ttf"/>
<text font="MyFont" fontsize="30">OpenLaszlo Sample1</text>

画像やフォントの回転は次のようにrotaionプロパティに0から360度までの角度を指定するだけです。

テキストを回転させるには上記の方法でフォントを埋め込んでおく必要があります。

                
<view resource="http://ec1.images-amazon.com/images/I/11oueWNh8PL.jpg" rotaion="90" />

3.2.2. drawviewを使ったベクター描画

swfではベクター描画をサポートしています。ベクター画像はビットマップ画像のようにドットで画像情報をもつのではなく、数値で表されるるベクタ情報を使って描画します。そのため拡大、縮小しても画像がなめらかという特徴があります。ブラウザでもSVGと呼ばれるベクター画像形式が標準でサポートされつつありますがまだ一般的に普及しているとは言えません。

OpenLaszloでは<drawview>と定義されたビューの中で、直線、曲線、グラデーションなどを使いプログラムから描画することができます。またswf形式のベクター画像を表示させることができます。

次のサンプルではマウスのドラッグによって楕円を描画するプログラムを作成しています。

実行サンプル:http://www.openlaszlo.jp/lps-4.0.3/ibm_devworks/drawview_sample.lzx?lzt=html
ソースコード:http://www.openlaszlo.jp/lps-4.0.3/ibm_devworks/drawview_sample.lzx?lzt=source

楕円を描くには次のように<drawview>内でoval()を使って楕円を指定し、線の太さや色を指定した上でstoroke()コマンドを呼び出します。

直線や長方形、ベジェ曲線など他のメソッドはリファレンスマニュアルのdrawviewを参照ください。

                
<drawview width="300" height="300">
<handler name="oninit">
this.oval(50, 50, 60, 30);
this.strokeStyle = 0xff0000;
this.lineWidth = 2;
this.stroke();
</handler>
</drawview>

上に戻る

3.3. リッチメディアを扱う

swfならではの機能として、mp3を使った音楽や効果音の再生と、オーディオやビデオのストリーミング、クライアントのwebカメラやマイクと使ってビデオチャットを作成する方法を紹介します。

3.3.1. 音楽、効果音の再生

swfではmp3を再生できますので、音楽や効果音を簡単に追加することができます。

実行サンプル(※リンク先で音楽が再生されます）:http://www.openlaszlo.jp/lps-4.0.3/ibm_devworks/mp3_sample.lzx?lzt=html
ソースコード:http://www.openlaszlo.jp/lps-4.0.3/ibm_devworks/mp3_sample.lzx?lzt=source

swfファイルにmp3を埋め込まずプログレッシブダウンロード方式でmp3を再生するには次のように記述します。

                
<view resource="http:filename.mp3">
<button text="Play" onclick="parent.play(1)" />
<button text="Stop" onclick="parent.stop()" />
</view>

効果音などの小さなmp3ファイルをアクションと同時に再生させたい場合は次のように<resource>をつかってswfファイルに埋め込むことができます。

                
<resource name="don" src="donsound.mp3" />
<button text="Play" onclick="LzAudio.playSound(don)" />

3.3.2. ビデオの再生

ビデオの形式としてflvをサポートしたストリーミング再生には<viewview>を使います。http越しにビデオをプログレッシブ再生するには次のように記述します。ここではYoutubeのflvを指定して再生する例を紹介しますがFFmpegなどを使ってmpegなどのビデオファイルをflvに変換し、自分のサーバーに配置することでお好きなビデオを配信することができるでしょう。

                
<canvas>
<videoview url="http://cache.googlevideo.com/get_video?video_id=AulVwjcnJhI"
 autoplay="true" width="100%" height="100%" />
</canvas>

3.3.3. オープンソースのストリーミングサーバーRed5の導入

これまでFlashでストリーミングを実現するには高価なFlash Media Serverが必要でしたが、Red5と呼ばれるオープンソースのストリーミングサーバーが公開されているため無料で利用することができるようになりました。

オーディオビデオのストリーミングにはRMTP(Real Time Media Protocol)と呼ばれるステートフルなプロトコルを使用します。RMTPを使うことでオーディオビデオのストリーミングや録画だけでなく、対戦型ネットゲームや会議システムのような接続されたクライアント内で一方の値を他のクライアントすべてに伝えるようなシステムにも用いることができます。

Red5はJ2EEサーバーJettyを含めたスタンドアローン版とJ2EEサーバー上に配置するためのWARファイルの両方が用意されています。OpenLaszloが動作している環境にはすでにTomcatなどのJ2EEサーバーが動作していると思いますので、今回はWARファイルを選択します。

1. Red5のサイトから最新のWARファイルをダウンロードします。Java5とJava6に分かれてROOT.warが用意されているので環境に合った方をダウンロードしてください。
   
   
2. ROOT.warのままだとhttp://127.0.0.1:8080/のルート上に配置されてしまうのでred5.warと名前を変更します。
   
   
3. Tomcatサーバーのwebappsディレクトリにコピーし、サーバーを再起動します。
   
   
4. サンプルアプリにアクセスし、プラグのアイコンをしたコネクトボタンをクリックし丸アイコンが緑色に変われば正常に接続できています。ためしに二枚ブラウザウィンドウを開いて両方接続すると片方のred5アイコンのドラッグが、もう片方にも反映されることが確認できるでしょう。この機能をSharedObjectと呼び接続しているすべてのクライアントでデータを共有し、データの変更をすべてのクライアントに通知することができます。
   
   

3.3.4. 簡単なビデオチャット

OpenLaszloにはrtmp接続を利用するためのさまざまな機能が用意されています。下のコードではrtmp接続の状態を表示する<rtmpstatus>、カメラとマイクを操作する<camera>と<microphone>ビデオのストリーミングをサポートしている<videoview>を使用して10行ほどでブラウザを通したビデオチャットが実現できます。このテストにはビデオがついているPCが二台必要になります。一台のみでは自分のカメラ画像が表示されるのみです。

実行サンプル:http://www.openlaszlo.jp/lps-4.0.3/ibm_devworks/camera_mic.lzx?lzt=html
ソースコード:http://www.openlaszlo.jp/lps-4.0.3/ibm_devworks/camera_mic.lzx?lzt=source

rtmpconnetctionのsrcはRed5が動作しているURLを指定してください。localhostや127.0.0.1では別のPCで開いたときにRed5が動作しているサーバーを見つけることができませんのでネットワーク内で有効なURLを指定してください。

                
<?xml version="1.0" encoding="UTF-8" ?>
<canvas layout="axis:y">
<rtmpconnection src="rtmp://192.168.11.2/SOSample" autoconnect="true" />

<rtmpstatus/>

<view layout="axis:x; inset:10; spacing:10">
<videoview id="live" url="me" type="rtmp" oninit="this.stream.broadcast()" >
<camera show="true"/>
<microphone capturing="true"/>
</videoview>
<videoview id="vp" url="you" type="rtmp" oninit="this.stream.play()" />
</view>
</canvas>

上に戻る

3.4. まとめ

いかがでしたでしょうか。Ajaxのみでは表現できない機能もOpenLaszloのswfコンパイルを利用することで実現できます。またリッチコンテンツの需要が高まる中でオープンソースによる簡単なリッチコンテンツの配信の実現にもOpenLaszloは適しています。

OpenLaslzoはバージョン4でDHTMLとSWFをサポートしていますが、電気家電やモバイル端末でも動作するよう、JavaME出力に対応したorbitバージョン1がリリースされています。ぜひOpenLaszloを活用してアイデアを実現してみてください。

上に戻る

ダウンロード

	ダウンロード形式について

著者について

		フリーランスの開発者時代にRIAに強く興味を持つが当時各種RIAフレームワークはいずれも高価だったため一時断念。その後オープンソースのRIAフレームワークOpenLaszloを知り感動、2005年に日本でのOpenLaszloコミュニティLaszloJapanを開設する。以来RIAの普及を目指し活動中。現在は沖縄県在住。海好き空好き。

記事の評価

サイト改善のため、ご意見をお寄せください。こちらのフォームからお願いいたします。 この情報はお客様が目的を達成するうえで役に立ちましたか？ はい いいえ わからない   お気軽にご意見・ご感想をお寄せください。   この記事は役に立ちましたか？ 1 2 3 4 5 不充分・不完全である 大変素晴らしい

この記事を共有する del.icio.us newsing FC2ブックマーク Choix！ ニフティクリップ Yahoo!ブックマーク MM/memo CZブックマーク livedoorクリップ はてなブックマーク Buzzurl（バザール）

上に戻る