SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

UWPアプリ開発の最前線

SQLiteデータベースがWebアプリでも使える!
~Uno Platformクロスプラットフォーム開発の可能性を探る

UWPアプリ開発の最前線 第16回

  • X ポスト
  • このエントリーをはてなブックマークに追加

WebASM用の簡易WebViewコントロールを作る

 WebASM用のWebViewコントロールは、まだ提供されていません。表示したWebページのイベントを取ったりページ内のスクリプトと相互作用したりするのは困難ですが、ただ単にWebページを表示するだけなら、簡単に実装できます(次のコード)。

WebASM用の簡易WebViewコントロール(WebAsmWebView.cs
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要素として出力されているのが分かります(次の画像)。

実行中の簡易WebViewコントロールのHTMLソース
実行中の簡易WebViewコントロールのHTMLソース(Chromeの開発者ツール)

 このように実行時はhtmlのiframe要素として表示しているだけなので、アプリがhttpsで提供されているときには、ブラウザーの制限によって簡易WebViewにhttpのWebサイトは表示されません。

まとめ

 このようにして、SQLiteデータベースにWebページの情報を保存・更新し、選択したWebページを表示するというサンプルアプリをUno Platformで作ることができました(次の画像)。

4つのプラットフォームで動いている今回のサンプルアプリ
4つのプラットフォームで動いている今回のサンプルアプリ(再掲)

 このアプリの主なコードは、.SharedプロジェクトのMainPage.xamlMainPage.xaml.csSQLiteSampleプロジェクトにあります。ご覧になっていただければ分かるように、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アプリのプロジェクトを作れるようになったら、これらのドキュメントやサンプルも参考にしてみてください。

関連リンク

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
UWPアプリ開発の最前線連載記事一覧

もっと読む

この記事の著者

biac(ばいあっく)

HONDA R&Dで自動車の設計をやっていた機械屋さんが、技術の進化スピードに魅かれてプログラマーに。以来30年ほど、より良いコードをどうやったら作れるか、模索の人生。わんくま同盟の勉強会(名古屋)で、よく喋ってたりする。2014/10~2019/6 Microsoft MVP (Windows Devel...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/11840 2019/12/16 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング