📚

Flutter for web で sqlite3 の DB を HTTP リクエストで取得し利用する

2024/01/02に公開

Flutter for web 上で sqlite3 の DB ファイルを取得、SQL を発行してデータを読み込む方法を紹介する。

Flutter for web を使うとブラウザ上で動くアプリケーションを容易に作成できる。近年のブラウザ上アプリケーションでは、処理の高度化に伴い sqlite3 を使ってデータを管理する手法が注目されている。今回はその 2 つを組み合わせて Flutter for web で sqlite3 を利用したアプリケーションが利用できるか試した。

処理概念図

Dart(Flutter) の sqlite3 を扱うパッケージ

pub.dev を sqlite かつ web 対応で検索すると以下のパッケージがみつかった。

sqflite_common_ffi_web は、sqlite3 パッケージをベースにした（sqlite3 パッケージに依存した）パッケージで、利用を容易にしたラッパーとみなせるので、今回は元となっている sqlite3 パッケージを直接利用する。

Flutter for web を利用したブラウザ上の SQL 利用に必要なもの

Flutter for web を利用したブラウザ上の SQL 利用には、以下 2 つが必要だ

sqlite3 で作成した DB ファイル (例: main.db)
sqlite3 をブラウザで利用するためのライブラリ (例: sqlite3.wasm)

それぞれは、HTTP リクエストで取得する必要がある。

今回は扱いを簡便にするため全て同じサイトから取得しているが、原理的には別々の Web サイトから取得できる。
そのためどこかデータベースが公開されているところから HTTP リクエストで取得、見た目を整えるといったことも可能だ。

sqlite3.wasm ロード

ブラウザ上で sqlite3 製の DB を取り扱えるように、ライブラリを準備しなければならない。

sqlite3 パッケージ最新版 2.3.0 は、README に記載がある通り wasm サポートが存在する。

この wasm ファイルを、Web サイトから HTTP 経由でダウンロードできるようにするため web ディレクトリ以下に配置する。今回は web/sqlite3.wasm として配置した。Flutter for web でビルドしたときにはこのファイルへ /sqlite3.wasm でアクセスできる。
web/sqlite3.wasm を Web サイトへ配置する

sqlite3 パッケージには読み込み専用の関数 WasmSqlite3.loadFromUrl があるので、これを利用する。
HTTP リクエストで sqlite3.wasm を読み込むプログラムの設定

main.db ロード

sqlite をブラウザで利用するためには sqlite3 製の DB を HTTP リクエスト経由で取得し、ブラウザのメモリ上に展開しなければならない。

今回の DB はローカル環境で以下のように web ディレクトリへ main.db という名前で配置した。Flutter for web でビルドしたときにはこのファイルへ /main.db でアクセスできる。
sqlite3 コマンドで DB ファイルを作成し Web サイトへ配置する

$ sqlite3 web/main.db
SQLite version 3.43.2 2023-10-10 13:08:14
Enter ".help" for usage hints.
sqlite> CREATE TABLE greetings ( id INTEGER PRIMARY KEY, value TEXT_TYPE NOT NULL );
sqlite> INSERT INTO greetings(value) VALUES('hello');
sqlite> INSERT INTO greetings(value) VALUES('hi');
sqlite> INSERT INTO greetings(value) VALUES('hey');
sqlite> SELECT * FROM greetings;
1|hello
2|hi
3|hey

そのファイルを HTTP リクエスト経由でダウンロードする。

ダウンロードしたバイナリを、sqlite3 の DB としてメモリに書き込む。
これはブラウザのメモリ上に仮想ファイルシステム（InMemoryFileSystem）を作り、仮想ファイルシステム上の指定したパス（今回は my-original-data）へ、ダウンロードしたバイナリを書き込むという形で行っている。