Weitere ähnliche Inhalte Ähnlich wie CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks (20) Mehr von Naoki Matsuda (8) CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks23. カンバスが
カンバスは 横幅 640px だと...
320px
320px
デメリット
•
あとから @2x 画像が
作りにくい
•
ビットマップを
拡大すると劣化する
•
テキストのフォント
サイズがおかしくなる
•
•
9スライスが崩れる
書き出した後で2倍に
できない
41. @2x と @1x の画像書き出し
まずは、FW から @2x の画像を書き出す
バッチで一括で半分にリサイズして @1x を用意
42. @2x と @1x の画像書き出し
方法 その1
Automator
•
•
「@2x」の画像を複製
•
ファイル名から
「@2x」を削除する
•
.app 化できるので便利
サイズ調整で 50% に
リサイズ
43. @2x と @1x の画像書き出し
#!/bin/sh
方法 その2
#dir=$1
Shell Script
find $dir -name "*@2x.*" | while read file;
cd $(dirname $0) && pwd
do
width=`sips --getProperty pixelWidth
$file | sed -E "s/.*pixelWidth: ([0-9]+)/
•
find で「@2x」の
画像を探す
•
sips コマンドで横幅を
取得
•
sips コマンドで 50%に
リサイズ
•
watch できたり便利
1/g" | tail -1`
width=`expr $width / 2`
newFile=`echo $file | sed 's/@2x//'`
sips --resampleWidth $width $(basename
"$file") --out $(basename "$newFile")
done
_参考
iphone用の画像@2x.pngから通常のを生成
http://d.hatena.ne.jp/doorside/20110727/1311782239
44. @2x と @1x の画像書き出し
方法 その3
FW’s Batch
•
•
•
•
先の2案と同じことが可能
•
生成した画像サイズが
軽め
FWコマンド化できる
Windows でも OK
先の2案より画質が
良さげ
47. @2x, @1x 画像の振り分け
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;
};
}
});
48. @2x, @1x 画像の振り分け
_参考
Adaptation for Retina
display
Optimising for High
Pixel Density Displays.
http://egorkhmelev.github.com/retina/
http://menacingcloud.com/?
c=highPixelDensityDisplays
49. @2x, @1x 画像の振り分け
Media Query で背景画像を振り分ける
.selector {
background: url(../sample.png) no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 1.5) {
.selector {
background-image: url(../sample@2x.png);
background-size: cover;
}
}
50. @2x, @1x 画像の振り分け
CSS4 の「-webkit-image-set()」で振り分ける
.selector {
background:
-webkit-image-set (
url( sample.png ) 1x,
url( sample@2x.png ) 2x
}
);
51. @2x, @1x 画像の振り分け
Media Query のJS版
「window.matchMedia」で振り分ける
var mq = window.matchMedia(
"only screen and (
-webkit-min-device-pixel-ratio: 1.5)"
);
if(mq.matches) {
...
}
52. @2x, @1x 画像の振り分け
Cloud の画像振り分けサービスで解決
ReSRC.it
Sencha.io Src
http://www.resrc.it/
http://www.sencha.com/learn/how-touse-src-sencha-io/
59. Fireworks的 脱ビットマップ
SVG + Web Fonts
• ベクター(SVG)は
ピクセルに依存しない
• FWでは拡張機能を使って
SVG出力できる
• Web Fonts 化すれば
色・サイズをCSSで容易に
変更可能
• 軽い
60. Fireworks的 脱ビットマップ
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>
61. Fireworks的 脱ビットマップ
Data URI Scheme
• Base64 形式で、
HTMLやCSSに直接記述
• gzip が有効になる (軽い)
• 内実、ビットマップですが...
• 変換拡張機能が出る噂も
data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgA
AAABQCAYAAABoMayFAAAABHNCSVQICAgIf
AAAAAlwSFlzAAALEgAACxIB0t1+/
AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRml
vcmtzIENTNui8sowAAAJ/
cHJWV3ic7ZffkZswEMZlEclaiSJSgm/
ck5+vHXeSpxSQcQXXRBrIhOxKAvNH4nwzh
1hYBPJvdz+B5F9/f/5W7+q9k+3W3Xi/
drdLd712Vz6eu8ulu/BRdedzd1ad4sdgsP
O9t7ABx988MEHH3zwwQcffPDBBx988MEHH
+MTb34nK/P3ovsKP9BeVuR72m0v8kOKrs2
iD+FF28L3Q1NZ/z7CQNv49+tK/jQS6Wn+T
62. Fireworks的 脱ビットマップ
Data URI Scheme への変換ツール
Data URI Converter
duri.me a super simple dataURI tool
http://www.macupdate.com/app/mac/
46143/data-uri-converter
http://duri.me