SlideShare a Scribd company logo
1 of 51
Download to read offline
スマートフォン対応、
    気をつけたいトラブル



       若松 浩昭(株式会社ジークス)
自己紹介

若松 浩昭(Hiroaki Wakamatsu)

・Webサイトの設計
・フロントエンド周りの実装
・スマートフォン案件が主体

・HTML5-WEST.jpコアメンバー

Twitter : azuyuu
ブログ : bit.ly/NFATf4
                           2
Chapter 1

このセッションについて
セッションのテーマ


 スマートフォン案件で、
 トラブルは常に起こりえるもの




 事例を知ることで、
 トラブルを 最小限 に抑えよう!!

                     4
セッションの内容

•   スマートフォン案件の現状

•   トラブルを最小限に抑えるために

•   知っておこう:
      表示・動作に関するトラブルの例
      機種に依存するトラブルの例

•   最後に・・・


                        5
Chapter 2

スマートフォン案件の現状
多くの案件で対象となるOS




                7
特に多いAndroidのトラブル

•   非常に多くの機種

•   異なる搭載OSのバージョン

•   機種ごとに調整された標準ブラウザ

•   標準ブラウザ以外のブラウザへの対応




                        8
補足:標準ブラウザにおけるHTML5への対応状況


html5test.com で対応状況を調査

   Android 2.3   189
   Android 4.0   280 ∼ 380
       機種によって点数が異なる !!




   iOS 5.1.1     324
                             9
Chapter 3

トラブルを最小限に抑えるために
トラブルを引き起こす要因とその対策

Factor 1

  制作側の知識不足・認識漏れ
Factor 2

  クライアントのこだわり
Factor 3

  機種に依存する問題

                    11
Factor 1   制作側の知識不足・認識漏れ

•   機種・OS・ブラウザ間での差異は当たり前

•   「これはNG」っていう事象がある


 •   普段からバッドノウハウについて
     情報収集をする
 •   複数の実機で検証をする


                           12
Factor 2   クライアントのこだわり

•   「こういう動きをさせたい」という要望

•   Androidでも奇麗にアニメーション


 •   「できること」と「できないこと」を
     事前に説明しておく
 •   iPhone Androidであることを
     理解してもらう

                            13
Factor 3   機種に依存する問題(特にAndroid)


•   全てを防ぐことは不可能

•   「起きた」時の対応が重要


 •   「起こりえる」ことを伝えた上で、
     同意をもらっておく
 •   実際に「起きた」場合の取り決めを
     しておく (端末確保の費用の話とか)

                              14
Chapter 4

知っておこう:表示・動作に関するトラブルの例
最初に:ユーザーエージェントによる判定

•   Androidの場合は、バージョンとブラウザ
    まで判定する
// 標準ブラウザ
Mozilla/5.0 (Linux; U; Android 4.0.4; ja-jp; SC-06D Build/IMM76D) AppleWebKit/534.30
(KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

// Chrome
Mozilla/5.0 (Linux; Android 4.0.4; SC-06D Build/IMM76D) AppleWebKit/535.19 (KHTML, like
Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19

// Firefox
Mozilla/5.0 (Android; Mobile; rv: 14.0) Gecko/14.0 Firefox/14.0.1

// Opera Mobile
Opera/9.80 (Android 4.0.4; Linux; Opera Mobi/ADR-1207201819; U; ja) Presto/2.10.254
Version/12.00


                                                                                          16
1. 太字 (font-weight: bold;)

•   Androidは、全角文字の太字が表示できない
    機種がある

 •   標準の日本語フォント「Droid Sans
     Japanese」は、全角文字の太字に非対応
 •   太字に対応したオリジナルフォントが
     インストールされている機種も多数ある



                              17
1. 太字 (font-weight: bold;)
ー 対処方法の例 ー


•   CSSを活用して、擬似的に太字を表現


  ① text-shadow で表現
  text-shadow: 0 0 1px 文字の色;

  ② 文字がぼやけるのが嫌な場合は、text-stroke でも表現可能
  (webkit系ブラウザのみ)
  -webkit-text-stroke: 1px 文字の色;




                                        18
1. 太字 (font-weight: bold;)
補足:標準ブラウザ以外のブラウザ

全角文字に対しては・・・

            おそらく、「Droid Sans Japanese」が
            インストールされていれば、font-weight: bold;
            の指定が有効




            インストールされているフォントの種類を問わず、
            font-weight: bold; の指定が有効

                                          19
2. ベンダープリフィックス

•   プリフィックスの有無は、OSのバージョン
    やブラウザによって異なるので注意が必要

例) 影付きボックス:box-shadow

     Mobile Safari           Android標準ブラウザ
                             Android標準ブラウザ             その他ブラウザ
     iOS4    iOS5      2.1      2.2   2.3    4.0   Chrome Firefox   Opera
無し            ○        ○                     ○       ○       ○       ○
有り    ○       ○        ○        ○     ○      ○               ○


                     まとめURL: bit.ly/PrEPzX


                                                                         20
3. リンク要素のアウトライン

•   Androidでは、ブロック要素リンクの
    アウトライン表示に不備がある

<a href="リンク先URL">リンクのタイトル</a>

a { display: block; } /* aをブロック要素としてレンダリング */




                                                21
3. リンク要素のアウトライン
ー 対処方法の例 ー


•   aタグの直下にdivタグを挿入

 <a href="リンク先URL"><div>リンクのタイトル</div></a>

 ※ ただし、pタグや、display:block; にしたspanタグはNG




                                             22
4. 固定配置

•   要件に応じて、position: fixed; と
    iScroll 等のライブラリを使い分ける




                     position: fixed; を採用している
                     サイトも多い




                                           23
4. 固定配置
ー position: fixed; を使う場合 ー


•   iOSなら5以上、Androidなら2.2以上

•   Androidでは、viewportに
    user-scalable=no の指定が必須
    (Android4.0は除く)


 •   常に安定して動作する訳ではないので、
     実装前に検証した方が無難

                              24
4. 固定配置
ー iScroll 等のライブラリを使う場合 ー


•   iOS4で固定配置を実装する場合は必須

•   Androidでは動作が不安定

                   iScroll4
                   http://cubiq.org/iscroll-4




                                                25
5. オーバーレイ

•   Android2.3では、 下層レイヤーの
    リンク要素やプルダウンが反応してしまう




                            26
5. オーバーレイ



                  サンプルURL:
                  bit.ly/THCYd2




•   場合によっては、オーバーレイ上の要素が
    操作できなくなる可能性も・・・
                                  27
5. オーバーレイ
ー 対処方法の例 ー

方法1:リンク要素のハイライトカラーを透明化

 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);




方法2:タップ時のイベントをキャンセル

 $("E").on("touchstart", function(e) {
    e.preventDefault();
 }


                                                  28
5. オーバーレイ
ー 対処方法の例 ー

方法3:下層レイヤーのリンク要素やプルダウン
    を全て非表示に

 visibility: hidden;




 •     いずれの方法も、 完全に 対処できる訳では
       ないので注意


                               29
6. transform系アニメーション

•   Androidでは、アニメーションなど
    translate3dを使用した処理を行うと、
    様々なトラブルが発生する




                              30
6. transform系アニメーション
ー translate3dが原因のトラブル ー

1. tranlate3d使用後のレンダリングに崩れ
   リンク要素のアウトライン、transform系プロパティなど




                               31
6. transform系アニメーション
ー translate3dが原因のトラブル ー

2. インプット系要素で不可思議な動き
   オーバーレイなど、translate3dでアニメーションさせた
   要素上にインプット系要素が配置してある場合・・・




                          サンプルURL:
                          bit.ly/NHSMfd




                                          32
6. transform系アニメーション
ー 対処方法の例 ー


•   2次元のアニメーションの場合は、
    translateの方を使用する
 例えば以下のようなアニメーション指定の場合は・・・
 E{
   transition: all 0.75s ease-out;
   transform: translate3d(0, 400px, 0);
 }
 次のようにする
 E{
   transition: all 0.75s ease-out;
   transform: translate(0, 400px);
 }
                                          33
6. transform系アニメーション
補足:translate と translate3d についての考察


•   なぜ、2次元のアニメーションであっても、
    translate3d がよく使われているのか?

 •   iOS上で、ハードウェアアクセラレーションを
     使ったアニメーションを実施するため


     translate3dを使わないとハードウェア
     アクセラレーションは有効にならない?

                                     34
6. transform系アニメーション
補足:translate と translate3d についての考察


•   ハードウェアアクセラレーションの有効性を
    確認してみる

 ターミナルから以下のコマンドにてiOSシミュレータを起動
 (iOSシミュレータがインストールされたMac限定)

 CA_COLOR_OPAQUE=1 /Developer/Platforms/iPhoneSimulator.platform/
 Developer/Applications/iPhone Simulator.app/Contents/MacOS/iPhone
 Simulator




                                                                       35
6. transform系アニメーション
補足:translate と translate3d についての考察




                           特殊モードの
                         iOSシミュレータで
                             動作確認




サンプルURL: bit.ly/OAVk0j
                                      36
6. transform系アニメーション
補足:translate と translate3d についての考察


•   iOS向けとAndroid向けとで、
    アニメーション処理を分けるのが面倒で
    あれば、translateで一本化してしまおう




                                     37
7. スワイプ系ライブラリ

•   選定するときは「Androidでも動くか?」を
    基準にする

•   FirefoxやOperaでも動く方が望ましい



                  多くのサイトで、スワイプによる
                  画像切り替えを採用




                                38
7. スワイプ系ライブラリ
ー 代表的なライブラリと採用サイト ー

国内サイトで、よく使われているライブラリ
•   jQuery.flickSimple        (URL: bit.ly/QxeMWK)

    イトーヨーカドー などで採用

    標準ブラウザ          Chrome             Firefox   Opera Mobile
        △             △                               △


•   flickslide   (URL: bit.ly/RnCprE)

    ミスタードーナツ、モスバーガー などで採用

    標準ブラウザ          Chrome             Firefox   Opera Mobile
        △             △                               △

                                                                39
7. スワイプ系ライブラリ
ー 代表的なライブラリと採用サイト ー

•   flipsnap.js    (URL: bit.ly/QxeMWK)

    JRおでかけネット、 ドミノピザ などで採用

    標準ブラウザ          Chrome           Firefox   Opera Mobile
       ○               ○               ○            ○


•   flickGal   (URL: bit.ly/RnCprE)

    ZOZOTOWN、 東急ハンズ などで採用

    標準ブラウザ          Chrome           Firefox   Opera Mobile
       ○               ○               △            ○



               まとめURL: bit.ly/RWSDVY
                                                              40
Chapter 5

知っておこう:機種に依存するトラブルの例
1. 固定配置がうまく動作しない      
                      

•   Galaxy S Ⅱでは、position: fixed; を
    使った固定配置がうまく動作しない




                                     42
1. 固定配置がうまく動作しない        
ー 対処方法の例 ー


•   スクロール途中だけ、固定配置の要素を
    非表示にするなどして対応




                           動作サンプル:
                           bit.ly/MACxRp




                                           43
2. text-shadow のトラブル

•   Galaxy Nexus では、text-shadow を
    使うと、リンク要素のアウトラインが崩れた
    り、一部の文字で文字飛びが発生したりする




                                    44
2. text-shadow で文字が飛ぶ
ー 対処方法の例 ー


•   Galaxy Nexus の場合だけ、text-shadow
    の指定を無効にする

 if (/Galaxy Nexus/.test(navigator.userAgent)) {
   $("html").addClass("GalaxyNexus");
 }

 E{
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
 }
 . GalaxyNexus E {
    text-shadow: none;
 }


                                                   45
3. clickイベントが発生しない

•   Galaxy S Ⅲでは、transform系
    プロパティを使うと、そのレイヤー上の
    clickイベントなどが発生しない場合がある




             動画



                              46
3. clickイベントが発生しない
ー 対処方法の例 ー


•   Galaxy S Ⅲ のアップデートで解決?!

•   解決しなければ、Galaxy S Ⅲの場合だけ、
    transformを無効にする
 if (/SC-06D/.test(navigator.userAgent)) {
   $("html").addClass("GalaxyS3");
 }

 E{
   -webkit-transform: translate(0, 400px);
 }
 .GalaxyS3 E {
   -webkit-transform: none;
   top: 20px;
 }
                                             47
Chapter 6

最後に・・・
スマートフォン対応は・・・

•   ほぼAndroidとの戦い

•   特に機種依存のトラブルは非常にやっかい

•   事前に対応レベルについて、防衛線を張って
    おく事を忘れないように




                          49
これからのスマートフォン対応

•   Androidに関しては、2.3向けの対応は
    まだしばらくは続く

•   Android4.1から、いよいよChromeが
    標準ブラウザに

•   iOSのバージョンアップに伴う、改修・新規対応
    が今後発生

•   メディアクエリ等を用いた、レスポンシブな
    対応が増加中
                               50
スマートフォン対応、気をつけたいトラブル



            若松 浩昭(株式会社ジークス)
                      @azuyuu

More Related Content

What's hot

Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~
Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~
Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~Tatsuji Kuroyanagi
 
Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版Yoshito Tabuchi
 
iOSやAndroidアプリ開発のGoodPractice
iOSやAndroidアプリ開発のGoodPracticeiOSやAndroidアプリ開発のGoodPractice
iOSやAndroidアプリ開発のGoodPracticeKen Morishita
 
Prism + ReactiveProperty入門
Prism + ReactiveProperty入門Prism + ReactiveProperty入門
Prism + ReactiveProperty入門一希 大田
 
GUI アプリケーションにおける MVC
GUI アプリケーションにおける MVCGUI アプリケーションにおける MVC
GUI アプリケーションにおける MVCYu Nobuoka
 
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」U-dai Yokoyama
 
A-Frameで始めるWindows Mixed Reality
A-Frameで始めるWindows Mixed RealityA-Frameで始めるWindows Mixed Reality
A-Frameで始めるWindows Mixed RealityTakashi Yoshinaga
 
Proxy War EPISODEⅡ
Proxy War EPISODEⅡProxy War EPISODEⅡ
Proxy War EPISODEⅡzaki4649
 
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVROculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVRTakashi Yoshinaga
 
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみようXpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみようTakeshi Yoshida
 
BaseViewControllerは作りたくない
BaseViewControllerは作りたくないBaseViewControllerは作りたくない
BaseViewControllerは作りたくない今城 善矩
 
ハコスコとUIと時々、ご飯
ハコスコとUIと時々、ご飯ハコスコとUIと時々、ご飯
ハコスコとUIと時々、ご飯Shota Suzuki
 
そろそろ押さえておきたい AngularJSのセキュリティ
そろそろ押さえておきたい AngularJSのセキュリティそろそろ押さえておきたい AngularJSのセキュリティ
そろそろ押さえておきたい AngularJSのセキュリティMuneaki Nishimura
 
Windows アプリケーション開発 はじめに ~ Windows アプリケーション開発初学者の方向け Visual Studio を使ったアプリケーショ...
Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...
Windows アプリケーション開発 はじめに ~ Windows アプリケーション開発初学者の方向け Visual Studio を使ったアプリケーショ...Fujio Kojima
 
ゲームエンジンの中の話
ゲームエンジンの中の話ゲームエンジンの中の話
ゲームエンジンの中の話Masayoshi Kamai
 

What's hot (15)

Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~
Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~
Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~
 
Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版
 
iOSやAndroidアプリ開発のGoodPractice
iOSやAndroidアプリ開発のGoodPracticeiOSやAndroidアプリ開発のGoodPractice
iOSやAndroidアプリ開発のGoodPractice
 
Prism + ReactiveProperty入門
Prism + ReactiveProperty入門Prism + ReactiveProperty入門
Prism + ReactiveProperty入門
 
GUI アプリケーションにおける MVC
GUI アプリケーションにおける MVCGUI アプリケーションにおける MVC
GUI アプリケーションにおける MVC
 
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」
 
A-Frameで始めるWindows Mixed Reality
A-Frameで始めるWindows Mixed RealityA-Frameで始めるWindows Mixed Reality
A-Frameで始めるWindows Mixed Reality
 
Proxy War EPISODEⅡ
Proxy War EPISODEⅡProxy War EPISODEⅡ
Proxy War EPISODEⅡ
 
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVROculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
 
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみようXpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
 
BaseViewControllerは作りたくない
BaseViewControllerは作りたくないBaseViewControllerは作りたくない
BaseViewControllerは作りたくない
 
ハコスコとUIと時々、ご飯
ハコスコとUIと時々、ご飯ハコスコとUIと時々、ご飯
ハコスコとUIと時々、ご飯
 
そろそろ押さえておきたい AngularJSのセキュリティ
そろそろ押さえておきたい AngularJSのセキュリティそろそろ押さえておきたい AngularJSのセキュリティ
そろそろ押さえておきたい AngularJSのセキュリティ
 
Windows アプリケーション開発 はじめに ~ Windows アプリケーション開発初学者の方向け Visual Studio を使ったアプリケーショ...
Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...
Windows アプリケーション開発 はじめに ~ Windows アプリケーション開発初学者の方向け Visual Studio を使ったアプリケーショ...
 
ゲームエンジンの中の話
ゲームエンジンの中の話ゲームエンジンの中の話
ゲームエンジンの中の話
 

Viewers also liked

ノンデザイナーのための配色理論
ノンデザイナーのための配色理論ノンデザイナーのための配色理論
ノンデザイナーのための配色理論tsukasa obara
 
position: fixed;を上手に飼う方法
position: fixed;を上手に飼う方法position: fixed;を上手に飼う方法
position: fixed;を上手に飼う方法石橋 啓太
 
良いUIをエンジニアに作ってもらうために、デザイナーができること
良いUIをエンジニアに作ってもらうために、デザイナーができること良いUIをエンジニアに作ってもらうために、デザイナーができること
良いUIをエンジニアに作ってもらうために、デザイナーができること石橋 啓太
 
Unity Adsでできること ~基本編~
Unity Adsでできること ~基本編~Unity Adsでできること ~基本編~
Unity Adsでできること ~基本編~Yasuyuki Kamata
 
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴西畑 一馬
 
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグインCSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグインShogo Tamura
 
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & TipsjQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tipsyoshikawa_t
 
マークアップとUX
マークアップとUXマークアップとUX
マークアップとUXuenoyuuki
 
WordPress基礎講座1 CMSの概要
WordPress基礎講座1 CMSの概要WordPress基礎講座1 CMSの概要
WordPress基礎講座1 CMSの概要Akinori Kawamitsu
 
レスポンシブWeb「デザイン」
レスポンシブWeb「デザイン」レスポンシブWeb「デザイン」
レスポンシブWeb「デザイン」uenoyuuki
 
スマートフォン対応、気をつけたいトラブル JavaScript編
スマートフォン対応、気をつけたいトラブル JavaScript編スマートフォン対応、気をつけたいトラブル JavaScript編
スマートフォン対応、気をつけたいトラブル JavaScript編Hiroaki Wakamatsu
 
Pythonを取り巻く開発環境 #pyconjp
Pythonを取り巻く開発環境 #pyconjpPythonを取り巻く開発環境 #pyconjp
Pythonを取り巻く開発環境 #pyconjpYoshifumi Yamaguchi
 
Awsをちゃんと使ってみた
Awsをちゃんと使ってみたAwsをちゃんと使ってみた
Awsをちゃんと使ってみたYoichi Toyota
 
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録タカシ キタジマ
 
マルチデバイス時代におけるWebサイトのUIについて
マルチデバイス時代におけるWebサイトのUIについてマルチデバイス時代におけるWebサイトのUIについて
マルチデバイス時代におけるWebサイトのUIについてrie nabesaka
 
新卒が半年で転職をした話
新卒が半年で転職をした話新卒が半年で転職をした話
新卒が半年で転職をした話naba0123
 
Javascriptを書きたくないヒ トのためのPythonScript
Javascriptを書きたくないヒ トのためのPythonScriptJavascriptを書きたくないヒ トのためのPythonScript
Javascriptを書きたくないヒ トのためのPythonScriptKazufumi Ohkawa
 
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~Horiguchi Seito
 

Viewers also liked (20)

ノンデザイナーのための配色理論
ノンデザイナーのための配色理論ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
 
position: fixed;を上手に飼う方法
position: fixed;を上手に飼う方法position: fixed;を上手に飼う方法
position: fixed;を上手に飼う方法
 
良いUIをエンジニアに作ってもらうために、デザイナーができること
良いUIをエンジニアに作ってもらうために、デザイナーができること良いUIをエンジニアに作ってもらうために、デザイナーができること
良いUIをエンジニアに作ってもらうために、デザイナーができること
 
Ui live資料
Ui live資料Ui live資料
Ui live資料
 
Unity Adsでできること ~基本編~
Unity Adsでできること ~基本編~Unity Adsでできること ~基本編~
Unity Adsでできること ~基本編~
 
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
 
AWS基礎
AWS基礎AWS基礎
AWS基礎
 
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグインCSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
 
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & TipsjQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
 
マークアップとUX
マークアップとUXマークアップとUX
マークアップとUX
 
WordPress基礎講座1 CMSの概要
WordPress基礎講座1 CMSの概要WordPress基礎講座1 CMSの概要
WordPress基礎講座1 CMSの概要
 
レスポンシブWeb「デザイン」
レスポンシブWeb「デザイン」レスポンシブWeb「デザイン」
レスポンシブWeb「デザイン」
 
スマートフォン対応、気をつけたいトラブル JavaScript編
スマートフォン対応、気をつけたいトラブル JavaScript編スマートフォン対応、気をつけたいトラブル JavaScript編
スマートフォン対応、気をつけたいトラブル JavaScript編
 
Pythonを取り巻く開発環境 #pyconjp
Pythonを取り巻く開発環境 #pyconjpPythonを取り巻く開発環境 #pyconjp
Pythonを取り巻く開発環境 #pyconjp
 
Awsをちゃんと使ってみた
Awsをちゃんと使ってみたAwsをちゃんと使ってみた
Awsをちゃんと使ってみた
 
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
 
マルチデバイス時代におけるWebサイトのUIについて
マルチデバイス時代におけるWebサイトのUIについてマルチデバイス時代におけるWebサイトのUIについて
マルチデバイス時代におけるWebサイトのUIについて
 
新卒が半年で転職をした話
新卒が半年で転職をした話新卒が半年で転職をした話
新卒が半年で転職をした話
 
Javascriptを書きたくないヒ トのためのPythonScript
Javascriptを書きたくないヒ トのためのPythonScriptJavascriptを書きたくないヒ トのためのPythonScript
Javascriptを書きたくないヒ トのためのPythonScript
 
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
 

Similar to スマートフォン対応、気をつけたいトラブル

HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実Takumi Ohashi
 
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミングDLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミングterurou
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップYasuhito Yabe
 
Application Architecture for Enterprise Win Store Apps with DDD Pattern
Application Architecture for Enterprise Win Store Apps with DDD PatternApplication Architecture for Enterprise Win Store Apps with DDD Pattern
Application Architecture for Enterprise Win Store Apps with DDD PatternAtsushi Kambara
 
Cocos2d-x公開講座 in 鹿児島
Cocos2d-x公開講座 in 鹿児島Cocos2d-x公開講座 in 鹿児島
Cocos2d-x公開講座 in 鹿児島Tomoaki Shimizu
 
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlashインタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlashYasunobu Ikeda
 
ABC2012Spring 20120324
ABC2012Spring 20120324ABC2012Spring 20120324
ABC2012Spring 20120324Tak Inamori
 
Java fx勉強会lt 第8回
Java fx勉強会lt 第8回Java fx勉強会lt 第8回
Java fx勉強会lt 第8回Taiji Miyabe
 
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?HTML5での制作、いつから始める?
HTML5での制作、いつから始める?Fuminori Mori
 
オープン・ソースで構築するARMマイコン開発環境 ―― GCC,Eclipse,OpenOCDで統合開発環境,JTAGデバッグもできる!
オープン・ソースで構築するARMマイコン開発環境 ―― GCC,Eclipse,OpenOCDで統合開発環境,JTAGデバッグもできる!オープン・ソースで構築するARMマイコン開発環境 ―― GCC,Eclipse,OpenOCDで統合開発環境,JTAGデバッグもできる!
オープン・ソースで構築するARMマイコン開発環境 ―― GCC,Eclipse,OpenOCDで統合開発環境,JTAGデバッグもできる!Masaki Muranaka
 
リモート・スマホ・レンタル(第2回 Androidテスト祭り)
リモート・スマホ・レンタル(第2回 Androidテスト祭り)リモート・スマホ・レンタル(第2回 Androidテスト祭り)
リモート・スマホ・レンタル(第2回 Androidテスト祭り)NTT Resonant Technology Inc.
 
Windows 8 Developers カンファレンス
Windows 8 Developers カンファレンスWindows 8 Developers カンファレンス
Windows 8 Developers カンファレンスKaoru NAKAMURA
 
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社Kunihiko Miyanaga
 
Windows Phoneで始める拡張現実の世界
Windows Phoneで始める拡張現実の世界Windows Phoneで始める拡張現実の世界
Windows Phoneで始める拡張現実の世界Akira Hatsune
 
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料OCHI Shuji
 

Similar to スマートフォン対応、気をつけたいトラブル (20)

HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
 
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミングDLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミング
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
 
Introduction of Rhodes
Introduction of RhodesIntroduction of Rhodes
Introduction of Rhodes
 
Application Architecture for Enterprise Win Store Apps with DDD Pattern
Application Architecture for Enterprise Win Store Apps with DDD PatternApplication Architecture for Enterprise Win Store Apps with DDD Pattern
Application Architecture for Enterprise Win Store Apps with DDD Pattern
 
Cocos2d-x公開講座 in 鹿児島
Cocos2d-x公開講座 in 鹿児島Cocos2d-x公開講座 in 鹿児島
Cocos2d-x公開講座 in 鹿児島
 
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlashインタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
 
ABC2012Spring 20120324
ABC2012Spring 20120324ABC2012Spring 20120324
ABC2012Spring 20120324
 
Java fx勉強会lt 第8回
Java fx勉強会lt 第8回Java fx勉強会lt 第8回
Java fx勉強会lt 第8回
 
Silverlightの今
Silverlightの今Silverlightの今
Silverlightの今
 
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
 
オープン・ソースで構築するARMマイコン開発環境 ―― GCC,Eclipse,OpenOCDで統合開発環境,JTAGデバッグもできる!
オープン・ソースで構築するARMマイコン開発環境 ―― GCC,Eclipse,OpenOCDで統合開発環境,JTAGデバッグもできる!オープン・ソースで構築するARMマイコン開発環境 ―― GCC,Eclipse,OpenOCDで統合開発環境,JTAGデバッグもできる!
オープン・ソースで構築するARMマイコン開発環境 ―― GCC,Eclipse,OpenOCDで統合開発環境,JTAGデバッグもできる!
 
リモート・スマホ・レンタル(第2回 Androidテスト祭り)
リモート・スマホ・レンタル(第2回 Androidテスト祭り)リモート・スマホ・レンタル(第2回 Androidテスト祭り)
リモート・スマホ・レンタル(第2回 Androidテスト祭り)
 
Grailsのススメ(仮)
Grailsのススメ(仮)Grailsのススメ(仮)
Grailsのススメ(仮)
 
Windows 8 Developers カンファレンス
Windows 8 Developers カンファレンスWindows 8 Developers カンファレンス
Windows 8 Developers カンファレンス
 
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
 
Windows Phoneで始める拡張現実の世界
Windows Phoneで始める拡張現実の世界Windows Phoneで始める拡張現実の世界
Windows Phoneで始める拡張現実の世界
 
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
 
OSC福岡 20111203
OSC福岡 20111203OSC福岡 20111203
OSC福岡 20111203
 
AndroidでDIxAOP
AndroidでDIxAOPAndroidでDIxAOP
AndroidでDIxAOP
 

スマートフォン対応、気をつけたいトラブル