HOW DO I …
WebBrowser コントロールで HTML5 を
使用するには
ここでは以下の手順で説明します。 Video 要素を使用する Silverlight と JavaScript の間でやり取りする Canvas 要素を使用するVideo 要素を使用する
1. Visual Studio で、"Windows Phone ゕプリケーション" プロジェクト テンプレートを使っ て "HTML5BrowserFeatures" という名前の新しいプロジェクトを作成します。
2. MainPage.xaml で、browser という名前の WebBrowser コントロールを追加します。 <phone:WebBrowser x:Name="browser" />
3. MainPage.xaml.cs のコンストラクターで、Loaded イベント ハンドラーを browser に追加 します。
public MainPage() {
InitializeComponent();
browser.Loaded += new RoutedEventHandler(browser_Loaded); }
void browser_Loaded(object sender, RoutedEventArgs e) {
}
4. このコンテンツのサポート フゔイルの Asset フォルダから "IsoExtras.cs" と "main.html" を既存のゕイテムとして追加します。
5. "main.html" の "ビルド ゕクション" が "コンテンツ" に設定されていることを確認します。 6. Loaded イベント ハンドラーで、SaveFilesToIsoStore メソッドを呼び出し、"main.html" を
voidbrowser_Loaded(objectsender, RoutedEventArgs e) {
IsoExtras.SaveFilesToIsoStore(new string[] { "main.html" }); browser.Navigate(new Uri("main.html", UriKind.Relative)); }
7. browser を "main.html" に移動します。
8. main.html の main div で、コメント ゕウトされている video 要素のコメントをはずし、 wmv ビデオをソースに設定します。controls も設定してください。
<div id="main"> the main content
<video src="http://media.ch9.ms/ch9/956d/685e3d3f-c2e2-4763-a668-9f020134956d/HAdoodlejump_ch9.wmv" controls /> </div> 9. プロジェクトを実行します。 10. ローカルの html が読み込まれます。 11. video 要素をタップするとビデオが全画面で再生されます。
※Windows Phone Emulator では再生できませんので、Windows Phone デバイスで お試しください
Silverlight と JavaScript の間でやり取りする
1. MainPage.xaml で、browser の IsScriptEnabled を "true" に設定し、ScriptNotify イベント ハ ンドラーを追加します。
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <phone:WebBrowser x:Name="browser" IsScriptEnabled="True" ScriptNotify="browser_ScriptNotify" />
</Grid>
2. MainPage.xaml.cs の ScriptNotify イベント ハンドラーで、渡される値を MessageBox で表 示します。
private void browser_ScriptNotify(object sender, NotifyEventArgs e) {
MessageBox.Show(e.Value); }
3. main.html で、script タグを追加し、JavaScript の window.external.notify 呼び出しを追加し、 "HTML Loaded" ("HTML が読み込まれました" という意味の文字列) を渡します。
<script> window.external.notify("HTML loaded"); </script> 4. プロジェクトを実行します。 5. JavaScript から渡された文字列が Silverlight のメッセージ ボックスに表示されます。 6. main.html で setBackground という関数を追加します。これは、パラメーターとして色を 受け取り、それを背景色に設定します。 <script> window.external.notify("HTML loaded"); function setBackground(c) { document.body.style.backgroundColor = c; } </script> 7. MainPage.xaml.cs の ScriptNotify イベント ハンドラーで、渡された文字列が "HTML Loaded" に等しい場合にメッセージを表示するように修正します。
private void browser_ScriptNotify(object sender, NotifyEventArgs e) { if (e.Value == "HTML loaded") { MessageBox.Show(e.Value); } }
8. Windows Phone のゕクセント カラー PhoneAccentBrush の色を取得して、16 進数の文字 列に変換します。
private void browser_ScriptNotify(object sender, NotifyEventArgs e) { if (e.Value == "HTML loaded") { MessageBox.Show(e.Value); Color c = ((SolidColorBrush)Application.Current.Resources["PhoneAccentBrush"]).C olor;
string hex = string.Format("#{0:x2}{1:x2}{2:x2}", c.R, c.G, c.B); }
}
9. InvokeScript 呼び出しで setBackground を呼び出し、16 進数値を渡します。
private void browser_ScriptNotify(object sender, NotifyEventArgs e) {
if (e.Value == "HTML loaded") { MessageBox.Show(e.Value); Color c = ((SolidColorBrush)Application.Current.Resources["PhoneAccentBrush"]).C olor;
string hex = string.Format("#{0:x2}{1:x2}{2:x2}", c.R, c.G, c.B); browser.InvokeScript("setBackground", hex); } } 10. プロジェクトを実行します。 11. html 本文の背景色が、選択されている Windows Phone のゕクセント カラーに変更され ています。
Canvas 要素を使用する
1. main.html で、video 要素をコメント ゕウトします。 2. theCanvas という名前の Canvas 要素を追加し、サイズを 300 x 300 に設定します。 <div id="main">the main content
<!--<video src="http://media.ch9.ms/ch9/956d/685e3d3f-c2e2-4763-a668-9f020134956d/HAdoodlejump_ch9.wmv" controls />-->
<canvas id="theCanvas" width="300" height="300"></canvas> </div> 3. drawSquare メソッドを追加して、Canvas の 2D 描画コンテキストへの参照を保存し、渡 される色を fillStyle に設定します。さらに fillRect を呼び出して、50,50 の位置と 100 x 100 のサイズを設定します。 <script> window.external.notify("HTML loaded"); function drawSquare(c) {
var canvas = document.getElementById('theCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = c; ctx.fillRect(50, 50, 100, 100); } function setBackground(c) { document.body.style.backgroundColor = c; } </script>
4. MainPage.xaml.cs の ScriptNotify イベント ハンドラーで、InvokeScript を変更して drawSquare を呼び出します。
private void browser_ScriptNotify(object sender, NotifyEventArgs e) { if (e.Value == "HTML loaded") { MessageBox.Show(e.Value); Color c = ((SolidColorBrush)Application.Current.Resources["PhoneAccentBrush"]).C olor;
string hex = string.Format("#{0:x2}{1:x2}{2:x2}", c.R, c.G, c.B); browser.InvokeScript("drawSquare", hex);
} }
5. プロジェクトを実行します。
6. Canvas 領域に、Windows Phone のゕクセント カラーを使って四角形が描画されます。
Windows Phone 上の IE9 が提供する強力なモバイル Web エクスペリエンスを紹介しました。 WebBrowser コントロールを使用することで、Web エクスペリエンスを効果的に使用するゕプ リケーションの開発が可能になります。
参考ビデオ:
How Do I: Use HTML5 in the WebBrowser Control in Windows Phone ´Mango´? http://msdn.microsoft.com/en-us/hh369944