Safari Archive

iPhone を買って約 1 ヶ月が立ちました。
AppStore には毎日のように新しいアプリが登場していて、うずうずしてきたのでアプリを作り始めました。
とはいってもネイティブアプリではなく、Safari 上で動く Web アプリです。
今回は iPhone 用の Safari にも組み込まれている SQLite を JavaScript から利用できる SQL API を使って、タスク管理（ToDo 管理とも呼びますね）アプリを作ってみようと思います。

せっかく iPhone 向けのアプリなので、インタフェースはやっぱりこだわりたいところ。
その iPhone 向けインタフェースのテンプレートが提供されているので、今回はそれを使いました。

iphone-universal - Google Code

まだ作成途中ですが、下記のリンクから試すことができます。Safari でアクセスしてください。

>>作成したアプリ

注：データベースを削除したい時は、
・通常の Safari の場合：「環境設定」→「セキュリティ」→「データベースを表示」→データベースを選択して「取り除く」
・iPhone 版 Safari の場合：「設定」→「Safari」→「Databases」→編集ボタン→削除
でできます。

今までできたところまで、ホーム画面はこんな感じです。

テンプレートのおかげで、あまり工数をかけずに iPhone 向けインタフェースができました。

そして SQLite を操作する JavaScript ソースが以下。
こちらのサイトを参考にしました。

• JavaScript++かも日記: 【iPhone】iPhone用 JavaScriptデータベースプログラミング入門 (目次)
• Safari 3.1 に実装された「Client-side database storage (SQL API)」とは何か？ - IT戦記

// DB オブジェクト
var db;

// DB 初期化（テーブルが無ければ作成する）
function init() {
  if(window.openDatabase) {
    db = openDatabase('test_db', '1.0', 'Tasks');
    db.transaction(
      function(tx) {
        tx.executeSql('SELECT COUNT(*) FROM tasks', [],
          function(tx, rs) {},
          function(tx, error) {
            tx.executeSql('CREATE TABLE tasks (id INTEGER PRIMARY KEY, body TEXT, cmp_f BOOLEAN, priority INTEGER)', [],
              function() {},
              function(error) {
                alert('Database does not created. : ' + error.message);
              }
            );
          }
        );
      }
    );
  } else {
    alert('Sorry, this browser does not supported.');
  }
}

// タスク一覧を表示する
function show() {
  var incmp = document.getElementById('incomplete_list');
  var cmp = document.getElementById('completed_list');
  if(!(incmp && cmp)) return;

  // 現在表示しているタスクをクリアする
  while(incmp.hasChildNodes()) {
    incmp.removeChild(incmp.firstChild);
  }
  while(cmp.hasChildNodes()) {
    cmp.removeChild(cmp.firstChild);
  }
  var ul = document.createElement('ul');
  incmp.appendChild(ul);
  var ul = document.createElement('ul');
  cmp.appendChild(ul);

  // タスク一覧を取得して表示する
  db.transaction(
    function(tx) {
      tx.executeSql('SELECT * FROM tasks ORDER BY priority', [], function(tx, rs) {
        for(var i = 0; i < rs.rows.length; i++) {
          var row = rs.rows.item(i);
          var list = (row.cmp_f == 't') ? cmp : incmp;
          appendItem(list.firstChild, 'edit.html?id=' + row.id, 'arrow', row.body, row.priority);
        }

        // タスク件数が 0 件の場合
        if(incmp.firstChild.childNodes.length == 0) {
          appendItem(uncmp.firstChild, '#', null, '(No Item)', null);
        }
        if(cmp.firstChild.childNodes.length == 0) {
          appendItem(cmp.firstChild, '#', null, '(No Item)', null);
        }
      });
    },
    function(error) {
      alert('Task data does not get. : ' + error.message);
    },
    function() {}
  );
}

// リストを追加する
function appendItem(prt, hrf, cl, val, pri) {
  if(!prt) return;
  var li = document.createElement('li');
  li.className = 'pri' + pri;
  prt.appendChild(li);
  var a = document.createElement('a');
  a.href = hrf;
  if(cl) a.className = cl;
  li.appendChild(a);
  var t = document.createTextNode(val);
  a.appendChild(t);
}

// タスクを新規作成する
function add() {
  var b = document.getElementById('body');
  if(!b) return;
  var body = b.value;
  var p = document.getElementById('priority');
  if(!p) return;
  var idx = p.selectedIndex;
  var priority = p.options[idx].value;
  db.transaction(
    function(tx) {
      tx.executeSql('INSERT INTO tasks VALUES(NULL, ?, ?, ?)', [body, 'f', priority]);
    },
    function(error) {
      alert('Task does not create. : ' + error.message);
    },
    function() {
      location.href = 'index.html';
    }
  );
}

// タスクを削除する
function del() {
  var id = getIdValue();
  if(!id) return;
  if(window.confirm('Delete this task ?')) {
    db.transaction(
      function(tx) {
        tx.executeSql('DELETE FROM tasks WHERE id = ?', [id]);
      },
      function(error) {
        alert(error.message);
      },
      function() {
        location.href = 'index.html';
      }
    );
  }
}

// タスクを完了/未完了にする
function cmp(f) {
  var id = getIdValue();
  if(!id) return;
  db.transaction(
    function(tx) {
      tx.executeSql('UPDATE tasks SET cmp_f = ? where id = ?', [(f) ? 't' : 'f', id]);
    },
    function(error) {
      alert(error.message);
    },
    function() {
      location.href = 'index.html';
    }
  );
}

// 1 つのタスクを表示する
function showOne() {
  var id = getIdValue();
  if(!id) return;
  db.transaction(
    function(tx) {
      tx.executeSql('SELECT * FROM tasks WHERE id = ?', [id], function(tx, rs) {
        if(rs.rows.length > 0) {
          var row = rs.rows.item(0);
          var body = document.getElementById('body');
          if(!body) return;
          body.value = row.body;
          var p = document.getElementById('priority');
          if(!p) return;
          p.value = row.priority;
          if(row.cmp_f == 't') {
            var elm = document.getElementById('cmp');
          } else {
            var elm = document.getElementById('uncmp');
          }
          elm.style.display = 'none';
        } else {
          alert('Task does not exist.');
        }
      });
    },
    function(error) {
      alert(error.message);
    },
    function() {}
  );
}

// タスクを更新する
function update() {
  var b = document.getElementById('body');
  if(!b) return;
  var body = b.value;
  if(body.length > 0) {
    var id = getIdValue();
    if(!id) return;
    var p = document.getElementById('priority');
    if(!p) return;
    var priority = p.value;
    db.transaction(
      function(tx) {
        tx.executeSql('UPDATE tasks SET body = ?, priority = ? WHERE id = ?', [body, priority, id]);
      },
      function(error) {
        alert('Task update failed. : ' + error.message);
      },
      function() {
        location.href = 'index.html';
      }
    );
  } else {
    alert('Please input body.');
  }
}

// QueryString から ID 値を取得する
function getIdValue() {
  if(location.search.length > 0) {
    var arr = location.search.substr(1).split('&');
    for(idx in arr) {
      var k = arr[idx].split('=');
      if(k[0] == 'id') return k[1];
    }
  } else {
    return null;
  }
}

先日リリースされた Safari 3.1 の新機能の 1 つに、「開発」メニューがあります。その中の Web インスペクタがとても便利なので紹介します。

環境設定の「詳細」にある「メニューバーに”開発”メニューを表示」にチェックを入れると、開発メニューが表示されます。以前のバージョンでは隠し機能であった「Debug」メニューになります。

開発メニューから「Web インスペクタを表示」を選択します。HTML や JavaScript のソースを閲覧できます。
要素を選択すると、その要素がページ上でハイライト表示され、非常に分かりやすいです。

この Web インスペクタ以外にも Safari 3.1 にはさまざまな機能が追加されています。みなさんもぜひ使ってみてください。

SafariStand の新機能、History Flow がヤバい。

iTunes の CoverFlow のように Safari の履歴を見ることができます。
これは便利すぎます。

「履歴」→「History Flow」で表示されます。

今までは履歴がタイトルしかないので探すのに苦労しましたが、これがあればページのサムネイルが表示されるのですごく探しやすくなりました。

SafariStand - hetima.com

Firefox だけでなく、Safari でも AutoPagerize ができることを Twitter 経由で知りました。

ちなみに AutoPagerize とは、Google の検索結果などの複数ページに渡る内容を、「次へ」をクリックしなくてもスクロールするだけで次のページを読み込んでくれるプラグインです。

インストール手順は以下の通り。
Safari で AutoPagerize を使うには、SIMBL と GreaseKit を事前にインストールしておく必要があります。

1. SIMBL をインストールします。
2. GreaseKit をダウンロードして、GreaseKit.bundle を /Library/Application Support/SIMBL/Plugins にコピーします。
3. Safari を再起動して、メニューに「GreaseKit」が表示されることを確認します。
4. os0x さんのページの js ファイルへのリンクをクリックしてインストールします。

使ってみて数日経ちますが、これは便利。もうこれなしにはブラウジングできないほどです。
os0x さん、GJ！