スマホ用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フレームワークとしては、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つです(下記リストはインデックスになっています)。
本稿では、それぞれのフレームワークの利用方法と、何ができるかということを紹介していきますが、それぞれ特徴があるので、構築しようとしているサイトに合ったものを使用するといいでしょう。
■ サンプルアプリの概要
以下が、今回作るサンプルアプリの機能です。
- メインページ
- ヘッダ
- タイトル
- デモページへのリンクボタン
- リストボックス
- カラーチェッカー(入力式)へのリンク
- カラーチェッカー(スライダー式)へのリンク
- ヘッダ
- カラーチェッカー(入力式)
- ヘッダ
- タイトル
- カラーチェッカー
- カラー表示用ボックス
- 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 フォーラム トップページへ |
- 夏休みの自由研究にマイコンボードで「電子サイコロ」を作ったり、音楽プログラミングをしたりしてみよう (2017/7/24)
子ども向け電子工作&プログラミング用マイコンボード「chibi:bit」の基本的な使い方を紹介する企画。夏休みの自由研究に「電子サイコロ」を作ったり、音楽プログラミングをしたりしてみよう - 子ども向け電子工作&プログラミング用マイコンボード「chibi:bit」の基本的な使い方 (2017/7/20)
子ども向け電子工作&プログラミング用マイコンボード「chibi:bit」の基本的な使い方を紹介する。夏休みの子どもの自由研究などに役立てつつ、プログラミングを始めるきっかけにしてみてはいかがだろうか - 3DゲームのAIをiOSのSceneKitとGameplayKitで作る基本 (2017/7/10)
3Dゲーム用のフレームワークSceneKitを使った簡単なアプリ制作を通して、3Dゲーム用の人工知能(AI)について学ぶ - UnityアプリをWebGL、UWP、Android、iOS用としてビルドしてみた (2017/6/27)
アプリをWebで実行できるように書き出す方法やWindows上でUWP、Android、iOS用などにビルドする方法について解説する【Windows 10、Unity 5.6に対応】
|
|