Flash SWFファイルを簡単に貼り付ける「SWFObject」
それから、HTMLにFlash SWFファイルを簡単に貼り付けることができる、JavaScriptのライブラリ「SWFObject」も紹介しておきます。
SWFObjectの一番素晴らしいところは、簡単にSWFファイルがHTMLに貼り付けられることです。また、Internet Explorerを使用する場合に、クリックしないとFlashがアクティブにならない、マウスオーバーするとFlashの周りに枠が表示されるという問題も解消されます。さらに、Flashのバージョンを検出することもできます。
SWFObjectはオープンソースのプロジェクトで、以下のURLより入手できます。
次のソースは「flash.swf」を表示する例です。本体なら、何十行にも渡って、object
タグやembed
タグをさまざまなパラメータと共に指定しなくてはならないのですが、SWFObjectを使えば、次のように実にシンプルに記述できます。
<body> <!-- Flashの表示位置を指定 --> <div id="flashcontent"></div> <!-- SWFObjectの取り込み --> <script type="text/javascript" src="swfobject.js"></script> <!-- SWFを表示 --> <script type="text/javascript"><!-- var obj = new SWFObject("flash.swf", "eid", "200", "100", "8", "white"); obj.write("flashcontent"); //--></script> </body>
はじめに、Flashを表示したい場所に、div
タグ(表示用のid
を指定)を書いておきます。そして、JavaScriptでSWFObjectのインスタンスを生成し、write
メソッドで表示したいid
を指定します。
SWFObjectの生成部分では、SWFファイルのパス、オブジェクトのID、幅、高さ、Flash Playerの対象バージョン、背景の色という順番で引数を指定します。
また、Flashから参照できる引数を与えたい場合には、次のように、addVariable()
を利用して引数を指定できます。
var obj = new SWFObject("flash.swf", "eid", "200", "100", "8", "white"); obj.addVariable("name1","value1"); obj.addVariable("name2","value2"); obj.addVariable("name3","value3"); obj.write("flashcontent");
Flashからこの引数を参照したい場合は、次のように、_root
のメンバとしてアクセスします。
trace( _root.name1 ); trace( _root.name2 ); trace( _root.name3 );
掲示板CGI
RubyによるCGI
オルゴールで作成したデータをアップロードするため掲示板をRubyで実装しています。Rubyは、Ruby on Railsなどの影響でCGIとしても有名になってきました。ピュアなオブジェクト指向言語ですし、慣れるととてもコーディングが楽しい言語だと思います。
本掲示板では、Mbox
というCGI用クラスを作成し、インスタンス化することで掲示板の実装としています。
コンストラクタ内でインスタンス変数@cgi
にCGIを準備します(initializeはRubyにおけるコンストラクタです)。こうすることでCGIを連想配列で取り扱うことができるようになります。例えば「mbox.cgi?mode=hoge」というURIであれば、「@cgi['mode']
」が、hogeになります。
CGIでは最初にdispatchするのがよくあるスタイルかと思いますが、ここでは次のような感じにコーディングしています。Rubyではself.send
により自身のインスタンスメソッドを呼び出すことができるのでスマートな記述が可能です。dispatch後はhtml_out
というインスタンスメソッドにより結果を出力しています。
def initialize @cgi = CGI.new # CGIを初期化 @result = "" mode = @cgi["mode"] # ?mode=xxxを取得 begin self.send "cmd_#{mode}" # cmd_xxxメソッドを呼び出し rescue self.send "cmd_show" # cmd_xxx呼び出しに失敗したら # cmd_showを呼び出し end html_out # htmlを出力 end
ERBによるビューの分離
RubyにはERBというモジュールがあります。これは決められたタグ内をRubyスクリプトとして処理することができるモジュールです。ERBを使うとビューとロジックを分離できます。これはすなわちhtmlのテンプレートを作る人と出力をCGIで整形するコードを書く人で分担作業できることを意味します。以下にRubyとHTMLの関係を示します。
def html_out result_final = @result result_final = ERB.new(File.open("mb.html", "r").read).result(binding) if @show_normal @cgi.header({"Cache-Control" => "no-store, no-cache, must-revalidate"}) @cgi.out do result_final end end
<tr> <td> <div id="flashcontent"></div> </td> <td valign="top"> <div id="player"></div> <%=@result%> </td> </tr>
Ruby側ではERB#result
によりERBを実行した後で、CGI#out
により結果を出力しています。ERBでは<%= %>
で囲まれたところはRubyの変数を評価して展開するという意味になります。
オルゴール「mb.html」では<%= @result %>
と記述することで、@result
が展開されています。なおERBはCGI用途に限らず内部にRubyスクリプトを含むファイルを評価できます。
インターフェイス
掲示板のインターフェイスは次のようになっています。
パラメータ | 意味 |
mode | CGIのモード。newは新規投稿、showは投稿一覧の表示、editは投稿されたデータの修正 |
start | 一覧表示時の最初のエントリー番号 |
mb | オルゴールデータ |
name | 投稿者の名前 |
title | 曲タイトル |
comment | コメント |
password | 曲のパスワード(修正時に指定するため) |
今後について(まとめ)
掲示板CGIの拡張について
現行では簡易的にオルゴールデータを保持してパスワードで保護をかけているだけなので、今後の拡張としては、ユーザー管理、感想の投稿、人気投票など、コミュニティとしての機能を追加していくなどが考えられます。
MML仕様の拡張について
JavaScriptSakuraは、「テキスト音楽サクラ」としての機能の一部しか実装していませんので、もっと対応範囲を増やしてみたり、あるいは独自に文法を作って実装し、MMLをもっと便利なものにしていくのが良いでしょう。
本稿について
ここ最近の流行のため、JavaScriptはさまざまなアプリケーションが出尽くした感がありますが、まだまだ楽しいアプリケーションはあると信じています。また、Firefoxなどデバッグしやすい環境が整ってきているのもあり、ちょっとしたアプリケーションを作ってステップアップするにはちょうど良い言語だと感じています。そんな一例になれば幸いです。
参考資料
- Roland株式会社 SoundCanvas SC-8820 取扱説明書
- クジラ飛行机,テキスト音楽サクラ
- MIDI Manufacturers Association