HiDPI時代のFireworks

Slide 1

Slide 1 text

HiDPI ࣌୅ͷ Fireworks দా௚थ Flickr : ebayink

Slide 2

Slide 2 text

݄ ൃച দా௚थ

Slide 3

Slide 3 text

σόΠεͷߴղ૾౓Խ Retina Display ୅දతͳ΋ͷ͕ɺ"QQMF੡඼ͷ (iPhone 326 ppi) (iPad 264 ppi) What’s HiDPI ?

Slide 4

Slide 4 text

HiDPI = ߴϐΫηϧີ౓ = ߴdevice-pixel-ratio

Slide 5

Slide 5 text

device-pixel-ratio ?

Slide 6

Slide 6 text

device-pixel-ratio )5.-ίϯςϯπͷQYΛ ࣮ࡍͷσόΠε্Ͱ ԿഒͷQYͰ ඳը͢Δ͔Λࣔ͢਺஋

Slide 7

Slide 7 text

͑ɺͳΜͯʁ は Flickr : 5TBIJ-FWFOU-FWJ

Slide 8

Slide 8 text

device-pixel-ratio = 2

Slide 9

Slide 9 text

device-pixel-ratio = 2 @1x Resolution (4dpx) @2x Resolution (16dpx)

Slide 10

Slide 10 text

device-pixel-ratio = 2

Slide 11

Slide 11 text

iPhone 4ʙ Android 2 1.5 ͕ଟ͍ device-pixel-ratio 326 ppi 250 ppi

Slide 12

Slide 12 text

3 device-pixel-ratio INFOBAR A02 Xperia Z HTC J butterfly 440 ppi

Slide 13

Slide 13 text

ਐΈଓ͚Δɺ σόΠεͷ)J%1*Խ Flickr : Jeffrey

Slide 14

Slide 14 text

WORKFLOW for HIDPI

Slide 15

Slide 15 text

J04ΞϓϦσβΠϯͷ3FUJOBରԠ ϫʔΫϑϩʔ͕࿩୊ʹ΋ͳΓ·ͨ͠ IUUQpSFXPSLTTNBTIJOHNBHB[JOFDPNEFTJHOJPTBQQTXJUIBEPCFpSFXPSLT

Slide 16

Slide 16 text

όγϟϩά3FUJOBରԠ༻ʹϖʔδΛ ෼͚Δ'JSFXPSLTίϚϯυ IUUQDSFBUJWFUXFFUOFUCMPHSFUJOBJNBHFFYQPSUFSIUNM

Slide 17

Slide 17 text

ը૾Λ3FUJOBରԠͰॻ͖ग़͢͠Δ 'JSFXPSLTͷ֦ுػೳ࡞ͬͨΑɻ IUUQDSFBUJWFUXFFUOFUCMPHSFUJOBJNBHFFYQPSUFSIUNM

Slide 18

Slide 18 text

גࣜձࣾ·΅Ζ͠ ·ͭͩͳ͓͖͞Μͷ৔߹

Slide 19

Slide 19 text

Χϯόε͸ɺجຊతʹXQY ϏοτϚοϓ͸·ͣγϯϘϧԽ !Yͷը૾͚ͩॻ͖ग़͠ !Yͷը૾͸ҰׅͰ൒෼ʹϦαΠζ $44 47( 8FC'POUTΛ׆༻

Slide 20

Slide 20 text

Χϯόε͸ԣ෯QY

Slide 21

Slide 21 text

Χϯόε͸ԣ෯QY 640px w ଟ͘ͷεϚϗͷ ϒϥ΢β͕ɺԣ෯ QYͳͨΊ w ͦͷ··ॻ͖ग़ͤ͹ɺ 3FUJOBରԠՄ w ίʔμʔ͕ผͷ৔߹ Ͱ΋ɺࣦഊ͢Δ͜ͱ͕ ͳ͍ ϝϦοτ

Slide 22

Slide 22 text

640px w ͢΂ͯͷύʔπɺ ςΩετͷαΠζΛ ഒʹܭࢉ͢Δඞཁ͕ ͋Δ w ࣮ػͷ࣮ੇͱͷࠩҟ͕ ͋ΓɺαΠζײ͕ ͔ͭΈʹ͍͘ σϝϦοτ Χϯόε͸ԣ෯QY

Slide 23

Slide 23 text

Χϯόε͸ԣ෯QY w ͋ͱ͔Β!Yը૾͕ ࡞Γʹ͍͘ w ϏοτϚοϓΛ ֦େ͢ΔͱྼԽ͢Δ w ςΩετͷϑΥϯτ αΠζ͕͓͔͘͠ͳΔ w εϥΠε่͕ΕΔ w ॻ͖ग़ͨ͠ޙͰഒʹ Ͱ͖ͳ͍ 320px σϝϦοτ Χϯόε͕ԣ෯QYͩͱ

Slide 24

Slide 24 text

Χϯόε͸ԣ෯QY ࣮ػͰͷαΠζײ͕ ෼͔Γʹ͚͘Ε͹ ࡞ͬͨΧϯϓʹɺ ڞ௨ϥΠϒϥϦͷ ʮJ1IPOFˠ)BSEXBSFʯΛ ॏͶͯΈ·͠ΐ͏ ը໘಺͕QYʹͳ͍ͬͯ·͢

Slide 25

Slide 25 text

Χϯόε͸ԣ෯QY ͦΕͰ΋·ͩɺ ࣮ػͰͷαΠζײ͕ ෼͔Γʹ͚͘Ε͹ LiveView https://itunes.apple.com/jp/app/liveview/id301069270?mt=8

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Χϯόε͸ԣ෯QY QYͷେ͖͍αΠζͰ ࡞͓͚ͬͯ͹ɺ খ͍͞αΠζ͸Ͳ͏ͱͰ΋ͳΔʂ

Slide 28

Slide 28 text

ഒͰ࡞Δίπ

Slide 29

Slide 29 text

ഒͰ࡞Δίπ _ࢀߟ Workflow OptimizationDesign Cutting Edge iOS Apps With Adobe Fireworks http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/ ߴ͞ɺ෯ɺCPSEFS෯ɺ ͢΂ͯΛۮ਺஋Ͱ࡞Δ ʹॖখͨ͠ࡍɺΤοδ͕ ϘέΔͨΊ Why ?

Slide 30

Slide 30 text

ഒͰ࡞Δίπ _ࢀߟ Workflow OptimizationDesign Cutting Edge iOS Apps With Adobe Fireworks http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/ 1IPUPTIPQϥΠϒ ΤϑΣΫτ͸࢖Θͳ͍ ֦େॖখͨ͠ࡍɺൺྫͯ͠ ϦαΠζ͞Εͳ͍ͨΊ Why ?

Slide 31

Slide 31 text

ഒͰ࡞Δίπ _ࢀߟ Workflow OptimizationDesign Cutting Edge iOS Apps With Adobe Fireworks http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/ ؙ֯͸ɺͳΔ΂͘ $44Ͱ࣮૷͢Δ ॖখͨ͠ࡍɺͭͿΕͯ͠·͏ ͜ͱ͕͋ΔͨΊ Why ?

Slide 32

Slide 32 text

ഒͰ࡞Δίπ ඪ४ͷςΫενϟ͸ ࢖Θͳ͍ ςΫενϟ͸ഒαΠζ͕ͳ͘ɺ ϦαΠζ΋Ͱ͖ͳ͍ͨΊ _ࢀߟ Workflow OptimizationDesign Cutting Edge iOS Apps With Adobe Fireworks http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/ Why ?

Slide 33

Slide 33 text

ഒͰ࡞Δίπ Subtle Patterns ߴ඼࣭ͳςΫενϟΛ !Y !YͷηοτͰ ഑෍͍ͯ͠Δ Why ? _ࢀߟ Subtle Patterns http://subtlepatterns.com

Slide 34

Slide 34 text

ഒͰ࡞Δίπ In general, bitmaps are your enemy when designing iOS apps. Ivo Mynttinen ͬ͘͟Γ͍͑͹ɺJ04ΞϓϦΛ σβΠϯ͢Δ্ͰϏοτϚοϓ͸ ܅ͷఢɺͬͯײ͡ɻ

Slide 35

Slide 35 text

ϏοτϚοϓ͸γϯϘϧԽ

Slide 36

Slide 36 text

Χϯόε͸ԣ෯QY άϥϑΟοΫ γϯϘϧ ඇഁյฤू ϏοτϚοϓ͸γϯϘϧԽ͓ͯ͘͠

Slide 37

Slide 37 text

Χϯόε͸ԣ෯QY άϥϑΟοΫγϯϘϧ ඇഁյฤू w γϯϘϧԽͨ͠ը૾͸ ֦େॖখΛ܁Γฦͯ͠΋ ྼԽ͠ͳ͍ w ճస΍Ώ͕ΈΛ Ճ͑ͯ΋ɺݩը૾ͷঢ়ଶ ͸ͦͷ·· w ը૾͸େ͖Ί QYҎ ্ Ͱ༻ҙ͠ɺ γϯϘϧԽ͔ͯ͠Β େ͖͞Λௐ੔ ϏοτϚοϓΛ ֦େɾॖখɾճస γϯϘϧΛ ֦େɾॖখɾճస ྼԽ อ࣋ ϏοτϚοϓ͸γϯϘϧԽ͓ͯ͘͠

Slide 38

Slide 38 text

ϏοτϚοϓ͸γϯϘϧԽ͓ͯ͘͠ γϯϘϧͷ஫ҙ఺ γϯϘϧͷதͰ͸ ৐ࢉɾεΫϦʔϯͳͲͷ ϨΠϠʔελΠϧ͸࢖͑ͳ͍ γϯϘϧͷதͷ εϥΠεͷॻ͖ग़͕͠όάΔ ʢ$4ҎԼͷ৔߹ʣ

Slide 39

Slide 39 text

ϏοτϚοϓ͸γϯϘϧԽ͓ͯ͘͠ γϯϘϧԽ͓͚ͯ͠͹ɺ QY͔Β֦େͯ͠࢖͏ͳͲ Ͳ͏ͱͰ΋ͳΔʂ

Slide 40

Slide 40 text

!Yͱ!Yͷը૾ॻ͖ग़͠

Slide 41

Slide 41 text

!Yͱ!Yͷը૾ॻ͖ग़͠ ·ͣ͸ɺ'8͔Β!Yͷը૾Λॻ͖ग़͢ όονͰҰׅͰ൒෼ʹϦαΠζͯ͠!YΛ༻ҙ

Slide 42

Slide 42 text

!Yͱ!Yͷը૾ॻ͖ग़͠ ํ๏ͦͷ Automator w ʮ!Yʯͷը૾Λෳ੡ w αΠζௐ੔Ͱʹ ϦαΠζ w ϑΝΠϧ໊͔Β ʮ!YʯΛ࡟আ͢Δ w BQQԽͰ͖ΔͷͰศར

Slide 43

Slide 43 text

!Yͱ!Yͷը૾ॻ͖ग़͠ @ࢀߟ JQIPOF༻ͷը૾!YQOH͔Β௨ৗͷΛੜ੒ IUUQEIBUFOBOFKQEPPSTJEF Shell Script w pOEͰʮ!Yʯͷ ը૾Λ୳͢ w TJQTίϚϯυͰԣ෯Λ औಘ w TJQTίϚϯυͰʹ ϦαΠζ w XBUDIͰ͖ͨΓศར #!/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 ํ๏ͦͷ

Slide 44

Slide 44 text

!Yͱ!Yͷը૾ॻ͖ग़͠ w ઌͷҊͱಉ͜͡ͱ͕Մೳ w '8ίϚϯυԽͰ͖Δ w 8JOEPXTͰ΋0, w ઌͷҊΑΓը࣭͕ ྑ͛͞ w ੜ੒ͨ͠ը૾αΠζ͕ ܰΊ FW’s Batch ํ๏ͦͷ

Slide 45

Slide 45 text

!Y !Yը૾ͷৼΓ෼͚͸ʁ

Slide 46

Slide 46 text

sample-image@2x.png sample-image.png !Y !Yը૾ͷৼΓ෼͚ K2VFSZͰʮdevicePixelRatioʯΛ൑ผ͢Δ EFWJDF1JYFM3BUJP͕ʮʯҎ্ͷσόΠεͰ͸ɺ JNHΛʮˎˎˎ!YQOHʯͳͲ ϑΝΠϧ໊ʹ!Y͕͍ͭͨํʹࠩ͠ସ͑Δ sample-image.png

Slide 47

Slide 47 text

!Y !Yը૾ͷৼΓ෼͚ K2VFSZͰʮ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

Slide 48

Slide 48 text

!Y !Yը૾ͷৼΓ෼͚ @ࢀߟ Adaptation for Retina display http://egorkhmelev.github.com/retina/ Optimising for High Pixel Density Displays. http://menacingcloud.com/? c=highPixelDensityDisplays

Slide 49

Slide 49 text

!Y !Yը૾ͷৼΓ෼͚ 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; } }

Slide 50

Slide 50 text

!Y !Yը૾ͷৼΓ෼͚ $44ͷʮ-webkit-image-set()ʯͰৼΓ෼͚Δ .selector { background: ɹɹ-webkit-image-set ( ɹɹɹurl( sample.png ) 1x, ɹɹɹurl( sample@2x.png ) 2x ɹ ); }

Slide 51

Slide 51 text

!Y !Yը૾ͷৼΓ෼͚ .FEJB2VFSZͷ+4൛ ňwindow.matchMediaʯͰৼΓ෼͚Δ var mq = window.matchMedia( "only screen and ( -webkit-min-device-pixel-ratio: 1.5)" ); if(mq.matches) { ... }

Slide 52

Slide 52 text

!Y !Yը૾ͷৼΓ෼͚ Cloud ͷը૾ৼΓ෼͚αʔϏεͰղܾ ReSRC.it http://www.resrc.it/ Sencha.io Src http://www.sencha.com/learn/how-to- use-src-sencha-io/

Slide 53

Slide 53 text

!Y !Yը૾ͷৼΓ෼͚ +4ϥΠϒϥϦʮConditionizrʯͰৼΓ෼͚Δ ߴਫ਼ࡉσόΠεʹͷΈʹద༻ͤ͞Δ +4 $44 $MBTTΛৼΓ෼͚ΒΕΔ conditionizr({ retina : { scripts: true, styles: true, ɹɹɹɹɹɹɹɹɹɹclasses: true } }); Conditionizr http://conditionizr.com

Slide 54

Slide 54 text

!Y !Yը૾ͷৼΓ෼͚ ͨͩɺ͜Ε͔Β͸!Yͷը૾͸ඞཁͳ͍͔΋ w ࠓ΍ϞόΠϧσόΠεͷ͢΂͕ͯ)J%1* w 1$ͷ)J%1*Խ΋͜Ε͔Βීٴʁ w ͦ΋ͦ΋ɺ38%ͷීٴͰϐΫηϧʹґଘ ͠ͳ͍σβΠϯ͕ٻΊΒΕΔ ୤ϏοτϚοϓ

Slide 55

Slide 55 text

WORKFLOW for HIDPI NO MORE BITMAP

Slide 56

Slide 56 text

)J%1*ରԠͷ ߴղ૾౓ͳ ը૾͸ॏ͍ σόΠεͷ ը໘αΠζ͕ ߋʹଟ༷Խ ϏοτϚοϓը૾ͷ՝୊

Slide 57

Slide 57 text

ϐΫηϧύʔϑΣΫτͳ ϏοτϚοϓʹཔΕͳ͍࣌୅ JNHը૾͸ࣸਅ΍ਤ൛ʹͷΈ࢖͏Α͏ʹͯ͠ɺ ΞΠίϯͳͲͷڞ௨ίϯϙʔωϯτ͸ ୤ϏοτϚοϓΛ໨ࢦ͢

Slide 58

Slide 58 text

'JSFXPSLTత୤ϏοτϚοϓ ͱ͍͏ΑΓɺ୤JNHཁૉ

Slide 59

Slide 59 text

'JSFXPSLTత୤ϏοτϚοϓ SVG + Web Fonts w ϕΫλʔ 47( ͸ ϐΫηϧʹґଘ͠ͳ͍ w '8Ͱ͸֦ுػೳΛ࢖ͬͯ 47(ग़ྗͰ͖Δ w 8FC'POUTԽ͢Ε͹ ৭ɾαΠζΛ$44Ͱ༰қʹ มߋՄೳ w ͍ܰ

Slide 60

Slide 60 text

'JSFXPSLTత୤ϏοτϚοϓ SVG ΛରԠσόΠεͰ͚ͩ࢖͏ if(!Modernizr.svg) { $('img[src*="svg"]').attr('src', function() { return $(this).attr('src').replace('.svg', '.png'); }); }

Slide 61

Slide 61 text

'JSFXPSLTత୤ϏοτϚοϓ Data URI Scheme w #BTFܗࣜͰɺ )5.-΍$44ʹ௚઀هड़ w H[JQ͕༗ޮʹͳΔ ͍ܰ w ಺࣮ɺϏοτϚοϓͰ͕͢ w ม׵֦ுػೳ͕ग़Δӟ΋ 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

Slide 62

Slide 62 text

'JSFXPSLTత୤ϏοτϚοϓ Data URI Scheme ΁ͷม׵πʔϧ Data URI Converter http://www.macupdate.com/app/mac/ 46143/data-uri-converter duri.me a super simple dataURI tool http://duri.me

Slide 63

Slide 63 text

'JSFXPSLTత୤ϏοτϚοϓ Data URI Scheme ΁ͷม׵πʔϧ Sublime Text 2 + Image2Base64 https://github.com/tm-minty/sublime-text-2-image2base64

Slide 64

Slide 64 text

'JSFXPSLTత୤ϏοτϚοϓ @༨ஊ 'JSFXPSLTͷ$44εϓϥΠτ ػೳ͸ɺ)J%1*࣌୅Ͱ͸ ࢖͑ͳ͍ 3FUJOBରԠʢCBDLHSPVOETJ[FΛ ൒෼ʹʣͯ͘͠Εͳ͍ 4B44$PNQBTTͳͲʹ ೚ͤͨ΄͏͕͍͍

Slide 65

Slide 65 text

·ͱΊ Χϯόε͸ɺجຊతʹԣ෯QY ϏοτϚοϓ͸γϯϘϧԽ ͳΔ΂͘ϕΫλʔʹΑΔύʔπ࡞Γ ͦͷάϥϑΟοΫɺϏοτϚοϓͰ ͋Δ΂͖͔ʁΛߟ͑Δ $44 47(͕ग़ྗͰ͖Δͷ͕'8ͷڧΈ