CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks

HiDPI 時代のFireworks

松田直樹

Flickr : ebayink

2月発売

松田直樹

デバイスの高解像度化

Retina Display代表的なものが、Apple製品の

(iPhone 326 ppi)(iPad 264 ppi)

What’sHiDPI ?

HiDPI=高ピクセル密度=

高 device-pixel-ratio

device-pixel-ratio ?

device-pixel-ratio

HTMLコンテンツの1pxを

実際のデバイス上で

何倍のpxで

描画するかを示す数値

え、なんて？は

Flickr : Tsahi Levent-Levi

device-pixel-ratio = 2


@1x Resolution

(4dpx)@2x Resolution

(16dpx)

<img src="xxx.png" width="320">


iPhone 4～ Android

2 1.5が多い

device-pixel-ratio

326 ppi 250 ppi

3device-pixel-ratio

INFOBARA02

Xperia ZHTC Jbutterfly 440 ppi

進み続ける、デバイスの HiDPI 化

Flickr : Jeffrey

WORKFLOWforHIDPI

iOSアプリデザインのRetina対応ワークフローが話題にもなりました

http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/

http://creative-tweet.net/blog/2012/12/retina-image-exporter.html


バシャログ - Retina対応用にページを分けるFireworksコマンド




画像をRetina対応で書き出しするFireworksの拡張機能作ったよ。




株式会社まぼろしまつだなおきさんの場合

カンバスは、基本的に w 640px

ビットマップはまずシンボル化

@2x の画像だけ書き出し

@1x の画像は一括で半分にリサイズ

CSS3, SVG, Web Fonts を活用

カンバスは横幅 640px


640px

• 多くのスマホのブラウザが、横幅 320px なため

• そのまま書き出せば、Retina 対応可

• コーダーが別の場合でも、失敗することがない

メリット

640px

• すべてのパーツ、テキストのサイズを2倍に計算する必要がある

• 実機の実寸との差異があり、サイズ感がつかみにくい

デメリット



• あとから @2x 画像が作りにくい

• ビットマップを拡大すると劣化する

• テキストのフォントサイズがおかしくなる

• 9スライスが崩れる• 書き出した後で2倍にできない

320pxデメリット

カンバスが横幅 320px だと...


実機でのサイズ感が分かりにくければ...

作ったカンプに、共通ライブラリの「iPhone → Hardware」を重ねてみましょう

画面内が 640px になっています


それでもまだ、実機でのサイズ感が分かりにくければ...

LiveViewhttps://itunes.apple.com/jp/app/liveview/id301069270?mt=8

https://itunes.apple.com/jp/app/liveview/id301069270?mt=8

https://itunes.apple.com/jp/app/liveview/id301069270?mt=8


640px の大きいサイズで作っておけば、小さいサイズはどうとでもなる！

2倍で作るコツ

2倍で作るコツ

_参考Workflow OptimizationDesign Cutting Edge iOS Apps With Adobe Fireworkshttp://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/

高さ、幅、border 幅、すべてを偶数値で作る

50%に縮小した際、エッジがボケるため

Why ?



2倍で作るコツ


Photoshop ライブエフェクトは使わない

拡大縮小した際、比例してリサイズされないため

Why ?



2倍で作るコツ


角丸は、なるべくCSS3 で実装する

縮小した際、つぶれてしまうことがあるため

Why ?



2倍で作るコツ

標準のテクスチャは使わない

テクスチャは2倍サイズがなく、リサイズもできないため


Why ?



2倍で作るコツ

SubtlePatterns高品質なテクスチャを@2x, @1x のセットで配布している

Why ?

_参考Subtle Patternshttp://subtlepatterns.com



2倍で作るコツ

In general, bitmaps are your enemy when designing iOS apps.

Ivo Mynttinen

ざっくりいえば、iOSアプリをデザインする上でビットマップは君の敵、って感じ。

ビットマップはシンボル化


グラフィックシンボル

非破壊編集

ビットマップはシンボル化しておく


グラフィックシンボル

非破壊編集• シンボル化した画像は拡大縮小を繰り返しても劣化しない

• 回転やゆがみを加えても、元画像の状態はそのまま

• 画像は大きめ(640px以上)で用意し、シンボル化してから大きさを調整

ビットマップを拡大・縮小・回転

シンボルを拡大・縮小・回転

劣化

保持



シンボルの注意点シンボルの中では

乗算・スクリーンなどのレイヤースタイルは使えない

シンボルの中のスライスの書き出しがバグる

（CS5以下の場合）


シンボル化しておけば、320px から拡大して使うなどどうとでもなる！

@2x と @1x の画像書き出し


まずは、FW から @2x の画像を書き出すバッチで一括で半分にリサイズして @1x を用意


方法その1

Automator

• 「@2x」の画像を複製• サイズ調整で 50% にリサイズ

• ファイル名から「@2x」を削除する

• .app 化できるので便利


_参考

iphone用の画像@2x.pngから通常のを生成

http://d.hatena.ne.jp/doorside/20110727/1311782239

Shell Script

• find で「@2x」の画像を探す

• sips コマンドで横幅を取得

• sips コマンドで 50%にリサイズ

• watch できたり便利

#!/bin/sh

#dir=$1

find $dir -name "*@2x.*" | while read file;

cd $(dirname $0) && pwd

do

width=`sips --getProperty pixelWidth

$file | sed -E "s/.*pixelWidth: ([0-9]+)/

\1/g" | tail -1`

width=`expr $width / 2`

newFile=`echo $file | sed 's/@2x//'`

sips --resampleWidth $width $(basename

"$file") --out $(basename "$newFile")

done

方法その2






• 先の2案と同じことが可能• FWコマンド化できる• Windows でも OK• 先の2案より画質が良さげ

• 生成した画像サイズが軽め

FW’s Batch

方法その3

@2x, @1x 画像の振り分けは？

[email protected]

sample-image.png

@2x, @1x 画像の振り分け

jQueryで「devicePixelRatio」を判別する

device-Pixel-Ratio が「1.5」以上のデバイスでは、

img を「＊＊＊@2x.png」など

ファイル名に @2x がついた方に差し替える

sample-image.png

mailto:[email protected]










jQueryで「devicePixelRatio」を判別する

$(function(){

if( 'devicePixelRatio' in window && window.devicePixelRatio > 1 ){

var imgHidpi = $( 'img.hidpi' ).get();

var imgHidpiLength = imgHidpi.length;

for (var i=0,l=imgHidpiLength; i<l; i++) {

var src = imgHidpi[i].src;

src = src.replace(/\.(png|jpg|gif)+$/i, '@2x.$1');

imgHidpi[i].src = src;

};

}

});


_参考Adaptation for Retina displayhttp://egorkhmelev.github.com/retina/

Optimising for High Pixel Density Displays.http://menacingcloud.com/?c=highPixelDensityDisplays

https://github.com/joshje/Responsive-Enhance


http://www.sencha.com/learn/how-to-use-src-sencha-io/





Media Query で背景画像を振り分ける

.selector { background: url(../sample.png) no-repeat;}

@media (-webkit-min-device-pixel-ratio: 1.5) { .selector { background-image: url(../[email protected]); background-size: cover; }}




CSS4 の「-webkit-image-set()」で振り分ける

.selector {

background:

　　-webkit-image-set (

　　　url( sample.png ) 1x,

　　　url( [email protected] ) 2x

　 );

}




Media Query のJS版｢window.matchMedia」で振り分ける

var mq = window.matchMedia( "only screen and ( -webkit-min-device-pixel-ratio: 1.5)" );

if(mq.matches) { ...}


Cloud の画像振り分けサービスで解決

ReSRC.ithttp://www.resrc.it/

Sencha.io Srchttp://www.sencha.com/learn/how-to-use-src-sencha-io/








JSライブラリ「Conditionizr」で振り分ける

高精細デバイスにのみに適用させるJS, CSS, Class を振り分けられる

<html class="retina">

<script> conditionizr({ retina : { scripts: true, styles: true,　　　　　　　　　　classes: true }

});</script>Conditionizr

http://conditionizr.com




ただ、これからは@1x の画像は必要ないかも

•今やモバイルデバイスのすべてがHiDPI• PCのHiDPI化もこれから普及？•そもそも、RWDの普及でピクセルに依存しないデザインが求められる

脱ビットマップ

WORKFLOWforHIDPI

NO MOREBITMAP

HiDPI対応の高解像度な画像は重い

デバイスの画面サイズが更に多様化

ビットマップ画像の課題

ピクセルパーフェクトな

ビットマップに頼れない時代

img画像は写真や図版にのみ使うようにして、

アイコンなどの共通コンポーネントは

脱ビットマップを目指す

Fireworks的脱ビットマップ

というより、脱img要素


SVG + Web Fonts

• ベクター(SVG)はピクセルに依存しない

• FWでは拡張機能を使ってSVG出力できる

• Web Fonts 化すれば色・サイズをCSSで容易に変更可能

• 軽い


SVG を対応デバイスでだけ使う<script src="jquery.js"></script>

<script src="modernizr.js"></script>

<script>

if(!Modernizr.svg) {

$('img[src*="svg"]').attr('src', function() {

return $(this).attr('src').replace('.svg', '.png');

});

}

</script>


Data URI Scheme

• Base64 形式で、HTMLやCSSに直接記述

• gzip が有効になる (軽い)• 内実、ビットマップですが...• 変換拡張機能が出る噂も

data:image/

png;base64,iVBORw0KGgoAAAANSUhEUgAAAUA

AAABQCAYAAABoMayFAAAABHNCSVQICAgIfAhki

AAAAAlwSFlzAAALEgAACxIB0t1+/

AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXd

vcmtzIENTNui8sowAAAJ/

cHJWV3ic7ZffkZswEMZlEclaiSJSgm/

ck5+vHXeSpxSQcQXXRBrIhOxKAvNH4nwzhof4Y

1hYBPJvdz+B5F9/f/5W7+q9k+3W3Xi/

drdLd712Vz6eu8ulu/BRdedzd1ad4sdgsP/

O9t7ABx988MEHH3zwwQcffPDBBx988MEHH3zwd

+MTb34nK/P3ovsKP9BeVuR72m0v8kOKrs22pV/

iD+FF28L3Q1NZ/z7CQNv49+tK/jQS6Wn+TPx6/

mEbvb+u/0ZVGF2v69+SVnbTKnyif/xAZ9/

tr3+aIKxcm4am46IJPlVoyMg8Xf/EN

+LHKijZpYGDTDsxn3yw6ZKfaxsT24jP1vBBywU

dpN27rL9q9EP65/zF5w7a8i3FMihqyHNDE2/

I7zjNQaRKhGMMNnItaS7bIRwobVaTa4whicuHV

f3v8qs+dTLCN5TKIWnJVB


Data URI Scheme への変換ツール

Data URI Converterhttp://www.macupdate.com/app/mac/46143/data-uri-converter

duri.me a super simple dataURI tool

http://duri.me

http://www.macupdate.com/app/mac/46143/data-uri-converter







Data URI Scheme への変換ツール

Sublime Text 2 + Image2Base64https://github.com/tm-minty/sublime-text-2-image2base64

https://github.com/tm-minty/sublime-text-2-image2base64

https://github.com/tm-minty/sublime-text-2-image2base64


_余談

Fireworks の CSS スプライト機能は、HiDPI時代では使えない

Retina対応（background-size を半分に）してくれない

SaSS + Compass などに任せたほうがいい

まとめ

カンバスは、基本的に横幅 640px

ビットマップはシンボル化

なるべくベクターによるパーツ作り

そのグラフィック、ビットマップであるべきか？を考える

CSS3, SVG が出力できるのがFWの強み

最後にひとこと

Fireworks関係ないネタが多くて

すいませんでした

ありがとうございました

松田直樹

Flickr : Stephen Geyer