古籏一浩のJavaScriptラボ ― 第56回

HTML5版Dashboardウィジェットを作ってみた (2/4)

必要なファイルを用意する

　ウィジェットのスタートアップ画面と背景用に、HTML Video Playerとほぼ同じサイズ（994×485ピクセル）の「Default.png」ファイルを用意します。

Default.pngを用意する

　画像を用意しただけでは表示されないので、ウィジェット全体にDefault.pngを表示するようにスタイルシートを設定します。

body {
background-image: url(../Default.png);
}

　アイコン画像として「Icon.png」も用意します。

アイコン画像を用意する。ファイル名はIcon.pngとする

　続いて、Dashboardで使用されるプロパティリストファイル「Info.plist」を作成します。Info.plistは以下の図のようにプロパティと値を設定します。「Bundle Identifier」は私のサイト名になっていますが、他のウィジェットと異なる名前であれば問題ありません。また、再生する映像データがすべてウィジェット内にある場合は、ネットワークアクセスのチェックは不要です。

プロパティリストファイルを作成し値を設定する

不要な映像ファイルを削除する

　HTML5 Video Playerは、FirefoxやGoogle Chromeでも動作するように作成しているので、ブラウザーごとにWebMやOggなどの複数の形式の映像ファイルを用意していました。DashboardウィジェットはMac OS X専用ですので、QuickTimeムービーファイルだけを用意します。

• fireworks.mov
• hachibuse.mov
• rice.mov
• sample.mov
• suimon.mov
• tatsuno.mov

　あわせて、サムネールをクリックしたときの処理を以下のように変更します。ファイルの拡張子は常に.movになるので、プログラムも簡単になります。

■変更前

  $("#playList img").click(function(){
    var mimeTypeList = ["video/webm", "video/ogg", "video/mp4"];
    var mimeTypeExt = [".webm", ".ogv", ".mov"];
    var videoName = $(this).attr("title"); // title属性にファイル名が入っているので読み出す
    for(var i=0; i<mimeTypeList.length; i++){
      if(videoEle.canPlayType(mimeTypeList[i]) == "maybe"){ videoName += mimeTypeExt[i]; break; }
    }
    videoEle.src = "movie/"+videoName; // 読み込むファイル名(URLも可)を指定
    videoEle.load();  // 映像データを読み込み
    $("#playButton").attr("src", "images/play.png");  // 再生ボタン再設定
    $("#slider").slider("value", 0);  // 0秒にリセット
  });

■変更後

  $("#playList img").click(function(){
    var videoName = $(this).attr("title"); // title属性にファイル名が入っているので読み出す
    videoEle.src = "movie/"+videoName+".mov"; // 読み込むファイル名(URLも可)を指定
    videoEle.load();  // 映像データを読み込み
    $("#playButton").attr("src", "images/play.png");  // 再生ボタン再設定
    $("#slider").slider("value", 0);  // 0秒にリセット
  });