SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

特集記事

JavaScriptとFlashによるWebオルゴールの製作

JavaScript MIDIライブラリ「JavaScriptSakura」を使う

  • X ポスト
  • このエントリーをはてなブックマークに追加

Flash SWFファイルを簡単に貼り付ける「SWFObject」

 それから、HTMLにFlash SWFファイルを簡単に貼り付けることができる、JavaScriptのライブラリ「SWFObject」も紹介しておきます。

 SWFObjectの一番素晴らしいところは、簡単にSWFファイルがHTMLに貼り付けられることです。また、Internet Explorerを使用する場合に、クリックしないとFlashがアクティブにならない、マウスオーバーするとFlashの周りに枠が表示されるという問題も解消されます。さらに、Flashのバージョンを検出することもできます。

 SWFObjectはオープンソースのプロジェクトで、以下のURLより入手できます。

YouTubeでも利用されていたSWFObject
 蛇足ですが、先日Googleに買収された動画共有サイトのYouTubeでは、Flashによって動画再生を行っていますが、この動画プレイヤーを表示するのにも、SWFObjectが利用されていました。

 次のソースは「flash.swf」を表示する例です。本体なら、何十行にも渡って、objectタグやembedタグをさまざまなパラメータと共に指定しなくてはならないのですが、SWFObjectを使えば、次のように実にシンプルに記述できます。

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()を利用して引数を指定できます。

Flashに引数を与える例
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スクリプトを含むファイルを評価できます。

インターフェイス

 掲示板のインターフェイスは次のようになっています。

掲示板インターフェイス
パラメータ意味
modeCGIのモード。newは新規投稿、showは投稿一覧の表示、editは投稿されたデータの修正
start一覧表示時の最初のエントリー番号
mbオルゴールデータ
name投稿者の名前
title曲タイトル
commentコメント
password曲のパスワード(修正時に指定するため)

今後について(まとめ)

掲示板CGIの拡張について

 現行では簡易的にオルゴールデータを保持してパスワードで保護をかけているだけなので、今後の拡張としては、ユーザー管理、感想の投稿、人気投票など、コミュニティとしての機能を追加していくなどが考えられます。

MML仕様の拡張について

 JavaScriptSakuraは、「テキスト音楽サクラ」としての機能の一部しか実装していませんので、もっと対応範囲を増やしてみたり、あるいは独自に文法を作って実装し、MMLをもっと便利なものにしていくのが良いでしょう。

本稿について

 ここ最近の流行のため、JavaScriptはさまざまなアプリケーションが出尽くした感がありますが、まだまだ楽しいアプリケーションはあると信じています。また、Firefoxなどデバッグしやすい環境が整ってきているのもあり、ちょっとしたアプリケーションを作ってステップアップするにはちょうど良い言語だと感じています。そんな一例になれば幸いです。

参考資料

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
特集記事連載記事一覧

もっと読む

この記事の著者

クジラ飛行机(クジラヒコウヅクエ)

ソフト企画「くじらはんど」にて、多数のフリーソフトを公開しています。日本語プログラミング言語「なでしこ」、テキスト音楽「サクラ」、日本語Wiki記法が特徴の「KonaWiki」などを公開しています。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

adas(adas)

趣味プログラマー。10年以上前にゲーム作りでプログラミングに目覚めて以来、ソフトウェアで実現できるものは何でも興味の対象に。住処はhttp://www.0and1.org/

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/703 2006/11/24 00:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング