できるフレームワーク, 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ページを作りたいと感じた人は簡単なのでぜひ触ってみて
くださいね(-_-)/~~
時間がないので今回はこのへんで!