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

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

Appleスライダを使う

　HTML5 Video Playerは、jQuery UIを使ってスライダー部分を実装していました。ところが、jQuery UIのスライダーはDashboard上ではドラッグ操作ができず、ウィジェット全体が動いてしまいます。そこで、jQuery UIの代わりにアップルが標準で用意している「Appleスライダ」を利用します。

Appleスライダ

http://developer.apple.com/jp/documentation/AppleApplications/Conceptual/Dashboard_ProgTopics/index.html

　Appleスライダの書式は以下のようになっています。

スライダーオブジェクト = new AppleHorizontalSlider(エレメント, 値が変化した時に呼び出すイベントハンドラ)

　HTML部分はjQuery UIのスライダーと同じ構造／タグで利用できるので、特に変更する必要はありません。

　次に、スライダーの操作に応じて映像の再生時間を調整する処理をJavaScriptで記述します。実際のスクリプトは以下のようになります。

  var slider1 = new AppleHorizontalSlider(document.getElementById("slider"), 
    function(currentValue){
      videoEle.currentTime = currentValue * videoEle.duration;
      videoEle.pause();
      $("#playButton").attr("src", "images/play.png");
    }
  );

　AppleHorizontalSlider()の第1引数にはスライダーのエレメント（タグ）を指定します。2番目に呼び出されるイベントハンドラには、ドラッグもしくはクリックされたときのスライダーの値が渡されます。スライダーの値は0.0～1.0の範囲になり、jQuery UIスライダーのように範囲やステップ（ドラッグ間隔）は指定できません。イベントハンドラ内部の処理はスライダーの値（0.0～1.0）に合わせてうまく反映されるように調整します。

　なお、スライダーはsetValue()メソッドを使ってスクリプトからも値を設定できますが、映像の再生中に値を設定すると映像が停止してしまうので、今回は実装を見送りました。

　ボリュームスライダーと可変速スライダーも同様にAppleスライダに置き換えます。ボリュームスライダーと可変速スライダーは初期値を設定する必要があるので、setValue()メソッドを使ってスライダー値を設定します。

  // ボリュームスライダーの処理
  var slider2 = new AppleHorizontalSlider(document.getElementById("volumeSlider"),
    function(currentValue){
      videoEle.volume = currentValue;
    }
  );
  slider2.setValue(0.5);
  // 可変速スライダーの処理
  var slider3 = new AppleHorizontalSlider(document.getElementById("speedSlider"),
    function(currentValue){
      var spd = currentValue * 2;
      if (spd < 0.5) { spd = 0.5; }
      videoEle.defaultPlaybackRate = videoEle.playbackRate = spd;
    }
  );
  slider3.setValue(0.5);