㊗️Firefox&Edge対応！ WebPについて諸々

2019/3/2
@ Frontend Nagoya #9

Transcript

1. 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya ㊗
   'JSFGPY&EHFରԠʂ
 8FC1ʹ͍ͭͯॾʑ
   
   !
   'SPOUFOE
   /BHPZB
   
2. "HFOEB  Θͨ͘͠ʹ͍ͭͯ
    8FC1ͱ͸
    ࢖͓͏
    ࡞Ζ͏
    ͓·͚
3. Θͨ͘͠ʹ͍ͭͯ { "@context": "http://schema.org", "@type": "Person", "name": "Kyousuke Abe", "alternateName": "安部亨佑", "birthPlace": "Iwata, Shizuoka", "birthDate": "1982.9.24", "height": "181 cm", "weight": "68 kg", "gender": "male", "worksFor": "FRAME LUNCH Inc.", "workLocation": "Ohsu, Nagoya-shi”, "jobTitle": "Web engineer", "nationality": "Japanese", "url": "https://kaave.github.io", "sameAs": [ "https://twitter.com/junkjunctions", "https://github.com/kaave" ] } { "likes": [ "Vim-style key binding", "Emacs-style key binding", "ErgoDox", "TypeScript", "Scala", "React", "PostCSS", "fish shell", "Twitter", "Music", "Football", "Casual cycling”, "Bodyweight Workout", "Spicy foods", "Dried fruit", "American coffee" ] }
4. 8FC1ͱ͸
5. 8FC1ʢ΢Σοϐʔʣ͸ɺถ(PPHMF͕ ։ൃ͍ͯ͠ΔΦʔ ϓϯͳ੩ࢭըϑΥʔ ϚοτɻϑΝΠϧͷ֦ுࢠ͸ ʮXFCQʯɻ IUUQTKBXJLJQFEJBPSHXJLJ8FC1
6. -JHIUIPVTFͰ࢖͑ͱݴΘΕΔ͜ͱͰ΋
 ͓ͳ͡Έ IUUQTGSPOUFOEEPPSLFFQFSKQFWFOUT
7. ΢Σοϐʔ XFQQZ ʁ ˠΦϑΟγϟϧͳυΩϡϝϯτͰ
 ໌ݴͯ͠Δهड़Λݟ͚ͭͨΒڭ͍͑ͯͩ͘͞ʂ  IUUQTXXXZPVUVCFDPNXBUDI WQ4VE-.00B&U
    IUUQTXXXZPVUVCFDPNXBUDI WQ4VE-.00B&U
    IUUQTXXXZPVUVCFDPNXBUDI WQ4VE-.00B&U 8JLJQFEJBͩͱ͜ͷ൛͔Β্ههड़͕ೖͬͯΔΜͰ͕͢ɺ౰࣌ͷ8FC1ެࣜݟͯ΋ͦ͏͍͏هड़͕ͳ͔ͬͨ
 IUUQTKBXJLJQFEJBPSHXJOEFYQIQ UJUMF8FC1UZQFSFWJTJPOEJ⒎PMEJE
8. ಛ௃  ϥελը૾ͷ৽ܗࣜ ͱ͍ͬͯ΋೥ʹ஀ੜ
    ՄٯɺඇՄٯͲͬͪ΋0,
    ಁաνϟϯωϧ0,
    Ξχϝʔγϣϯ0,
    QOHʹൺ΂ͯॖΉ Մٯ࣌
    KQHʹൺ΂ͯॖΉ ඇՄٯ࣌ ˠKQH
   QOH
   HJGͷ͍͍ͱ͜ΖΛ͢΂ؚͯΜͩ
 ϥελը૾ΛʮऴΘΒͤΔʯଘࡏ
   ͔΋ IUUQTEFWFMPQFSTHPPHMFDPNTQFFEXFCQ
9. ରԠϒϥ΢β ˠ*&ͱ4BGBSJҎ֎͸0, IUUQTDBOJVTFDPNGFBUXFCQ
   
   ࣌ࠒऔಘ
10. ࢖͓͏
11. 8FC1ඇରԠͷϒϥ΢β͸
 ୅ସΛදࣔ͢Δඞཁ͕͋Δ
 
 ͷͰɺେࡶ೺ʹ෼͚ͯύλʔϯͰରԠ  αʔόαΠυͰରԠ
     ϑϩϯτΤϯυͰରԠ ˞ը૾޲͚$%/αʔϏε JNHJY
    'BTUMZ
    JNBHF
    PQUJNJ[FSͳͲ Λར༻͢Δͱ͍͏
 ෋߽తΞϓϩʔν΋͋Γ·ུ͕͢
12. αʔόαΠυͷ৔߹ "QBDIF΋OHJOY΋ ଟ෼ͦͷଞ΋  ϦΫΤετϔομͷ"DDFQU͕JNBHFXFCQ ΛؚΉ͔֬ೝ
     ؚΉ৔߹ɺࢦఆͷը૾ϑΝΠϧͷ8FC1൛͕ ͋Δ͔֬ೝ
     ͋ͬͨΒ֦ுࢠΛ෇͚ସ͑Δ෇͚Ճ͑ͯϧʔ ςΟϯάมߋ ˠ͍Ζ͍Ζඍົײ͕͍͢͝
13. ϑϩϯτΤϯυͷ৔߹  QJDUVSFλά
     ࠷ۙͷϑϨʔϜϫʔΫ
     CBDLHSPVOEJNBHF
14. QJDUVSFͷ৔߹ <picture> <source type="image/webp" srcset="pic.webp"> <img src="pic.jpg" alt="" class="Thumbnail__image"> </picture>  QJDUVSFʹTUZMF͋ͯͳ͍
     TPVSDFʹTUZMF͋ͯͳ͍
     ΫϥΠΞϯτʹϚον͢ΔTPVSDFཁૉ͕͋ͬͨΒ ֘౰ͷTSDΛJNH͔Βग़ྗɺΈ͍ͨͳಈ͖
     ඞͣకΊ͸JNHλάͰɺελΠϧΛ౰ͯΔͳΒ͜͜
     ςϯϓϨΤϯδϯͰίϯϙʔωϯτԽ͢Δͱָ
15. ϑϨʔϜϫʔΫͷ৔߹ αϯϓϧ͸7VF <template> <img :src="useSrc" :alt="useAlt"> </template> <script> import { isSupportWebP } from './isSupportWebP'; export default { props: { src: String, alt: String, }, computed: { useSrc() { return isSupportWebP ? this.src.replace(/\.\w+$/, '.webp') : this.src; }, useAlt() { return this.alt || ''; }, }, }; </script> ग़ྗ͞ΕΔIUNM͸͘͢͝εοΩϦ
 443͢ΔͳΒͦͷ͜ͱ΋ߟ͑·͠ΐ͏
16. CBDLHSPVOEJNBHFͷ৔߹͸
 ͪΐͬͱͩΔ͍ ˠ$44୯ମͰ͸Ͳ͏ʹ΋ͳΒͳ͍ͷͰɺ
 +4ͰରԠঢ়گΛௐ΂ɺ
 SPPU IUNM λάʹDMBTTΛ෇༩ͯ͠੾Γ෼͚Δ  .PEFSOJ[SΛ࢖༻͢Δ ུ
     ಉ͡ॲཧΛखॻ͖
17. खॻ͖͢Δͱ͜͏ <script> var features = ['webp', 'webplossless', 'webpalpha', 'webpanimation']; var kTestImages = { webp: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA", webplossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==", webpalpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/ Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==", webpanimation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD///// AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA" }; function checkWebpFeature(feature, callback) { var img = new Image(); img.onload = function () { callback(feature, img.width > 0 && img.height > 0) }; img.onerror = function () { callback(feature, false) }; img.src = "data:image/webp;base64," + kTestImages[feature]; } for (var i = 0, l = features.length; i < l; i += 1) { checkWebpFeature(features[i], function (feature, result) { var prefix = !result ? 'no-' : ''; document.documentElement.className += ' ' + prefix + feature; }) } </script> IUUQTEFWFMPQFSTHPPHMFDPNTQFFEXFCQGBR IMKBJO@ZPVS@PXO@KBWBTDSJQU
    Λͪΐͬͱվ଄
18. Ͱ$44͸͜͏ .BackgroundImage__image { background-size: cover; background-repeat: no-repeat; } .webp .BackgroundImage__image { background-image: url("/images/p_1.webp"); } .no-webp .BackgroundImage__image { background-image: url("/images/p_1.jpg"); } ·͊ී௨Ͱ͢
 ͨͩ͜Εͩͱɺ+4ແޮ؀ڥͰͳʹ΋දࣔ͞Εͳ͍ΜͰ͢ΑͶʜ
19. ࣮ࡍ;ͭ͏ʹ࢖͑Μͷʁ͸ҎԼͰ ˠ͍͚Δͬ͠ΐ IUUQTXFCQOFUMJGZDPNTVQQPSUIUNM
20. ͱ͸͍͏΋ͷͷɺαʔό΋
 ೦ͷҝݟͯ΋Β͍·͠ΐ͏  XFCQΛ·Δ͝ͱϒϩοΫ
     ϒϩοΫ͠ͳ͍͚ͲXFCQΛςΩετͰ഑৴
     ద౰ͳઃఆ͕ೖ͍ͬͯͯXFCQΛH[JQѹॖ ແବ ͳͲͳͲ͕͋Γ͑·͢
21. ࡞Ζ͏
22. 1IPUPTIPQʹϓϥάΠϯೖΕΔͱ͔ɺ 4LFUDI͔Β௚઀ॻ͖ग़͢ͷ΋
 ѱ͘͸ͳ͍Ͱ͕͢ ˞ϑΥτγϣͷϓϥάΠϯ͸
    IUUQTHJUIVCDPNGOPSEXBSF"EPCF8FC.
23. KQH΍QOHͳͲͷݩૉࡐΛ
 HVMQܦ༝ͷJNBHFNJOͰม׵͢Δͷָ͕  JNBHFNJOXFCQ
    QOH
    KQH༻
     JNBHFNJOHJGXFCQ
    HJG༻ brew install giflib libpng libjpeg ͕ଟ෼ඞཁ ݕূ͠ΜͲ͍ ˞ར༻ʹ͸04ʹϞδϡʔϧೖΕΔ
 ඞཁ͕͋Γ·ͯ͠ɺ.BDͷ৔߹
24. ࣮ࡍͷHVMQλεΫ͸͜Μͳײ͡ const gulp = require('gulp'); const imagemin = require('gulp-imagemin'); const webp = require('imagemin-webp'); const gif2webp = require('imagemin-gif2webp'); const extReplace = require('gulp-ext-replace'); gulp.task('image:webp', () => gulp .src('images/**/*.{jpg,jpeg,png}') .pipe(imagemin([webp({ quality: 80 })], { verbose: true })) .pipe(extReplace('.webp')) .pipe(gulp.dest('dest')), ); gulp.task('image:gif2webp', () => gulp .src('images/**/*.gif') .pipe(imagemin([gif2webp({ quality: 80, lossy: true })], { verbose: true })) .pipe(extReplace('.webp')) .pipe(gulp.dest('dest')), );
25. ͜ͷखͷπʔϧɺ
 ઃఆͭΊΜͷ͕ͩΔ͍
    ͩΑͶɺͰ͢ΑͶʜ
26. 4RVPPTI͕ศར IUUQTTRVPPTIBQQ
27. Ͱɺ࣮ࡍͲ͏ͳͷ͔
28. ϢʔεέʔεΛ૝ఆͭͭ͠ωλΛ༻ҙͯ͠ൺֱ  KQH
    WT
    .P[+1&(
     ૉਓͷࣸਅ ๻͕J1IPOF4&Ͱࡱͬͨࣸਅ
     ࢓্͕ͬͨࣸਅ VOTQMBTI
     QOH
    WT
    QOHRVBOU
     Πϥετ
     εΫγϣ ๻ͷద౰J1IPOF4&εΫγϣ
     ಁաೖΓͷࣸਅ QOHͩͱॏ࣮͗ͯ͢༻ʹ଱͑ͳ͍
     ๯಄Ͱݟͤͨɺ౰ΠϕϯτͷΩʔϏδϡΞϧ
     ΞχϝʔγϣϯHJG
    WT
    (JG4DBMF
    
    ''NQFH
     ಁա͋Δͳ͠
    ͍ͭͰʹಈըͱ΋ൺֱ
     ''NQFHͷίϚϯυ͸`ffmpeg -i input.gif -movflags faststart -pix_fmt yuv420p -vf "scale=trunc(iw/ 2)*2:trunc(ih/2)*2" output.mp4`
     NQ͸ผ్ѹॖ͔͚ΒΕ·͕͢ࠓճ͸εϧʔ
29. ݁Ռ RVBMJUZ
     ˞੨͕8FC1উ
    ੺͕ෛ
    ˞QOHRVBOUͷRVBMJUZ͸dࢦఆͷͨΊɺ×Λઃఆ
    ˞HJGTJDMF͸RVBMJUZͷઃఆ͕ͳ͍ͨΊɺPQUJNJ[BUJPO-FWFM
    Ͱઃఆ
30. ݁Ռ RVBMJUZ
     ˞੨͕8FC1উ
    ੺͕ෛ
    ˞QOHRVBOUͷRVBMJUZ͸dࢦఆͷͨΊɺ×Λઃఆ
    ˞HJGTJDMF͸RVBMJUZͷઃఆ͕ͳ͍ͨΊɺPQUJNJ[BUJPO-FWFM
    Ͱઃఆ
31. ݁Ռ RVBMJUZ
     ˞੨͕8FC1উ
    ੺͕ෛ
    ˞QOHRVBOUͷRVBMJUZ͸dࢦఆͷͨΊɺ×Λઃఆ
    ˞HJGTJDMF͸RVBMJUZͷઃఆ͕ͳ͍ͨΊɺPQUJNJ[BUJPO-FWFM
    Ͱઃఆ
32. ѹॖ࣌ؒ
    RVBMJUZ
     ˞.BDCPPL
    1SP
    
    JODI
    *OUFM
    $PSF
    J
    ()[
33. ѹॖ࣌ؒ
    RVBMJUZ
     ˞.BDCPPL
    1SP
    
    JODI
    *OUFM
    $PSF
    J
    ()[
34. ѹॖ࣌ؒ
    RVBMJUZ
     ˞.BDCPPL
    1SP
    
    JODI
    *OUFM
    $PSF
    J
    ()[
35. ҎԼ͔Β֬ೝͰ͖·͢ IUUQTXFCQOFUMJGZDPNEJ⒎IUNM
    ˞͓΋͍ͬ͢
36. ॴײ  ฏۉऔΔݶΓɺ֓Ͷ͔ͨ͠ʹڧ͍οο
     ͕ɺૉࡐ࣍ୈͰෛ͚Δ΋ͷ΋ී௨ʹ͋Δ͠ɺͱ͜ ͱΜ٧ΊΔͳΒͻͱͭͻͱͭ֬ೝͨ͠΄͏͕ྑ͍
     KQHͱQOH͕ࠞͬͨ͟Α͏ͳૉࡐʹ͸௒ڧ͍
     ը࣭ʹؔͯ͠͸໌ݴΛආ͚͍ͨͰ͕͢ɺ
 ແཧ΍ΓޠΔͱ௿ΫΦϦςΟઃఆ࣌ʹ͖Ε͍ʹݟ ͑Δͷ͸8FC1͔ͳ͊ʜʁ
     Ξχϝʔγϣϯ͸ಁա͕ͳ͚Ε͹ಈըͷ΄͏ָ͕ ͔΋Ͷ
     ѹॖ͸΍͍ΜͰαʔόαΠυͰόϯόϯѹॖ͢Δͷ ʹ͸ྑͦ͞͏
37. ·ͱΊᶃ  8FC1ͱ͸8FC഑৴ʹ͓͚Δϥελը૾ͷܾఆ൛
    ͔΋
     8FC1͸*&ͱ4BGBSJҎ֎ͷϞμϯϒϥ΢βͳΒ࢖͑Δɺ ࢖͑ͳͯ͘΋ಀ͛ಓ͸͋Δ
     8FC1Λදࣔ͢Δͷ͸ϑϩϯτ͚ͩͰ͍͍ͩͨͳΜͱ ͔Ͱ͖Δ͚Ͳαʔό΋ݟͯ΋Β͓͏
     8FC1Λ࡞Δͷ͸JNBHFNJO͕ศརͰݱ࣮త
     8FC1ͷѹॖύϑΥʔϚϯε͸ૉࡐʹࠨӈ͞ΕΔ ౰ͨ Γલ
38. Ͱɺ͋Μͨ8FC1࢖͏ͷʁ αʔόͷ໘౗Λ
 ௚઀ݟΕΔҊ݅ͳΒ࢖͓͏͔ͱʂ
 ˞ࠓਐߦதͷ-1Ҋ݅͸࢖͏༧ఆ ·ͱΊᶄ
39. ͓·͚
40. KQHͱ47(ͷ૊Έ߹ΘͤͰ
 ಁաࣸਅΛ࡞Δ࡞ྫ *&ରԠ IUUQTDTTUSJDLTDPNUSBOTQBSFOUKQHTWH ڭ͑ͯσβΠφʔͷํʂ
 ͜Ε͸࡞ۀతʹ͠ΜͲ͍΋ͷͳΜͰ͠ΐ͏͔ʁ
    ͱ͘ʹΠϥϨʹύεΛ࣋ͬͯ͋ͨ͘Γ
41. ࠓճͷओͳࢀߟࢿྉ΍੍࡞෺͸ҎԼ
 ࡉ͔͍όʔδϣϯ৘ใͳΜ͔΋ IUUQTXFCQOFUMJGZDPN
42. ͓͠·͍ Ͳ͏΋Ͱͨ͠
 ࣭໰͋ͬͨΒ͍ͭͰ΋Ͳ͏ͧ
    (JU)VC
    LBBWF
 5XJUUFS
    !KVOLKVODUJPOT
 8FC
    IUUQTLBBWFHJUIVCJP