2012年8月10日 勉強会

2,463 views

Published on

2012年8月10日バイドゥ株式会社プロダクト事業部勉強会の資料です

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,463
On SlideShare
0
From Embeds
0
Number of Embeds
1,076
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

2012年8月10日 勉強会

  1. 1. Quick Start to jQuery Mobile ほとんどWeb Designing 8月号の記事内容紹介 JavaScriptが書けない残念なデザイナー 矢野りん2012年8月10日金曜日
  2. 2. トピックス • jQuery Mobile 基礎 • jQuery Mobileサイトギャラリー紹介 • jQuery Mobile プロコン • リソース集2012年8月10日金曜日
  3. 3. jQuery Mobile基礎 • jQMとは JavaScriptライブラリのモバイル専用版。よくつかうUIのイン タラクションとかUIのデザインが部品化してある。 • 使い方 jQMのサイトからDLしたjsファイルをサーバに展開して使う か、CDN(Contents Delivery Network)を参照してjQMサーバ から呼び出して使うこともできるよ。2012年8月10日金曜日
  4. 4. ゲット★ザ jQM • http://jquerymobile.com/download/2012年8月10日金曜日
  5. 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. 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(HTML5のCustom Data属性を使用)が </body> 指定されている要素内が1つのページになる B:ヘッダー(自動的にスタイルがついてみためヘッダーっぽくなる) C:コンテンツ(ヘッダとフッタにはさまれた見た目になる) D:フッター(みためヘッダーっぽくなる)2012年8月10日金曜日
  7. 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> 論理的なページを1つのHTMLにまとめることでリクエストを減らし通信効率をあげる のが目的なんだ。でも、文書構造が大きいとそもそもデータが大きくなったりもするから 設計にはちゅういが必要なんだ2012年8月10日金曜日
  8. 8. 他人が作成したレンダリングサンプル2012年8月10日金曜日
  9. 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. 10. スタイルのカスタマイズは? don t touch★ go ahead. edit.2012年8月10日金曜日
  11. 11. 色だけちょっと変えることも2012年8月10日金曜日
  12. 12. jQMサイトギャラリー http://www.jqmgallery.com/2012年8月10日金曜日
  13. 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. 14. jQM長所と短所 • イイネ! ‣ いわゆるスマホサイトを作るなら最速でローンチできそう(コンテンツさえ あればね) ‣ マルチプラットフォームの対応もおまかせ。 http://jquerymobile.com/gbs/ ‣ 横スライドとかページ回転とかよくあるインタラクションの組み込みが簡単 ‣ マルチなディスプレイ解像度に配慮した作りになっており、レスポンシブで も採用可能な気がする • イクナイネ! ‣ インタラクションが一部のAndroid でうんこちゃんのように遅い ‣ アプリ開発とかUIを細かくカスタマイズしたくなりそうな案件では逆に1か ら作った方がはやいかもしれないくらい、スタイルの構造が複雑である2012年8月10日金曜日
  15. 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日金曜日

×