SHOEISHA iD

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

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

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

japan.internet.com翻訳記事

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秒間にわたって表示が持続し、さらにそれが繰り返される
図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つのセンテンスが順に表示される
図3 Text.htmlプレゼンテーション: 6秒間にわたって3つのセンテンスが順に表示される

次のページ
PHPによるSMILドキュメントの生成

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

japan.internet.com翻訳記事連載記事一覧

もっと読む

この記事の著者

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

japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.comEarthWeb.com からの最新記事を日本語に翻訳して掲載するとともに、日本独自のネットビジネス関連記事やレポートを配信。

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

Octavia Andreea Anghel(Octavia Andreea Anghel)

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

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

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

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/3468 2009/02/06 14:00

イベント

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

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

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

メールバックナンバー