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

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


jQuery Mobile、iUI、jQTouch、
Sencha Touch、Wink toolkit、PhoneGapとは


アシアル株式会社
鴨田健次
2011/6/22

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

- PR -

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

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

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

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

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

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

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

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

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

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

HTML5について

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

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

CSS3について

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

WebKitブラウザについて(HTML5、CSS3の実装状況)

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

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

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


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

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

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

サンプルアプリの概要

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

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

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

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


  JavaScript
<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>

  HTML:カラーチェッカー1
<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"」で代替されたり、表示されないこともあるようです。詳細は、以下の記事をご覧ください。

  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 フォーラム トップページへ



Smart & Social フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Smart & Social 記事ランキング

本日 月間