View
2.139
Download
0
Category
Preview:
DESCRIPTION
2011年12月4日にスマートフォン勉強会@関東#16でお話させて頂きました。
Citation preview
WebBroser Control Tipsfor Windows Phone 7
スマートフォン勉強会＠関東 #16CH3COOH( 酢酸 )
CH3COOH( 酢酸 ) スマートフォンプログラマ (29 歳 無
職 ) デバドラからアプリ、業務系バッチま
で ここ最近半年は、 WP7 アプリ開発中
心 ブログ
http://d.hatena.ne.jp/ch3cooh393/ サイト http://ch3cooh.jp/
自己紹介
VS2010 から WebBrowser を使う WebBrowser の基本的な機能 WebBrowser Control Tips まとめ
本日のアジェンダ
WebBrowser Control を使ってみよう
WebBrowserTask API 標準ブラウザ (IE Mobile) を連携起動
WebBrowser Control アプリ内で唯一ウェブページを表示させ
る
Windows Phone アプリでウェブページを閲覧する方法
Visual Studio でプロジェクトを作成 WebBrowser をドラッグアンドド
ロップ F5 で実行
VS2010 から WebBrowser を使う
たったこれだけ！
WebBrowser デモ
デモ内容 解説 (1)
デザイナーにドラッグ＆ドロップ
デモ内容 解説 (2)
Source プロパティにURL を設定
WebBrowser コントロールが表示されると、http://ch3cooh.jp/ へ遷移します
デモ内容 解説 (3)
Windows Phone エミュレータで「酢酸の実験室 ( サイト名 ) 」が表示されれば、成功です！！
WebBrowser Control の基本的な機能
標準コントロールとして提供されている
基本的なウェブ閲覧の機能 ピンチイン・アウトによるズーム パンによるスクロール
アプリ側から JavaScript の実行 表示中コンテンツ側から通知を受けられ
る
WebBrowser Control
WebBrowser Control Tips
ページの遷移 レスポンスをフックしてページ遷移をキャンセル ローカルリソースの HTMLを表示する DataURIScheme で画像を表示する コンテンツに定義されている JavaScript Function を実行する コンテンツに定義されていない JavaScript を実行する タイトルや表示中の URLを取得する コンテンツ側から通知を受ける User Agent を偽装して iPhone用のページをみる 自動ログイン機能を実装する
WebBrowser Control Tips
WebBrowser.Navigate(Uri) メソッドでページ遷移を行います
遷移中にいくつかのイベントが発生
ページ遷移を行う
Navigating Event
Navigated Event
NavigationFailed Event
Navigating イベントでNavigatingEventArgs オブジェクトのCancel プロパティを「 True 」に設定することで遷移をキャンセルすることが可能です。
ページ遷移をキャンセル
private void webBrowser_Navigating(object sender, NavigatingEventArgs e) { // 2 ちゃんねるドメインであればページ遷移させない if (Regex.IsMatch(e.Uri.Host, "(?:.*\\.)2ch\\.net$")) { MessageBox.Show(" 本アプリは 2ch の閲覧を許可していません！"); e.Cancel = true; } }
string 型の HTML 文字列をパラメータに、WebBrowser.NavigateToString メソッドを使うことが出来ます。
ローカルの HTML を表示する その１ （１）
webBrowser.NavigateToString("<html><head></head><boby> テストページです。 </body>");
ただし、問題が・・・ WebBrowser.NavigateT
oString メソッドを使って表示させると、日本語が文字化ける
回避するには、 HTML 上の日本語を実態参照変換させる
ローカルの HTML を表示する その１ （２）
分離ストレージに格納した HTML ファイルを参照して表示させることが出来ます。
WebBrowser.Base プロパティには分離ストレージのディレクトリを指定 これが参照時の基本ディレクトリとなる
ローカルの HTML を表示する その２ （１）
// 基本ディレクトリを設定webBrowser.Base = "help";// 基本ディレクトリからの相対パスで About.html へ遷移webBrowser.Navigate(new Uri("About.html", UriKind.Relative));
Windows Phone OS 7.1 からは、 Base64 でエンコードした画像を表示することが出来ます
Data URI Scheme を使って画像を表示する
<html> <head></head> <body> <p><img width="125" height="125" src="data:image/png;base64,iVBORw0KGgoAAAANSU ……( 中略 )…… ORK5CYII=" /></p> <p> テストページです。 </p> </body></html>
JavaScript 関数を定義した HTML ファイルがあります
この関数をアプリ側からコールすることが出来ます
コンテンツで定義されているJavaScript を実行する ( １ )
<html> <head> <script type="text/javascript"> function funcWithoutPram() { result.innerHTML = "called funcWithoutPram"; } </script> </head> <body> <div id="result">None Data. </div> </body></html>
WebBrowser.InvokeScript メソッドを使って実行します
JavaScript の関数の引数が複数個あっても、 InvokeScript(String, String[]) メソッドが用意されているので、引数が多い日でも安心です
コンテンツで定義されているJavaScript を実行する ( ２ )
webBrowser.InvokeScript("funcWithoutPram");
// 引数が 2 つの JavaScript を実行webBrowser.InvokeScript("funcWithPram2", " 引数 1", " 引数 2");
JavaScript には eval 関数というものがあります eval 関数は string 型の JavaScript のコードを引
数として渡すと実行してくれます
コンテンツで定義されていないJavaScript を実行する
// 表示しているタイトルを取得するvar title = webBrowser.InvokeScript("eval", "document.title");
// 表示している URL を取得するvar strURL = webBrowser.InvokeScript("eval", "document.URL");
コンテンツ側から window.external.notify メソッドを使ってアプリへ通知します
コンテンツから JavaScript を使ってアプリへ文字列を渡す
( １ )
<html> <head> <script type="text/javascript"> function funcWithPram1(parm1) { window.external.notify(parm1); } </script> </head> <body> </body></html>
window.external.notify メソッドを実行すると、アプリ側で ScriptNotify イベントが発生します
コンテンツから JavaScript を使ってアプリへ文字列を渡す
( ２ )
// コンテンツからの Script 通知を受信するprivate void webBrowser_ScriptNotify(object sender, NotifyEventArgs e) { // コンテンツから渡された引数データをメッセージボックスで表示 MessageBox.Show(e.Value);}
カスタム HTTP ヘッダーを付与することが可能なWebBrowser.Navigate (Uri, String, String) メソッドを使うと、 User Agent を偽装出来る
User Agent を偽装してiPhone 用のページを閲覧する
var ua = "User-Agent:Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en)“;webBrowser1.Navigate(new Uri(URL), null, ua);
Yahoo!JAPAN のページです。 https://login.yahoo.co.jp/co
nfig/login?.src=www&.done=http://www.yahoo.co.jp
ID 部分の id は、 username パスワードの id は、 passwd
自動ログイン機能を実装する(1)
JavaScript のコード
InvokeScript のコード (C#)
自動ログイン機能を実装する(2)
document.getElementById('username').value = 'your_id';document.getElementById('passwd').value = 'your_password';document.forms['login_form'].submit();
var parm1 = string.Format(“document.getElementById(‘username’).value = ‘{0}’”, username);var ret1 = (string)webBrowser1.InvokeScript("eval", parm1);var parm2 = string.Format(“document.getElementById(‘passwd’).value = ‘{0}’”, password);var ret2 = (string)webBrowser1.InvokeScript("eval", parm2);webBrowser1.InvokeScript("eval", "document.forms['login_form'].submit();");
まとめ
WebBrowser は意外と使える子でした SavaToString メソッドで HTML の
キャッシュ ローカルリソース参照でヘルプページ
を InvokeScript メソッドと ScriptNotify
イベントで、 JavaScript を使ってHTML とアプリでデータ交換
まとめ
Windows Phone Advent Calendar “ ひとり” 2010 開催中
ATND: http://atnd.org/events/22862
会場 : http://d.hatena.jp/ch3cooh393/
告知
ご清聴ありがとうございました
Recommended