ウィモバの日々

Windowsをモバイルする…それがウィモバ(仮)。手のひら端末が好きです

UWPアプリでWebViewを使ってブラウザを作りたいメモ

VisualStudioでWindows10とWindows10Mobile向けにUWPアプリを作れるようにはなったけど
盆暗な自分にいいアイディアがあるわけもなく・・・とりあえず簡単な勉強でもしてみるかーということで
そういえばW10M向けにはOpera miniがあるんだけど、何故かストアからインストール出来ない状態になっている。
のでなんかそういうのを作れたらいいなー?と、なんとなくWebブラウザの作り方を調べてみる。



  • シンプルなブラウザは参考サイトを見れば作れる

WebViewコントロールで簡易Webブラウザを作るには?[Windows 8.1ストア・アプリ開発]:WinRT/Metro TIPS - @IT
WebViewを使ってHTMLコンテンツを表示させる | Think IT(シンクイット)
WebViewコントロールの簡単な使い方の説明とサンプルソースが記載されているので
どちらかにあるソースをそのままコピペして持ってくれば、シンプルなブラウザは一応出来る。


https://www.ka-net.org/blog/?p=6167
こちらはJavaScriptを併用した版。Javaスクリプトでもコントロールを制御出来るっぽい。


Web view - UWP app developer | Microsoft Docs
Microsoftのサイトではさらに細かいWebViewの使い方やイベント等についての説明がある。


このあたりを見ればWebViewコントロールを利用した簡単なブラウザは作成出来る。
ただ、そのままではPC向けサイトが表示されるのでW10M端末で使うためにはモバイル向けサイトを表示させる工夫が必要になる。



  • モバイル向けサイトを表示するためUserAgentでモバイル端末に偽装する

ということで、UserAgentを仕込んでモバイル端末に偽装することにする。
@ITのサンプルだと、Goボタンを押下した場合に

Uri newUri;
〜中略〜
webView1.Navigate(newUri);

という風にNavigate関数で開くページのurlを指定しているので、これを

HttpRequestMessage HttpRequestMessage = new HttpRequestMessage(HttpMethod.Get, newUri);
var add = "Mozilla/5.0 (iPhone; CPU iPhone OS 9_3_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13E238 Safari/601.1";
HttpRequestMessage.Headers.Add("User-Agent", add);
this.webView1.NavigateWithHttpRequestMessage(HttpRequestMessage);

といったようにNavigateWithHttpRequestMessage関数でUAを付加してやれば、PC向けでなくモバイル向け(上だとiPhone向け)サイトが表示される。

だが、これだとサイト上のリンクを直接クリックした場合にはUAが付加されないため、リンク先の表示はPC向けになってしまう。
そのためリンクをクリックした際もUAを付加する工夫が必要になる。



  • 対応1:NavigationStartingイベントでUA強制付加→問題あり

Navigate〜関数を呼んだり、画面上のリンクをクリックすることでNavigationStartingイベントが走る。
これを利用して、NavigationStartingイベント内でUAを付加しようとする対応策がこちら。


c# - Change default User-Agent in WebView UWP - Stack Overflow

イベント内で強制的にキャンセルし、UAを付けたNavigate〜呼んでイベント処理している。
この方法では確かにYahooサイトがモバイル向け表示になり、ニュース等をクリックして進めていってもモバイル向けのままだった。
しかし、残念ながらイベントを書き換えているせいかヘッダを強引に書き換えて処理しているせいか
画面制御がおかしくなっているようでYahooのログイン処理がうまくいかず、ログインが出来ない状態になってしまった。
なので別に対策が必要な模様。



  • 対応2:UrlMkSetSessionOptionでUAを変更

さらに調べていると、こんな素晴らしいテクニックを公開しているサイト様を発見。
Windows Phone の WebView でUser-Agent を変更する - kazuakix の日記

[DllImport("urlmon.dll", CharSet = CharSet.Ansi)]
private static extern int UrlMkSetSessionOption(int dwOption, string pBuffer, int dwBufferLength, int dwReserved);
const int URLMON_OPTION_USERAGENT = 0x10000001;

public void ChangeUserAgent(string Agent)
{
UrlMkSetSessionOption(URLMON_OPTION_USERAGENT, Agent, Agent.Length, 0);
}

なんと、WinAPIのUrlMkSetSessionOption関数でUserAgentを変更する機能が使えるとのこと。
ていうか、UWPアプリでもdllimportでネイティブAPI呼び出し機能って使えたんだねー、びっくり。
W10MでOpenCVとか外部ライブラリを使う場合はどうするんだろ・・・さすがにARM向けにビルドして取り込んだりするのかな?

そんな疑問は置いておいて、この手順を取り入れたら実機のKATANA01でもYahooのモバイル表示&ログインが成功した!すごーい!