jQuery Mobileメモ

[sc name=start]

特徴

  • タッチ操作に最適化したウェブを開発するためのフレームワーク
  • jQueryを拡張するライブラリ（プラグイン）の一種
  • jQueryプロジェクトチームによって開発
  • JavaScriptライブラリ、モバイルフレームワークの一つ
  • 幅広い種類のスマートフォンやタブレット間で互換性をもつことを重視して作られている
  • jQuery プログラムを同時に組み込んで使用
  • HTMLのバージョンはHTML4.01でなくHTML5、CSSはCSS3を対象として開発
  • スマートフォンの通信速度でも軽快に動くように開発
  • HTML、CSSの知識があれば、高度なプログラミングが出来なくても簡単にスマートフォンサイトが作れる
  • ThemeRoller for jQuery Mobile で作業を高速化する事が出来る
  • 他のスマートフォンフレームと大きく異なるのは、対応デバイスの幅広さ
  • iOSやAndroidなどのWebKitベースのスマートフォンだけでなく、Windows PhoneやBlackBerryにも対応
  • コンセプトは『Write Less , Do More.』（少ない記述で、よりたくさんのことができる）
  • HTML中にカスタムデータ属性を記述することでスマートフォン向けのサイトを自動で生成
  • レガシーな環境にもアクセシビリティを保証
  • 複数のページを 1 つの HTML ファイル内にまとめて記述可能
  • div タグの data-role 属性に、page を指定して、ページを定義
  • data-role 属性を使用して、各タグの役割を設定
  • 他にも、 header 、 content 、 listview などを設定可能

    • 機能

  • アプリのデザインを管理するテーマ機能
  • Ajax通信によるページ遷移
  • リッチなフォーム要素
  • ダイアログ、リスト、パネル、レスポンシブルテーブルなどのウィジェット
  • タッチパネル環境に対応したさまざまなイベント

    • 動作環境

  • Android
  • iOS
  • Windows Phone
  • Chrome for Android
  • Firefox Mobile
  • Opera Mobile／Desktop
  • Kindle 3 and Fire
  • Blackberry
  • Kindle 3, Fire, and Fire HD
  • デスクトップブラウザー（Internet Explorer、Chrome、Firefox、Safariなど）

    • 4jQuery／jQuery Mobileをインポート

  • 動作に必要なライブラリ／スタイルシートをCDN（Content Delivery Network）経由で提供
  • CDNを利用するには、ページに以下のコードを含めるだけです。
    • 	
<link
       href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js">
</script>

    オフラインでの利用

  • あらかじめ必要なファイルをダウンロードしておくことで、オフライン環境でjQuery Mobileを利用することも可能
  • jQuery本家サイトの［Download］ページ
  • jQuerymobile本家サイトの［Download］ページ
  • jQuery本体は、jQuery Mobileには同梱されないので注意
    • HTML
<link
       href="css/jquery.mobile-1.4.0.min.css" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.4.0.min.js"></script>

    おすすめの参考書

    参考にさせてもらったサイト

  • ウィキペディア
  • ASCII.jp
  • BuildINSIDER.net

    • [sc name=end]

    ホーム
    トップ