jQuery Mobileバレしないモバイルサイトの作り方
- 1. jQuery Mobileバレしない モバイルサイトの作り方 ?2012/10/20 ICT ERA + ABC 2012 東北 Toru Yoshikawa ( @yoshikawa_t)
- 2. Who? 吉川 ?徹 ?/ ?Toru ?Yoshikawa @yoshikawa_?t C.A.Mobile Web先端技術フェロー html5j.org/HTML5とか勉強会スタッフ Google API Expert ( Chrome ) 日本jQuery Mobileユーザー会 Sublime Text 2 Japan Users Group allWebクリエイター塾/jQuery Mobile担当講師 Blog: http://d.hatena.ne.jp/pikotea/
- 3. 著書 「jQuery Mobile パーフェクトガイド」 「HTML5ガイドブック 増補改訂版」（共著） http://www.amazon.co.jp/dp/ http://www.amazon.co.jp/dp/ 484433266X 4844332937
- 4. Agenda 1. jQuery Mobile を使った良いサイトとは何か？ 2. jQuery Mobile のデザインをカスタマイズする 3. jQuery Mobile 以外のライブラリを利用する 4. まとめ
- 5. 1. jQuery Mobile を使った 良いサイトとは何か？ http://www.jqmgallery.com/
- 6. Not cool :(
- 7. Cool :)
- 8. コンセプトに合わせたデザインを 中途半端に jQuery Mobile を利用する と…？ jQuery Mobile のデザインに引きずられて コンセプトが崩れる jQuery Mobile のデザインを塗り替える
- 9. jQuery Mobile バレしない サイトを作ろう！
- 10. 2. ?jQuery ?Mobile ?のデザイン をカスタマイズする
- 11. デザインのカスタマイズ 1. 罢丑别尘别搁辞濒濒别谤で大まかなデザインをカスタ マイズする 2. 細かなデザインをスタイルを上書きしてカス タマイズする
- 12. 罢丑别尘别搁辞濒濒别谤で大まかなデザイン フォント ページの背景色 各UIのカラー 角丸 http://jquery.mobile.com/themeroller/
- 13. スタイルで細かなデザイン 個別に適用する一部のUIへのスタイル指定（従来 の方法） 全体に影響するテンプレートとしてのスタイル指定 .ui-header .ui-title { /* customize */ }
- 14. jQuery Mobile のスタイル構造を知る jQuery Mobileが自動的に生成した要素に付与 されるクラスをカスタマイズする デザインの主要な部分を占めるもの ? ページ ? ボタン ? リスト
- 15. jQuery Mobile のスタイルの変化を知る テーマによるスタイルの変化 - .ui-body-a ～ .ui-body-e 状態によるスタイルの変化 - .ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c ? 機能によるスタイルの変化 - .ui-corner-all, .ui-shadow, .ui-li-has-thumb
- 16. ページ
- 17. ページの构造 ヘッダー .ui-‐??header .ui-‐??page コンテンツ .ui-‐??content .ui-‐??dialog フッター .ui-‐??footer
- 18. Tips 1 ヘッダーとページの背景色を変更する .ui-header { /* ヘッダー背景 */ background: linear-gradient(top, #fff 0%, #fdfcfc 50%, #f5efef 50%, #ebe1e1 100%); border: 1px solid #bbb; } .ui-content { /* コンテンツ背景 */ background: url(/slideshow/jquery-mobile-14810182/14810182/images/bg.gif); }
- 19. ボタン
- 20. ボタンの构造 .ui-‐??btn .ui-‐??btn-‐??inner .ui-‐??icon ボタン .ui-‐??btn-‐??text
- 21. Tips2 ボタンの角丸、背景色を変更する .ui-btn-corner-all { /* 角丸 .ui-btn-up-c, .ui-btn-hover-c, */ .ui-btn-down-c { /* 背景 */ border-radius: 0.2em; } border: 1px solid #bbb; background: #fff; .ui-btn-inner { /* ボタンサイズ */ box-shadow: none; font-size: 1em; } padding: 0.6em 20px; } .ui-btn-active { /* 選択時 */ background: #aaa; box-shadow: inherit; text-shadow: inherit; }
- 22. リスト
- 23. リストの構造 .ui-‐??listview .ui-‐??li-‐??has-‐??thumb .ui-‐??li .ui-‐??btn-‐??inner .ui-‐??btn-‐??text .ui-‐??btn .ui-‐??li-‐??heading .ui-‐??link-‐??inherit .ui-‐??icon .ui-‐??li-‐??desc .ui-‐??li-‐??thumb
- 24. Tips3 リストを整形する .ui-li-thumb { /* サムネイルサイズ */ padding: 10px; max-height: 70px; max-width: 70px; } .ui-li-has-thumb .ui-btn-inner a.ui- link-inherit { /* 左余白?リスト高さ */ min-height: 70px; padding-left: 75px; } .ui-li-heading { /* 見出しフォント */ font-size: 1.1em; }
- 26. Tips 5 ページ遷移アニメーションを利利?用しない $(document).on('mobileinit', function(){ $.mobile.defaultPageTransition = 'none'; }); ページ遷移アニメーションは、Android 2.x は強制的にfadeにフォールバックされる 端末によってはチラついたりすることがある ので、いっそのこと利用しないのも手
- 27. 3. jQuery Mobile 以外の ライブラリを利用する
- 29. より高度なカスタマイズ jQuery Mobile の装飾や動作から除外する領域を作る ? data-ajax … Ajaxを無効にする ? data-enhance … 装飾を無効にする jQuery Mobile のイベントを知る ? pageinit … ページの初期化 ? pageshow … ページの表示
- 30. jQuery Mobile の装飾や動作から除外する領域を作る JSで設定を有効化 $(document).on('mobileinit', function(){ $.mobile.ignoreContentEnabled = true; }); data-‐??ajaxとdata-‐??enhanceの設定 <div data-ajax="false" data-enhance="false"> <!-- jQuery Mobile free --> </div>
- 31. イベント: pageinit ? jQuery ?Mobile ?が最初に初期化する際に発?生す るイベント ? 同じページを再度度表?示する場合は、発?生しない ? loadイベントの代わりに利利?用するイメージ $(document).on('pageinit', '#page-id', function(){ /* 動的なDOMの構築など */ });
- 32. イベント: pageshow ? ページを表?示するたびに発?生するイベント ? Google ?Analytics ?などのページビューをカウン トするようなツールに利利?用する ? 座標計算やサイズ計算などを?行行うライブラリの 初期化に利利?用する $(document).on('pageshow', '#page-id', function(){ /* ページが表示される際に行う初期化など */ });
- 33. ライブラリを利用する際の注意点 ? 座標計算やサイズ計算などがあるライブラリだと pageinitでは正常に動作しない ? pageshowで1回だけ初期化を?行行うように次のように 記述する $(document).on('pageinit', '#page-id', function(){ $(this).one('pageshow', function(){ /* 一度しか必要のないライブラリの初期化 */ }); });
- 34. 例）スライドショーを作成するケース（完成形） $(document).on('mobileinit', function(){ $.mobile.ignoreContentEnabled = true; }); $(document).on('pageinit', '#page-id', function(){ $(this).one('pageshow', function(){ /* ライブラリの利用 */ $(this).find('.flexslider').flexslider(); }); }); <div data-ajax="false" data-enhance="false"> <!-- スライドショーのマークアップ --> <div class="flexslider"> <ul>...</ul> </div> </div>
- 35. 4. まとめ
- 36. まとめ jQuery Mobile バレしないサイトを目指そう ? 大まかなデザインはThemeRollerで、細かなデザインはス タイルを上書きしていく ? jQuery Mobileの構造や挙動を知ることによってカスタマ イズがやりやすくなる ? サードパーティ製のライブラリやツールをうまく利用しよう ? デバッグツールは必須
- 37. 今後のロードマップ 1.3?2012第4四半期（2012年10月～12月） ? レスポンシブデザイン対応（レスポンシブテーブルなど） 1.4?2013第2四半期（2013年1月～3月） ? スクロール領域とタブの追加 1.5?2013第2四半期（2013年4月～6月） ? カルーセル追加 1.6?2013第3四半期（2013年7月～9月） ? マルチパネル対応 1.7?2013第4四半期（2013年10月～12月） ? コードの最適化?パフォーマンスチューニング
- 38. 日本 jQuery Mobile ユーザー会 https://groups.google.com/group/jqm-jp/ jQuery Mobileに関するノウハウの共有?情報交換 是?非、ご参加ください！
- 39. Thank you!! ( @yoshikawa_t )
- 40. Resources jQuery Mobile 公式サイト ( http://jquerymobile.com/ ) jQuery Mobile ギャラリー ( http://www.jqmgallery.com/ ) jQuery Mobileパーフェクトガイド ( http:// www.impressjapan.jp/books/3266 ) ※サンプルのダウンロード ができます 日本 jQuery Mobile ユーザー会 ( https:// groups.google.com/group/jqm-jp/ )