スマホ用JavaScriptフレームワーク5つ
＋1を徹底研究

スマホ用JavaScriptフレームワークとは

　スマートフォン向けJavaScriptフレームワーク／ライブラリを使うと、スマートフォンアプリっぽい見た目のページデザイン、UI（ユーザーインターフェイス）パーツやページ遷移アニメーションを簡単に実装できます。多くは、おのおののフレームワークのルールにのっとったHTMLを書くことで、それらの機能を実現します。

　本稿では、jQuery Mobileを筆頭として、いくつか発表されているスマートフォンサイト向けJavaScriptフレームワークを紹介します。

■ PCサイト向けJavaScriptフレームワークについて

　PCサイト向けJavaScriptフレームワークとしては、jQueryやprototype.jsなどが有名です。これらのフレームワークは、UIの見た目を決めるというのではなく、主にUIの動きを操作しやすくする役割を担っています。それぞれのフレームワークに対応したプラグインを使用することで、見た目も変えることはできますが、フレームワークそのものの機能ではありません。

　つまり、ビジュアルは開発者にお任せで、それをどのように生かすかをフレームワークが担っていると考えられます。

■ PCサイト向けJavaScriptフレームワークとの違い

　上記で触れたように、PCサイト向けとスマートフォンサイト向けのJavaScriptフレームワークの大きな違いは、前者が動きを制御することにあり、後者が見た目を整えることになると考えられます。

　前者では、特に決まったHTMLテンプレートは存在しません（プラグインを使う場合は別です）が、後者を扱う際には決まったHTMLの記述が存在します。主に特定の属性を追加することでフレームワークが機能するようになります。標準Webブラウザが決まっているスマートフォンでは、HTML5やCSS3を利用可能なので、HTML5の恩恵にあずかることができます。

スマホ向けWebコーディングに必要な知識

　スマートフォン向けにHTMLを記述する場合は、HTML5およびCSS3を使った方が拡張性が高まるので、できればHTML5＋CSS3でコードを記述することをオススメします。

■ HTML5について

　HTML5は、HTML 4の後継となるHTML仕様として、現在注目を浴びています。2014年までの正式勧告を目指して策定が行われている途中なので、まだWebブラウザによっては実装が異なっています。

　今までとの大きな違いとしては、「動画や音声などの利用が簡単」「位置情報やローカルストレージを利用できる」「要素や属性の見直し」「文章構造の強化（タグの追加）」が主な改良点として挙げられます。

■ CSS3について

　現在広く使われているCSSのバージョンは、2.1です。CSS3を使うことで、JavaScriptを使用しなくても、アニメーションやトランジションができるようになります。その他、背景画像の複数指定、背景色のグラデーション、ボックスの角丸化などに対応しています。

■ WebKitブラウザについて（HTML5、CSS3の実装状況）

　個人的に使っている範囲では、主要なiOS（iPhone・iPad・iPod touch）／Android端末において、HTML5の新規追加タグは問題なく認識します。CSS3に関しても、わざわざWebKitを拡張しなくても、背景画像の複数指定、グラデーション、ボックスの角丸なども問題なく使えます。

　PCとスマートフォンの両対応で作る場合はInternet Explorerでは対応していないことも多いので、ユーザーエージェントなどによる切り分けを行うなど、注意して記述する必要があります。

3つのフレームワークで同じ機能を実装して比較

■ 主なフレームワークの紹介

　今回、サンプルを交えて紹介するJavaScriptフレームワークは以下の3つです（下記リストはインデックスになっています）。

• スマホ向けWeb開発の定番となりそうな「jQuery Mobile」
• 手軽にiPhoneっぽいデザインを使える「iUI」
• 3種類のテーマが選べるSencha製「jQTouch」

　本稿では、それぞれのフレームワークの利用方法と、何ができるかということを紹介していきますが、それぞれ特徴があるので、構築しようとしているサイトに合ったものを使用するといいでしょう。

■ サンプルアプリの概要

　以下が、今回作るサンプルアプリの機能です。

• メインページ
  • ヘッダ
    • タイトル
    • デモページへのリンクボタン
  • リストボックス
    • カラーチェッカー（入力式）へのリンク
    • カラーチェッカー（スライダー式）へのリンク
• カラーチェッカー（入力式）
  • ヘッダ
    • タイトル
  • カラーチェッカー
    • カラー表示用ボックス
    • RGB入力ボックス
    • カラー変更ボタン
• カラーチェッカー（スライダー式）
  • ヘッダ
    • タイトル
  • カラーチェッカー
    • カラー表示用ボックス
    • RGB入力スライダー
    • カラー変更ボタン

　UIデザインに関しては、フレームワークの中で使った方がいいものがあれば、それを積極的に使っていきます。独自のCSSは一部を除いて使用しません。使用する場合は、style属性を使って直接HTMLタグ内に記述しています。

■ カラーチェッカーの仕組みについて

<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
    $("#btn1").click(function(){
        var color1 = $('#color').val();
        $("#box").css("background", "#" + color1);
    });
    $("#btn2").click(function(){
        var colors = [$("#r").val(), $("#g").val(), $("#b").val()];
        var color2 = "rgb(" + colors.join() + ")";
        $("#box2").css("background", color2);
    });
});
-->
</script>

<div id="box2" style="width:90%;height:100px;margin:10px auto;border:1px solid #000;background:#000"></div>
<form>
  <input id="r" type="range" value="0" min="0" max="255" /><br>
  <input id="g" type="range" value="0" min="0" max="255" /><br>
  <input id="b" type="range" value="0" min="0" max="255" /><br>
  <p><a href="#" id="btn2">カラー変更</a></p>
</form>

　「range」はHTML5から拡張された属性なので、スマートフォンの場合、Webブラウザにより実装が済んでいない場合もあります。その場合、「type="number"」で代替されたり、表示されないこともあるようです。詳細は、以下の記事をご覧ください。

連載インデックス「HTML5“とか”アプリ開発入門」 - ＠IT via kwout

1-2-3-4-5

INDEX
jQuery Mobile、iUI、jQTouch、 Sencha Touch、Wink toolkit、PhoneGapとは　 スマホ用JavaScriptフレームワーク5つ＋1を徹底研究
	Page1 スマホ用JavaScriptフレームワークとは スマホ向けWebコーディングに必要な知識 3つのフレームワークで同じ機能を実装して比較
	Page2 スマホ向けWeb開発の定番となりそうな「jQuery Mobile」
	Page3 手軽にiPhoneっぽいデザインを使える「iUI」
	Page4 3種類のテーマが選べるSencha製「jQTouch」
	Page5 プログラマ向けの「Sencha Touch」「Wink toolkit」 スマホWeb開発から一歩先行くハイブリッドアプリ開発 Dreamweaverとも一緒に使える「PhoneGap」とは Web開発者もフレームワークでアプリが作れる時代

Smart＆Social フォーラム トップページへ