SlideShare a Scribd company logo
jQuery  Mobile

 カスタマイズ⾃自由⾃自在  
                     v1.2

                                      2012/10/23
HTML5  Conference  2012/第32回HTML5とか勉強会
                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
Agenda
1. 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  のデザインを塗り替える
デザイン例例




Jeep    slideshare   Disney
jQuery  Mobile  バレしない
   サイトを作ろう!
jQuery  Mobile  バレしないためには?

jQuery  Mobileの読み込み
<link rel="stylesheet" href="lib/
jquery.mobile-1.1.1.min.css" />
<script src="lib/jquery-1.7.1.min.js"></script>
<script src="lib/jquery.mobile-1.1.1.min.js"></script>
jQuery  Mobile  バレしないためには?

jQuery  Mobileの読み込み
<link rel="stylesheet" href="lib/
hoge-1.1.1.min.css"   />
<script src="lib/jquery-1.7.1.min.js"></script>
<script src="lib/foo-1.1.1.min.js"></script>
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
jQuery  Mobile  のスタイル構造を知る

• デザインの主要な部分を占めるもの
 ✓ ページ
 ✓ ボタン
 ✓ リスト
ページ
ページ
                ヘッダー
                        .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-content { /* 余白 */
                padding: 0;
            }
ボタン
ボタン
                                         .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  リストの背景⾊色・⾓角丸を変更更する
   • 背景⾊色はボタンと同様
   • ⾓角丸は各コーナーごとに定義が分かれている
.ui-corner-top { /* 角丸 */              .ui-corner-tl {
  border-top-left-radius: 0.2em;         border-top-left-radius: 0.2em;
                                       }
  border-top-right-radius: 0.2em;
}                                      .ui-corner-tr {
                                         border-top-right-radius: 0.2em;
.ui-corner-bottom {
  border-bottom-left-radius: 0.2em;    }
                                       .ui-corner-bl {
  border-bottom-right-radius: 0.2em;
}                                        border-bottom-left-radius: 0.2em;
                                       }
                                       .ui-corner-br {
                                         border-bottom-right-radius: 0.2em;
                                       }
Tips5  アイコンを変える




icons-18-white.png

icons-36-white.png
共通のスタイルの適⽤用には気を付ける
   例例).ui-‐‑‒header  .ui-‐‑‒title
3.  jQuery  Mobile  のカスタマイズ
            ー  応⽤用編  ー
より⾼高度度なカスタマイズ


• オリジナルなUIを作る
• ライブラリやツールを利利⽤用する
例例えば、よくあるスライドショーのようなもの




(サンプルでは、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>
jQuery  Mobileのイベントを知る
• jQuery  Mobile  のページ遷移を理理解する
• ページ関連のイベント
 ✓pageinit  …  ページの初期化
 ✓pageshow  …  ページの表⽰示
ページ遷移の挙動を理理解する
                                                 次ページ1
最初のページ
                                                 <html>
<html>                                             <head>...</head>
  <head>...</head>
  <body>
                                                   <body>
                                                     <div data-role="page"   Ajax
    <div data-role="page" id="main">...</div>    id="next1">...</div>
                                                   </body>  
    <!-- 次ページ1 -->                               </html>

    <div data-role="page" id="next1">...</div>

                                                 次ページ2
    <!-- 次ページ2 -->
                                                 <html>
    <div data-role="page" id="next2">...</div>     <head>...</head>
                                                   <body>                    Ajax
                                                     <div data-role="page"
  </body>                                        id="next2">...</div>
</html>                                            </body>  
                                                 </html>
2つの覚えておくべきイベント

• pageinit  …  ページの初期時に発⽣生
• pageshow  …  ページの表⽰示時に発⽣生
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 class="slides" >...</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  alpha版には脆弱性
    ✓jQuery  Mobile  1.1.1には、location.hrefに起因するバグの
      問題がある  (  修正版  https://github.com/pikotea/jquery-‐‑‒
      mobile-‐‑‒1.1.1-‐‑‒issue-‐‑‒4787-‐‑‒fixed  )

    ✓現状の最新版である  jQuery  Mobile  1.2  は問題なし
⽇日本  jQuery  Mobile  ユーザー会
• https://groups.google.com/group/jqm-‐‑‒jp/
• jQuery  Mobileに関するノウハウの共有・情報
  交換


    是⾮非、ご参加ください!
Thank  you!!
  (  @yoshikawa_̲t  )
Resources
•   jQuery  Mobile  公式サイト  (  http://jquerymobile.com/  )

•   jQuery  Mobile  ギャラリー  (  http://
    www.jqmgallery.com/  )

•   ⽇日本  jQuery  Mobile  ユーザー会  (  https://
    groups.google.com/group/jqm-‐‑‒jp/  )

•   jQuery  Mobileパーフェクトガイド  サポートページ  (  http://
    www.impressjapan.jp/books/3266  )

    ※サンプルのダウンロードができます

More Related Content

Similar to jQuery Mobileカスタマイズ自由自在 v1.2

Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバンMonaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
アシアル株式会社
 
Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバンMonaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
アシアル株式会社
 
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for DesignMagento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Miho Nakano
 
Jqm20120210
Jqm20120210Jqm20120210
Jqm20120210cmtomoda
 
はじめよう Backbone.js
はじめよう Backbone.jsはじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
 
徳島OSS勉強会第四回 シラサギハンズオン 0925
徳島OSS勉強会第四回 シラサギハンズオン 0925徳島OSS勉強会第四回 シラサギハンズオン 0925
徳島OSS勉強会第四回 シラサギハンズオン 0925
Yu Ito
 
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイドXPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
 
Head First XML Layout on Android
Head First XML Layout on AndroidHead First XML Layout on Android
Head First XML Layout on AndroidYuki Anzai
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
 
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3editionRails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3editionSatomi Tsujita
 
scala+liftで遊ぼう
scala+liftで遊ぼうscala+liftで遊ぼう
scala+liftで遊ぼう
youku
 
Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装
Nakazawa Yuichi
 
20120118 titanium
20120118 titanium20120118 titanium
20120118 titanium
Hiroshi Oyamada
 
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
Kazunari Hara
 
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた Shumpei Shiraishi
 
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...SwapSkills
 
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
Takashi Okamoto
 

Similar to jQuery Mobileカスタマイズ自由自在 v1.2 (20)

Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバンMonaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
 
Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバンMonaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
 
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for DesignMagento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
 
Jqm20120210
Jqm20120210Jqm20120210
Jqm20120210
 
はじめよう Backbone.js
はじめよう Backbone.jsはじめよう Backbone.js
はじめよう Backbone.js
 
徳島OSS勉強会第四回 シラサギハンズオン 0925
徳島OSS勉強会第四回 シラサギハンズオン 0925徳島OSS勉強会第四回 シラサギハンズオン 0925
徳島OSS勉強会第四回 シラサギハンズオン 0925
 
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイドXPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
 
Head First XML Layout on Android
Head First XML Layout on AndroidHead First XML Layout on Android
Head First XML Layout on Android
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
 
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3editionRails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3edition
 
scala+liftで遊ぼう
scala+liftで遊ぼうscala+liftで遊ぼう
scala+liftで遊ぼう
 
Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装
 
20120118 titanium
20120118 titanium20120118 titanium
20120118 titanium
 
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
 
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
 
jQuery Mobile入門
jQuery Mobile入門jQuery Mobile入門
jQuery Mobile入門
 
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
 
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 
Jqm20120804 publish
Jqm20120804 publishJqm20120804 publish
Jqm20120804 publish
 

More from yoshikawa_t

Ionicで作るTechfeed
Ionicで作るTechfeedIonicで作るTechfeed
Ionicで作るTechfeed
yoshikawa_t
 
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
 
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
yoshikawa_t
 
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
yoshikawa_t
 
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
yoshikawa_t
 
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要いまさら聞けないHTML5概要
いまさら聞けないHTML5概要yoshikawa_t
 
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like databaseオフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
yoshikawa_t
 
jQuery Mobile is not dead!
jQuery Mobile is not dead!jQuery Mobile is not dead!
jQuery Mobile is not dead!
yoshikawa_t
 
HTML5開発最前線
HTML5開発最前線HTML5開発最前線
HTML5開発最前線
yoshikawa_t
 
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPIChrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
yoshikawa_t
 
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
yoshikawa_t
 
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2yoshikawa_t
 
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンスモバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
yoshikawa_t
 
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTipsモバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
yoshikawa_t
 
Chrome apps for mobile 概要
Chrome apps for mobile 概要Chrome apps for mobile 概要
Chrome apps for mobile 概要
yoshikawa_t
 
Chrome Apps 概要
Chrome Apps 概要Chrome Apps 概要
Chrome Apps 概要
yoshikawa_t
 
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
yoshikawa_t
 
Html5概要 & デモ
Html5概要 & デモHtml5概要 & デモ
Html5概要 & デモ
yoshikawa_t
 
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
yoshikawa_t
 
Sencha touch vs j query mobile
Sencha touch vs j query mobileSencha touch vs j query mobile
Sencha touch vs j query mobileyoshikawa_t
 

More from yoshikawa_t (20)

Ionicで作るTechfeed
Ionicで作るTechfeedIonicで作るTechfeed
Ionicで作るTechfeed
 
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
 
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
 
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
 
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
 
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
 
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like databaseオフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
 
jQuery Mobile is not dead!
jQuery Mobile is not dead!jQuery Mobile is not dead!
jQuery Mobile is not dead!
 
HTML5開発最前線
HTML5開発最前線HTML5開発最前線
HTML5開発最前線
 
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPIChrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
 
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
 
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
 
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンスモバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
 
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTipsモバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
 
Chrome apps for mobile 概要
Chrome apps for mobile 概要Chrome apps for mobile 概要
Chrome apps for mobile 概要
 
Chrome Apps 概要
Chrome Apps 概要Chrome Apps 概要
Chrome Apps 概要
 
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
 
Html5概要 & デモ
Html5概要 & デモHtml5概要 & デモ
Html5概要 & デモ
 
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
 
Sencha touch vs j query mobile
Sencha touch vs j query mobileSencha touch vs j query mobile
Sencha touch vs j query mobile
 

jQuery Mobileカスタマイズ自由自在 v1.2