はじめに
Windows Vistaガジェット入門では、Windows Sidebarガジェットの作成方法と、ガジェット内で使えるさまざまな機能について解説させていただきました。本稿では、より実用的なガジェットの開発例として、YouTubeを組み込んだ動画再生ガジェットの作成方法を解説します。YouTubeは、多くのブログで利用されているようにYouTube以外の外部のサイトに動画を組み込むことが可能です。ガジェットの中身も結局はHTMLなので、URLからアクセス可能なサービスはガジェットに組み込むことができます。
ガジェットそのものはHTMLとJavaScriptの組み合わせにすぎないため、プログラムとしてできる範囲は限られています。通常のWindowsアプリケーションのように、豊富なAPIによるグラフィックス処理やファイルやネットワークへの自由なアクセスはできません。そこで、実用的で魅力のあるガジェットの開発手法として、何らかのWebサービスと組み合わせ、Webから情報を取得して表示する方法が挙げられます。本稿では扱いませんが、Ajaxを使ってWebから必要なデータを取得するという方法もあります。
動画の再生
YouTubeの動画をガジェット内で再生する方法は、あなたのWebサイトやブログにYouTubeの動画を貼り付ける方法と変わりありません。ガジェットとして表示するHTMLファイル内にYouTubeが指定するobject要素を組み込めばよいのです。表示したい動画のアドレスなどはYouTubeで確認することができます。
HTML内に動画を組み込むには、組み込みたい動画のページに移動し、Embedと書かれている横のテキストボックス内のテキストをコピー&ペーストします。
例えば、図1の動画をHTML文書に組み込みたい場合、表示させたい場所に次のようなタグを追加します。ブログなど、HTMLを自由に記述できない制限されたシステムを使っている場合は、組み込めないこともあります。
<object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/1FHK4PRZePQ"> </param> <param name="wmode" value="transparent"></param> <embed src="http://www.youtube.com/v/1FHK4PRZePQ" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed> </object>
このobject要素は、「http://www.youtube.com/v/1FHK4PRZePQ」が返すFlashムービーを表示します。object要素は、ブラウザに組み込まれたアドオンなど、任意のオブジェクトを表示します。Flashの他に、MediaPlayerやJavaアプレットなどを表示する場合もこの要素を使います。YouTubeは、Flashムービー内で動画を再生するため、YouTubeの動画を表示させるにはFlash形式のデータとしてHTMLに組み込むことになります。当然、ブラウザにFlashがインストールされていない場合は再生することができません。
object要素の子要素であるparam要素は、オブジェクトに渡す任意のパラメータを指定します。name属性にパラメータの名前、value属性に値を指定します。param要素で指定するパラメータは、表示するオブジェクトによって異なります。Flashは、movieパラメータから再生するファイルのURLを受け取ります。
もう1つの子要素embedは、XHTML 1.0 Strictでは定義されていません。これは、Netscape Navigatorが昔に採用した独自の要素で、機能的にはobject要素と同じです。その後、他のブラウザでもembedがサポートされるようになりましたが、非標準であることに変わりはありません。現在では、標準化されているobject要素を用いるべきとされていますが、古いブラウザとの互換性を考慮してembed要素が使われることがあります。
今回制作するガジェットは、Windows Vista、Internet Explorer 7以降のコンポーネントで表示されることが確実なので、Internet Explorer以外のブラウザや、古いバージョンへの対応を検討する必要はありません。積極的にembedを使う理由はないのでembedを削除しましょう。
ただし、embedを削除しただけでは動画が表示されなくなってしまいます。これは、object要素がembed子要素のtype属性でメディアの形式を把握していたためです。object要素にはtype属性でMIMEタイプを指定することができるので、type属性を加えてFLASH形式を表すapplication/x-shockwave-flashを指定してください。
<object width="425" height="350" type="application/x-shockwave-flash"> <param name="movie" value="http://www.youtube.com/v/1FHK4PRZePQ"> </param> <param name="wmode" value="transparent"></param> </object>
ガジェット用のタグとしては、この方がスマートになります。ガジェットのソースを記述するために、ガジェット用のフォルダを作成し、マニフェストとなる「gadget.xml」と表示するHTMLファイルを用意してください。ガジェットとして表示するHTMLファイルのbody要素内に、上記のobject要素を書くことでYouTubeの動画をWindows Sidebar上で再生することができます。詳しいガジェットの作成方法については『Windows Vistaガジェット入門』を参考にしてください。
<?xml version='1.0' encoding='utf-8' ?> <gadget> <name>Sample00</name> <version>1.0.0.0</version> <author name="Leon Akasaka"> <info url="http://www.wisdomsoft.jp" /> </author> <copyright>© 2007</copyright> <description></description> <hosts> <host name='sidebar'> <base type='HTML' apiVersion='1.0.0' src='test.html' /> <permissions>Full</permissions> <platform minPlatformVersion='1.0' /> </host> </hosts> </gadget>
<?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> </head> <body style="width:425px; height:350px; margin:0px;"> <p> <object width="425" height="350" 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>
Sample00は、少々バーからはみ出してしまいますが、YouTubeの動画を再生するガジェットです。再生するガジェットのアドレスは固定なので、常に同じ動画しか再生されませんが、このソースを発展させればYouTubeガジェットが作れそうです。
