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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

28,058

Published on

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

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

Published in: Technology
1 Comment
59 Likes
Statistics
Notes
  • 初めてjQuery Mobileを触ろうと思い見させていただきました。さっとみただけでなるほど!という内容で勉強になりました。ありがとうございます。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
28,058
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
111
Comments
1
Likes
59
Embeds 0
No embeds

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/ )

×