2012年8月10日 勉強会
- 1. Quick Start to jQuery Mobile ほとんどWeb Designing 8月号の記事内容紹介 JavaScriptが書けない残念なデザイナー 矢野りん 2012年8月10日金曜日
- 2. トピックス • jQuery Mobile 基礎 • jQuery Mobileサイトギャラリー紹介 • jQuery Mobile プロコン • リソース集 2012年8月10日金曜日
- 3. jQuery Mobile基礎 • jQMとは JavaScriptライブラリのモバイル専用版。よくつかうUIのイン タラクションとかUIのデザインが部品化してある。 • 使い方 jQMのサイトからDLしたjsファイルをサーバに展開して使う か、CDN(Contents Delivery Network)を参照してjQMサーバ から呼び出して使うこともできるよ。 2012年8月10日金曜日
- 4. ゲット★ザ jQM • http://jquerymobile.com/download/ 2012年8月10日金曜日
- 5. jQMを読み込もうぜ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>jQuery Mobileだっせ</title> <!-- jQuery Mobileの動作に必要なスタイル／ライブラリをインポート --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> 2012年8月10日金曜日
- 6. jQMページのコードはこんな感じ <body> <div data-role= page id= page> <div data-role= header > <h1>へっだ</h1> </div> B <div data-role= content > こんてんつ C A </div> <div data-role= footer > <h4>ふった</h4> </div> D </div> A:data-role(HTML５のCustom Data属性を使用）が </body> 指定されている要素内が１つのページになる B：ヘッダー（自動的にスタイルがついてみためヘッダーっぽくなる） C：コンテンツ（ヘッダとフッタにはさまれた見た目になる） D：フッター（みためヘッダーっぽくなる） 2012年8月10日金曜日
- 7. 1つのHTMLに複数のページ？ ふつうのHTML jQM .htmlファイル .htmlファイル 論理的なページA <div data-role= page id= pageA> 論理的なページ 論理的なページB <div data-role= page id= pageB> 論理的なページC <div data-role= page id= pageC> 論理的なページを１つのHTMLにまとめることでリクエストを減らし通信効率をあげる のが目的なんだ。でも、文書構造が大きいとそもそもデータが大きくなったりもするから 設計にはちゅういが必要なんだ 2012年8月10日金曜日
- 8.
- 9. UIパーツを作る <input type="submit" value="submit" /> <input type="reset" value="reset" /> <input type="image" value="image" /> <input type="button" value="button" /> <button>button要素</button> <a href="#" data-role="button">アンカータグ</a> 従来のHTMLで指定してもdata-role属性で 指定してもぜんぶおんなじボタンの見た目になる ※見た目は同じだがJS的な制限があったりと実装的 には同じ扱いにはならない 2012年8月10日金曜日
- 10. スタイルのカスタマイズは？ don t touch★ go ahead. edit. 2012年8月10日金曜日
- 11.
- 12. jQMサイトギャラリー http://www.jqmgallery.com/ 2012年8月10日金曜日
- 13. WordPressにも組み込めるとか • Multi Device Switcher http://wordpress.org/extend/plugins/multi-device- switcher/ のプラグインをWPに仕込んでユーザーエージェントをみてCSS を振り分ける作戦で組み込める。 • 他人が作成したsample http://meglog.net/jqm-sample/ ※WPtap mobile detectorというプラグインを使った例だそう ですがプラグインのサポートが終了していたので似たようなのを みつけました。 2012年8月10日金曜日
- 14. jQM長所と短所 • イイネ！ ‣ いわゆるスマホサイトを作るなら最速でローンチできそう（コンテンツさえ あればね） ‣ マルチプラットフォームの対応もおまかせ。 http://jquerymobile.com/gbs/ ‣ 横スライドとかページ回転とかよくあるインタラクションの組み込みが簡単 ‣ マルチなディスプレイ解像度に配慮した作りになっており、レスポンシブで も採用可能な気がする • イクナイネ！ ‣ インタラクションが一部のAndroid でうんこちゃんのように遅い ‣ アプリ開発とかUIを細かくカスタマイズしたくなりそうな案件では逆に１か ら作った方がはやいかもしれないくらい、スタイルの構造が複雑である 2012年8月10日金曜日
- 15. リソース集 • jQuery Mobile（本家） http://jquerymobile.com/ • jQuery Mobile Graded Browser Support（サポートしているブラウザリスト） http://jquerymobile.com/gbs/ • jQuery Mobile Gallery（jQMを採用しているサイト集） http://www.jqmgallery.com/ • ThemeRoller（CSSカスタマイズツール） http://jqueryui.com/themeroller/ • さんざん引き合いに出した他人の図の出典（@IT jQuery Mobile 入門） http://www.atmarkit.co.jp/fdotnet/chushin/jqmobile_index/index.html • jQuery採用サイト例 MBA mobile http://www.mba-multimedia.mobi/ Dungs Mobile mobile.dungs.com/en/home one little dream http://www.onelittledream.com/happycircus-timeline-cover.html ※雑誌掲載時はモバイル版があったらしいが今はなくなっている。なんでやー COTOHOGI http://cotohogi.com/sp/ SharksFrenzy http://m.sharksfrenzy.co.za/ 2012年8月10日金曜日