新春特別企画

2012年注目のモバイル向けJavaScriptフレームワーク・ライブラリあれこれ

この記事を読むのに必要な時間:およそ 2 分

昨年は,スマートフォンが急速に普及した年でした。それに伴って,モバイルサイトの重要性が増し,多くのモバイル向けJavaScriptフレームワークやライブラリが産まれました。本稿では,それらのモバイル向けのJavaScriptフレームやライブラリの中から,ピックアップして紹介していきたいと思います。

豊富な機能やリッチなインターフェースが多く用意されているフレームワーク

まずは,モバイルサイトの構築を一から行えるフレームワークを紹介します。jQuery MobileやSencha Touchといった著名なフレームワークを始めとして,jQTouchやiUIなど比較的軽量なフレームワークまで簡単に解説します。

jQuery Mobile

jQuery Mobileは,有名なJavaScriptライブラリであるjQueryをベースとしたモバイル向けのフレームワークです。ネイティブアプリのようなUIを簡単に構築できます。ページ遷移のアニメーションや,独自のUIが用意されており非常に高機能なフレームワークです。

jQuery Mobileでもっとも特徴的なところは,JavaScriptフレームワークでありながらJavaScriptを一切記述しなくても扱えるようになっている点です(もちろんJavaScriptも使えます)⁠そのため,HTMLやCSSの基礎さえわかれば導入できるというお手軽さがウリです。

サンプル jQuery Mobileのボタンのソースコード

<a href="#" data-role="button">ボタン<a>

<a>要素にdata-roleという属性を追加し,"button" という指定することによってjQuery Mobileがモバイルに適したボタンに装飾してくれます。

図2 jQuery Mobileのボタン

図2 jQuery Mobileのボタン

また,jQuery Mobileは幅広いプラットフォームに対応しており,iPhoneやAndroidはもちろん,Windows PhoneやBlackberry,Palmなど,さまざまなデバイスで利用することができます。

jQuery Mobileは,非常に簡単で高機能である反面,すべて自動で装飾するため,凝ったデザインやパフォーマンスが求められるサイトには敷居が高いところもあります。ただし,ちょっとしたデザインの変更などであれば,ThemeRollerというテーマを作成できるツールを使えば簡単にできます。

Sencha Touch

Sencha Touchは,Sencha Inc.が開発を行っているExt JSをベースとしたモバイル向けのフレームワークです。ネイティブアプリのようなUIをJavaScriptベースで構築できます。非常に豊富なAPIやコンポーネントが特徴で,Webアプリケーションに必要なものはほとんど揃っているといってよいでしょう。

Sencha Touchは,さきほどのjQuery Mobileと違ってJavaScriptを主体とした記述になります。WindowsのデスクトップアプリやJava GUIのSwingなどでの開発に近いものがあります。

サンプル Sencha Touchのボタンのソースコード(パネルの作成コードを含む)

Ext.setup( {
  onReady: function() {
    new Ext.Panel({
      fullscreen: true,
      items: [{ 
        xtype: "panel",
        layout: "vbox",
        items: [{
          xtype: "button",
          ui: "button",
          text: "ボタン"
        }]  
      }]
    });
  }
});

図4 Sencha Touchのボタン

図4 Sencha Touchのボタン

また,Sencha Touchは,iPhoneやAndroidなどのWebkitベースのブラウザに最適化されており,初回のロードに若干時間がかかりますが,読み込み後は比較的高速に動作します。このような面からも,Webアプリケーションにより使いやすいフレームワークです。

著者プロフィール

吉川徹(よしかわとおる)

普段は,普通のSIer。Webからローカルアプリケーション,データベースからインフラ周りに至るまで,何でも担当する雑食系。主にHTML5開発者コミュニティ「HTML5-developers-jp」で活動中。同コミュニティ主催の「HTML5とか勉強会」のスタッフを務め,HTML5の最新動向を追っている。

バックナンバー

新春特別企画

バックナンバー一覧

コメント

コメントの記入