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

SMIL入門

IE 5.5以上でのSMILプレゼンテーションの実行

　HTMLでSMILの要素を使用するには、それらの要素がInternet Explorerで認識されるように「time」という名前空間を定義しなければなりません。そのためには次のことを行います。

• <html>タグに名前空間定義を追加する（xmlns:time="urn:schemas-microsoft-com:time"）
• 新しい名前空間「time2」をインポートするための<?import>要素を追加する（<?import namespace="time" implementation="#default#time2">）

　標準のHTML要素にSMILの属性を追加するには、それらの属性を認識するためにInternet Explorerで使用されるtimeクラスを定義しなければなりません。そのためには<style>要素を追加してtimeクラスを定義します。

<style>
   .time {behavior:  url(#default#time2)}
</style>

　完成した構造は次のようになります。

<html xmlns:time=
   "urn:schemas-microsoft-com:time">
<head>
  <?import namespace="time" 
      implementation="#default#time2">
  <style>.time {behavior: 
      url(#default#time2)}</style>
</head>

　HTMLドキュメントにSMILの要素を挿入するには、それらのSMIL要素にプレフィックスとクラス属性を追加します。

<time:seq repeatCount="indefinite">
  <img class="time" src="flower1.jpg" dur="3s" />
  <img class="time" src="flower2.jpg" begin="4s" dur="2s" />
</time:seq>

　上記の例では、SMILのseq要素にtimeプレフィックスを追加し、<img>要素にtime属性を追加しています。

　以下は前のセクションで示した「show_image.smil」に対応するHTMLドキュメントです。この例を実行するには、Internet Explorer 5.5以上が必要です（図2を参照）。

<html xmlns:time="urn:schemas-microsoft-com:time">
<head>
  <?import namespace="t" implementation="#default#time2">
  <style>.time {behavior: url(#default#time2)}</style>
</head>

<body>
<t:seq repeatCount="indefinite">
<img class="time" src="flower1.jpg" begin="2s" dur="5s">
</t:seq>
</body>

</html>

図2　IE 7でのHTMLとSMIL: このHTMLサンプル（image.html）を実行すると、ページが読み込まれてから2秒後にイメージの表示が始まり、5秒間にわたって表示が持続し、さらにそれが繰り返される

　これまでの例ではイメージを表示しましたが、次の例ではテキストのみをさまざまな色とサイズとフォントで表示するスライドショープレゼンテーションを作成します。この例はタイムラインで実行されるので、完全な結果を得るには、Internet Explorerで実行しなければなりません（図3は、順番に表示される内容を1つにまとめたスナップショットです）。

Listing text.html

<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
  <?import namespace="t" implementation="#default#time2">
  <style>.t {behavior: url(#default#time2)}</style>
</head>
<body>

<t:seq repeatCount="indefinite">
  <font face="cursive" color="red" size="4" class="t" 
     dur="1s" >This text will be displayed for one second!</font>
  <font face="Times New Roman" color="#00FF00" size="+1" class="t" 
     dur="2s" >This text will be displayed for two seconds!</font>
  <font face="fantasy" color="#FF00FF" size="+2" class="t" 
    dur="3s" >This text will be displayed for three seconds!</font>
</t:seq>

</body>
</html>

図3　Text.htmlプレゼンテーション: 6秒間にわたって3つのセンテンスが順に表示される