iPhoneやAndroidといった、フルブラウザを搭載するモバイル端末が普及しつつある。Webアプリケーションの開発現場も、そろそろこれらモバイル端末を無視できなくなってくるだろう。モバイル端末向けWebアプリケーションの構築には、インフラをはじめとしてさまざまな制約がつきまとう。

本稿ではモバイル向けWebアプリに特化した軽量JSライブラリ「baseJS」を紹介したい。

baseJSとは

baseJSはPaul Armstrong氏が開発・リリースしている軽量JavaScriptフレームワークのひとつ。iPhone/iPod touch上で動作するWebアプリケーションの開発に特化したライブラリだ。Webアプリケーションを作成するにあたり、必要最低限の機能のみをサポートしている。

同ライブラリの最終更新日は2009年5月9日(米国時間)。公開当初のライセンスはCreative Commons Attribution-Share Alike 3.0 United States Licenseだったが、現在はGNU GENERAL PUBLIC LICENSE Version 3となっている模様。

おもな特徴と提供される機能は次のとおり。(README, API Documentationより一部抜粋)

特徴

  • 非常に軽量。ミニファイされたJavaScriptファイルは8KBほど
  • クロスブラウザ対応ではない(必要動作環境はMobile Safari, Firefox, WebKitベースのWebブラウザ)
  • Internet Explorerでは動作せず、今後対応する予定もない

用意されている機能

カテゴリ メソッド 用途
base(コア) extend() オブジェクトにメソッドやプロパティを追加
browser Webブラウザの判定
isArray() オブジェクトが配列がどうかをチェック
toQueryString() オブジェクトをクエリ文字列に変換
Array, NodeList each() 繰り返し処理
eachAfter() インターバルやコールバック関数が指定できるeach()
document fire() イベント処理の実行
dom:loaded event DOM構築完了を捕捉するカスタムイベント
Element Element() 指定した引数からHTMLエレメントを生成
Event stop() イベントのキャンセル(preventDefault, stopPropagationのショートカット)
Function bind() 関数のスコープを任意のオブジェクトで上書
bindAsEventListener() イベントハンドラ用のbind()
HTMLElement addClass() 指定したエレメントにクラスを追加する
hasClass() 指定したエレメントにクラスがあるかどうかをチェック
removeClass() 指定したエレメントからクラスを削除
toggleClass() 指定したエレメントにクラスを追加/削除
getXY() 指定したエレメントのXY座標を得る
fire() イベント処理の実行
io (AJAX) io() XHRオブジェクトを作成
String blank() 文字列が空欄かどうかをチェック
toHTML() 文字列をHTMLノードリストに変る
trim() 空白文字の削除。引数に正規表現を指定すると、マッチした文字列を削除
Template template() テンプレートオブジェクトを作成
parse() template()で作成したテンプレートにデータオブジェクトを流しこむ
Utility $() CSSセレクタを使用して要素を選択

特筆すべきはやはりそのファイルサイズ。iPhone向けWebアプリケーションの構築にはjQuery + jQTouch (マイコミジャーナル内での紹介記事)の組み合わせが有名だが、こちらは動作に必要なJSだけでおよそ70KB。機能も用途も違うので単純には比較できないが、サイズだけ見た場合baseJSはミニファイされていない状態で20KB、ミニファイ後は8KBと驚異的な数値となっている。

高機能JavaScriptフレームワークに見られるアニメーション機能などは、baseJSには用意されていない。これらは-webkit-transformや-webkit-animationといったWebブラウザのCSS3機能を使ってカバーする。動作するWebブラウザを限定し、アニメーションもなし、必要最低限の機能のみだからこそ実現できているサイズだろう。

JavaScriptフレームワークはWebデベロッパの助けになるが、インフラやキャッシュサイズといった制約があるモバイル向けWebアプリケーションではファイルサイズが障壁となることがある。セレクタやオブジェクト拡張・Ajax処理といった必要最低限の機能だけがほしいWebデベロッパは、baseJSの導入を検討してみてはいかがだろうか。

このほか旧聞になるが、iPhone向けWebアプリケーションを実装するにあたり、Mobile Safariのキャッシュサイズとパフォーマンスの関係についての詳解記事がNial Kennedy's WeblogとYAHOO! USER INTERFACE BLOGにてまとめられている。筆者にはMobile Safariのキャッシュサイズについて記載されているリファレンスを見つけることができなかったが、興味がある方はこのあたりについてもチェックしてみてほしい。