Life is beautiful

　ここのところ「iPhoneアプリのUIの大半（ひょっとしたらアプリすべて）をHTML+JavaScript+CSSで作ることはできないか？」に挑戦している私。

　そのためにまずは部品作りからとりかかっているのだが、昨日から今日にかけて作ったのは、プログレス・バー、スライダー、トグルスイッチなどの「連続値・不連続値」を表示・入力用UIコントロールをウェブページ上で実現するためのJavaScriptライブラリ。

　見た目（Look&Feel）はCSSを使って自由に指定できるように作りつつ、シンプルでありながらいろいろな場面で使い回しがきくライブラリを作りたかったので、何度もリファクタリングを繰り返してしまったが、なんとか形になってきた。

　ということで、そのライブラリ（jTouchControl version 0.10）を使ったiPhone風トグルスイッチを公開。一応、Safari (4.0), mobile Safari, Firefox(3.5), Chrome(4.0), Opera(9.0), IE (8.0)での動作確認済み。ただし、微妙なグラディエーションやアニメーションは、webkit-base のブラウザーでしか見えない。

　iPhone向けのアプリの開発に作ったのだからmobile Safariでさえ動けば十分だったのだが、「せっかく公開するのだから、せめてIE8で動く様にしよう」と欲を出したのが苦労の始まり。半日つぶれてしまった。

　ソースコードは http://widgetpad.com/954/ からアクセス可能。アプリ側のJavaScriptは基本的に以下の２行。最初の行がそれぞれのトグルスイッチを初期化し、次でその二つを連携させている（下のスイッチを変更すると上のスイッチが変更される）。

1.      $('.switch').jTControl("slider", { padding:20, steps:1 });
        $('#switch2').bind("valuechanged", function() { $('#switch1')[0].setValue(this.getValue(), 0.2, true); });
   
2. 　JTControlに渡す最初のパラメターは、コントロールの種類。現時点では、"slider"と"progressBar"のみをサポートしている。二番目のパラメターはオプションで、スライド範囲をwidthよりせばめるための"padding", 非連続値の場合の段階を指定する "steps" (１でトグルスイッチになる、デフォールトは非連続）、ドラッグするものを指定する "thumb" (省略すると空のDIVが挿入される）などを指定することができる。