CSSチームが運営するHTML5・CSS3情報サイト

HTML5 GOGO

ボーズ・オンラインストア

kida

iPhone 4Sの登場等でますますスマートフォンのシェアが拡大されている、昨今。
今回はスマートフォンサイトの構築で今、最も注目されているフレームワークである、
「jQuery Mobile」

1回目「jQuery Mobileの概要」
2回目「実際に作ってみた(基本編)」
3回目「実際に作ってみた(応用編)」

の計3回に分けてご紹介します。

jQuery Mobile

今回は第1回目の「jQuery Mobileの概要」という名目でご紹介しようと思います。

実は多種多様なフレームワーク達

jQuery Mobileの具体的な話をする前に、スマートフォンのフレームワークは実に様々な種類のものが、既にリリースされています。
全ては紹介しきれないので代表的なフレームワークをご紹介したいと思います。

Sencha Touch
http://www.extjs.co.jp/products/touch/
HTMLは書かずにほぼJSで作成します。
HTMLで書くわけではないので、好みが分かれるフレームワークかと思います。
ライセンス形態が変更になって、現在では商用でも無料で使えるようになりました。

jQTouch
http://jqtouch.com/
iPhoneのwebkitに最適化されているjQueryのプラグイン。
iPhoneに特化している印象です。

WINK Toolkit
http://www.winktoolkit.org/
最近、全体的なデザインが見直されました。
もともとUIエフェクトの評価は高かったWink Toolkitですが、更に見やすくなっているみたいです。
ただ、デバイスによっては見れなかったりします。

これらが有名なフレームワークになりますが、少し専門的な知識が必要であったり、デバイスによって見れなかったりと一長一短な印象です。

本命登場!「jQuery Mobile」をすすめる理由

様々なフレームワークが一長一短の状態の中、他よりも使いやすく作られたフレームワークが登場しました。
それが「jQuery Mobile」です。

概要

公式: http://jquerymobile.com/
現在の最新バージョン: jQuery mobile1.0RC2(2011年10月27日現在)
今後数週間以内に、1.0の最終リリースに移行する前の最後のRCだそうです。
(但し伸びる可能性もあるとか・・・)
jQuery Mobileは、はjQueryをベースに作り上げられたフレームワークです。優れたスマートフォンサイトの作成に欠かせないウィジェットやレイアウトの仕組みをすべて備えています。

他のフレームワークより優れている3つの特徴

具体的にjQuery Mobileが他のスマートフォンフレームワークより優れている3つの特徴をご紹介します。

1、HTMLを書くだけで簡単に実現が可能!
2、豊富に用意されたコンポーネント
3、さまざまなデバイスに対応!

1、HTMLを書くだけで簡単に実現が可能!

jQuery Mobile はHTML5とCSS3を組み合わせた機能を使用してさまざまなGUIを簡単に生成できます。

サンプル1、リンクボタンを表現する

削除

この一見、CSSの指定が複雑そうなリンクボタンですがjQuery Mobileを使用していると簡単なコードを書くだけで表現できます。

<a href="index.html" data-role="button">削除</a>

aタグにdata-role属性を追加してjQuery Mobileが用意しているUIタイプの”button”を指定すると、
自動でリンクボタンの見た目になります。

サンプル2、リストボタンを表現する

リスト構造のボタンを実現する場合も簡単なコードを書くだけで可能です。

<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button">上へ</a>
<a href="index.html" data-role="button">下へ</a>
</div>

親要素のdata-role属性に”controlgroup”を指定することで、子要素をリスト化する事ができます。

サンプル3、ボタンにアイコンをつける

リンクボタンにボタンの内容を表現するアイコンをつけたい場合は以下のように書きます。

<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button" data-icon="arrow-u">上へ</a>
<a href="index.html" data-role="button" data-icon="arrow-d">下へ</a></div>

ボタンのdata-icon属性にUIタイプを指定する事でボタンにアイコンを指定する事が可能です。
アイコンの種類は指定するUIタイプを変更すれば様々な種類のアイコンを使用できます。

上記の3点は、ほんの1例に過ぎず他にもhtmlのコードのみで様々な種類の見た目を簡単に実現することができます。

また、色味等の変更もCSSから可能ですので、まずはjQuery Mobileを導入して細部を調整していくような流れで開発することが可能となっています。

2、豊富に用意されたコンポーネント

1で紹介したように、jQuery Mobileは、簡単に見た目の実現できるのですが、多数のモバイルユーザーインターフェイス用の部品が用意されているのも魅力の一つです。
以下に2010年8月に公式から発表されたサンプルを紹介いたします。

サンプル

上記のような見た目が項目1で紹介したようなhtmlコードのみを書くことで簡単に実現できます。

3、さまざまなデバイスに対応!

jQuery Mobileで作成したアプリケーションはiOSでも、Androidでも、SymbianでもBlackBerryでもWindows Mobileでも、ほとんどあらゆるデバイスのブラウザで動作を確認しています。
(詳細は「Mobile Graded Browser Support」をご覧下さい。)。

次回

以上、まずは第一回ということでざっくりとjQuery Mobileの概要をご紹介しました。
簡単に作れて、見た目の種類も豊富で、しかも対応しているブラウザが多いと、他のフレームワークより使いやすいフレームワークが「jQuery Mobile」です。

次回は実際にjQuery Mobileを使って、スマートフォンサイトを作っていこうと思います。お楽しみに!

Subscribe:
pagetop