HiDPI時代のFireworks

Transcript

1. HiDPI ࣌୅ͷ Fireworks দా௚थ Flickr : ebayink
2. ݄ ൃച
   দా௚थ
3. σόΠεͷߴղ૾౓Խ Retina Display ୅දతͳ΋ͷ͕ɺ"QQMF੡඼ͷ (iPhone 326 ppi) (iPad 264 ppi) What’s HiDPI ?
4. HiDPI = ߴϐΫηϧີ౓ = ߴ
   device-pixel-ratio
5. device-pixel-ratio ?
6. device-pixel-ratio )5.-ίϯςϯπͷQYΛ ࣮ࡍͷσόΠε্Ͱ ԿഒͷQYͰ ඳը͢Δ͔Λࣔ͢਺஋
7. ͑ɺͳΜͯʁ は Flickr : 5TBIJ
   -FWFOU-FWJ
8. device-pixel-ratio = 2
9. device-pixel-ratio = 2 @1x Resolution (4dpx) @2x Resolution (16dpx)
10. <img src="xxx.png" width="320"> device-pixel-ratio = 2
11. iPhone 4ʙ Android 2 1.5 ͕ଟ͍ device-pixel-ratio 326 ppi 250 ppi
12. 3 device-pixel-ratio INFOBAR A02 Xperia Z HTC J butterfly 440 ppi
13. ਐΈଓ͚Δɺ σόΠεͷ
    )J%1*
    Խ Flickr : Jeffrey
14. WORKFLOW for HIDPI
15. J04ΞϓϦσβΠϯͷ3FUJOBରԠ ϫʔΫϑϩʔ͕࿩୊ʹ΋ͳΓ·ͨ͠ IUUQpSFXPSLTTNBTIJOHNBHB[JOFDPNEFTJHOJPTBQQTXJUIBEPCFpSFXPSLT
16. όγϟϩά
    
    3FUJOBରԠ༻ʹϖʔδΛ ෼͚Δ'JSFXPSLTίϚϯυ IUUQDSFBUJWFUXFFUOFUCMPHSFUJOBJNBHFFYQPSUFSIUNM
17. ը૾Λ3FUJOBରԠͰॻ͖ग़͢͠Δ 'JSFXPSLTͷ֦ுػೳ࡞ͬͨΑɻ IUUQDSFBUJWFUXFFUOFUCMPHSFUJOBJNBHFFYQPSUFSIUNM
18. גࣜձࣾ·΅Ζ͠ ·ͭͩͳ͓͖͞Μ
    ͷ৔߹
19. Χϯόε͸ɺجຊతʹ
    X
    QY ϏοτϚοϓ͸·ͣγϯϘϧԽ !Y
    ͷը૾͚ͩॻ͖ग़͠ !Y
    ͷը૾͸ҰׅͰ൒෼ʹϦαΠζ $44
    47(
    8FC
    'POUT
    Λ׆༻
20. Χϯόε͸
    ԣ෯
    QY
21. Χϯόε͸
    ԣ෯
    QY 640px w ଟ͘ͷεϚϗͷ ϒϥ΢β͕ɺԣ෯
    QY
    ͳͨΊ w ͦͷ··ॻ͖ग़ͤ͹ɺ 3FUJOB
    ରԠՄ w ίʔμʔ͕ผͷ৔߹ Ͱ΋ɺࣦഊ͢Δ͜ͱ͕ ͳ͍ ϝϦοτ
22. 640px w ͢΂ͯͷύʔπɺ ςΩετͷαΠζΛ ഒʹܭࢉ͢Δඞཁ͕ ͋Δ w ࣮ػͷ࣮ੇͱͷࠩҟ͕ ͋ΓɺαΠζײ͕ ͔ͭΈʹ͍͘ σϝϦοτ Χϯόε͸
    ԣ෯
    QY
23. Χϯόε͸
    ԣ෯
    QY w ͋ͱ͔Β
    !Y
    ը૾͕ ࡞Γʹ͍͘ w ϏοτϚοϓΛ ֦େ͢ΔͱྼԽ͢Δ w ςΩετͷϑΥϯτ αΠζ͕͓͔͘͠ͳΔ w εϥΠε่͕ΕΔ w ॻ͖ग़ͨ͠ޙͰഒʹ Ͱ͖ͳ͍ 320px σϝϦοτ Χϯόε͕
    ԣ෯
    QY
    ͩͱ
24. Χϯόε͸
    ԣ෯
    QY ࣮ػͰͷαΠζײ͕ ෼͔Γʹ͚͘Ε͹ ࡞ͬͨΧϯϓʹɺ ڞ௨ϥΠϒϥϦͷ ʮJ1IPOF
    ˠ
    )BSEXBSFʯΛ ॏͶͯΈ·͠ΐ͏ ը໘಺͕
    QY
    ʹͳ͍ͬͯ·͢
25. Χϯόε͸
    ԣ෯
    QY ͦΕͰ΋·ͩɺ ࣮ػͰͷαΠζײ͕ ෼͔Γʹ͚͘Ε͹ LiveView https://itunes.apple.com/jp/app/liveview/id301069270?mt=8
27. Χϯόε͸
    ԣ෯
    QY QY
    ͷେ͖͍αΠζͰ ࡞͓͚ͬͯ͹ɺ খ͍͞αΠζ͸Ͳ͏ͱͰ΋ͳΔʂ
28. ഒͰ࡞Δίπ
29. ഒͰ࡞Δίπ _ࢀߟ Workflow OptimizationDesign Cutting Edge iOS Apps With Adobe Fireworks http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/ ߴ͞ɺ෯ɺCPSEFS
    ෯ɺ ͢΂ͯΛۮ਺஋Ͱ࡞Δ ʹॖখͨ͠ࡍɺΤοδ͕ ϘέΔͨΊ Why ?
30. ഒͰ࡞Δίπ _ࢀߟ Workflow OptimizationDesign Cutting Edge iOS Apps With Adobe Fireworks http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/ 1IPUPTIPQ
    ϥΠϒ ΤϑΣΫτ͸࢖Θͳ͍ ֦େॖখͨ͠ࡍɺൺྫͯ͠ ϦαΠζ͞Εͳ͍ͨΊ Why ?
31. ഒͰ࡞Δίπ _ࢀߟ Workflow OptimizationDesign Cutting Edge iOS Apps With Adobe Fireworks http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/ ؙ֯͸ɺͳΔ΂͘ $44
    Ͱ࣮૷͢Δ ॖখͨ͠ࡍɺͭͿΕͯ͠·͏ ͜ͱ͕͋ΔͨΊ Why ?
32. ഒͰ࡞Δίπ ඪ४ͷςΫενϟ͸ ࢖Θͳ͍ ςΫενϟ͸ഒαΠζ͕ͳ͘ɺ ϦαΠζ΋Ͱ͖ͳ͍ͨΊ _ࢀߟ Workflow OptimizationDesign Cutting Edge iOS Apps With Adobe Fireworks http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/ Why ?
33. ഒͰ࡞Δίπ Subtle Patterns ߴ඼࣭ͳςΫενϟΛ !Y
    !Y
    ͷηοτͰ ഑෍͍ͯ͠Δ Why ? _ࢀߟ Subtle Patterns http://subtlepatterns.com
34. ഒͰ࡞Δίπ In general, bitmaps are your enemy when designing iOS apps. Ivo Mynttinen ͬ͘͟Γ͍͑͹ɺJ04ΞϓϦΛ σβΠϯ͢Δ্ͰϏοτϚοϓ͸ ܅ͷఢɺͬͯײ͡ɻ
35. ϏοτϚοϓ͸γϯϘϧԽ
36. Χϯόε͸
    ԣ෯
    QY άϥϑΟοΫ γϯϘϧ ඇഁյฤू ϏοτϚοϓ͸γϯϘϧԽ͓ͯ͘͠
37. Χϯόε͸
    ԣ෯
    QY άϥϑΟοΫγϯϘϧ ඇഁյฤू w γϯϘϧԽͨ͠ը૾͸ ֦େॖখΛ܁Γฦͯ͠΋ ྼԽ͠ͳ͍ w ճస΍Ώ͕ΈΛ Ճ͑ͯ΋ɺݩը૾ͷঢ়ଶ ͸ͦͷ·· w ը૾͸େ͖Ί QYҎ ্ Ͱ༻ҙ͠ɺ γϯϘϧԽ͔ͯ͠Β େ͖͞Λௐ੔ ϏοτϚοϓΛ ֦େɾॖখɾճస γϯϘϧΛ ֦େɾॖখɾճస ྼԽ อ࣋ ϏοτϚοϓ͸γϯϘϧԽ͓ͯ͘͠
38. ϏοτϚοϓ͸γϯϘϧԽ͓ͯ͘͠ γϯϘϧͷ஫ҙ఺ γϯϘϧͷதͰ͸ ৐ࢉɾεΫϦʔϯͳͲͷ ϨΠϠʔελΠϧ͸࢖͑ͳ͍ γϯϘϧͷதͷ εϥΠεͷॻ͖ग़͕͠όάΔ ʢ$4ҎԼͷ৔߹ʣ
39. ϏοτϚοϓ͸γϯϘϧԽ͓ͯ͘͠ γϯϘϧԽ͓͚ͯ͠͹ɺ QY
    ͔Β֦େͯ͠࢖͏ͳͲ Ͳ͏ͱͰ΋ͳΔʂ
40. !Y
    ͱ
    !Y
    ͷը૾ॻ͖ग़͠
41. !Y
    ͱ
    !Y
    ͷը૾ॻ͖ग़͠ ·ͣ͸ɺ'8
    ͔Β
    !Y
    ͷը૾Λॻ͖ग़͢ όονͰҰׅͰ൒෼ʹϦαΠζͯ͠
    !Y
    Λ༻ҙ
42. !Y
    ͱ
    !Y
    ͷը૾ॻ͖ग़͠ ํ๏
    ͦͷ Automator w ʮ!Yʯͷը૾Λෳ੡ w αΠζௐ੔Ͱ
    
    ʹ ϦαΠζ w ϑΝΠϧ໊͔Β ʮ!YʯΛ࡟আ͢Δ w BQQ
    ԽͰ͖ΔͷͰศར
43. !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 ํ๏
    ͦͷ
44. !Y
    ͱ
    !Y
    ͷը૾ॻ͖ग़͠ w ઌͷҊͱಉ͜͡ͱ͕Մೳ w '8ίϚϯυԽͰ͖Δ w 8JOEPXT
    Ͱ΋
    0, w ઌͷҊΑΓը࣭͕ ྑ͛͞ w ੜ੒ͨ͠ը૾αΠζ͕ ܰΊ FW’s Batch ํ๏
    ͦͷ
45. !Y
    !Y
    ը૾ͷৼΓ෼͚͸ʁ
46. sample-image@2x.png sample-image.png !Y
    !Y
    ը૾ͷৼΓ෼͚ K2VFSZͰʮdevicePixelRatioʯΛ൑ผ͢Δ EFWJDF1JYFM3BUJP
    ͕ʮʯҎ্ͷσόΠεͰ͸ɺ JNH
    Λʮˎˎˎ!YQOHʯͳͲ
    ϑΝΠϧ໊ʹ
    !Y
    ͕͍ͭͨํʹࠩ͠ସ͑Δ sample-image.png
47. !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<l; i++) { var src = imgHidpi[i].src; src = src.replace(/\.(png|jpg|gif)+$/i, '@2x.$1'); imgHidpi[i].src = src; }; } });
48. !Y
    !Y
    ը૾ͷৼΓ෼͚ @ࢀߟ Adaptation for Retina display http://egorkhmelev.github.com/retina/ Optimising for High Pixel Density Displays. http://menacingcloud.com/? c=highPixelDensityDisplays
49. !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; } }
50. !Y
    !Y
    ը૾ͷৼΓ෼͚ $44
    ͷʮ-webkit-image-set()ʯͰৼΓ෼͚Δ .selector { background: ɹɹ-webkit-image-set ( ɹɹɹurl( sample.png ) 1x, ɹɹɹurl( sample@2x.png ) 2x ɹ ); }
51. !Y
    !Y
    ը૾ͷৼΓ෼͚ .FEJB
    2VFSZ
    ͷ+4൛ ňwindow.matchMediaʯͰৼΓ෼͚Δ var mq = window.matchMedia( "only screen and ( -webkit-min-device-pixel-ratio: 1.5)" ); if(mq.matches) { ... }
52. !Y
    !Y
    ը૾ͷৼΓ෼͚ Cloud ͷը૾ৼΓ෼͚αʔϏεͰղܾ ReSRC.it http://www.resrc.it/ Sencha.io Src http://www.sencha.com/learn/how-to- use-src-sencha-io/
53. !Y
    !Y
    ը૾ͷৼΓ෼͚ +4ϥΠϒϥϦʮConditionizrʯͰৼΓ෼͚Δ ߴਫ਼ࡉσόΠεʹͷΈʹద༻ͤ͞Δ +4
    $44
    $MBTT
    ΛৼΓ෼͚ΒΕΔ <html class="retina"> <script> conditionizr({ retina : { scripts: true, styles: true, ɹɹɹɹɹɹɹɹɹɹclasses: true } }); </script> Conditionizr http://conditionizr.com
54. !Y
    !Y
    ը૾ͷৼΓ෼͚ ͨͩɺ͜Ε͔Β͸!Y
    ͷը૾͸ඞཁͳ͍͔΋ w ࠓ΍ϞόΠϧσόΠεͷ͢΂͕ͯ)J%1* w 1$ͷ)J%1*Խ΋͜Ε͔Βීٴʁ w ͦ΋ͦ΋ɺ38%ͷීٴͰϐΫηϧʹґଘ ͠ͳ͍σβΠϯ͕ٻΊΒΕΔ ୤ϏοτϚοϓ
55. WORKFLOW for HIDPI NO MORE BITMAP
56. )J%1*ରԠͷ ߴղ૾౓ͳ ը૾͸ॏ͍ σόΠεͷ ը໘αΠζ͕ ߋʹଟ༷Խ ϏοτϚοϓը૾ͷ՝୊
57. ϐΫηϧύʔϑΣΫτͳ ϏοτϚοϓʹཔΕͳ͍࣌୅ JNHը૾͸ࣸਅ΍ਤ൛ʹͷΈ࢖͏Α͏ʹͯ͠ɺ ΞΠίϯͳͲͷڞ௨ίϯϙʔωϯτ͸ ୤ϏοτϚοϓΛ໨ࢦ͢
58. 'JSFXPSLTత
    ୤ϏοτϚοϓ ͱ͍͏ΑΓɺ୤JNHཁૉ
59. 'JSFXPSLTత
    ୤ϏοτϚοϓ SVG + Web Fonts w ϕΫλʔ 47( ͸ ϐΫηϧʹґଘ͠ͳ͍ w '8Ͱ͸֦ுػೳΛ࢖ͬͯ 47(ग़ྗͰ͖Δ w 8FC
    'POUT
    Խ͢Ε͹ ৭ɾαΠζΛ$44Ͱ༰қʹ มߋՄೳ w ͍ܰ
60. 'JSFXPSLTత
    ୤ϏοτϚοϓ 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. '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
62. '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
63. 'JSFXPSLTత
    ୤ϏοτϚοϓ Data URI Scheme ΁ͷม׵πʔϧ Sublime Text 2 + Image2Base64 https://github.com/tm-minty/sublime-text-2-image2base64
64. 'JSFXPSLTత
    ୤ϏοτϚοϓ @༨ஊ 'JSFXPSLT
    ͷ
    $44
    εϓϥΠτ ػೳ͸ɺ)J%1*࣌୅Ͱ͸ ࢖͑ͳ͍ 3FUJOBରԠʢCBDLHSPVOETJ[F
    Λ
    ൒෼ʹʣͯ͘͠Εͳ͍ 4B44
    
    $PNQBTT
    ͳͲʹ ೚ͤͨ΄͏͕͍͍
65. ·ͱΊ Χϯόε͸ɺجຊతʹ
    ԣ෯
    QY ϏοτϚοϓ͸γϯϘϧԽ ͳΔ΂͘ϕΫλʔʹΑΔύʔπ࡞Γ ͦͷάϥϑΟοΫɺϏοτϚοϓͰ ͋Δ΂͖͔ʁΛߟ͑Δ $44
    47(
    ͕ग़ྗͰ͖Δͷ͕'8ͷڧΈ
66. ࠷ޙʹͻͱ͜ͱ
67. 'JSFXPSLTؔ܎ͳ͍ωλ͕ଟͯ͘ ͍͢·ͤΜͰͨ͠
68. ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ দా௚थ Flickr : 4UFQIFO
    (FZFS