cordova-sqlite-storage プラグインに関する Tips

前回、cordova-sqlite-storage プラグインを使って、Cordova iOS アプリ内に SQLite 製のローカル DB を作成できた。

今回はこのプラグインに関する細かなヒント集。

このプラグインを使って動作するサンプルプロジェクトを以下に置いているので、feat/sqliteStorage ブランチをクローンして cordova prepare コマンドで環境を復元して試してみてもらいたい。

window.openDatabase() を使ってブラウザでも動作させる

簡易的な動作確認のため、cordova serve コマンドを使って Mac のブラウザ上でアプリを開くことがあるだろう。しかし、ブラウザ上では cordova-sqlite-storage プラグインが動作しない。そこで、HTML5 の API である window.openDatabase() を使って、ブラウザでもローカル DB を動作させることにする。

まず、ブラウザでの表示確認のため、ターゲットプラットフォームに browser を追加する。

$ cordova platform add browser --save

そして cordova serve browser コマンドを叩くと、ブラウザ表示向けにプラグインをモック化した cordova.js と cordova_plugins.js が生成され、ブラウザ表示がしやすくなる。実際にブラウザで表示してみると、window.sqlitePlugin.openDatabase() の部分で以下のような内容がコンソール出力されている。

Error: exec proxy not found for :: SQLitePlugin :: open
OPEN database: sample.db FAILED, aborting any pending transactions
Could not open database

これは、cordova-sqlite-storage がネイティブ機能と連携する部分がネックとなって処理が続行できないよ、といっているエラーなので、window.sqlitePlugin.openDatabase() メソッドでは DB インスタンスが生成できていない。

しかし、実は window.sqlitePlugin.openDatabase() が返却する DB インスタンスが持つ API は WebSQL の API に即しているため、Chrome ブラウザなどで実行する場合は、HTML5 の window.openDatabase() を使って DB インスタンスを返し、Chrome ブラウザ内の WebSQL を使用してやることで、後続処理がブラウザで動かせるようになるのだ。

Chrome ブラウザの WebSQL も、実体は SQLite なので、window.openDatabase() を叩くと裏では sample.db ファイルが生成されている。また、開発者ツールを開き、「Application」タブから「Clear storage」を選び、最下部の「Clear site data」を押せばローカル DB を削除できるので、動作検証にももう少し使えるだろう。

前回の記事で少し触れたが、SQLite プラグインが用意している db.executeSql() など一部のメソッドは、WebSQL API で生成した DB インスタンスでは対応していない場合がある。各メソッドの対応状況を調べてモック化したりするのは面倒なので、あくまで Chrome ブラウザでちょっと確認したい時、ぐらいに留めておき、本来はちゃんと iOS シミュレータや実機で検証するようにしよう。

ちなみに、window.openDatabase() が使えるのは Chrome と Safari ぐらいで、Firefox は対応していない。

echoTest() と selfTest() でプラグインの動作チェックを行う

window.sqlitePlugin.echoTest() というメソッドがあり、これで cordova-sqlite-storage プラグインがネイティブ機能にアクセスできそうかを検証してくれる。OK の場合、NG の場合に行うコールバック関数を引数で渡せる。

また、前回の記事でも紹介した、window.sqlitePlugin.selfTest() というメソッドもある。こちらは DB オープンや CRUD 操作を実際に行い、それが可能な環境かを検証してくれるものだ。ターゲットプラットフォームに browser を選択し、Chrome ブラウザで実行した場合は、echoTest() も selfTest() もエラーコールバックが実行されるので、これで DB オープン処理を分けても良いだろう。

cordova serve ios と iOS 向けにビルドしたものを Chrome ブラウザなどで見ようとすると、実際にネイティブ機能にアクセスしようとしてその場で処理が止まってしまうので、ブラウザで確認する時は cordova serve browser を使うことを忘れずに。

.db ファイルの在り処

iOS シミュレータを起動して実際に .db ファイルを生成した場合は、ターミナルから以下の要領で実際のファイルを確認することができる。

# iOS シミュレータが保存されているディレクトリに移動する
$ cd ~/Library/Developer/CoreSimulator/Devices/

# 配下から「sample.db」という名前のファイルを探す
$ find . -name sample.db

# 以下のようなランダム文字列を含んだフォルダの中に生成されていることが分かる
# 最初の「AD0…/」というディレクトリは iOS シミュレータの種類ごとに作られるディレクトリ
# 途中の「RE2…/」というディレクトリはココで作ったサンプルアプリのディレクトリになっている
./AD036A35-4FD2-4680-9A3D-359CB823FF13/data/Containers/Data/Application/RE2E1C48-D94E-4658-B2E7-EF7A5CC69D3B/Library/LocalDatabase/sample.db

思ったように DB 操作ができていなさそうなときは、.db ファイルが正しく作られているか、操作された形跡があるか確認してみよう。