再生する動画を変更する
1つの動画しか再生できないガジェットでは面白くありません。インターネットなどを通じて一般に広く配布するガジェットを作るのであれば、やはり利用者が自由にお気に入りの動画を再生できるべきです。
YouTubeは、動画をIDで管理しています。Sample00で再生している動画のURLは「http://www.youtube.com/v/1FHK4PRZePQ」でしたが、このURLの末尾「1FHK4PRZePQ」が動画のIDに該当します。YouTube側のサーバープログラムは、要求されたURLのIDに対応している適切な動画を再生するFlashデータを返します。例えば、上記のURLのID部分を別のIDに変更すれば、再生される動画が変化します。
ガジェットの利用者に動画のIDを入力してもらえれば、object要素をJavaScriptで動的に変更することで再生する動画を切り替えることができそうです。object要素は、表示するFlashムービーのアドレスをparam子要素のmovieパラメータに対応する値で判断していました。そこで、movieに指定する値のURLの末尾を変数にします。
注意点としては、FlashムービーのURLを表すmovieパラメータのvalue属性の値を変更するだけでは不十分です。object要素の場合、オブジェクト全体を初期化しなければ新しいデータを表示してくれないので、object要素を表示する親要素のinnerHTMLプロパティから、object要素を再構築してください。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="jp"> <head> <title>sample</title> <script type="text/javascript"> function setMovie() { var html = '<object width="425" height="350"' + ' type="application/x-shockwave-flash">'; html += '<param name="movie" value="http://www.youtube.com/v/' + movie.value + '"></param>'; html += '<param name="wmode" value="transparent"></param>'; html += '</object>'; youtube.innerHTML = html; } </script> </head> <body style="width:425px; height:380px; margin:0px;"> <div> <input type="text" id="movie" /> <input type="button" value="OK" onclick="setMovie()" /> </div> <div id="youtube"></div> </body> </html>
sample01は、body要素内にyoutubeというid属性を持つ空のdiv要素を用意しています。ガジェット上部に表示されるテキストボックスにYouTubeの動画IDを入力して［OK］ボタンを押すと、スクリプトのsetMovie()関数が呼び出されます。setMovie()関数は、入力されている動画IDから、Flashムービーを再生する新しいobject要素を作成し、div要素のinnerHTMLプロパティを設定しています。
スクリプトによって動的に生成されたobject要素をyoutubeというid属性を持つdiv要素のinnerHTMLに設定することで、div要素の内容を丸ごと変更することができます。そのため、新しい別の動画IDをテキストボックスに入力して［OK］ボタンを押せば、現在表示されているobject要素は削除され、別の動画を再生するobject要素が表示されます。これで、ガジェットの利用者が動画IDを入力して、好きな動画を再生することができるようになりました。
動画サイズの変更
Windows Sidebarにドックされた状態だと、通常のYouTube動画のサイズでは大きすぎるので、object要素のサイズを変更しましょう。理想的なのは、ドックされている状態の場合はWindows Sidebarの横幅に合わせ、ドックから外されるとYouTubeの標準の動画サイズに合わせるという動作です。object要素の幅と高さを変更すればFlashも自動的に伸縮されるので、動画サイズの変更についてスクリプト側が意識する必要はありません。
ガジェットがドックされているかどうかはSystem.Gadget.dockedから取得することができます。dockedプロパティがtrueならばドックされている、falseならばドックされていません。ガジェットの起動時や動画の変更時には、このプロパティを調べてガジェットやobject要素の幅と高さを決定することができます。
ドック状態の変更を監視するには、関数を登録します。ガジェットがユーザーによってドックされるとSystem.Gadget.onDockプロパティに設定している関数が呼び出され、ドックが解除されるとSystem.Gadget.onUndockプロパティに設定している関数が呼び出されます。onDockプロパティとonUndockプロパティに、ドック状態が変更されたときに呼び出してほしい関数を設定します。ドック状態が変化すると関数が呼び出されるので、このタイミングでガジェットやobject要素の幅と高さを変更します。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="jp"> <head> <title>sample</title> <script type="text/javascript"> System.Gadget.onDock = onDock; System.Gadget.onUndock = onUndock; function init() { if (System.Gadget.docked) onDock(); else onUndock(); } function onDock() { document.body.style.width = "125px"; document.body.style.height = "105px"; youtube.style.width = "125px"; youtube.style.height = "105px"; } function onUndock() { document.body.style.width = "425px"; document.body.style.height = "350px"; youtube.style.width = "425px"; youtube.style.height = "350px"; } </script> </head> <body onload="init()" style="width:125px; height:105px; margin:0px;"> <p> <object id="youtube" type="application/x-shockwave-flash"> <param name="movie" value="http://www.youtube.com/v/1FHK4PRZePQ"></param> <param name="wmode" value="transparent"></param> </object> </p> </body> </html>
sample02では、ガジェットをWindows Sidebarのドックから外すとonUndock()関数が呼び出され、ガジェットとobject要素のサイズを425×350ピクセルに変更します。再びガジェットをドックに戻そうとすると、onDock()関数が呼び出され125×105ピクセルに修正されます。
注意点としてはbody要素のonloadイベント属性でもサイズを変更することです。ガジェットをWindows Sidebarに追加したときは、必ずドック状態で表示されますが、アンドックされている状態でWindowsからログオフしたとき、次にログオンしたときはアンドックされている状態で初期化されることになります。そのため、ドック状態でサイズが変化するガジェットは、onloadイベントに対応して、HTMLが表示されたときのドック状態に応じてガジェットサイズを設定するようにしなければなりません。
