PHPとSMILの組み合わせで魅力的なプレゼンテーションを作成する

SMIL入門

　SMILを使用するとブラウザ内のマルチメディア要素とテキスト要素を時間的に制御でき、なおかつPHPを使って動的なSMILコードを書くことができます。PHPとSMILを組み合わせることで、うまくタイミングのとれたプレゼンテーションを作成できます。

はじめに

　この記事では、Synchronized Multimedia Integration Language（SMIL）とPHPを使用して、Webサイトに魅力的なスライドショープレゼンテーションを追加する方法を説明します。SMILについてよくご存じでない方は、本稿を読むことでSMILが非常に軽量で使いやすいことが分かるでしょう。

　PHPはSMILと適合性があり、SMILの動的な操作やサーバーサイドサポートを可能にします。この2つを組み合わせて使用すれば、大きな成果をあげることができます。

SMILとは

　SMILはW3C標準の1つです。SMILはXMLで記述し、HTMLに似た表現方法を使用して、複数のマルチメディアファイルを表示するスライドショーのようなプレゼンテーションを作成できます。SMILには要素シーケンス、持続時間、可視性などを定義するための方法が用意されています。

SMILファイルの再生方法

　SMILプレゼンテーションを再生するには、SMILプレーヤが必要です。Web上では次のようなSMILプレーヤが公開されています。

• RealNetworks社のRealPlayerはSMIL 2.0を完全にサポートしています（FlashおよびMP3形式もサポートしています）。
• Apple社のQuickTimeはSMIL 1.0をサポートしています。
• Oratrix社のGRiNS Player for SMIL 2.0はSMIL 2.0に完全に適合しています。
• Ambulant Open SMIL PlayerはSMIL 2.1をサポートするオープンソースプロジェクトです。
• SMIL Player for InterObject Streaming ServerはSMIL 2.0 Basic Profile on PocketPCをサポートし、ライブストリーミング機能を提供します。

　また、バージョン5.5以上のInternet ExplorerはSMILプレゼンテーションをネイティブで再生できます。プレーヤオプションの詳細なリストについては、SMILプレーヤのページを参照ください。

SMILプレゼンテーションの編集

　SMILプレゼンテーションを手作業で書くこともできますが、SMILエディタを使用するほうがずっと簡単です。下記のエディタがよく使われています。

• GRiNS Pro Editor for SMIL 2.0
• Web Adaptation Multimedia（WAM）チームによるLimSee3
• SMILGen

　編集/オーサリングツールの詳細なリストもSMILのメインサイトにあります。

SMILファイルの基本構造

　SMILファイルには次のオブジェクトを含めることができます。

• プレゼンテーションのレイアウト ― ドキュメント本体の要素の抽象レンダリング面への配置方法を決定します。
• プレゼンテーションのタイムライン ― 要素がいつ表示され、いつ消えるか、そしてどれだけの時間アクティブになっているかを決定します。
• マルチメディア要素のソース ― プログラムがプレゼンテーションの種々の要素を探す場所を決定します。

　SMILドキュメントのルート要素は<smil>タグで、これは<head>と<body>という2つの下位要素を持っています。一般に、SMILドキュメントの名前には「.smil」拡張子を付けます。<head>要素の内容は、メディア要素、ハイパーリンク、他のマルチメディアオブジェクトへの参照などです。

　<smil>、<head>、<body>の各要素は次の属性を持つことができます。

• id ― その要素を一意に表す識別子。
• class ― その要素で使用されるCSSスタイルクラス。
• xml:lang ― その要素の内容に使用される言語を表す。

　SMILの各要素と属性の詳細については、この記事では説明しません。興味のある方はこちらのチュートリアルを見てください。

　次の例はflower1.jpgというイメージを5秒間表示する単純なSMILドキュメントです。

<smil>
<body>
  <seq repeatCount="indefinite">
    <img src="flower1.jpg" begin="2s" dur="5s"/>
  </seq>
</body>
</smil>

　コードから分かるように、このイメージは2秒後に表示が始まり、5秒間持続します。

　次の例も単純なSMILドキュメントです。こちらは3つのイメージを250×250ピクセルのレイアウトに配置するスライドショープレゼンテーションを作成します（図1を参照）。イメージごとに表示の持続時間が1秒ずつ長くなります。

<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.l//EN" 
   "http://www.w3.org/2005/SMIL2l/SMIL2l.dtd"> 

<smil xmlns="http://www.w3.org/2005/SMIL2l/Language"> 

<head>
   <layout> 
          <root-layout width="250" height="250" 
             backgroundColor="black" /> 
     </layout> 
</head>

<body>
  <seq>
    <img src="flower1.jpg" dur="1s" />
    <img src="flower2.jpg" dur="2s" />
    <img src="flower3.jpg" dur="3s" />
  </seq>
</body>

</smil>

図1　SMILプレゼンテーション: AmbulantPlayerで表示したusing_images.smilプレゼンテーションの中の1枚