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. ThemeRollerで大まかなデザインをカスタ マイズする 2. 細かなデザインをスタイルを上書きしてカス タマイズする
- 12. ThemeRollerで大まかなデザイン フォント ページの背景色 各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(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/ )