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

SMIL入門

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

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

図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プレゼンテーションの実行結果（イメージ遷移中の様子）

　この記事で示したように、要素の位置や表示のタイミングや持続時間を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>