SHOEISHA iD

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

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

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

japan.internet.com翻訳記事

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

SMIL入門

動的SMILドキュメントのカスタマイズ

 ここでは、カスタムSMILプレゼンテーションを生成するHTML/PHPアプリケーションの書き方を示します。基本的な考え方はこうです。まずユーザーにSMILのカスタマイズ可能な部分(イメージまたはオーディオファイル、遷移時間、持続時間)のいくつかをHTMLフォームから選択してもらい、それからPHPを使ってユーザー入力を取得し、それに対応するSMILドキュメントを生成します。なお、このHTMLフォーム(図6を参照)は後述のリスト1のようになっています。

図6 HTMLフォーム: flower-slide_show_form.htmlフォームの外観
図6 HTMLフォーム: flower-slide_show_form.htmlフォームの外観

 ユーザーがフォームを送信すると、このPHPスクリプトはユーザーが入力または選択した値を使ってSMILドキュメントを動的に生成します。

<?php 

header ("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 29 Jul 2000 07:00:00 GMT"); 
header ("Content-Type: application/smil"); 
header('Content-Disposition: attachment; filename="flower_slide_show.smil"'); 
             
?>    

<smil xmlns="http://www.w3.org/2005/SMIL2l/Language"> 
  
   <head>
       <meta name="title" content="Flowers Slideshow" />
       <meta name="author" content="Octavia-Andreea Anghel" />
  
       <layout> 
           <root-layout width="250" height="250" backgroundColor="black" /> 
         </layout>
   
      <transition id="star5" type="starWipe" subtype="fivePoint" dur="4s" />
       
   </head>
     
 <body>
   <par>
      <audio src="<?php echo $_GET['audio'].'.mp3'; ?>"  
        begin="<?php echo $_GET['audio_begin']; ?>" dur="<?php echo  
        $_GET['audio_dur'];?>" />
                        
     <seq>
      <img src="<?php echo $_GET['image']; ?>" 
        begin="<?php echo $_GET['img_begin']; ?>" dur="<?php echo 
        $_GET['img_dur']; ?>" 
        transIn="star5"/>
     </seq>
   </par>
 </body>
</smil>

 このスクリプトで生成されたサンプルのSMILドキュメントを以下に示します。

<smil xmlns="http://www.w3.org/2005/SMIL2l/Language"> 
  
    <head>
       <meta name="title" content="Flowers Slideshow" />
       <meta name="author" content="Octavia-Andreea Anghel" />
  
       <layout> 
            <root-layout width="250" height="250" backgroundColor="black" /> 
       </layout>
   
   <transition id="star5" type="starWipe" subtype="fivePoint" dur="4s" />
       
    </head>
    <body>
      <par>
     <audio src="ocean.mp3"  begin="1s" dur="10s" />
     <seq>
        <img src="flower1.jpg" begin="2s" dur="10s" transIn="star5"/>
     </seq>
      </par>
    </body>
</smil>

 AmbulantPlayerなどのSMILプレーヤでflower_slide_show.smilプレゼンテーションを実行すると、図7と同じような内容のプレゼンテーションが見られるはずです。

図7 生成されたサンプルスライドショー: flower_slide_show.smilプレゼンテーションの実行結果(イメージ遷移中の様子)
図7 生成されたサンプルスライドショー: flower_slide_show.smilプレゼンテーションの実行結果(イメージ遷移中の様子)

 この記事で示したように、要素の位置や表示のタイミングや持続時間をPHPでプログラム的に制御して、完全に機能するSMILプレゼンテーションを生成できます。また、PHPとSMILの組み合わせは、同様の機能を実現する他の数多くの手法に比べて単純ながら驚くほど生産的で、なおかつ非常に軽量です。

リスト1 Flower Slide Showのフォーム
<html>
<head>
  <title> 
    FLOWER SLIDE-SHOW
  </title>    
</head>
<body>
<form method="get" action=" php_custom_smil.php">
  <table border="1" width="20%" height="20%" bgcolor="#000076"> 
    <tr><td colspan="4" align="center">
      <font face style="Arial" color="99eeff" size="3">
        <strong>FLOWERS SLIDE-SHOW</strong></td></tr>
    <tr>
      <td colspan="1" align="center">
        <font face style="Arial" color="99eeff" size="3">
        Select an image :</td>
      <td>
        <select name="image" size="1">
          <option value="flower1.jpg">flower1.jpg
          <option value="flower2.jpg">flower2.jpg
          <option value="flower3.jpg">flower3.jpg
        </select></td>
      <td>
        <table>
          <tr>
            <td><font face style="Arial" 
              color="99eeff" size="3">Begin:</font></td>
            <td><input type="text" name="img_begin"></td></tr>
          <tr><td><font face style="Arial" color="99eeff" size="3">
            Dur:</font></td><td><input type="text" 
            name="img_dur"></td></tr>
        </table>
      </td>
    </tr>
    <tr>
      <td colspan="1" align="center">
        <font face style="Arial" color="99eeff" size="3">Select an audio :</td>
      <td>
        <select name="audio" size="1">
          <option value="ocean">ocean.mp3
          <option value="wind">wind.mp3
        </select></td>
      <td>
         <table>
           <tr>
             <td><font face style="Arial" color="99eeff" size="3">
               Begin:</font></td><td><input type="text" 
               name="audio_begin"></td></tr>
           <tr><td><font face style="Arial" color="99eeff" size="3">
               Dur:</font></td><td><input type="text" name="audio_dur"></td></tr>
         </table>
      </td>
    </tr>
    <tr><td align="center">
           <input type="submit" name="submit" value="Send"></td>
           <td align="center"><input type="reset" value="Reset"></td></tr>
  </table>
</form>
</body>
</html>

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

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。
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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー