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

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

　前回、UWPアプリのコードをAndroid／iOS／Webブラウザでも動かすというクロスプラットフォーム開発環境Uno Platformを紹介しました。今回は、Uno Platformで作った、SQLiteデータベースを使うサンプルアプリを紹介します。なんと、Webブラウザの中にもデータベースを置けるのです。Uno Platformによるクロスプラットフォーム開発の可能性を実感してください。

はじめに

　前回の記事でUno Platformを紹介しました。簡単に言ってしまえば、UWPアプリのソースコードからAndroid／iOS／WebASM（Webブラウザ）用のアプリを生成するという仕組みのクロスプラットフォーム開発環境です。UWPアプリの開発者にとっては、そのスキルで4つのプラットフォームに対応したアプリを開発できるわけです。

　今回は、Uno Platformでできることを実感してもらおうと、簡単なサンプルアプリを作りました（次の画像）。ローカルに置いたSQLiteデータベースを読み書きします。WebASM版のサンプルアプリはChoromeブラウザーに対応しています（Edgeでは動作しません）。

4つのプラットフォームで動いている今回のサンプルアプリ：
左上＝WebASM（Chrome）、左下＝UWP、中＝iOS（エミュレーター）、右＝Android（エミュレーター）

　「Webアプリで、ローカルに置いたSQLite!?」。そうです、Webアプリでもデータベースをローカルに置けるのです。正確には、Webブラウザーが管理しているストレージにデータを格納します。Uno PlatformではIndexedDBを利用して、SQLiteのAPIを実現しています。サンプルアプリを動かしているChromeで開発者ツールを開くと、IndexedDBの中に「sqlite」フォルダーがあり、そこに「/sqlite/uf16.db」という名前のデータベースが作られているのが分かります（次の画像）。

サンプルアプリを実行しているChromeブラウザー：
右側に開発者ツールを開いている。赤枠のところを見ると、SQLiteデータベースの存在が分かる

　WebブラウザーのIndexedDBは、ブラウザーの設定によっては永続化されないこともあります（そのページを閉じたときにデータベースが消えてしまう）。また、エンドユーザーの設定操作やハードディスクの残量に応じて削除されることもあります。そういったところがネイティブアプリとは違ってちょっと使いにくい感じがありますが、それでもWebアプリでローカルデータベースを利用できるメリットは大きいでしょう。

　今回は、Uno PlatformでSQLiteを使う方法と、もう一つ、前回の記事でうまく動かせなかったと書いたWebViewコントロールについて解説します。

　なお、今回はプレリリース版のパッケージを使っています。安定版になったときには記事の内容と異なっているかもしれないことを、あらかじめお断りしておきます。

対象読者

• UWPアプリを作っている開発者
• C#でのクロスプラットフォーム開発に興味を持っている開発者

必要な環境

　Uno Platformを使うには、Windows 10とVisual Studio 2017（15.5以降）が必要です。Visual Studioは無償のCommunity Editionでかまいません。iOS用のピルドには、macOSが必要です（前回で書いたように、Macの実機がなくてもなんとかなります）。

　サンプルコード（GitHub）は以下の環境で作成し、動作確認しています。

• Windows 10 1809
• Visual Studio 2019 Version 16.3.10
• UWP用Windows 10 SDK： 10.0.17134.12、10.0.17763.132、10.0.18362.1
• Android SDK 26、28

• macOS 10.14.6
• Xcode 11.2.1
• iOS SDK：13.2