iPod touch - Safariのdata:URLでJSアプリをオフラインで使う

ついに念願の iPod touch を手に入れました！

想像通りの素晴らしいデバイスですね。これにカメラと外部キーボード接続があればさらによかったかなと思いました。昨日のよるから嬉しくてずっと触りっぱなしなのですが、せっかくなので何かしてみたいなあと。

iUI

iPod touch の一番の目玉はやはりSafari、ということで、ちょっとした iPod touch 用ページを作成してみました。
テストサイト丸出しでかなりしょっぱいですが、なんというか、これはかなり楽しいですね。

iPhone風のUIを作成するおなじみのJavaSriptライブラリ「iUI」で作成しています。

iUIのjsとCSSを読み込んで、決まったidやclass名を振って行くとそれっぽくなります。例えば、class="panel"なdivブロックだとこんな感じですね。

それ以外にもかっこいいボタンや独特のUIであるトグル（ON/OFFスイッチ）も入っていて画像セットもついているので、いたれりつくせりですね。iUIを使うとかなり簡単に出来るのですが、基本的に1ページに全部のページ分の情報を読み込んで、それをjsで切り替える感じになってるので、あまり巨大なものには向かないかもです。

あと気のせいかもですが、iui.css の body > .toolbar の height 値がおかしい気がする。。25pxくらいで丁度いい気がするのですが、なんで40pxになってるんだろう。。もうちょっと勉強が必要だなあ。

Safari とメディアファイルの再生

せっかくのiPodなので音楽とか映像とかを使ったページ作りたいですよね。特に音楽は内蔵のプレイヤーに楽曲をエクスポートしたり、再生履歴を取得したりしたいなあ。iTunes側の情報を取得する方法はよくわからなくて、知っている人がいたら教えて欲しいです！なんとかしてAppleScriptを動かす方法があればなあ。。

音楽の再生に関しては問題なくできることを確認しました。「bonar.jp > Music > sample track 1」とすすむとプレイヤーが起動して音楽が再生されます。5MBくらいあるmp3ファイルなので注意です。garagebandのドラムループにPerlとPMMLで自動生成した音を重ねたものです。PMMLは素晴らしいマクロ言語なので興味のある方はこちら。

PMML User's manual
http://www.mgsoft.org/jikanbae/untitled/computer/pmml/manual/pmml_toc.html

アンカータグでmp3等の巨大な音声ファイルを直接リンクした場合、通常のsafariであれば QuickTime でちゃんと再生されますが、touchの場合は固まってしまうようです。なんでだろう。touchの場合は以下の用にembedします。

一旦プレイヤーが起動するとあとは通常と同じ音楽再生のUIそのままで操作できます。これは素敵ですね。embedタグだけでこの洗練されたUIが使えるのはかなりの魅力。macjamsとかmf247みたいな user-created な音楽サイトはtouch用のページを準備するだけでかなりかっこ良くなりそう。

動画等他のメディアの埋め込み等については以下のサイトが詳しいです。

iPhone 用 Web ページおよびアプリケーションの作り方 - iPhone Development Guidelines を読む
http://travel-lab.info/tech/pblog/article.php?id=131#iPhoneDev5

JavaScript で複利計算表 on Safari Mobile

JavaScriptがちゃんと動くか確認するために、いかにもな複利計算アプリを作りました。iPod　touch　では環境設定で、JavaScriptやCSSのエラーを表示するようにできるので結構やりやすいですね（Firebugには遠く及びませんが。。）。

bonar.jp のメニューを「bonar.jp > Applications > Compund Calc」で進むと簡単な JavaScript の複利計算アプリが表示されます。ほんとに単純なものですが、ソースは以下のようなものになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>Compound Calc</title>
</head>
<body>
<h1>Compound Calc</h1>
<form>
base <input type="text" id="base" value=100 size=10>
rate <input type="text" id="rate" value=5 size=4>%
<br />
<input type="button" value="Calculate!" onclick="calc()">
<input type="button" value="Clear" onclick="clear_form()">
</form>
<div id="result"></div>

<script lang="javascript">
function $(elem_name) {return document.getElementById(elem_name);}
function is_digit(str){return !/[^\d\.]/.test(str);}
function clear_children(elem_id) {
  var elem = $(elem_id);
  while (elem.hasChildNodes()) {
    elem.removeChild(elem.childNodes[0]);
  }
}
function calc() {
  var base = $('base').value;
  var rate = $('rate').value;
  if ((!base || !is_digit(base)) || (!rate || !is_digit(rate))) {
    alert("invalid form value");
    return false;
  }
  clear_children('result');
  var now  = parseFloat(base);
  var rate = parseFloat(rate/100);
  for (var i = 0; i<20; i++) {
    var cur  = now + (now * rate);
    var line = (i<9 ? '0' : '') + (i+1) + " - " + cur.toFixed(3);
    $('result').appendChild(document.createTextNode(line));
    var br = document.createElement('br');
    $('result').appendChild(br);
    now = cur;
  }
}
function clear_form() {
  $('base').value = "";
  $('rate').value = "";
  clear_children('result');
}
</script>

</body>
</html>

これは別に普通のsafariでも表示できる何の変哲もないスクリプトですね。元金と利率を入力すると20世代分の結果を表示します。
http://bonar.jp/touch/ccalc.html

iPod touch でもまったく問題なく表示されます。なんかalertのダイアログとかがカッコいいので無駄に出したくなってしまう。。iPod touch は Flash や JavaApplet とかは（いまのところ）動作しないみたいなので、touch向けのアプリケーションはJavaScriptを駆使して作って行くことになりそうですね。

data: URL で URL にページ全体を入れる

ただ、こういったちょっとしたアプリを作成しても当然の事ながらオンラインでしか使えない訳です。iPod touch には現状サードパーティ製のアプリを入れられないので、基本的にウェブアプリを主体に拡張する感じになると思いますが（libtiffマニア以外は:-P）、常時オンラインな訳ではないのでこれは結構きついですよね。。

オフライン状態でもSafariでローカルのファイルを読んで表示、とかが出来れば素敵なのですが、現状そういった感じでもないようです。ちょっとしょんぼりぎみだったのですが、URL の data: スキーマを使用してアプリ全体をURLにエンコードしてしまう方法があるみたいです。

Storing iPhone apps locally with data URLs
http://blog.clawpaws.net/post/2007/07/16/Storing-iPhone-apps-locally-with-data-URLs

もともとは画像をCSS等に入れてしまうためのものですが、これを使えばページ全体をURL表現として得ることができ、それをブックマークすることでオフラインでも使用できるようになります。

実際に先ほどの複利計算スクリプトをbase64 エンコードして必要な宣言を入れると以下のような感じになります。

data:text/html;charset=utf-8;base64,PCFET0NUWVBFIGh0bWwgUFVCTElDICItLy9XM0MvL0RURCBYSFRNTCAxLjAgU3RyaWN0Ly9FTiIKICAgImh0dHA6Ly93d3cudzMub3JnL1RSL3hodG1sMS9EVEQveGh0bWwxLXN0cmljdC5kdGQiPgo8aHRtbCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbC+CjxoZWFkPgo8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMCwgdXNlci1zY2FsYWJsZT0wIi8+CjxtZXRhIGh0dHAtZXF1aXY9IkNvbnRlbnQtVHlwZSIgY29udGVudD0idGV4dC9odG1sOyBjaGFyc2V0PXV0ZjgiIC8+Cjx0aXRsZT5Db21wb3VuZCBDYWxjPC90aXRsZT4KPC9oZWFkPgo8Ym9keT4KPGgxPkNvbXBvdW5kIENhbGM8L2gxPgo8Zm9ybT4KYmFzZSA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9ImJhc2UiIHZhbHVlPTEwMCBzaXplPTEwPgpyYXRlIDxpbnB1dCB0eXBlPSJ0ZXh0IiBpZD0icmF0ZSIgdmFsdWU9NSBzaXplPTQ+JQo8YnIgLz4KPGlucHV0IHR5cGU9ImJ1dHRvbiIgdmFsdWU9IkNhbGN1bGF0ZSEiIG9uY2xpY2s9ImNhbGMoKSI+CjxpbnB1dCB0eXBlPSJidXR0b24iIHZhbHVlPSJDbGVhciIgb25jbGljaz0iY2xlYXJfZm9ybSgpIj4KPC9mb3JtPgo8ZGl2IGlkPSJyZXN1bHQiPjwvZGl2PgoKPHNjcmlwdCBsYW5nPSJqYXZhc2NyaXB0Ij4KZnVuY3Rpb24gJChlbGVtX25hbWUpIHtyZXR1cm4gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoZWxlbV9uYW1lKTt9CmZ1bmN0aW9uIGlzX2RpZ2l0KHN0cil7cmV0dXJuICEvW15cZFwuXS8udGVzdChzdHIpO30KZnVuY3Rpb24gY2xlYXJfY2hpbGRyZW4oZWxlbV9pZCkgewogIHZhciBlbGVtID0gJChlbGVtX2lkKTsKICB3aGlsZSAoZWxlbS5oYXNDaGlsZE5vZGVzKCkpIHsKICAgIGVsZW0ucmVtb3ZlQ2hpbGQoZWxlbS5jaGlsZE5vZGVzWzBdKTsKICB9Cn0KZnVuY3Rpb24gY2FsYygpIHsKICB2YXIgYmFzZSA9ICQoJ2Jhc2UnKS52YWx1ZTsKICB2YXIgcmF0ZSA9ICQoJ3JhdGUnKS52YWx1ZTsKICBpZiAoKCFiYXNlIHx8ICFpc19kaWdpdChiYXNlKSkgfHwgKCFyYXRlIHx8ICFpc19kaWdpdChyYXRlKSkpIHsKICAgIGFsZXJ0KCJpbnZhbGlkIGZvcm0gdmFsdWUiKTsKICAgIHJldHVybiBmYWxzZTsKICB9CiAgY2xlYXJfY2hpbGRyZW4oJ3Jlc3VsdCcpOwogIHZhciBub3cgID0gcGFyc2VGbG9hdChiYXNlKTsKICB2YXIgcmF0ZSA9IHBhcnNlRmxvYXQocmF0ZS8xMDApOwogIGZvciAodmFyIGkgPSAwOyBpPDIwOyBpKyspIHsKICAgIHZhciBjdXIgID0gbm93ICsgKG5vdyAqIHJhdGUpOwogICAgdmFyIGxpbmUgPSAoaTw5ID8gJzAnIDogJycpICsgKGkrMSkgKyAiIC0gIiArIGN1ci50b0ZpeGVkKDMpOwogICAgJCgncmVzdWx0JykuYXBwZW5kQ2hpbGQoZG9jdW1lbnQuY3JlYXRlVGV4dE5vZGUobGluZSkpOwogICAgdmFyIGJyID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnYnInKTsKICAgICQoJ3Jlc3VsdCcpLmFwcGVuZENoaWxkKGJyKTsKICAgIG5vdyA9IGN1cjsKICB9Cn0KZnVuY3Rpb24gY2xlYXJfZm9ybSgpIHsKICAkKCdiYXNlJykudmFsdWUgPSAiIjsKICAkKCdyYXRlJykudmFsdWUgPSAiIjsKICBjbGVhcl9jaGlsZHJlbigncmVzdWx0Jyk7Cn0KPC9zY3JpcHQ+Cgo8L2JvZHk+CjwvaHRtbD4KCg==

当然のことながら長いですね。。。。この data: URL へのリンクは「bonar.jp > Applications > Compound Calc (Off line)」で行けます。まったく同じ内容ですが、このURLをブックマークしておくと、オフラインでも複利計算ができます！通勤中に借金の確認が出来るなんて！すごいよ iPod touch！

でもこれをこのままアンカータグに入れるのはサイズが大きくなるとさすがにあり得ないですね。汎用リダイレクタ（短縮URL）的なものがソリューションになるかも。