jQuery Mobileバレしないモバイルサイトの作り方
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

jQuery Mobileバレしないモバイルサイトの作り方

  • 28,811 views
Uploaded on

ICT+ABC東北2012のセッション資料です。

ICT+ABC東北2012のセッション資料です。

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 初めてjQuery Mobileを触ろうと思い見させていただきました。さっとみただけでなるほど!という内容で勉強になりました。ありがとうございます。
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
28,811
On Slideshare
28,651
From Embeds
160
Number of Embeds
10

Actions

Shares
Downloads
110
Comments
1
Likes
56

Embeds 160

http://3642g.com 114
https://twitter.com 28
http://tweetedtimes.com 9
http://www.facebook.com 2
http://dev.nursejinzaibank.com 2
http://s.deeeki.com 1
https://www.facebook.com 1
http://twitter.com 1
http://favtile.com 1
http://localhost 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. Agenda1. 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; }
  • 25. Tips4 アイコンを変えるicons-18-white.pngicons-36-white.png
  • 26. Tips 5ページ遷移アニメーションを利利⽤用しない$(document).on(mobileinit, function(){ $.mobile.defaultPageTransition = none;}); ページ遷移アニメーションは、Android 2.x は強制的にfadeにフォールバックされる 端末によってはチラついたりすることがある ので、いっそのこと利用しないのも手
  • 27. 3. jQuery Mobile 以外の ライブラリを利用する
  • 28. 例例えば、よくあるスライドショーのようなもの(サンプルでは、flexsliderを利用)
  • 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. ResourcesjQuery 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/ )