SlideShare a Scribd company logo

パララックスでレスポンシブでJ query mobileなサイトのつくりかた

HTML5 Conrerence 2012

1 of 49
Download to read offline
パララックスでレスポンシブで
jQuery Mobileなサイトのつくりかた

                  2012/9/8
        株式会社シーエー・モバイル
           Web先端技術フェロー
                  白石俊平
自己紹介
•   白石 俊平(しらいし しゅんぺい)
•   html5j.org 管理人
•   HTML5とか勉強会 主催
•   Web先端技術味見部 部長
•   読書するエンジニアの会 主催
•   Google API Expert (HTML5)
•   Microsoft Most Valuable Professional (IE9)
•   Twitter: @Shumpei
今Webは、変わろうとしている

 レスポンシブ




          アプリケーション化
www.gravitatedesign.com
clearairchallenge.com
TRON LEGACY
Mercedes-Benz
一足お先にチャレンジしました。
www.camobile.com
死にかけました
ぼくらが直面した「課題」
1.   パララックススクロールをモバイルでも実現したい
2.   レスポンシブで動きまくるサイトを作らなくてはならない
3.   レスポンシブで画像満載のサイトを作らなくてはならない
4.   jQuery Mobileを使うべきだろうか?
5.   定形タスクを自動化したい
1. パララックススクロールを
   モバイルでも実現したい
様々なライブラリが利用可能、だが・・
最終的なパ・・インスパイア元




     Nike Air Jordan 2012
ゼロから書き起こして公開しました。




      ScrollTween.js
つかいかた
// スクロール部分を作成
var container = ScrollTween.container(containerDiv);
// アニメーションさせる部品を追加
container.add('#index_scene_intro', function(tween) {
  // 0-200の間は中央に、その後右に消えていく
  tween
    .range(0, 200, tween.styles().middle())
    .to(600, tween.styles().rightOut());
});
…
container.play();
2. レスポンシブで動きまくる
 サイトを作らねばならない
レスポンシブWebデザインの基礎
• Fluid Grid

• Fluid Image

• CSS Media Queries
レスポンシブWebデザインの基礎
• Fluid Grid
  – 幅をパーセント指定するグリッドレイアウト
• Fluid Image
  – 画像の幅をパーセント指定する
• CSS Media Queries
  – デバイスの要件に応じてCSSを切り替え
LESS/SASSは必須ツール
• Fluid Gridの実装には、変数・計算・ミッ
  クスインなどがとても便利。
    // 変数
    @grid-hcount: 16;
    // 計算
    @grid-cell-width: 100% / @grid-hcount;
    // ミックスイン
    .gwidth(@count) {
        width: @grid-cell-width * @count;
    }
    #logo {
      .gwidth(2); // ミックスインの使用
    }
メディアクエリは控えめに
• 全ブレークポイント内でスタイルの上書
  きが発生するため、すぐに肥大化する
 – 「巨大なswitch-case」化
• 要件にもよるが、Fluid Layoutを補う形で
  使用する程度が望ましいように思える。
セマンティックなマークアップ
 メディアクエリ=CSSの切り替え


単一のマークアップ&異なるCSSという構造



「揺らがない」マークアップが必要だ!
セマンティックを深く考えぬかれ
たコンテンツは、変更に強い!
インタラクティブなコードでは、
 「UIの状態」を意識しよう。
#dialogのdisplayを
                   ダイアログを閉じる
   noneにする

    #messageの
                   ノーマルメッセージを
   colorをgreen、
                      表示する
displayをblockにする
     ぼくらが変更したいのは、
「CSSプロパティ」じゃなくて「状態」で
          す。
「状態変化」を意識した
      コーディング
• CSSプロパティを直接JavaScriptで書き換
  えるのをやめる
• UIの状態はクラスで表すと良い
jQueryでいうと、
• css()やエフェクト系メソッドの使用を控える
• addClass(),removeClass()を中心に
「状態変化」を意識した
           コーディング
Before:
   $('#msg').hide();

After:
   $('#msg').addClass('hidden');

   #msg.hidden {
     display: none;
   }
状態変化にエフェクトを
    用いるよう変更する
#msg.hidden {
  display: none;
}
     変更箇所がCSSに集中し、
#msg {
            保守性が向上する
  opacity: 1;
  transition: opacity 1s ease-in;
}
#msg.hidden {
  opacity: 0;
}
3. レスポンシブで画像満載の
 サイトを作らねばならない
レスポンシブイメージ
• スクリーンサイズに応じて、異なるサイ
  ズの画像を読み込みたい。
                        PC


               Tablet

  Smartphone
Riloadr
• レスポンシブイメージを実現するフレー
  ムワーク
• JSによるセットアップさえ済ませれば、
  あとはマークアップのみ。

   <img class="responsive" data-src="img.png">
   <!-- 以下は省略可能 -->
   <noscript>
     <img src="img-small.png">
   </noscript>
レスポンシブイメージをめぐる仕様も

<picture>                             OperaのBlues Lawsonさん
 <source media="…" src="">            が提案
 <source src="">
</picture>
<img srcset="a.png 1x a-hd.png 2x">   WHATWGが支持


<picture>                             折衷案。コミュニティグルー
 <source media="…" srcset="">         プによる仕様が存在
 <source srcset="">
</picture>
CSSスプライトアニメーション
• 手の画像は、すべてCSSスプライトアニ
  メーションで実現
CSSスプライトアニメーション
• スプライト画像をbackgroundに指定し、
  background-positionをずらしていく
 – 「覗き穴」を横にずらしていくイメージ。




• Android 2.3標準ブラウザには、ひとコマ目が残り続け
  るというバグがあるので、ひとコマ目は透明画像を指
  定。
4. jQuery Mobileを
使うべきだろうか?
Framework
作業を枠にはめ、
生産性を向上させる


  Framework


  Creativity
死の妥協
「制約」から見た
      jQuery Mobile
1. 型に従ったマークアップ
2. フレームワークにHTMLを「いじられる」
3. デザインにこだわるならカスタマイズが
   必須
4. カスタマイズが面倒
5. パフォーマンス上のハンデを背負う
「利点」から見た
         jQuery Mobile
1.   慣れればとにかく簡単
2.   マルチプラットフォーム
           現在の想い:
3.   全ページが一意なURLを持つ
       クリエイティブなページ以外
4.       ではバンバン使おう。
     ページ分割・読み込みが容易
5. 定型タスクを自動化したい
なんだか定型タスクが増えた
•   JavaScriptのミニファイ
•   CSSのミニファイ
•   ファイルの結合とファイル名生成
•   LESSのコンパイル
•   異なるサイズの画像生成
grunt.js
• Nodeで動作する、タスク自動化ツール
grunt.jsで定型化した作業
    LESSをCSSにコンパイル


   JavaScript/CSSをミニファイ

    JavaScript/CSSを結合
  ファイル名をハッシュ値から生成

結合したファイルは本番時にのみ使用
  (サーバサイドで切り替え)
まとめ
苦しかった・・・
けど
なんだろう、このワクワク感
新しいWeb開発を楽しもう!

    @Shumpei
アンケートへのご協力をお願いします!



URL: http://bit.ly/html5j2012q

参加したセッションに関するアンケートに
答えて受付に行くと、素敵な景品が!

Recommended

WebIntentsにより拓かれる次のWeb
WebIntentsにより拓かれる次のWebWebIntentsにより拓かれる次のWeb
WebIntentsにより拓かれる次のWebKensaku Komatsu
 
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips   Prism 4.5 & Kona project 等のご紹介XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips   Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介Shotaro Suzuki
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Shotaro Suzuki
 
オフラインファーストの思想と実践
オフラインファーストの思想と実践オフラインファーストの思想と実践
オフラインファーストの思想と実践Shumpei Shiraishi
 
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...Shotaro Suzuki
 
無料で始めるアプリのバックエンド開発
無料で始めるアプリのバックエンド開発無料で始めるアプリのバックエンド開発
無料で始めるアプリのバックエンド開発Shoichi Takagi
 
WordPress APIで作るモバイルアプリ
WordPress APIで作るモバイルアプリWordPress APIで作るモバイルアプリ
WordPress APIで作るモバイルアプリアシアル株式会社
 
building HTML hybrid app
 with ionic
building HTML hybrid app
 with ionicbuilding HTML hybrid app
 with ionic
building HTML hybrid app
 with ionicNakano Kyohei
 

More Related Content

What's hot

スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向Tsutomu Ogasawara
 
Static Web AppsとBlazor WebAssemblyのすすめ
Static Web AppsとBlazor  WebAssemblyのすすめStatic Web AppsとBlazor  WebAssemblyのすすめ
Static Web AppsとBlazor WebAssemblyのすすめTomomitsuKusaba
 
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱Fumio SAGAWA
 
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordovamiso- soup3
 
PowerShellでFunction Appしよう!
PowerShellでFunction Appしよう!PowerShellでFunction Appしよう!
PowerShellでFunction Appしよう!Tsubasa Yoshino
 
5分で分かるmonaca pressproject(草案)
5分で分かるmonaca pressproject(草案)5分で分かるmonaca pressproject(草案)
5分で分かるmonaca pressproject(草案)Yuki Okamoto
 
Service worker が拓く mobile web の新しいかたち
Service worker が拓く mobile web の新しいかたちService worker が拓く mobile web の新しいかたち
Service worker が拓く mobile web の新しいかたちKinuko Yasuda
 
App Service の DevOps と Visual Studio Team Services 最新アップデート
App Service の DevOps と Visual Studio Team Services 最新アップデートApp Service の DevOps と Visual Studio Team Services 最新アップデート
App Service の DevOps と Visual Studio Team Services 最新アップデートMicrosoft Azure Japan
 
Web API を気軽に使える ツールやサービスのご紹介
Web API を気軽に使えるツールやサービスのご紹介Web API を気軽に使えるツールやサービスのご紹介
Web API を気軽に使える ツールやサービスのご紹介CData Software Japan
 
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like databaseオフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like databaseyoshikawa_t
 
Firebase analytics for_android _ i_os
Firebase analytics for_android _ i_osFirebase analytics for_android _ i_os
Firebase analytics for_android _ i_osbaroqueworksdev
 
開発スタイルのこれから for Backbone (powerd by Yeoman)
開発スタイルのこれから for Backbone (powerd by Yeoman)開発スタイルのこれから for Backbone (powerd by Yeoman)
開発スタイルのこれから for Backbone (powerd by Yeoman)Fumio SAGAWA
 
Azure ADアプリケーションを使用した認証のあれやこれ ASP.NET Core編
Azure ADアプリケーションを使用した認証のあれやこれ ASP.NET Core編Azure ADアプリケーションを使用した認証のあれやこれ ASP.NET Core編
Azure ADアプリケーションを使用した認証のあれやこれ ASP.NET Core編DevTakas
 
オープンソースで始めるオフラインアプリケーション開発入門
オープンソースで始めるオフラインアプリケーション開発入門オープンソースで始めるオフラインアプリケーション開発入門
オープンソースで始めるオフラインアプリケーション開発入門Fumio SAGAWA
 
Challenge PWA!! WordCamp Tokyo 2018
Challenge PWA!!  WordCamp Tokyo 2018Challenge PWA!!  WordCamp Tokyo 2018
Challenge PWA!! WordCamp Tokyo 2018Ryu Shindo
 
2016/12/17 ASP.NET フロントエンドタスク入門
 2016/12/17 ASP.NET フロントエンドタスク入門 2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門miso- soup3
 
13-E-7 クラウドサービスとゲーミフィケーション: 「TwilioQuest 3」を用いた開発者オンボーディング
13-E-7 クラウドサービスとゲーミフィケーション: 「TwilioQuest 3」を用いた開発者オンボーディング13-E-7 クラウドサービスとゲーミフィケーション: 「TwilioQuest 3」を用いた開発者オンボーディング
13-E-7 クラウドサービスとゲーミフィケーション: 「TwilioQuest 3」を用いた開発者オンボーディングDaizen Ikehara
 
Cognitive serviceのすゝめ
Cognitive serviceのすゝめCognitive serviceのすゝめ
Cognitive serviceのすゝめTsubasa Yoshino
 
Sl study 20150804-soft-layer-apibasic-shibata
Sl study 20150804-soft-layer-apibasic-shibataSl study 20150804-soft-layer-apibasic-shibata
Sl study 20150804-soft-layer-apibasic-shibataNaoki Shibata
 

What's hot (20)

スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
 
Static Web AppsとBlazor WebAssemblyのすすめ
Static Web AppsとBlazor  WebAssemblyのすすめStatic Web AppsとBlazor  WebAssemblyのすすめ
Static Web AppsとBlazor WebAssemblyのすすめ
 
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
 
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
 
PowerShellでFunction Appしよう!
PowerShellでFunction Appしよう!PowerShellでFunction Appしよう!
PowerShellでFunction Appしよう!
 
5分で分かるmonaca pressproject(草案)
5分で分かるmonaca pressproject(草案)5分で分かるmonaca pressproject(草案)
5分で分かるmonaca pressproject(草案)
 
Service worker が拓く mobile web の新しいかたち
Service worker が拓く mobile web の新しいかたちService worker が拓く mobile web の新しいかたち
Service worker が拓く mobile web の新しいかたち
 
9th nov2012 kof2012
9th nov2012 kof20129th nov2012 kof2012
9th nov2012 kof2012
 
App Service の DevOps と Visual Studio Team Services 最新アップデート
App Service の DevOps と Visual Studio Team Services 最新アップデートApp Service の DevOps と Visual Studio Team Services 最新アップデート
App Service の DevOps と Visual Studio Team Services 最新アップデート
 
Web API を気軽に使える ツールやサービスのご紹介
Web API を気軽に使えるツールやサービスのご紹介Web API を気軽に使えるツールやサービスのご紹介
Web API を気軽に使える ツールやサービスのご紹介
 
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like databaseオフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
 
Firebase analytics for_android _ i_os
Firebase analytics for_android _ i_osFirebase analytics for_android _ i_os
Firebase analytics for_android _ i_os
 
開発スタイルのこれから for Backbone (powerd by Yeoman)
開発スタイルのこれから for Backbone (powerd by Yeoman)開発スタイルのこれから for Backbone (powerd by Yeoman)
開発スタイルのこれから for Backbone (powerd by Yeoman)
 
Azure ADアプリケーションを使用した認証のあれやこれ ASP.NET Core編
Azure ADアプリケーションを使用した認証のあれやこれ ASP.NET Core編Azure ADアプリケーションを使用した認証のあれやこれ ASP.NET Core編
Azure ADアプリケーションを使用した認証のあれやこれ ASP.NET Core編
 
オープンソースで始めるオフラインアプリケーション開発入門
オープンソースで始めるオフラインアプリケーション開発入門オープンソースで始めるオフラインアプリケーション開発入門
オープンソースで始めるオフラインアプリケーション開発入門
 
Challenge PWA!! WordCamp Tokyo 2018
Challenge PWA!!  WordCamp Tokyo 2018Challenge PWA!!  WordCamp Tokyo 2018
Challenge PWA!! WordCamp Tokyo 2018
 
2016/12/17 ASP.NET フロントエンドタスク入門
 2016/12/17 ASP.NET フロントエンドタスク入門 2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
 
13-E-7 クラウドサービスとゲーミフィケーション: 「TwilioQuest 3」を用いた開発者オンボーディング
13-E-7 クラウドサービスとゲーミフィケーション: 「TwilioQuest 3」を用いた開発者オンボーディング13-E-7 クラウドサービスとゲーミフィケーション: 「TwilioQuest 3」を用いた開発者オンボーディング
13-E-7 クラウドサービスとゲーミフィケーション: 「TwilioQuest 3」を用いた開発者オンボーディング
 
Cognitive serviceのすゝめ
Cognitive serviceのすゝめCognitive serviceのすゝめ
Cognitive serviceのすゝめ
 
Sl study 20150804-soft-layer-apibasic-shibata
Sl study 20150804-soft-layer-apibasic-shibataSl study 20150804-soft-layer-apibasic-shibata
Sl study 20150804-soft-layer-apibasic-shibata
 

Similar to パララックスでレスポンシブでJ query mobileなサイトのつくりかた

レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】Yasuhito Yabe
 
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実Takumi Ohashi
 
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】Yasuhito Yabe
 
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化亮 門屋
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようHiroaki Wakamatsu
 
Mobile SEO (Japanese Version)
Mobile SEO (Japanese Version)Mobile SEO (Japanese Version)
Mobile SEO (Japanese Version)ssuserd60633
 
About rails 3
About rails 3About rails 3
About rails 3issei126
 
Movable typeseminar 20120925
Movable typeseminar 20120925Movable typeseminar 20120925
Movable typeseminar 20120925Six Apart
 
12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッションKei Nakazawa
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインShumpei Shiraishi
 
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~normalian
 
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)shigeya
 
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」Yasunobu Ikeda
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップYasuhito Yabe
 
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』Naoki Matsuda
 
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社Kunihiko Miyanaga
 
ゲームだけじゃないHTML5
ゲームだけじゃないHTML5ゲームだけじゃないHTML5
ゲームだけじゃないHTML5Osamu Shimoda
 
Web制作勉強会 #2
Web制作勉強会 #2Web制作勉強会 #2
Web制作勉強会 #2Moto Yan
 
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作Maboroshi.inc
 

Similar to パララックスでレスポンシブでJ query mobileなサイトのつくりかた (20)

レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
 
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
 
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
 
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
 
Mobile SEO (Japanese Version)
Mobile SEO (Japanese Version)Mobile SEO (Japanese Version)
Mobile SEO (Japanese Version)
 
About rails 3
About rails 3About rails 3
About rails 3
 
Movable typeseminar 20120925
Movable typeseminar 20120925Movable typeseminar 20120925
Movable typeseminar 20120925
 
12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
 
Mvc conf session_5_isami
Mvc conf session_5_isamiMvc conf session_5_isami
Mvc conf session_5_isami
 
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
 
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
 
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
 
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
 
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
 
ゲームだけじゃないHTML5
ゲームだけじゃないHTML5ゲームだけじゃないHTML5
ゲームだけじゃないHTML5
 
Web制作勉強会 #2
Web制作勉強会 #2Web制作勉強会 #2
Web制作勉強会 #2
 
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
 

More from Shumpei Shiraishi

コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術Shumpei Shiraishi
 
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶjQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶShumpei Shiraishi
 
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門Shumpei Shiraishi
 
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門Shumpei Shiraishi
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んでShumpei Shiraishi
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んでShumpei Shiraishi
 
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探るWebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探るShumpei Shiraishi
 
変身×フランツ・カフカ
変身×フランツ・カフカ変身×フランツ・カフカ
変身×フランツ・カフカShumpei Shiraishi
 
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んでイラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んでShumpei Shiraishi
 
「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んでShumpei Shiraishi
 
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門Shumpei Shiraishi
 
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだことShumpei Shiraishi
 
はじめにことばありき
はじめにことばありきはじめにことばありき
はじめにことばありきShumpei Shiraishi
 
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトHTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトShumpei Shiraishi
 
この人と結婚していいの?を読んで
この人と結婚していいの?を読んでこの人と結婚していいの?を読んで
この人と結婚していいの?を読んでShumpei Shiraishi
 

More from Shumpei Shiraishi (20)

俺的GEB概論(前半)
俺的GEB概論(前半)俺的GEB概論(前半)
俺的GEB概論(前半)
 
コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術
 
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶjQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
 
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
 
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
 
Angular2実践入門
Angular2実践入門Angular2実践入門
Angular2実践入門
 
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探るWebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探る
 
変身×フランツ・カフカ
変身×フランツ・カフカ変身×フランツ・カフカ
変身×フランツ・カフカ
 
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んでイラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
 
「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで
 
漫☆画太郎論
漫☆画太郎論漫☆画太郎論
漫☆画太郎論
 
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門
 
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
 
はじめにことばありき
はじめにことばありきはじめにことばありき
はじめにことばありき
 
秒速一億円
秒速一億円秒速一億円
秒速一億円
 
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトHTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
 
この人と結婚していいの?を読んで
この人と結婚していいの?を読んでこの人と結婚していいの?を読んで
この人と結婚していいの?を読んで
 
20130921レジュメ2
20130921レジュメ220130921レジュメ2
20130921レジュメ2
 

パララックスでレスポンシブでJ query mobileなサイトのつくりかた