Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web LT Session / I/O Extended 2019 [email protected]

Web LT Session / I/O Extended 2019 [email protected]

Kenichiro Kishida

May 19, 2019
Tweet

More Decks by Kenichiro Kishida

Other Decks in Technology

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