Win IoT on RPi で WebView を試す

基本、デバイスには豊富な UI は必要ない…のかもしれませんが、Win IoT Core には WebView というコントロールがあります。WebView 自体はストアアプリにもあるので、どれだけ表示されるかは IoT Core の実装次第になるわけですが、RPi2 の場合はそれなりに GPU が使える（描画の高速化も売りにしている）ので、手軽に画像やテキストを表示させるための WebView にも期待したいところです。たぶん、DOM 解析もできるから HTML をダウンロードしてきてパースしたり、逆にリソースに含めてある HTML を読みだして jQuery で制御するという技も可能なはずです。

実験用アプリ

WebView を貼り付けた簡単なアプリを作っておきます。私の RPi の場合、USB マウス/キーボードの両方とも効かないで、PC から URL を送る仕組みを作っておきます。先日作った SimpleWebServer を利用してアドレスを送れるようにします。

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        this.Loaded += MainPage_Loaded;
    }

    SimpleWebServer _server;
    private void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        _server = new SimpleWebServer();
        _server.OnReceived += _server_OnReceived;
        _server.Start();
        // this.webView.Navigate(new Uri(textUrl.Text));
    }

    private async void _server_OnReceived(string data)
    {
        var url = data.Substring(1);    // 最初の "/" のみ消す
        // GET 受信
        await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal,
            () => {
                textUrl.Text = url;
                this.webView.Navigate(new Uri(url));

            });
        // 応答を送信
        _server.SendResponse("response: " + data);
    }
}

こんな風に送られてきたデータを、WebView.Navigate しているだけです。

いろいろ動かしてみる

ノーマルに自分の wordpress のサイトを表示させます。User Agenet がモバイルになっているらしく、スマートフォンの画面が表示されます。このあたりは、WebView のほうで指定が可能なはずです。

重たそうな microsoft.com を表示させます。中央のダイアログが出てきたところを見ると、Javascript が動いていることがわかりますね。ちなみに、マウスが動かないので、これ以上進めませんが（苦笑）。

どうせなので、Raspberrypi.org も表示させます。レイアウト崩れもないので、CSS がきちんと対応しているのでしょう。

twitter.com も表示できます。キーボードが無反応なので、投稿とかはできませんが、タイムラインが表示されているところをみると、Twitter API がきちんと呼び出されているようです。Win IoT は SSL/TLS 対応なので https も通ります。

ちょっと複雑なところで、SVGとjQueryで絵を描いているようなアニメーションを実装する方法 | 株式会社LIG にある SVG + jQuery のアニメーションを表示させます。えらく遅いですが、きれいに SVG と jQuery が動きます。これだけ動けば、たいていのサイトは表示できるのではないかと。

Youtube は HTML5 モードで動いているはずです。マウスでクリックできないので、動画が再生できるかどうかは不明なのですが（あちこちのサイトを探したけど、自動再生にはなりませんでした）、まあ、大丈夫なのでは。

実験的に mpeg 動画を自サイトにアップして表示させると、うまく動きます。読み込みに少々時間がかかりますが、きれいに動きているのでこれで十分かと。音声が出なかったのは、4線プラグのほうで出ているのか、HDMI の音声出力に対応していないのかは不明です。

これらは、WebView コントロール内で表示させているのですが、XAML 内に適当なコントロール（メディアコントロールなど）を貼り付けても動くと思います。Flash とか ogg は無理そうなので、そのあたりは今後の OSS 系のライブラリに期待です。C++/CX が使えるので、デコード関係のものを持ってくれば動くんじゃないですかね。ちなみに、プロジェクトは Universal で作っているので、そのまま Windows Phone や PC でも動作が可能です。この実験プログラム自体も、一度 PC 上で動作確認してから RPi2 で動かしています。