• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery Mobileバレしないモバイルサイトの作り方
 

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

on

  • 26,311 views

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

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

Statistics

Views

Total Views
26,311
Views on SlideShare
26,151
Embed Views
160

Actions

Likes
54
Downloads
105
Comments
1

10 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
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

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

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

    • jQuery Mobileバレしない モバイルサイトの作り方  2012/10/20 ICT ERA + ABC 2012 東北 Toru Yoshikawa ( @yoshikawa_t)
    • 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/
    • 著書「jQuery Mobile パーフェクトガイド」 「HTML5ガイドブック 増補改訂版」(共著) http://www.amazon.co.jp/dp/ http://www.amazon.co.jp/dp/ 484433266X 4844332937
    • Agenda1. jQuery Mobile を使った良いサイトとは何か?2. jQuery Mobile のデザインをカスタマイズする3. jQuery Mobile 以外のライブラリを利用する4. まとめ
    • 1. jQuery Mobile を使った 良いサイトとは何か? http://www.jqmgallery.com/
    • Not cool :(
    • Cool :)
    • コンセプトに合わせたデザインを 中途半端に jQuery Mobile を利用する と…? jQuery Mobile のデザインに引きずられて コンセプトが崩れる jQuery Mobile のデザインを塗り替える
    • jQuery Mobile バレしない サイトを作ろう!
    • 2.  jQuery  Mobile  のデザイン をカスタマイズする
    • デザインのカスタマイズ1. ThemeRollerで大まかなデザインをカスタ マイズする2. 細かなデザインをスタイルを上書きしてカス タマイズする
    • ThemeRollerで大まかなデザイン フォント ページの背景色 各UIのカラー 角丸http://jquery.mobile.com/themeroller/
    • スタイルで細かなデザイン 個別に適用する一部のUIへのスタイル指定(従来 の方法) 全体に影響するテンプレートとしてのスタイル指定.ui-header .ui-title { /* customize */}
    • jQuery Mobile のスタイル構造を知る jQuery Mobileが自動的に生成した要素に付与 されるクラスをカスタマイズする デザインの主要な部分を占めるもの ✓ ページ ✓ ボタン ✓ リスト
    • 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
    • ページ
    • ページの構造 ヘッダー .ui-‐‑‒header .ui-‐‑‒page コンテンツ .ui-‐‑‒content.ui-‐‑‒dialog フッター .ui-‐‑‒footer
    • 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); }
    • ボタン
    • ボタンの構造 .ui-‐‑‒btn .ui-‐‑‒btn-‐‑‒inner.ui-‐‑‒icon ボタン .ui-‐‑‒btn-‐‑‒text
    • 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; }
    • リスト
    • リストの構造.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
    • 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; }
    • Tips4 アイコンを変えるicons-18-white.pngicons-36-white.png
    • Tips 5ページ遷移アニメーションを利利⽤用しない$(document).on(mobileinit, function(){ $.mobile.defaultPageTransition = none;}); ページ遷移アニメーションは、Android 2.x は強制的にfadeにフォールバックされる 端末によってはチラついたりすることがある ので、いっそのこと利用しないのも手
    • 3. jQuery Mobile 以外の ライブラリを利用する
    • 例例えば、よくあるスライドショーのようなもの(サンプルでは、flexsliderを利用)
    • より高度なカスタマイズjQuery Mobile の装飾や動作から除外する領域を作る✓ data-ajax … Ajaxを無効にする✓ data-enhance … 装飾を無効にするjQuery Mobile のイベントを知る✓ pageinit … ページの初期化✓ pageshow … ページの表示
    • 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>
    • イベント: pageinit• jQuery  Mobile  が最初に初期化する際に発⽣生す るイベント• 同じページを再度度表⽰示する場合は、発⽣生しない• loadイベントの代わりに利利⽤用するイメージ$(document).on(pageinit, #page-id, function(){ /* 動的なDOMの構築など */});
    • イベント: pageshow• ページを表⽰示するたびに発⽣生するイベント• Google  Analytics  などのページビューをカウン トするようなツールに利利⽤用する• 座標計算やサイズ計算などを⾏行行うライブラリの 初期化に利利⽤用する$(document).on(pageshow, #page-id, function(){ /* ページが表示される際に行う初期化など */});
    • ライブラリを利用する際の注意点• 座標計算やサイズ計算などがあるライブラリだと pageinitでは正常に動作しない• pageshowで1回だけ初期化を⾏行行うように次のように 記述する$(document).on(pageinit, #page-id, function(){ $(this).one(pageshow, function(){ /* 一度しか必要のないライブラリの初期化 */ });});
    • 例)スライドショーを作成するケース(完成形)$(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>
    • 4. まとめ
    • まとめjQuery Mobile バレしないサイトを目指そう✓ 大まかなデザインはThemeRollerで、細かなデザインはス タイルを上書きしていく✓ jQuery Mobileの構造や挙動を知ることによってカスタマ イズがやりやすくなる✓ サードパーティ製のライブラリやツールをうまく利用しよう✓ デバッグツールは必須
    • 今後のロードマップ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月)✓ コードの最適化・パフォーマンスチューニング
    • 日本 jQuery Mobile ユーザー会https://groups.google.com/group/jqm-jp/jQuery Mobileに関するノウハウの共有・情報交換 是⾮非、ご参加ください!
    • Thank you!! ( @yoshikawa_t )
    • 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/ )