読者です 読者をやめる 読者になる 読者になる

WindowsストアアプリのWebViewにモバイルブラウザ形式表示にする

WindowsストアアプリのWebViewですが、そのまま使うとPCブラウザと同じHTML形式で表示されます。
これをモバイルブラウザ対応させようとやってみました。







まずは、モバイルブラウザに偽装させるために、user-agentの文字列を確認します。
今回はWindows Phone 8に偽装したいと思います。
IE11の開発者ツールから確認したところ、Windows Phone 8のuser-agentの文字列は以下の通りでした。

Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch)

↓開発者ツール

今回はこちらWindows Phone8の文字列を使ってuser-agentを偽装しますが、対応して無いサイトもあるので、実際にはiPhoneあたりのものを使った方が良いかもしれません。
このサイトなんかも参考にしてみてください。
userAgent一覧/ユーザーエージェント一覧



C#でしたら、この文字列を使って以下のように呼べば、
モバイルブラウザ用のHTMLが取得できます。

HttpClient client;
client = new HttpClient();
client.DefaultRequestHeaders.Add(
    "user-agent",
    "Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch)");
HttpResponseMessage response = await client.GetAsync("サイトのURL");
response.EnsureSuccessStatusCode();
string html = await response.Content.ReadAsStringAsync();


ここで取得したHTMLをWebViewにバインドしてあげたいのですが、
HTMLを直接バインドするためのプロパティが見つかりません。
そこでWebViewのプロパティを拡張するために以下のようなクラスを作成します。

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace MyApp.Extensions
{
    class HtmlBindingExtension
    {
        public static string GetHTML(DependencyObject obj)
        {
            return (string)obj.GetValue(HTMLProperty);
        }

        public static void SetHTML(DependencyObject obj, string value)
        {
            obj.SetValue(HTMLProperty, value);
        }

        // Using a DependencyProperty as the backing store for HTML.  This enables animation, styling, binding, etc...  
        public static readonly DependencyProperty HTMLProperty =
            DependencyProperty.RegisterAttached("HTML", typeof(string), typeof(HtmlBindingExtension), new PropertyMetadata(0, new PropertyChangedCallback(OnHTMLChanged)));

        private static void OnHTMLChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {

            WebView wv = d as WebView;
            if (wv != null)
            {
                wv.NavigateToString((string)e.NewValue);
            }
        } 
    }
}

XAMLにこのクラスを取り込むことで、
WebViewのプロパティを拡張できます。

<Page
   .....
   xmlns:local="using:MyApp.Extensions"
   .....
   >
<WebView local:HtmlBindingExtension.HTML="{Binding バインド設定}" />
</Page>

あとはここに先ほど取得したモバイルブラウザ用のHTMLをバインドしてあげれば、
WebViewにモバイル向けのHTMLコンテンツを表示できます。

参考リンク
Windows 8 How to bind HTML from a data model to a WebView. sample in C#, VB.NET, C++, XAML for Visual Studio 2012



User Agent毎の見え方を確認したい場合はこの辺りのブラウザ用プラグインが便利です。
Chrome Web Store - User-Agent Switcher for Chrome
User Agent Switcher :: Add-ons for Firefox