WebASM用の簡易WebViewコントロールを作る
WebASM用のWebViewコントロールは、まだ提供されていません。表示したWebページのイベントを取ったりページ内のスクリプトと相互作用したりするのは困難ですが、ただ単にWebページを表示するだけなら、簡単に実装できます(次のコード)。
using System; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Markup; namespace UF16 { [ContentProperty(Name = nameof(Source))] public class WebAsmWebView : Control { public WebAsmWebView() : base(htmlTag: "iframe") { base.SetAttribute("style", ""); } private Uri _source; public Uri Source { get => _source; set { base.SetAttribute("src", value.ToString()); _source = value; } } } }
これでSourceプロパティにUriオブジェクトをセットしてやれば、コントロールにそのWebページが表示されます。なお、コンストラクターでstyle属性に空文字列を設定しているのは、既定では「pointer-events: none;」が設定されているため、そのままではマウス操作を付けつけないからです。
アプリの実行中にWebページのソースコードを見てみると、上のコントロールはHTMLのiframe要素として出力されているのが分かります(次の画像)。
このように実行時はhtmlのiframe要素として表示しているだけなので、アプリがhttpsで提供されているときには、ブラウザーの制限によって簡易WebViewにhttpのWebサイトは表示されません。
まとめ
このようにして、SQLiteデータベースにWebページの情報を保存・更新し、選択したWebページを表示するというサンプルアプリをUno Platformで作ることができました(次の画像)。
このアプリの主なコードは、.SharedプロジェクトのMainPage.xaml/MainPage.xaml.csとSQLiteSampleプロジェクトにあります。ご覧になっていただければ分かるように、UWPアプリ開発者にとってはほとんどが見慣れたコードです。そこから4つのプラットフォームに対応したアプリを生成してくれるのが、Uno Platformなのです。
今回はプレリリース版のNuGetパッケージを使っています。安定版では仕様が変わるかもしれませんし、ひょっとしたら安定版がリリースされないという可能性すらあります。今回の記事の内容で製品版のアプリを作ろうとするのはちょっと冒険でしょう。それでもUno Platformの可能性はしっかり感じ取っていただけたことと思います。
UWPアプリに興味が湧いてきた人へ
Windowsデスクトップ用アプリの開発はWindows Formsなら経験があるけど、ちょっとUWPアプリ開発も気になってきたという方へ。ぴったりの電子書籍を書きました!
『UWP アプリ開発 101 第2版: Windows Forms 開発者のための C# / XAML による UWP アプリ開発入門』 (BluewaterSoft 2017/7/1)
・Kindle版とUWPアプリ版があります。
・どちらも無料で最初の方を読めるので、とりあえず試し読みをしてみてください。
また、Microsoft公式のチュートリアルやたくさんのサンプルコードなどもあります。UWPアプリの開発環境を整えてUWPアプリのプロジェクトを作れるようになったら、これらのドキュメントやサンプルも参考にしてみてください。