Web LT Session / I/O Extended 2019 Tokyo@GDG

Transcript

1. (PPHMF*0
   8FC-5
   *0&YUFOEFE5PLZP!(%(
   ,FOJDIJSP,JTIJEB
   !TJ[VIJLP
   

   View Slide

2. ,FOJDIJSP,JTIJEB
   5PLZP +"1"/
   TJ[VIJLP!HNBJMDPN !TJ[VIJLP
   IUUQTHJUIVCDPNTJ[VIJLP
   IUUQCMPHPQFOUPLZPKQ
   

   View Slide

3. w8FC1BDLBHJOH
   w".1
   w1VQQFUFFS
   5PEBZT
   

   View Slide

4. w8FC1BDLBHJOH
   w".1
   w1VQQFUFFS
   5PEBZT
   

   View Slide

5. wXFCQBDL͡Όͳ͍Α
   w8FCαΠτΛॺ໊ͯ͠഑෍Ͱ͖ΔΑ͏ʹ͢
   Δ࢓૊Έ
   wͭͷϨΠϠʔͰߏ੒͞ΕΔ
   • Signed HTTP exchanges
   • ॺ໊෇͖ͷϦΫΤετ/Ϩεϙϯε
   • Bundled HTTP exchanges
   • ෳ਺ͷϦΫΤετ/ϨεϙϯεΛ1ͭʹ
   • Loading
   • Signed HTTP exchange Λϒϥ΢βͰಡ
   ΈࠐΉͨΊͷํ๏
   8FC1BDLBHJOH֓ཁ
   https://github.com/WICG/webpackage
   

   View Slide

6. wΞʔΧΠϒͷ৴པੑΛVQ
   w͋ͳͨͷαΠτΛ$%/Ͱ഑৴
   w".1Ͱͷར༻
   • https://google.com/amp/s/
   yourdomain/…
   • https://yourdomain/…
   w".11BDLBHFSͰΑΓ؆୯ʹ
   8FC1BDLBHJOHͷར༻ํ๏
   https://github.com/ampproject/amppackager
   

   View Slide

7. w8FC1BDLBHJOH
   w".1
   w1VQQFUFFS
   5PEBZT
   

   View Slide

8. w".1͸ύϑΥʔϚϯε໰୊Λղܾ͢Δͨ
   Ίʹ্ཱ͕ͪͬͨ044
   w)5.-্Ͱಈ࡞͢ΔϥΠϒϥϦϑϨʔϜ
   ϫʔΫ
   w8FC$PNQPOFOUTϕʔε
   wࡢ೥(PPHMFݕࡧ͔Β".1ϖʔδ΁ͷΫ
   ϦοΫ཰͸૿Ճͨ͠
   ".1
   https://amp.dev/ja/
   

   View Slide

9. ".1)5.-
   https://amp.dev/ja/documentation/guides-and-tutorials/start/create/basic_markup?
   format=websites
   

   View Slide

10. https://amp.dev/ja/
    

    View Slide

11. View Slide

12. View Slide

13. w".1͸)5.-ͱ$44͚ͩͰෆࣗ༝ͩͬͨ
    ͕ɺ+BWB4DSJQUͷ࣮ߦΛՄೳʹ͢Δ
    wϝΠϯεϨουͱ͸ผͷ8FC8PSLFS͔
    Β8PSLFS%0.ͷٕज़Λ࢖͍ͬͯΔ
    wCJUMZBNQTDSJQUUSJBM͔Β0SJHJO
    5SJBMΛਃ͠ࠐΉͱར༻Ͱ͖Δ
    BNQTDSJQU
    

    View Slide

14. BNQTDSJQU
    https://twitter.com/AMPhtml/status/1116378847937613824
    

    View Slide

15. w".1'JSTUͱ͍͏Ξϓϩʔν
    w".1Ͱ࡞Γ࢝Ίɺ଍Γͳ͍ͱ͜ΖΛBNQ
    TDSJQUͰϏδωεϩδοΫͱ࣮ͯ͠૷
    wͦΕͰ΋଍Γͳ͍͜ͱɺͦΕΛ#FOUP
    ".1ϓϩδΣΫτͰॿ͚Δ
    w".1؅ཧ ϖʔδ
    Ͱͳ͍ɺ8FCϖʔδͰ
    ".1ίϯϙʔωϯτΛ࢖͑ΔΑ͏ʹ͢Δ
    ʢଞͷϑϨʔϜϫʔΫ΍
    8FC$PNQPOFOUTͱͷ૊Έ߹Θͤ
    
    #FOUP".1
    

    View Slide

16. wTOBQDIBUͰ࢝·ͬͨετʔϦʔ͸ɺ
    *OTUBHSBN΍'BDFCPPL XIBUTBQQ
    ͳͲͰ޿·ͬͨɻ
    wͨͩ͠ൃݟ͞ΕΔͷ͸೉͍͠ɻͦ͜Ͱ".1
    ͸Φʔϓϯͳ8FCϓϥοτϑΥʔϜͰݟͭ
    ͚Δ͜ͱ͕ՄೳͰɺϦϯΫͰ͖ɺڞ༗Ͱ͖
    Δ࢓૊ΈΛఏڙ͢Δɻ
    ".14UPSJFT
    

    View Slide

17. https://amp.dev/about/stories
    

    View Slide

18. https://www-washingtonpost-com.cdn.ampproject.org/c/s/
    www.washingtonpost.com/graphics/2019/national/amp-
    stories/2019-state-of-the-union-reactions/
    

    View Slide

19. w-PDBMJ[BUJPOͷݴޠʹରԠ

    IUNM⚡MBOHKB
    w%FTLUPQσϑΥϧτ͸ϞόΠϧ

    BNQTUPSZTVQQPSUTMBOETDBQF
    w4JEFCBSϋϯόʔΨʔϝχϡʔʹ௥Ճ

    BNQTJEFCBS
    w"UUBDINFOUTεϫΠϓΞοϓͰදࣔ

    BNQTUPSZQBHFBUUBDINFOU
    w&NCFET5XJUUFSͳͲͷຒΊࠐΈ
    ".14UPSJFT
    

    View Slide

20. wϝʔϧຊจͷதʹ".1ίϯςϯπΛೖΕ
    ΒΕΔɻ
    w͜Ε·ͰͷࣄྫͰ͸ΫϦοΫ཰ɺίϯόʔ
    δϣϯ཰͕૿Ճ͢Δͱ͍͏܏޲ɻ
    ".1&NBJM
    

    View Slide

21. View Slide

22. w഑৴αʔϏε

    

    

    wςετ

    wϝʔϧΫϥΠΞϯτ

    

    

    ".1&NBJM
    

    View Slide

23. w8FC1BDLBHJOH
    w".1
    w1VQQFUFFS
    5PEBZT
    

    View Slide

24. wϒϥ΢βࣗಈԽιϦϡʔγϣϯͰ͢ɻ
    w/PEFKT͔Β$ISPNFΛૢ࡞

    ૢΓਓܗQVQQFUFFS
    ͢ΔͨΊͷ"1*
    Λఏڙ͍ͯ͠Δɻ
    wOQNͰϒϥ΢β͕Πϯετʔϧ͞ΕΔͷͰɺ
    ؀ڥઃఆ΍ߏஙͷඞཁ͕ͳ͍ɻ
    1VQQFUFFS
    

    View Slide

25. w͜Ε·Ͱ$ISPNF͚͚ͩͩͬͨͲɺ
    'JSFGPY΋࢖͑ΔΑ͏ʹͳΔΑʂ
    wݱࡏͷ"1*Λαϙʔτ
    1VQQFUFFSpSFGPY
    

    View Slide

26. w8FCςετ͸஗͍ͱ͍͏౎ࢢ఻આ
    w#SPXTFS$POUFYU"1*Ͱղܾ
    wςετ͕'MBLZͱ͍͏౎ࢢ఻આ
    wXBJU'PS9"1*Ͱղܾ
    1VQQFUFFS
    

    View Slide

27. w.PCJMFσόΠεΤϛϡϨʔγϣϯ
    w0GqJOFαϙʔτ
    wαʔϏεϫʔΧʔͷݕূ
    w(FP-PDBUJPO
    w/FUXPSL.POJUPSJOH
    w,FZCPBSE.PVTF
    w1FSGPSNBODF5FTU
    w$PEF$PWFSBHF
    w"DDFTTJCJMJUZ
    1VQQFUFFS
    

    View Slide

28. WJTJUNZCMPHHJUIVC
    https://github.com/sizuhiko
    http://blog.open.tokyo.jp
    

    View Slide