• 検索結果がありません。

HOW DO I WebBrowser コントロールで HTML5 を 使用するには ここでは以下の手順で説明します Video 要素を使用する Silverlight と JavaScript の間でやり取りする Canvas 要素を使用する Video 要素を使用する 1. Visual Stu

N/A
N/A
Protected

Academic year: 2021

シェア "HOW DO I WebBrowser コントロールで HTML5 を 使用するには ここでは以下の手順で説明します Video 要素を使用する Silverlight と JavaScript の間でやり取りする Canvas 要素を使用する Video 要素を使用する 1. Visual Stu"

Copied!
5
0
0

読み込み中.... (全文を見る)

全文

(1)

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" を

(2)

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 が読み込まれました" という意味の文字列) を渡します。

(3)

<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) {

(4)

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>

(5)

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

参照

関連したドキュメント

水道水又は飲用に適する水の使用、飲用に適する水を使

※ 硬化時 間につ いては 使用材 料によ って異 なるの で使用 材料の 特性を 十分熟 知する こと

注意: Dell Factory Image Restore を使用す ると、ハードディスクドライブのすべてのデ

Windows Hell は、指紋または顔認証を使って Windows 10 デバイスにアクセスできる、よ

Q-Flash Plus では、システムの電源が切れているとき(S5シャットダウン状態)に BIOS を更新する ことができます。最新の BIOS を USB

荒天の際に係留する場合は、1つのビットに 2 本(可能であれば 3

戦略的パートナーシップは、 Cardano のブロックチェーンテクノロジーを DISH のテレコムサービスに 導入することを目的としています。これにより、

の変化は空間的に滑らかである」という仮定に基づいて おり,任意の画素と隣接する画素のフローの差分が小さ くなるまで推定を何回も繰り返す必要がある