このフォーラムで、シーク機能について質問が投げられていたので作ってみた。

Flex2でFLVプレイヤーを作ろうと思ったら、ボタンなどの標準コンポーネントを使って 簡単に実装できちゃうんですが、シークバーはちょっとポイントが要ります。 でもだからといって、コンポーネントを作らないといけないわけじゃなくて、 HSliderとスクリプトだけでなんとかできちゃいます。

こんな感じになる。それっぽいでしょ？

コントローラを配置

まずはFLVを表示するためのVideoDisplayクラスと シークするためのHSliderクラスを準備

FLVの再生位置とシークバーを同期させる

これだけでもFLVは再生されるので、再生されている位置とシークバーを同期させてみます。 ここからは基本的に編集するのは

のみ

スライダーの最小値と最大値を決定します。 最大値にビデオの総時間をバインディングされるようにしておき さらにビデオの再生位置に変更があるたびに、スライダーの値とビデオの再生時間が同期するように仕込む。 これで、再生時間 / 総再生時間みたいなことを気にしないでも、スライダーが勝手に計算してくれます。

スライダーからの変更をビデオに反映する

次にスライダーからビデオの再生位置を変更できるようにします。 HSliderに次の行を追加します。 [xml] change=”{ if(myVD.stateResponsive) myVD.playheadTime = myHS.value }” [/xml]

VideoDisplay#stateResponsiveはビデオが応答可能かどうかの判定メソッドです。 まだ動画がロードされていなかったり、ビジーな状況を回避しつつ スライダーのvalueをそのままビデオの再生位置時間に代入します。 これはスライダーとビデオの扱う単位を「秒」で揃えているから可能になっています。 Flexでは往々にして、コントロール間で扱う単位を揃えたり 中間に変換するアダプターメソッドを噛ますと、生産性があがりますね。

見た目や精度を向上する

さて、ここまでで一応実装完了しているのですが 使ってみると、ドラッグ中はビデオに再生位置が反映されなかったり 再生位置をスライダーのつまみの位置だけで確認しなければならなかったり ちょっと不親切です。

HSliderにさらに、下の処理を追加。 [xml] liveDragging=”true” showTrackHighlight=”true” [/xml]

Slider#liveDraggingは、つまみのドラッグ中にもchangeイベントを発行しつづけるためのフラグです。 Slider#showTrackHighlightは、スライダーの始点からつまみまでを色つけするスタイルプロパティ。

完成

以下は全コードです。

ソースファイル

まずはRubyのソース

server_client.rb [ruby] require “socket_server” server = SocketServer.new server.open 8001 [/ruby]

ソケットサーバを8001番ポートでオープン

socket_server.rb [ruby] class SocketServer

def initialize( port=nil ) puts “create server..” @port = port || 8001; end

def open( port=nil ) @port = port if( !port.nil? ) @gs = TCPServer.open @port @clients = [] puts “open server #{@port}”

while true
  Thread.start( @gs.accept ) do |s|
    open_client s
    while ( message = s.gets )
      send_message_all( message )
    end
    close_client s
  end
end

end

def open_client( client ) puts “#{client} is connected.” @clients << client end

def close_client( client ) puts “#{client} is closed.” @clients.delete client end

def send_message_all( message ) puts “[message all] #{message}” @clients.each do |client| send_message( client, message ) end end

# send message to IOSocket def send_message( target, message ) message.chomp! target.write( message << “\n” ) end

end [/ruby]

そしてFlex2のソース

Socketクラスを使ってます。 XMLSocketクラスを使ったら、メッセージのタイミングが１個ずれました。

SocketTest.mxml [html]

<![CDATA[ import flash.net.Socket;

  [Bindable]
  public var sock:Socket;

  private function handleCreateComplete():void
  {
    sock = new Socket();
    sock.addEventListener(ProgressEvent.SOCKET_DATA,handleSocketData);
    sock.addEventListener(Event.CONNECT,handleSocketConnect);
    sock.addEventListener(Event.CLOSE,handleSocketClose);
    //sock.addEventListener(DataEvent.DATA,handleSocketData);
    sock.addEventListener(IOErrorEvent.IO_ERROR,handleSocketIOError);
  }

  private function handleSocketConnect(e:Event):void
  {
    debugger.text += “Connection Success.\n”;
    formViewStack.selectedChild = connectedForm;
    sock.removeEventListener(Event.CONNECT,arguments.callee);
  }

  private function handleSocketClose(e:Event):void
  {
    debugger.text += “Connection Close.\n”;
    formViewStack.selectedChild = connectForm;
    sock.removeEventListener(Event.CLOSE,arguments.callee);
  }

  private function handleSocketData(e:ProgressEvent):void
  {
    debugger.text += e.target.readUTF();
  }

  private function handleSocketIOError(e:IOError):void
  {
    trace(e);
  }

]]>

<mx:VDividedBox width="100%" height="100%">

  <mx:ViewStack id="formViewStack" width="100%" height="200">

    <views:ConnectForm id="connectForm" sock="{sock}" />
    <views:ConnectionForm id="connectedForm" sock="{sock}" />

  </mx:ViewStack>

  <mx:TextArea width="100%" id="debugger"/>

</mx:VDividedBox>

[/html]

views.ConnectForm.mxml [html] <![CDATA[ public var sock:Socket;

  private function handleConnectButtonClick(e:MouseEvent):void
  {
    sock.connect( formdata.host, formdata.port );
  }

]]>

{txtHost.text} {int(txtPort.text)}

[/html]

views.ConnectionForm.mxml [html] <![CDATA[

  public var sock:Socket;

  private function handleSendButtonClidk(e:MouseEvent):void
  {
    if( sock.connected )
    {
      XML.prettyPrinting = false;
      sock.writeUTF( sendXML.toXMLString() + "\n" );
      sock.flush();
    }
  }

]]>

{txtMessage.text}

[/html]

とりあえず、ここまで

最終的には、mx.rpc.AbstractInvokaを継承したSocketServiceコンポーネントを作るところまでしたい。

var logCategoryName:String = “ConnectionLog”

var logger:ILogger = Log.getLogger(logCategoryName); logger.info(‘connect..’); logger.error(‘connect error..’); logger.worn(‘connect worn’); logger.fatal(‘connect fatal’); [/js]

こんな感じ？

ログレベルは fatal < worn < error < info

僕は各クラスごとにログカテゴリを設定してるんで、全エントリーを使って コンストラクタん中で、こんな感じに。

[js] var logger:ILogger = Log.getLogger( describeType(this).@name.toString().match(/::(.*)/)[1] ); [/js]

あとは、環境によって、TraceとかLocalConnectionとか、ログの出力方法を切り替えたいなと。

mx.logging.targetsあたりを弄るのかな？

Silverlightってどういう技術？

• ブラウザ上でリッチインタラクティブアプリケーション（RIA）を実現する。
• Windows、Macで動作。クロスプラットフォーム。(LinuxではMoonlightプロジェクトにより動作可能となるらしい）
• Webブラウザ用プラグイン、IE、FireFox、Safari対応。

これだけ見ると、Flashと変わらないような気がするよね。うーん。

Silverlightのメリット

• 強力なマルチメディア関連のサポート
• ハイビジョン相当（HD 720p）の動画を配信可能
• デジタル著作権管理（DRM）
• 開発言語の選択が可能
• C#
• C++
• VB
• Python
• Ruby
• JavaScript
• .Net Frameworkベース。
• 開発者の絶対数が多い

大手GyaoがSilverlightを採用したニュースは、ご存じのとおり DRM対応ってのはポイント高いですね。 しかしFlashだって、H.264 HDにまで対応するので、画質的な差はほとんどないんじゃなかろうか・・。

Silverlight1.1からCLRが含まれ、「.NETプラットホームのサブセットをブラウザから使える」とのこと。

この辺よくわからなかったんですが、.NET標準のUIライブラリなんかが利用できると考えていいのかなぁ？ 開発の言語を選べるというのは、結構素敵なんですが 実際同じプロジェクトみんなが使える言語となると、自ずと選択肢が決まってくる気がするのですげーメリットっていう感じでもないな。

開発スタイル

• 普通のテキストエディタで作る
• Visual Studioを使って開発
• Expression Blendで開発

簡単なサンプル程度なら、ランタイムをいれて、テキストエディタでも十分開発可能です。 でもギャラリーの「Page Turn」のサンプルソースコードを見ると あの程度でも、結構膨大なソースなのでちゃんとしたものを作ろうとしたらBlendとVisual Studioは必須なのではないだろうか。

実際の所どうなのよ？

Flex2とSilverlightの公式サンプルアプリケーションをざっと見比べてみる。

Silverlightのサンプルページ http://silverlight.net/community/gallerydetail.aspx?cat=3 http://silverlight.net/community/gallerydetail.aspx?cat=4

Flex2のサンプルページ http://www.adobe.com/jp/devnet/flex/

う～ん。エンタープライズなアプリケーションを現段階のSilverlightで開発するのは 果てしなく難易度が高い気がするんだが・・。

Flexの良いところは、高度なUIコンポーネントが標準で用意されていて しかもスキンの変更なんかが楽ちんなところにあると思う。 SilverlightはどこまでUIコンポーネントが用意されるのか、興味津々ではある。

一応作ったサンプル

さすがに何も作らないという訳にもいかないので、申し訳程度に、サンプルを作りました。

円のオブジェクトがロールオーバー、ロールアウトに反応して、色が変わるという ものすごく朴訥としたサンプルアプリケーションです。 当然ながらSilverlightのランタイムがないと見れないので インストールしてない方は、こちらからインストールするべし。

見る ソースをダウンロード

まとめ

今のところ、SilverLightはFlashほどグラフィックとアニメーションに強い印象もなく Flexほどエンタープライズに強い印象もなく、中途半端な感じ。 Flexの方はJava開発者の流入が多いみたいだけれど、Silverlight（WPF）には.Net開発者が中心になるんだろうなと。

参考サイト

Microsoft Silverlight: Light Up the Web ふるにゃん　- 初めてのSilverlight 1.1α ＋ Expression Blend β2(取っ掛かり編？) 「GyaO」がSilverlight採用へ　映画予告編でテスト配信

ちょろちょろとブログに書いていきたいなと。

FlashDevelop3を使うにあたり、英語でも全くなんの問題もなかったのですが リファレンスのURLをちょいちょい変更したついでに日本語化もしました。

よろしければどうぞ。

mainmenu.zip

MainMenu.xmlを

C:\Program Files\FlashDevelop\FirstRun\Settings

に放り込んでください。 当然、オリジナルのファイルは要バックアップです。

enjoy!

主にApollo系で今回（僕が）しった情報。

・M3＝開発者向けSDKリリース　３月予定 ・Apolloアプリへのドラッグ＆ドロップ可能 ・バックエンド稼働可能 ・サーバからアプリへのデータプッシュ可能（待ち受け状態？） ・アプリ（SWF?）の差分アップデート機能（Flash9で実装済み？ちょっとその辺理解が曖昧） ・SDKは無料配布。つまりすでにコマンドライン版のFlex2SDKで開発環境があれば、Apolloも無料で開発できる。 ・DreamWeaverでもプラグインとかで開発ができるようになるらしい。 ・HTMLベースのApolloアプリはM3で実装される予定らしい

といった感じかなぁ。これ以外は特に目新しい情報はなかったかな。

実際にFlex2Builderで開発するデモを見たけど Flash9メインでApolloを開発ってのは、非現実的かもなぁという印象を受けた。 僕は素直にFlex2で開発したいと思いました。

ApacheとColdFusionのインストールはインストーラーに従えば、問題ないだろうが ColdFusionすら初めてなので、Flexのセットアップにちょいてまどった。

基本的にはオンラインドキュメントのColdFusion上にFlexをインストールするのページを参照されたし。

今のところ日本語ドキュメントがほとんど存在しないので、これから英語をゲップがでるほど読まなきゃならんと思うと陰鬱な心持ちなことだなぁ。 せっかくやったので、軽く説明

1. ColdFusion管理画面から新しいサーバを作成、サーバ名を「flex」とでもしておく
2. Flexをインストールしたディレクトリにある「flex.war」を解凍する。解凍してできたフォルダ「flex/WEB-INF/flex」をColdFusionのWEB-INFフォルダにコピー（ex:JRun4/servers/flex/default-ear/default-war/WEB-INF/）
3. 解凍してできたフォルダ「flex/WEB-INF/lib/」以下のファイルをCF側の「WEB-INF/lib/」の中に放り込む。（ex:ex:JRun4/servers/flex/default-ear/default-war/WEB-INF/lib/）
4. 解凍フォルダの「flex/WEB-INF/web.xml」の<webapp></webapp>タグ内要素をCF側の「WEB-INF/web.xml」の内容にマージする
5. サーバを再起動して準備完了

てな感じだった。

なんか思ってたより簡単そう というか、わりと僕向きな感じな希ガス。

ちょっと時間があいたから、マスクエフェクトのクラスを作りたいなぁと 妄想中。他人のソースをハックしてみる。