今更ながらGoogle Gearsをさわってみた

最近ちょいちょい業務アプリケーションの分野でもWebアプリをオフラインで使いたいという要求が出てくるようになった。

出張とかなんやかんやを考えるとオンラインでしか使えないというのは、やはりデメリットでしかない。

で、Webアプリをオフラインでも使えるようにする技術としては、「Google Gears」や「Adobe Air」（ちょっと違うかな？）なんかがあるわけで、今まで特に興味が無かったのでスルーしていた。

でも、今回ちょっとそういった事を考えるきっかけのような事があったので、とりあえずGoogleGearsを触ってみることにした。

GoogleGearsについては以下のサイトを参考にした。

概要

GoogleGearsには大まかに分けて三つの機能が用意されている。

LocalServer
- リソース（HTMLとかJavaScript）をローカルにキャッシュして、オフラインでもブラウザで動作できるようにする。
Database
- データをSQLiteを使ってクライアントのデータベースに保存できる。
WorkerPool
- 非同期処理ができるようになる（setIntervalの改良版）。

まぁこのへんの情報はあっちこっちで書かれているのでこれ以上言及しない。

LocalServerは置いといて、Databaseの機能を使ってみる。

単純なCRUDフォームを作る

GoogleGearsを使うには「gears_init.js」というJavaScriptファイルをインクルードしておくだけ*1。

Databaseの機能を使うには、

var db = google.gears.factory.create("beta.database", "1.0");

というファクトリメソッドを使ってDatabaseオブジェクトを生成すればいい。他の機能も全てこのファクトリメソッドがエントリポイントになっている。

ということで、作ってみたのが以下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>GoogleGears Demo</title>
    <script type="text/javascript" src="gears_init.js"></script>
    <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
    <script type="text/javascript">
        $(function() {
            var db = google.gears.factory.create("beta.database", "1.0");
            db.open("gearsdemo");
            db.execute(
                "create table if not exists Person (" +
                "  id integer primary key autoincrement," +
                "  firstname text not null," +
                "  lastname text not null" +
                ")"
            );

            function load() {
                var dataTable = $("#dataTable");
                dataTable.find("tbody").remove();

                var rs = db.execute("select * from Person");

                while(rs.isValidRow()) {
                    dataTable.append(
                        $("<tr>").append(
                            $("<td>").append(
                                $("<input type='button' value='削除'>").data("id", rs.field(0)).click(function() {
                                    var id = $(this).data("id");

                                    db.execute("delete from Person where id = ?", [id]);

                                    load();
                                })
                            ),
                            $("<td>").text(rs.field(1)),
                            $("<td>").text(rs.field(2))
                        )
                    );
                    rs.next();
                }
            }

            $("#insertBtn").click(function() {
                var firstname = $("#firstname").val();
                var lastname = $("#lastname").val();

                if(firstname.length > 0 && lastname.length > 0) {
                    $("#firstname").val(""); $("#lastname").val("");

                    db.execute(
                        "insert into Person(firstname, lastname) values(?, ?)", [firstname, lastname]
                    );
                    load();
                    
                } else alert("ERROR");
            });
            load();

            $("#firstname").focus();
        })
    </script>
    <style type="text/css">
        th
        {
            font-size: small;
            width: 60px;
        }
    </style>
</head>
<body>

    <div>
        <table border="1">
            <tr>
                <th>
                    名字:
                </th>
                <td>
                    <input id="firstname" type="text" />
                </td>
            </tr>
            <tr>
                <th>
                    名前:
                </th>
                <td>
                    <input id="lastname" type="text" />
                </td>
            </tr>
        </table>

        <div style="margin-top: 5px;">
            <input id="insertBtn" type="button" value="追加" />
        </div>

    </div>

    <div style="margin-top: 10px;">
        <table id="dataTable" border="1">
            <thead>
                <tr>
                    <th style="width: 30px;">
                        &nbsp;
                    </th>
                    <th>
                        名字
                    </th>
                    <th>
                        名前
                    </th>
                </tr>
            </thead>
        </table>
    </div>

</body>
</html>