SQLiteプラグインを使うと、Monacaアプリにローカルに保存される簡易的なデータベースを追加できます。今回はMonacaのテンプレートとして提供されているTodoアプリにデータベース機能を追加してみたいと思います。

SQLiteプラグインについて

今回はlitehelpers/Cordova-sqlite-storage: A Cordova/PhoneGap plugin to open and use sqlite databases on Android, iOS and Windows with HTML5/Web SQL APIを利用しました。Android、iOS両方に対応しています。

インストールはMonacaのCordovaプラグインの管理にて cordova-sqlite-storage を指定します。

アプリ起動時の処理

アプリ起動時には次のような手順で処理を実行します。

  1. プラグインのテスト
  2. データベースを開く
  3. テーブル作成(テーブルがなければ)
  4. 既存データの取り出し

1. プラグインのテスト

まずはプラグインが実行可能かどうかのテストを行います。

プラグインのテストに失敗した時にはアラートを出すのが良いでしょう。テストが成功したら、データベースを開きます。

2. データベースを開く

データベースへの接続を行います。接続情報は多くのメソッドで使われることになりますのでグローバル変数としておくのが良いでしょう。

3. テーブル作成(テーブルがなければ)

以下のような構造のTodoテーブルを作成します。

カラム名 データ型 キー
key integer 主キー
title text
body text

テーブルを作成する命令は、次のような形式になっています。

テーブルを作成するCREATE TABLE文を実行します。このときテーブルがなければ作成する IF NOT EXISTS を指定します。

4. 既存データの取り出し

最後にTodoテーブルから既存データを取り出す処理を行います。

SELECT文の場合、 rs.rows.length で結果の件数が取得できます。そして、 rs.rows.item(i) (iは行数のインデックス)で行のデータが取得できます。カラムは row.title のように指定して取得できます。

アプリ起動時のコード全体は次のようになります。

データの表示

データを表示する部分は元々のTodoアプリから少し変更しています。具体的には次の通りです。

  • 画像表示の削除(バイナリデータの保存は少し複雑になるので、今回は対応していません)
  • データの表示処理を関数化(showTodo)

内容は次の通りです。タスクのタイトルと本文を表示しています。

データの追加

Todoを追加する処理です。写真は上述の通り削除しています。

INSERT文を実行する時にはSQLインジェクションに注意する必要があります。そのため、自分でエスケープ処理を書くのではなく引数を使って渡すようにした方が安全です。SQLが成功したらそのままアプリ起動時と同じように表示処理に渡しています。

なお、cordova-sqlite-storageはコールバック方式になっているのでネストが深くなる傾向があります。Promiseを使った方が見通しの良いコードになりそうです。

ここまでできあがったら、アプリを実行します。サードパーティ製のプラグインを使っているので、アプリのビルドが必要です。ビルドができたらアプリを起動してTodoを追加してみましょう。再読み込みしてもデータが消えずに表示されれば完成です。


今回のコードはmoongift/MonacaSQLiteDemoにアップロードされていますので参考にしてください。

なお、参考までにcordova-sqlite-storageはトランザクションやSQLバッチもサポートしています。

cordova-sqlite-storageを使いこなして、より便利なスマートフォンアプリを開発してください。

litehelpers/Cordova-sqlite-storage: A Cordova/PhoneGap plugin to open and use sqlite databases on Android, iOS and Windows with HTML5/Web SQL API