ブラウザの機能拡張「Gears」とは
データベースを使う
では、Gearsからデータベースを扱う方法を見ていきます。Gearsを使うとページ上のJavaScriptからクラアントPCの中にあるSQLiteにアクセスすることができます。
クラアントサイドにデータを持たせる手段として、URLにパラメータとして埋め込む方法以外にCookieが使われてきましたが、Cookieでは保存できる容量がかなり制限されてしまいます。アプリケーションの状態を表す簡単な変数を持たせることでしたらCookieでも十分可能でしたが、例えばJavaScriptでエクセル風の表計算アプリケーションを書くとして、それらのデータの一時保存先として利用するならば、ある程度まとまった量の保存領域が必要になってきます。
Gears経由でSQLiteを使うと、Cookieでの制限を大幅に超えて多くのデータをクライアントに持たせることができます。また、要領的なメリットだけでなくデータを扱う際にSQL文を利用することができるので、複雑な条件でデータを取得できるようになり、かなり使い勝手が良くなります。
さて、WebページでGearsを利用するにはGearsのページから配布されている「gears_init.js」をインクルードします。
<script type="text/javascript" src="gears_init.js"></script>
このスクリプトを読みこんでおくと、Gearsがインストールされているブラウザでそのページにアクセスするとgoogle.gearsというオブジェクトが存在するようになります。google.gearsオブジェクトの存在が確認できたら以下のようなコードでデータベースを開きます。
db = google.gears.factory.create('beta.database');
db.open('mydb'); // 任意のデータベース名
SQLiteは1つのデータベースが1つのファイルとして管理されます。初めてデータベースを開いた時には新規にファイルが作られます。
SQL文を実行する
dbオブジェクトができたら、それを経由してSQL文が実行できます。SQL文の実行はexecuteメソッドで行います。例えば、テーブルを新規に作る場合は以下のようになります。
db.execute('create table if not exists mydb (script text, reg_date int)');
データベースからデータを取り出す場合は、まずはselect文を実行して結果セットをオブジェクトとして取得します。以下のような例です。
var result = db.execute('select * from recipe order by reg_date desc');
実行に成功すると結果セットをオブジェクトとして取得できます。そのオブジェクトからテーブルの1行ずつ結果を取り出す場合は以下のようにループをまわします。
while (rs.isValidRow()) { // データがあるかどうかを確認
// データ取得処理
rs.next(); // 次の行へ }
そのループ中で、カラム単位でデータを取り出すのは以下のようにします。
rs.field(0); // カラムを左から順に数字で指定
rs.fieldByName("food"); // カラム名で指定
図2のソースコードは、そのほかのdeleteやupdateを含めたJavaScriptコードのイメージです。もしRDBを使ったコードを書いたことのある方でしたら、それほど違和感なく書きこなせるかと思います。
ちなみに、同じようにクライアントサイドのデータベースをSQLを使ってアクセスする仕様としてはSafariなどで実装されているHTML 5のクライアントサイドデータベース機能がありますが、それと比べても比較的シンプルなコードになるかと思います。データベースが扱えるようになると、JavaScriptだけである程度データを保存したり読み出したりするようなアプリケーションを作ることが可能になります。そのほかにも、例えば大きなアプリケーションを作る際に、フロントエンドのモックを作る場合などにも活用できるかと思います。
このように、データをクライアントに保存してSQLで取り出せることで、単にCookieだけではできなかったさまざまなアイデアが可能になります。ぜひ試してみてください。
次は、最近追加されたGeoLocaion APIについて解説します。
