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

1

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

2014 - 12 - 12

津曲みゆきUIデザイナー、フロントエンドエンジニア。Web制作会社で車メーカー・ラグジュアリーブランドなどのWebディレクター・Webデザイナー経験を経て独立。

サービス設計・デザイン全般を担当した「オンライン寄せ書きyosetti」で2013年度グッドデザイン賞を受賞。

現在は主にスマホ向けサイトの受託業務と、自社サービスの運営業務を行っています。

2

３年前くらいまでは…主にケータイ向けFlash Liteを使ったインタラクティブコンテンツを作ってました。その流れで、今もモバイルブラウザ向けリッチコンテンツの制作が多いです。

3

事例紹介※Web公開版ではカットいたしますm(_ _)m※

本日の目次1 : 弊社で使っている開発ツール2 : スマホサイトコーディング時に積極的に使っていきたい技術やコード(15min)

3 : HTMLガイドラインの目的と作り方(15min)

4 : 端末やOSごとのバグやクセなどなど(15min)

5 : 便利なツールのご紹介(5min)

5

1 : 弊社で使ってる開発ツール

6

こんな感じです。

など

Macintosh, Apache, MySQL, PHP

ローカーにサーバー構築プロキシ

デバッギング

プロトタイプ作成や、アニメーションだけを制作する場合

1 2 3

4 5 6

タスクランナー系は使ってません。

理由：弊社の場合、最終納品が開発会社さんなので、圧縮がNGの場合が多い為…

8

2 : スマホサイトコーディング時に積極的に使っていきたい技術やコード

9

Ⅰ：CSS3の新単位REM

Ⅱ：SVGを積極的に使おう！Ⅲ：よく使うアイコンはフォントファイル化

10


・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;

}

階層構造が複雑なページだと便利

気をつけるポイント

・ルートは「body」じゃなくて「html」

・font-sizeの指定に、emを混在させるとコードが読みづらくなるので、どちらを使うかをちゃんと取り決める

・Chromeで残念なバグがあります(後述)

１：CSS3の新単位REM

13

スマホのブラウザは全てREMに対応してるのでREMの指定だけでOK。PCでも同じページを見せたい場合はpx

指定も必要。


p{

font-size:14px;

font-size:1.4rem;

}

スマホのブラウザは全て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!


Ⅱ：SVGを積極的に使おう！


ベクターデータなので、拡大・縮小しても綺麗。どんな解像度の端末でみても綺麗。

ベジェ！

17


最近、SVGを見かけることが増えてきました！


イラストレーターや、Flashを使ってSVGを書き出すことができます。

書き出したSVGをHTML上で表示させるにはimgタグでOK!

<img src=“test.svg” width=“100” height=“50”>

imgタグ

19

他には、ObjectタグやSVGタグで表示させることもできます。


気をつけるポイント

・サイトのロゴや、アイコンなど画像が荒れて欲しくない部分で使うのがおすすめ。ページ全部をSVGにしてしまうと重たい…。

・容量削減のために、複雑なパスは簡略化する

・線は線のままだと、太さが変わってしまったりするためアウトラインする。

21


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

Ⅲ：よく使うアイコンはフォントファイル化


yosetti

yosetticon.ttf

Webフォントにするメリット・スマホの主要OS・バージョンでサポートされている・従来のスプライトシートで実装するより手間が省けて嬉しい・「フォント」なので手軽に色やサイズを変えられる・サイズを変えても画像が荒れない

24


Amebaさん

25


実際に作ってみます！


<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

3 : HTMLガイドラインの目的と作り方

28

HTMLガイドライン作成の目的・納品物の１つとして・自分ではない別のコーダーさんが更新作業をしやすいように。・自分ではない別のコーダーさんが後から要素を足した時にコードがぐちゃぐちゃにならないように

29

ガイドラインに書くべきこと・HTMLの基本事項（文字コード、対象ブラウザ、）・カラーパレット・命名規則・CSSやJSの参照方法・CSSやJSの汎用モジュールの使い方・その他注意事項

30

社内向けの場合

31

32

外部に提出する場合のHTMLガイドラインサンプル※Web公開版ではカットいたしますm(_ _)m※

ガイドラインに書くべきこと・HTMLの基本事項（文字コード、対象ブラウザ、）・カラーパレット・命名規則・CSSやJSの参照方法・CSSやJSの汎用モジュールの使い方・その他注意事項

33

4 : 端末やOSごとのバグやクセなどなど

34

オススメの実機検証セット

・各バージョンのiOS(iOS8、7はマスト。)

・AndroidのNexusシリーズ・問題児Xperia＆Galaxy端末・Android4.0端末・Android2.3端末(GalaxySがおすすめ)

動作確認は、標準搭載のブラウザとChromeで行います。

35

バグやクセなどなど

36

Android Chrome

REM指定しているとたまに無視される

html{

font-size: 62.5%;

}

htmlに指定したフォントのパーセントが無視されて、100%してレンダリングする場合がある（数回リロードしてたまに発生するのが曲者なんです…)

37

Android Chrome

REM指定しているとたまに無視される

対策法

body{

font-size: 1.4em;

}

<script>

document.body.style.webkitTransform =

"scale(1)";

</script>

38

iOS8.1

「window.close」が効かない

ウインドウを閉じる場合はJSで、window.closeですが、

iOS8は全く動作しません。

39

対策法

ありませんorzApple早く直してくれないかなぁ…

苦肉の策：「閉じない場合はブラウザの機能で閉じてください」と書く。

iOS8.1

「window.close()」が効かない

40

Android4.0、4.1

SVG画像のアスペクト比がずれる

AQUOS PAD SHT21(Android4.1

Chrome)

アスペクト比率がおかしい

41

対策法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


42

Android4.0、4.1


preserveAspectRatio=”none”

svgから外部の画像を読み込む場合，image要素を用います．この時image要素

が定める描画領域のサイズと読み込む画像のサイズとの間に差があった場合，何らかの方法で画像の引き伸ばし処理が必要となります．この引き伸ばし方法を指定するものがpreserveAspectRatio属性です．

引き伸ばし方には概ね3つの方法があり，これらと画像を拡大するための基準を表す値「xMinYMin〜xMaxYMax」とを組み合わせることで引き伸ばし処理を定義します．

引用：http://defghi1977-onblog.blogspot.jp/2012/12/svgpreserveaspectratio.html

43

http://defghi1977-onblog.blogspot.jp/2012/12/svgpreserveaspectratio.html

Android2系CSSアニメとフォーム要素がページに

あるとフォームがバグる

セレクトボックスがタップできなくなる！

入力フォームが２重に重なる！

入力フォームが消える！

44

対策法

・CSSアニメーションを使わない。・jQueryのanimateとかで対処する。・工数かかるけど、OSごとでアニメーションの分岐を入れたほうが良い

Android2系CSSアニメとフォーム要素がページに

あるとフォームがバグる

45

Android4.0、4.1

position:fixed;指定した画像がボヤける

<div style="position:fixed;">

<img src="./icon.png" width="150">

</div>

46

対策法

・fixed指定した要素の中に画像しか無い場合に発生する。

・中の画像に「position:relative」を設定する。・スペース（）を入れる

Android4.0、4.1

position:fixed;指定した画像がボヤける

47

Android全体動画ファイルがBasic認証配下に

あると再生できない

対策法テスト環境であっても動画ファイルだけは認証から外す

<Files ~ "\.(mov|mp4|m4v|flv|f4v)$">

Satisfy any

Allow from all

</Files>

48

特定の端末だけで動かない場合の対応方法

１：その端末を対応端末から外す２：動作不良が起きている部分を、出し分けで対処する。

49

バグの見極めかた

・CSSアニメーションが動作に影響している場合が多いので、一度アニメ演出を切って、ページを見てみる

・positionが「fixed」や「absolute」になっているとレンダリングに失敗することがある。（特にAndroid4系）

50


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アニメーションの描画が苦手、

遅い

※弊社調べ


バグ報告者のクオリティを上げる

うごきません！見れません！

どういう手順で？どの端末・OSで？どの環境で？(モック？本番？テスト？)

だいたいバグを見つけてくれた人って、その時焦ってる傾向にあるので、

そのペースに巻き込まれないの大事。

実機検証シート

おまじない

<script>

document.body.style.webkitTransform = "scale(1)";

</script>

この方法解決する場合も多いです。ただオススメではない。

Webkitのレンダリングを再描画するおまじない

53

5 : 便利なツールのご紹介

54

プロキシデバッグが出来る「Charles」

55

「納品されたJavascript、うちのサーバーで動かないんだけど(｀Д´) 」

確認したくても、納品したHTMLがローカルでは再現できない場合ってありますよね…

プロキシデバッグが出来る「Charles」

56

JS/CSS/画像などをローカルのものを参照することができます

57

実際にやってみます

TinyPngのPhotoshopプラグイン版/Developer版

58

command + P

おわり

59

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

Internet