CodeZine(コードジン)

特集ページ一覧

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

SMIL入門

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/02/06 14:00

 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プレーヤが公開されています。

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

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

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

 編集/オーサリングツールの詳細なリストも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枚
図1 SMILプレゼンテーション: AmbulantPlayerで表示したusing_images.smilプレゼンテーションの中の1枚

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:japan.internet.com翻訳記事

もっと読む

著者プロフィール

  • japan.internet.com(ジャパンインターネットコム)

    japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.com や EarthWeb.c...

  • Octavia Andreea Anghel(Octavia Andreea Anghel)

    経験豊富なPHP開発者。現在は、国内外のソフトウェア開発コンテストに参加するプログラミングチームの主任トレーナーを務める。国レベルの教育プロジェクト開発のコンサルティングも担当している。共著書に『XML technologies?XML in Java』があり、XML部分の執筆を担当。PHPやXML...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5