大切じゃないパスワードを記録するためのiPhone用ブックマークレットとclient-side storageの可能性

sqliteに保存されているユーザ名とパスワードが自動的に入力されます。
あとは送信ボタンを押すだけでログインできます。

上に書いたように、このブックマークレットはあまり安全でないので、ちゃんとしたいのなら最強のパスワード管理ソフト 1Password [Mac OS X] | Lifehacking.jpで紹介されている1Passwordがいいとおもいます。

HTML+js+client-side storageでなにができるか

今回はブックマークレットからclient-side storageを利用しましたが、これはウェブアプリケーションで使う時に威力を発揮します。 ウェブベースのRSSリーダを考えてみましょう。携帯端末の通信速度もかなり向上しましたが、通信をはじめる時にはわりと時間がかかります(基地局との接続確確立に時間がかかるのでしょうか？)。電車に乗っているときには、電車がトンネルや地下にはいってしまうと通信できなくなります。

しかしclient-side storageを使うことでこれらの問題を解決することができます。

ユーザが記事を読んでいる間にXMLHttpRequestを使ってバックグラウンドでデータを読み込んでsqliteに書き込んでおけば、端末のメインメモリを消費することもなくデータを保存することができ、ユーザがデータを要求した時には容易に取り出すことができるのでユーザのアクションに対するレスポンスを大きく改善することができます。バックグラウンドでデータをあらかじめダウンロードしてsqliteにいれていれば、電車が圏外に移動してもsqliteからデータを読み出すことができます。うまくいけば駅に停車している間に圏外になっている間に読むだけの量をあらかじめ読んでおくことができるかもしれません。

UIの作り込みをのぞいたロジック部分はOSX上のsafari+javascriptで開発することができるので、あんまり互換性のないiPhoneシミュレータ+自分でメモリを解放しないといけないObjective-CでiPhoneのネイティブアプリケーションを書くのに比べると、圧倒的に短期間で容易に作ることができます。

モーション検地やマルチタッチさえ捨てれば、開発コストを考えると、JavaScriptでスゴイ完成度高いiPhone用のwebアプリを作るほうが楽そうな気もする。フィードバックや更新、配布コストの面から考えても。
fladdict» ブログアーカイブ » iPhone APPの開発は待ちか？

で書かれているとおり、開発が困難で時間のかかるネイティブアプリケーションでしかできないことは、カメラや加速度センサといったデバイスの機能を利用したいときだけです。

client-side storageが加わったことでHTML+javascriptだけでできることも大きく広がるので、同じだけの開発努力を注ぐならHTML+javascriptが正解という場合も多そうです。

参考

• Safari 3.1 に実装された「Client-side database storage (SQL API)」とは何か？ - IT戦記
• JavaScript++かも日記: 【iPhone】iPhone用 JavaScriptデータベースプログラミング入門 (1)
• iPod touchで無線LANのブラウザ認証を楽にするbookmarklet - おぎろぐはてな

コード

( function () {
    var d = document;
    var e,i,j;
    function p () {
        l=d.location;return l.host + l.pathname
    }
    function _X(xpath, ctx) {
        exp = ctx.ownerDocument.createExpression(xpath, null);
        rs = exp.evaluate(ctx, XPathResult.ANY_TYPE, null);
        ns = [];
        while (i = rs.iterateNext()){ns.push(i);}
        return ns;
    }
    tgfm = null;
    for ( i = 0; i < d.forms.length ; i++ ) {
        f = d.forms[i];
        e = f.elements;
        for ( j = 0; j < e.length; j++) {
            if ( e[j].type == 'password' ) {
                tgfm = f;
                break;
            }
        }
        if ( tgfm )
            break;
    }
    ifnd = 0;
    n = 'dumbkeychain';
    db = openDatabase(n,'1.0',n);
    db.t = db.transaction;
    db.t(function(tx) {
        tx.executeSql('SELECT * FROM acs WHERE host = ?', [p()], function(tx, rs) {
            row = rs.rows.item(0);
            row.account.split(/\x02/).map ( function ( p ) {
                v = p.split(/\x01/);
                tgfm[v[0]].value = v[1];
            } );
            ifnd = 1;
        });
    });
    db.t(function(tx) {
        tx.executeSql('CREATE TABLE acs (id INTEGER PRIMARY KEY, host TEXT, account TEXT)');
    } );
    if ( !ifnd ) {
        tgfm.addEventListener( 'submit' , function (e) {
            ctx = d.documentElement;
            v = [];
            f = tgfm;
            for ( j = 0; j < f.elements.length; j++) {
                i = f.elements[j];
                t = i.type ;
                if ( t.match(/^text|password$/)) {
                    v.push( [i.name , i.value].join('\x01') );
                }
            }
            v = v.join('\x02');
            db.t(function(tx) {
                l = d.location;
                tx.executeSql('INSERT INTO acs VALUES(NULL, ?, ?)', [p(), v ] );
            } );
            return 1;
        }, true);
    }
} )()