2013年12月11日水曜日

jQuery Mobile

自分はWebデザインについて興味を持っているため, 今回はスマホ向けUIを簡単に構築
できるフレームワーク, jQuery Mobile について紹介したいと思います.

◎ jQuery Mobile とは


jQuery Mobile は タッチ操作に最適化されたウェブを開発するためのフレームワークで,

幅広い種類のスマートフォンやらブレット間で互換性を持っています.  【公式より】


公式にある説明の通り, 多くのプラットフォームに対応しており, 様々な端末から自分の作成
したWebページを閲覧することができます. さらに非常なシンプルな構造であるため, 短時間で
Webページを作成できるのも大きな利点の1つです.

それではjQuery Mobile を適用したWebページがどのうように表示されるのか, 
ここで例を紹介したいと思います.

     
       【図1】 iPhone5で表示した場合
【図2】Nexus7で表示した場合


上記の図を参照すればわかるように、違うプラットフォームの上でも整った形でUIを
表示できることがわかります.


実際にjQuery MobileをWebページに.適用するには, 以下のソースコードをWebページの
ヘッダータグの中に記述するだけで済みます. (jQuery Mobile は 2013年2月 に
バージョン1.3.0がリリースされたようです)



また、jQuery Mobile の大きな特徴の1つとして, 1つのタグを1ページとして認識する機能が
存在します. そのため, 1つのhtmlファイル内で複数のページを管理することができます.
新たにhtmlファイルを読み込む必要性がないため, スムーズなページ遷移を実現すること
ができます.

         


上記の2つのWebページは同じHTMLファイルに記述されています.
このようにタグごとに全く違うデザインを適用することも可能です.

比較的シンプルなデザインになりがちなjQuery Mobileですか, jQueryの知識があれば,
様々な拡張を行うことも可能となります.

◎ jQuery Mobile を利用した国内サイト一覧

http://ascii.jp/elem/000/000/674/674677/

上記のURLでは, jQuery Mobileを利用したWebページを紹介しています.
このサイトで紹介されてるように, 自分なりの拡張を加えることで,
様々なタイプのWebページを作成することもできます.

自分でスマホ向けのWebページを作りたいと感じた人は簡単なのでぜひ触ってみて
くださいね(-_-)/~~

時間がないので今回はこのへんで!