iAndroidの会

jQuery Mobile  紹介

 2012年5月16日

神奈川工科大学 情報工学科

田中哲雄

jQueryのプラグイン（Javascriptのライブラリ）

• The jQuery Foundationが開発
• 2012年4月13日 version1.1.0リリース
• jQuery core 1.6.4 または 1.7.1 前提
• ちなみに，jQueryはもっともポピュラーなJavascriptライブラリ
• ちなみに，JavascriptはJavaではありません

スマートフォン向けのサイトを簡単に作ることができる

• Javascriptのコードを書かずに，（ちょっとした）動的なGUIを作成できる
• さまざまなデバイスをサポート

  例

  • iOS
  • Android
  • Windows Mobile
  • Symbian
  • BlackBerry
  • webOS
  • ...
  • PCでも
• タッチUIに最適化したレイアウトとUIウィジェット

HTML5ベース

• でも，div要素使いすぎ．．．

同じ目的のライブラリは他にも

• jQTouch
• Sencha
• iUi

• jQuery Mobileを利用するには，jQuery本体と，jQuery MobileのCSS，Javascriptを読み込む．

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
                    

• このページのソースはこんな感じ

    <div data-role="page">
        <div data-role="header">ページの構造 </div>
        <div data-role="content">... </div>
        <div data-role="footer">ふったー </div>
    </div>
                    

• data-roleという属性を持つdivタグを組み合わせて記述
• data-role="page" : ページ （必須）
  • この内容が1ページとして表示される
  • 一つのファイルに複数記述することができる
• data-role="header" : ヘッダー
• data-role="content" : コンテンツ
• data-role="footer" : フッター

• ページにidをつけ，指定したidのページにaタグでジャンプする
• aタグのdata-role属性を"button"とすると，アンカーがスマートフォンらしいタッチボタンの外観になる
• 例： homeページにhomeというIDがついているとすると
      <a href="#home" data-role="button">ホームへ </a>
  で，下のようなボタンが表示される

メニュー Android iPhone Windows Phone

トグル Off On

スライダー

ラジオボタン

Android iPhone Windows

ダイアログのサンプルです．

• ボタンにはアイコンをつけることができる
• アイコンの位置（上下左右）を指定できる

• テキストエディタがあれば制作できる
• 開発環境があるとより便利
• codiqa
  http://codiqa.com
  • モックアップを簡単に制作できる
  • 複雑なことはできない
  • スクリプトが書けたり，要素をコピーできたりすると，より使いやすくなるように思う
  • テキスト内にタグが書けないのが残念（書けないわけじゃないけど）
• Application Craft   http://www.applicationcraft.com/
  • まだ試してません m(_ _)m
  • コードも書けて，なかなか高機能っぽい
  • PhoneGapと統合されていて，ネイティブアプリ開発にも使えるらしい
• ここまでのプレゼンは（ほとんど）codiqaでつくりました
• 次の2ページはJavascriptを使った例です．codiqaだけではつくれません．

 

サイト

• 本家
• jQuery1.1.0 日本語リファレンス
• ｊQuery MobileではじめるWebアプリ開発
• jQuery Mobileを使った国内スマホサイトまとめ
  • QLifeなど多くの有用なサイト，有名企業のサイトでjQuery Mobileが使われています．

書籍

• ｊQuery Mobile （オライリージャパン）
• jQuery Mobile スマートフォンサイト作成入門コース （秀和システム）
• jQuery Mobile ポケットリファレンス （技術評論社）

画像選択 蒼あんな・れいな 蒼あんな・れいな（IT夢コン2011での特別審査員） 蒼あんな・れいな（先生と） 蒼あんな・れいな（先生と その２）

画像URL