Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

スマホサイト制作を中心にしたコーディングあれこれ(2014/12/12)

2,477 views

Published on

目次
1 : 弊社で使っている開発ツール
2 : スマホサイトコーディング時に積極的に使っていきたい 技術やコード
3 : HTMLガイドラインの目的と作り方
4 : 端末やOSごとのバグやクセなどなど
5 : 便利なツールのご紹介

Published in: Internet
  • Be the first to comment

スマホサイト制作を中心にしたコーディングあれこれ(2014/12/12)

  1. 1. 1 スマホサイト制作を中心にした コーディングあれこれ 2014 - 12 - 12
  2. 2. 津曲みゆき UIデザイナー、フロントエンドエンジニア。 Web制作会社で車メーカー・ラグジュアリーブランドなどの Webディレクター・Webデザイナー経験を経て独立。 サービス設計・デザイン全般を担当した「オンライン寄せ書き yosetti」で2013年度グッドデザイン賞を受賞。 現在は主にスマホ向けサイトの受託業務と、自社サービスの運営業 務を行っています。 2
  3. 3. 3年前くらいまでは… 主にケータイ向けFlash Liteを使った インタラクティブコンテンツを作ってました。 その流れで、今もモバイルブラウザ向け リッチコンテンツの制作が多いです。 3
  4. 4. 事例紹介 ※Web公開版ではカットいたしますm(_ _)m※
  5. 5. 本日の目次 1 : 弊社で使っている開発ツール 2 : スマホサイトコーディング時に積極的に使っていきたい 技術やコード(15min) 3 : HTMLガイドラインの目的と作り方(15min) 4 : 端末やOSごとのバグやクセなどなど(15min) 5 : 便利なツールのご紹介(5min) 5
  6. 6. 1 : 弊社で使ってる開発ツール 6
  7. 7. こんな感じです。 など Macintosh, Apache, MySQL, PHP ローカーにサーバー構築 プロキシ デバッギング プロトタイプ作成や、アニメーションだけを制作する場合 1 2 3 4 5 6
  8. 8. タスクランナー系は使ってません。 理由: 弊社の場合、最終納品が開発会社さんなので、圧縮がNGの場合が多い為… 8
  9. 9. 2 : スマホサイトコーディング時に 積極的に使っていきたい技術やコード 9
  10. 10. Ⅰ:CSS3の新単位REM Ⅱ:SVGを積極的に使おう! Ⅲ:よく使うアイコンはフォントファイル化 10
  11. 11. Ⅰ:CSS3の新単位REM
  12. 12. Ⅰ:CSS3の新単位REM ・Root + em ・「rem」はemとは違い親要素の値を継承せず ルート(html)で設定された値だけを継承します。 /* 10px(16 * 0.625 = 10) なので、こうすると、「1rem」 = 「10px」 87.5% = 1rem = 14px、120% = 1rem = 20px */ html{ font-size: 62.5%; } body{ font-size: 1.4rem; } 階層構造が複雑なページだと便利
  13. 13. 気をつけるポイント ・ルートは「body」じゃなくて「html」 ・font-sizeの指定に、emを混在させるとコードが読みづ らくなるので、どちらを使うかをちゃんと取り決める ・Chromeで残念なバグがあります(後述) 1:CSS3の新単位REM 13
  14. 14. スマホのブラウザは全てREMに対応してるのでREMの 指定だけでOK。PCでも同じページを見せたい場合はpx 指定も必要。 1:CSS3の新単位REM p{ font-size:14px; font-size:1.4rem; }
  15. 15. スマホのブラウザは全てREMに対応してるのでREMの 指定だけでOK。PCでも同じページを見せたい場合はpx 指定も必要。 @mixin setFontSize($size: 1.4) { font-size: ($size*10) + px; font-size: $size + rem; } p{ @include setFontSize(1.4); } mixinを書いておくと記述忘れが 減るのでGood! 1:CSS3の新単位REM
  16. 16. Ⅱ:SVGを積極的に使おう!
  17. 17. Ⅱ:SVGを積極的に使おう! ベクターデータなので、拡大・縮小しても綺麗。 どんな解像度の端末でみても綺麗。 ベジェ! 17
  18. 18. Ⅱ:SVGを積極的に使おう! 最近、SVGを見かけることが増えてきました!
  19. 19. Ⅱ:SVGを積極的に使おう! イラストレーターや、Flashを使ってSVGを書き出すこ とができます。 書き出したSVGをHTML上で表示させるには imgタグでOK! <img src=“test.svg” width=“100” height=“50”> imgタグ 19 他には、ObjectタグやSVGタグで表示させることもできます。
  20. 20. Ⅱ:SVGを積極的に使おう! <object data="image.svg" type="image/svg+xml" width="100" height="50"> <img src=“test.png" width="100" height="50" /> </object> Objectタグ <svg width="150px" height=“50px"> 〜〜〜〜〜〜 <foreignObject display="none"><img src=“test.png” /></foreignObject> </svg> SVGタグ 元サイズと描画サイズが 異なる場合は使わないほうが良い 20
  21. 21. Ⅱ:SVGを積極的に使おう! 気をつけるポイント ・サイトのロゴや、アイコンなど画像が荒れて 欲しくない部分で使うのがおすすめ。 ページ全部をSVGにしてしまうと重たい…。 ・容量削減のために、複雑なパスは簡略化する ・線は線のままだと、太さが変わってしまったり するためアウトラインする。 21
  22. 22. Ⅱ:SVGを積極的に使おう! IE8とAndroid2.3はSVGに対応していません。 代わりにJPGやPNGを表示するなどの対応が必要です。 //例えばjQueryでやるなら //Android2.xの時にのみpngに変更する if(navigator.userAgent.indexOf('Android 2') > 0){ $("img").each(function(){ var src = $(this).attr("src"); $(this).attr("src",src.replace('.svg','.png')) }); } 22
  23. 23. Ⅲ:よく使うアイコンはフォントファイル化
  24. 24. Ⅲ:よく使うアイコンはフォントファイル化 yosetti yosetticon.ttf Webフォントにするメリット ・スマホの主要OS・バージョンでサポートされている ・従来のスプライトシートで実装するより手間が省けて嬉しい ・「フォント」なので手軽に色やサイズを変えられる ・サイズを変えても画像が荒れない 24
  25. 25. Ⅲ:よく使うアイコンはフォントファイル化 Amebaさん 25
  26. 26. Ⅲ:よく使うアイコンはフォントファイル化 実際に作ってみます!
  27. 27. Ⅲ:よく使うアイコンはフォントファイル化 <i class="icon-yosetti"></i> HTML @font-face { font-family: "iconvault"; src:url("iconvault_e6ce4e527696e77601afaec2ed8e0be6.ttf") format(“truetype"); } .icon-yosetti:before { font-family: "iconvault";line-height: 1; -webkit-font-smoothing: antialiased;display: inline-block; content: "f101"; } CSS 27
  28. 28. 3 : HTMLガイドラインの目的と作り方 28
  29. 29. HTMLガイドライン作成の目的 ・納品物の1つとして ・自分ではない別のコーダーさんが更新作業をしやすいように。 ・自分ではない別のコーダーさんが後から要素を足した時に コードがぐちゃぐちゃにならないように 29
  30. 30. ガイドラインに書くべきこと ・HTMLの基本事項(文字コード、対象ブラウザ、) ・カラーパレット ・命名規則 ・CSSやJSの参照方法 ・CSSやJSの汎用モジュールの使い方 ・その他 注意事項 30
  31. 31. 社内向けの場合 31
  32. 32. 32 外部に提出する場合のHTMLガイドラインサンプル ※Web公開版ではカットいたしますm(_ _)m※
  33. 33. ガイドラインに書くべきこと ・HTMLの基本事項(文字コード、対象ブラウザ、) ・カラーパレット ・命名規則 ・CSSやJSの参照方法 ・CSSやJSの汎用モジュールの使い方 ・その他 注意事項 33
  34. 34. 4 : 端末やOSごとのバグやクセなどなど 34
  35. 35. オススメの実機検証セット ・各バージョンのiOS(iOS8、7はマスト。) ・AndroidのNexusシリーズ ・問題児Xperia&Galaxy端末 ・Android4.0端末 ・Android2.3端末(GalaxySがおすすめ) 動作確認は、標準搭載のブラウザとChromeで行います。 35
  36. 36. バグやクセなどなど 36
  37. 37. Android Chrome REM指定しているとたまに無視される html{ font-size: 62.5%; } htmlに指定したフォントのパーセント が無視されて、100%してレンダリン グする場合がある (数回リロードしてたまに発生するの が曲者なんです…) 37
  38. 38. Android Chrome REM指定しているとたまに無視される 対策法 body{ font-size: 1.4em; } <script> document.body.style.webkitTransform = "scale(1)"; </script> 38
  39. 39. iOS8.1 「window.close」が効かない ウインドウを閉じる場合はJSで、 window.closeですが、 iOS8は全く動作しません。 39
  40. 40. 対策法 ありませんorz Apple早く直してくれないかなぁ… 苦肉の策:「閉じない場合はブラウザの機能で閉じてください」 と書く。 iOS8.1 「window.close()」が効かない 40
  41. 41. Android4.0、4.1 SVG画像のアスペクト比がずれる AQUOS PAD SHT21(Android4.1 Chrome) アスペクト比率がおかしい 41
  42. 42. 対策法 SVGファイルをテキストエディタ等で開き、名前空間(<svg>< /svg>)の宣言のところに「preserveAspectRatio=”none”」を追記し ます。 <svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" viewBox="0 0 200 150" enable-background="new 0 0 200 150" xml:space="preserve"></svg> Android4.0、4.1 SVG画像のアスペクト比がずれる 42
  43. 43. Android4.0、4.1 SVG画像のアスペクト比がずれる preserveAspectRatio=”none” svgから外部の画像を読み込む場合,image要素を用います.この時image要素 が定める描画領域のサイズと読み込む画像のサイズとの間に差があった場合, 何らかの方法で画像の引き伸ばし処理が必要となります.この引き伸ばし方法 を指定するものがpreserveAspectRatio属性です. 引き伸ばし方には概ね3つの方法があり,これらと画像を拡大するための基準 を表す値「xMinYMin〜xMaxYMax」とを組み合わせることで引き伸ばし処理 を定義します. 引用:http://defghi1977-onblog.blogspot.jp/2012/12/svgpreserveaspectratio.html 43
  44. 44. Android2系 CSSアニメとフォーム要素がページに あるとフォームがバグる セレクトボックスが タップできなくなる! 入力フォームが 2重に重なる! 入力フォームが 消える! 44
  45. 45. 対策法 ・CSSアニメーションを使わない。 ・jQueryのanimateとかで対処する。 ・工数かかるけど、OSごとでアニメーションの 分岐を入れたほうが良い Android2系 CSSアニメとフォーム要素がページに あるとフォームがバグる 45
  46. 46. Android4.0、4.1 position:fixed;指定した画像がボヤける <div style="position:fixed;"> <img src="./icon.png" width="150"> </div> 46
  47. 47. 対策法 ・fixed指定した要素の中に画像しか無い場合に 発生する。 ・中の画像に「position:relative」を設定する。 ・スペース(&nbsp;)を入れる Android4.0、4.1 position:fixed;指定した画像がボヤける 47
  48. 48. Android全体 動画ファイルがBasic認証配下に あると再生できない 対策法 テスト環境であっても動画ファイルだけは認証から外す <Files ~ ".(mov|mp4|m4v|flv|f4v)$"> Satisfy any Allow from all </Files> 48
  49. 49. 特定の端末だけで動かない 場合の対応方法 1:その端末を対応端末から外す 2:動作不良が起きている部分を、出し分けで対処する。 49
  50. 50. バグの見極めかた ・CSSアニメーションが動作に影響している場合が多いので、 一度アニメ演出を切って、ページを見てみる ・positionが「fixed」や「absolute」になっていると レンダリングに失敗することがある。(特にAndroid4系) 50
  51. 51. バグの見極めかた 51 端末/OSごとに苦手な描画があるので把握しておく Android2.3,4.0,4.1 CSSアニメーション が苦手 Android4.0,4.1 position指定するとバ グが 起こりやすい Galaxy/Xperia系 CSS3のdisplay:tableとか苦 手。position指定もrelative にしてると予期せぬ表示ず れとか起こりやすい Android4.2 より前バージョン Canvas描画が 苦手、遅い iOS SVGアニメーション の描画が苦手、 遅い ※弊社調べ
  52. 52. バグの見極めかた バグ報告者のクオリティを上げる うごきません!見れません! どういう手順で?どの端末・OSで?どの環境で?(モック?本番?テスト?) だいたいバグを見つけてくれた人って、 その時焦ってる傾向にあるので、 そのペースに巻き込まれないの大事。 実機検証シート
  53. 53. おまじない <script> document.body.style.webkitTransform = "scale(1)"; </script> この方法解決する場合も多いです。ただオススメではない。 Webkitのレンダリングを再描画するおまじない 53
  54. 54. 5 : 便利なツールのご紹介 54
  55. 55. プロキシデバッグが出来る「Charles」 55
  56. 56. 「納品されたJavascript、 うちのサーバーで動かないんだけど(`Д´) 」 確認したくても、 納品したHTMLがローカルでは再現できない 場合ってありますよね… プロキシデバッグが出来る「Charles」 56
  57. 57. JS/CSS/画像などを ローカルのものを参照 することができます 57 実際にやってみます
  58. 58. TinyPngのPhotoshopプラグイン版/Developer版 58 command + P
  59. 59. おわり 59

×