pixiv chatstory の PWA としての取り組み

Transcript

1. QJYJWDIBUTUPSZͷ

   18"ͱͯ͠ͷऔΓ૊Έ
   2018/7/8 HTML5 APP CONFERENCE 2018

   ikasoumen
   

   View Slide

2. ൃදࢿྉ
   2
   w ຊ೔ͷൃදࢿྉ͸ͪ͜Β
   w ͜ͷޙ͠͹Β͘දࣔ͠·͢
   

   View Slide

3. ª
   ൃදࢿྉ
   3
   ࣗݾ঺հ
   w JLBTPVNFO
   w UXJUUFS!@JLBTPVNFO
   w HJUIVCJLBTPVNFO
   w ϐΫγϒ෱ԬΦϑΟε
   w ৽ଔೖࣾ೥໨
   w 8FCٕज़͕޷͖ͳΤϯδχ
   Ξ
   

   View Slide

4. ª
   ൃදࢿྉ
   4
   ϐΫγϒגࣜձࣾ
   w 8FCαʔϏε։ൃɾӡӦ
   w QJYJW
   w #005)
   w QJYJW'"/#09
   w ͳͲ
   w 8FCͰ׆༂͢Δ

   ΫϦΤΠλʔͷ૑࡞׆ಈࢧԉ
   w ΄΅ࣗࣾαʔϏε
   

   View Slide

5. ൃදࢿྉ
   5
   

   View Slide

6. ª
   ൃදࢿྉ
   6
   ෱ԬΦϑΟε
   w ೥݄͔Βຊ֨࢝ಈ
   w ਖ਼ࣾһ਺໊
   w ΞϧόΠτ໊
   w QJYJWDIBUTUPSZΛ

   ࡞ͬͯ·͢
   

   View Slide

7. ª
   ൃදࢿྉ
   7
   ෱Ԭ͸͍͍ͧ
   w த৺஍͔Βۭߓ·Ͱ෼
   w Ո௞͍҆
   w ͝൧ඒຯ͍͠
   w 8FCܥاۀͷਐग़͕੝Μ
   w Ұॹʹ෱ԬͰಇ͘஥ؒΛ

   ืू͍ͯ͠·͢ʂʂ
   

   View Slide

8. Google Pixel
   By Victor Stuber
   www.VictorStuber.com
   QJYJWDIBUTUPSZ
   

   View Slide

9. ª
   Google Pixel
   By Victor Stuber
   www.VictorStuber.com
   9
   w νϟοτܗࣜͷ

   খઆΛ౤ߘͰ͖ΔαʔϏε
   w J04ʜ/BUJWF 4XJGU
   
   w "OESPJE 1$ʜ18"
   w 18"͸ϐΫγϒͰ΋ॳɻ

   ͔ͳΓख୳Γ
   w ࠓ೔͸18"൛ͷ஌ݟΛ

   ࿩͠·͢
   QJYJWDIBUTUPSZ
   

   View Slide

10. w 18"ͷڧΈͱQJYJWDIBUTUPSZʹ͓͚ΔऔΓ૊Έ
    w ೔ʑͷϦϦʔεΛࢧ͑Δٕज़
    ࠓ೔࿩͢͜ͱ
    10
    

    View Slide

11. w 18"ͷࡉ͔͍࢓૊Έ
    w Ͳ͏΍ͬͨΒ18"ʹͳΔͷ͔
    ࿩͞ͳ͍͜ͱ
    11
    

    View Slide

12. 18"ͷڧΈͱ

    QJYJWDIBUTUPSZͷऔΓ૊Έ
    

    View Slide

13. w ҎԼͷΑ͏ͳಛ௃Λ࣋ͬͨ8FCΞϓϦ
    w ϗʔϜը໘͔ΒΞΫηε
    w ϓογϡ௨஌͕ར༻Մೳ
    w ΦϑϥΠϯͰ΋࢖͑Δ
    w ͳͲ
    w ετΞ͔ΒΠϯετʔϧͰ͸ͳ͘ɺ8FC͔ΒΞΫηε͢Δ
    w ωΟςΟϒΞϓϦͰͳ͍ͱ೉͔ͬͨ͠ػೳͷ࣮ݱ
    w ৄ͍͠࡞Γํ͸(PPHMF%FWFMPQFSTͰʂ
    18" 1SPHSFTTJWF8FC"QQ
    
    13
    

    View Slide

14. A2HS

    (Add To Home Screen)
    

    View Slide

15. ª
    Google Pixel
    By Victor Stuber
    www.VictorStuber.com
    15
    w ʮϗʔϜը໘ʹ௥Ճʯ
    w 18"ʹ͓͚Δ

    ʮΞϓϦͷΠϯετʔϧʯ
    w "QQ*OTUBMMCBOOFSʹΑΔ

    Πϯετʔϧૌٻ "OESPJE
    $ISPNF
    
    ")4
    

    View Slide

16. ª
    Google Pixel
    By Victor Stuber
    www.VictorStuber.com
    16
    w ผΞϓϦ͔ΒαʔϏεͷ63-Λ
    ౿Ήͱ18"Ͱ։͔͘બ΂Δ

    "OESPJE
    
    w "OESPJEͰ͸ΞϓϦѻ͍
    w ಺෦తʹ΋ʮϗʔϜը໘ʹ௥
    Ճʯͨ͠ͱ͖ʹBQLΛੜ੒
    ͍ͯ͠Δ
    ")4ΞϓϦͰ։͘
    

    View Slide

17. ª
    Google Pixel
    By Victor Stuber
    www.VictorStuber.com
    17
    w "OESPJEͰ͸"QQ*OTUBMM
    #BOOFS͕ग़Δ
    w ৚݅ɿճҎ্ͷΞΫηε͕
    ͋Γɺ࠶๚ʹ෼Ҏ্ͷִؒ
    ͕͋Δ
    w ճ໨ͷདྷ๚Ͱ͸ग़ͳ͍
    ")4"QQ*OTUBMMCBOOFS
    

    View Slide

18. ª
    Google Pixel
    By Victor Stuber
    www.VictorStuber.com
    18
    w QJYJWDIBUTUPSZͰ͸

    Πϯετʔϧखॱ͕ݟΒΕΔ

    ՕॴΛ༻ҙ͍ͯ͠Δ
    w ໌ࣔతʹΞϓϦΠϯετʔϧͷ
    ҙࢥ͕͋ΔϢʔβʔ༻
    QJYJWDIBUTUPSZͷ৔߹
    

    View Slide

19. JS ͷ Lazy Load ͱ Cache
    

    View Slide

20. w 18"Ͱ༻͍ΒΕΔ4FSWJDF8PSLFSΛ࢖͏ͱɺ

    8FC"QQͷશͯͷϦΫΤετɾϨεϙϯεΛϋϯυϦϯά
    Ͱ͖Δ
    w $BDIF"1*Λ࢖ͬͯϨεϙϯεͷΩϟογϡ͕Ͱ͖Δ
    w ΞϓϦͷಈ࡞ʹඞཁͳϑΝΠϧ IUNMKTDTTJNBHF
    

    ΛΩϟογϡ͢ΔͱΦϑϥΠϯରԠͰ͖Δ
    4FSWJDF8PSLFSʹΑΔ$BDIJOH
    20
    

    View Slide

21. w +BWB4DSJQUͷϑΝΠϧ͸෼ׂͯ͠഑৴Ͱ͖Δ
    w ࠷ॳͷը໘Ͱ͸ɺඞཁͳ෼ͷDIVOLKTϑΝΠϧͷΈΛ
    ಡΈ͜Ή
    w αʔϏεʹॳΊͯΞΫηεͨ࣌͠ɺαʔϏεશମͷίʔ
    υΛಡΈࠐ·ͳͯ͘ྑ͍
    w ૉૣ͘࢖͍࢝ΊΒΕΔ
    +4ͷ-B[Z-PBE
    21
    

    View Slide

22. ª
    22
    DIVOLKTͷQSFDBDIF
    const fileManifest = [
    {
    "url": "build/
    0.8ffe61fe0eafb69265e2.chunk.js",
    "revision": "0871a6351e2bb4f7fcab7b904ca634b6"
    },
    //
    // ………
    //
    {
    "url": "build/
    12.8e85e96102ac9de0a826.chunk.js",
    "revision": "c95d8d7a1a3d94bbee1b864c578cdd44"
    },
    ];
    const workboxSW = new self.WorkboxSW();
    workboxSW.precache(fileManifest);
    w 4FSWJDF8PSLFSΛ࢖ͬͯ

    ΞϓϦશମͰඞཁͳ
    DIVOLKTϑΝΠϧΛޙಡ
    Έͯ͠ɺΩϟογϡ͢ΔΑ
    ͏ʹ͍ͯ͠Δ
    w 4FSWJDF8PSLFSͷੜ੒ʹ͸
    8PSLCPYΛ࢖͍ͬͯΔ
    

    View Slide

23. w 4FSWJDF8PSLFS͸αΠτʹΞΫηεͯ͠ډͳͯ͘΋ߋ৽
    νΣοΫ͕૸Δ
    w ࠷௕Iʹճ
    w DIVOLKTͷߋ৽͕͋ͬͨ৔߹ɺ4FSWJDF8PSLFS΋ߋ৽
    ͢Ε͹QSFDBDIFΛ࠶౓૸ΒͤΔ͜ͱ͕Ͱ͖Δ
    4FSWJDF8PSLFSͷࣗಈߋ৽
    23
    

    View Slide

24. w ॳظϩʔυ͸࠷ॳͷը໘ͷϦιʔεͷΈ
    w ॳظϩʔυ͕ऴΘΔͱ΄͔ͷϦιʔεΛΩϟογϡ։࢝
    w Ωϟογϡ͕ऴΘΔͱΦϑϥΠϯͰ΋࢖͑Δ
    w ߋ৽͕͋ͬͨΒ࣍ͷΞΫηε࣌ʹϦιʔεΛ%-
    w ࣍ͷ࣍ͷΞΫηε͸ࣗಈతʹΞοϓσʔτ͞Ε͍ͯΔ
    w ωΠςΟϒΞϓϦͱൺ΂ΔͱΠϯετʔϧ଴ͪΛ

    ୹͘Ͱ͖Δ
    ͭ·Γɺ18"ͳΒ͜͏Ͱ͖Δ
    24
    

    View Slide

25. w QJYJWDIBUTUPSZ͸ΦϑϥΠϯରԠͷΈෆ࠾༻
    w "1*ͱ௨৴Ͱ͖ͳ͍ͱՁ஋͕ൃشͰ͖ͳ͍αʔϏε
    w ͓ؾʹೖΓͷετʔϦʔΛಡΊΔͱ͔͸͋Γ͔΋
    w ΦϑϥΠϯதͷૢ࡞ΛΦϯϥΠϯ෮ؼ࣌ʹ࠶ࢼߦ΋ٕज़తʹ͸Ͱ͖Δ
    w ͦ΋ͦ΋೔ຊ͸͋·Γ௨৴؀ڥͰࠔΒͳ͍ʜ
    w DIVOLKT͸Ωϟογϡ͍ͯ͠Δ
    w -B[ZMPBEରԠ͢ΔͱɺσϓϩΠલޙͰҧ͏ϏϧυͷDIVOLKTΛಡ
    Έࠐ΋͏ͱͯ͠མͪΔ͜ͱ͕͋Δ
    w ΩϟογϡΛ࢖ͬͯɺҰճͷىಈதͰ͸ಉ͡ϏϧυͷKTͷΈΛ࢖͏
    QJYJWDIBUTUPSZͷ৔߹
    25
    

    View Slide

26. ϚϧνϓϥοτϑΥʔϜରԠ
    

    View Slide

27. w QJYJWDIBUTUPSZͷ৔߹ɺରԠ04ϒϥ΢β͸

    ஈ֊తʹ૿΍ͨ͠
    w ౰ॳ͸"OESPJE$ISPNFΛϝΠϯʹରԠ͍ͯͨ͠
    w ")4͢ΔͱJ04൛ͱಉ͡ϑϧػೳ͕࢖͑Δ
    w ετʔϦʔͷΤσΟλͱ͔Ͷ
    w ͦΕҎ֎Ͱ͸7JFXFSͷΈ
    w ରԠϒϥ΢βΛߜΔ͜ͱͰૣ͘։ൃͰ͖ͨ
    ϚϧνϓϥοτϑΥʔϜରԠ
    27
    

    View Slide

28. w ϓϩμΫτͷঢ়ଶʹ߹Θͤͯॱ֦࣍େͨ͠
    w 1$DISPNFରԠ
    w ")4ΛඞਢͰͳ͘͢
    w 4BGBSJ'JSFGPY&EHFରԠ
    w ߜͬͨλʔήοτ޲͚ʹૣ͘࡞ͬͯɺ͋ͱͰରԠΛ֦େ
    ஈ֊త֦େ
    28
    

    View Slide

29. 18"ͷڧΈͱ

    QJYJWDIBUTUPSZͷऔΓ૊Έ
    

    View Slide

30. ͜͜ͰҰ୴࣭໰ͱ͔͋Ε͹
    

    View Slide

31. Q. ͳͥPWA?
    ͳͥ iOS͚ͩωΠςΟϒʁ
    

    View Slide

32. ೔ʑͷϦϦʔεΛ

    ࢧ͑Δٕज़
    

    View Slide

33. ΞʔΩςΫνϟ
    w "1*4FSWFS3BJMTPOIFSPLV
    w )PTUJOH4FSWFS
    w 'SPOUFOE'JSFCBTFIPTUJOH
    w 6TFS"TTFUT"844 PSJHJO
    *NBHFqVY DBDIF ը૾
    
    w 'SPOUFOE"OHVMBS *POJD
    
    w 1VTIOPUJpDBUJPO0OFTJHOBM
    33
    

    View Slide

34. Ionic
    

    View Slide

35. ª
    Google Pixel
    By Victor Stuber
    www.VictorStuber.com
    *POJD
    35
    w 8FCٕज़ͰJ04 "OESPJE

    ΞϓϦΛ࡞ΔͨΊͷ

    ϑϨʔϜϫʔΫ 044 .*5
    
    w 6*ίϯϙʔωϯτͷ

    ݟӫ͕͑ωΠςΟϒʹ͍ۙ
    w $PSEPWBͰΞϓϦʹͯ͠

    ετΞʹฒ΂Δͷ͕ओྲྀ
    w QJYJWDIBUTUPSZͰ͸ෆ࠾༻
    

    View Slide

36. $PSEPWBෆ࠾༻ʁ
    36
    w QJYJWDIBUTUPSZ͸ϒϥ΢β"1*͚ͩͰࣄ଍ΓΔ
    w ಛʹ"OESPJEDISPNFલఏͰ͋Ε͹
    w ϓογϡ௨஌
    w ΞϓϦͱͯ͠ͷΠϯετʔϧ
    w ґଘ͕গͳͯ͘ࡁΉͳΒͦͷํ͕ྑ͍ͱ͍͏ελϯε
    

    View Slide

37. *POJD18"
    37
    w *POJD͸ͷ్த͔Β18"ରԠ͕͞Εͨ
    w $PSEPWBΛ֎͢ͷ΋ެࣜͷ௨Γʹ΍͍ͬͯΔ
    w ҰํͰ8FCͷੈքʹରԠ͖͠Εͯͳ͍ͱ͜Ζ΋͋Δ
    w ௨ৗͷ"OHVMBSͷ͓࡞๏Ͱ͸443Ͱ͖ͳ͍
    w ͨ·ʹόάͬͯΔʜ
    w *POJD ։ൃத
    Ͱ΋Ζ΋Ζྑ͘ͳΔ
    

    View Slide

38. Hosting
    

    View Slide

39. ª
    w 18"൛͸J04൛ͱಉ༷ʹ

    ΫϥΠΞϯτΞϓϦͷͭ

    ͱͯ͠ఏڙ
    w 3BJMT͸"1*ʹઐ೦

    )5.-Λฦ͞ͳ͍
    w QJYJW4LFUDIͱࣅͨࢥ૝
    w ੩తϑΝΠϧΛαʔόʔʹ

    ஔ͚ͩ͘
    39
    #VJMEͱIPTUJOH QJYJW4LFUDIͷߏ੒
    

    View Slide

40. ª
    w ੩తϑΝΠϧͷϗεςΟϯά
    ʹ࢖༻
    w DMJͰσϓϩΠͰ͖Δ
    w KTPOͰIFBEFS΍SFXSJUFϧʔ
    ϧͷΧελϚΠζ
    w ϑϩϯτΤϯυΤϯδχΞ
    Ͱ΋Θ͔Γ΍͍͢
    w pSFCBTFGVODUJPOTͱγʔϜ
    Ϩεʹܨ͛ΒΕΔ
    40
    'JSFCBTFIPTUJOH {
    "hosting": {
    "public": "www",
    "rewrites": [
    {
    "source": "!/api/**",
    "function": "insertOgp"
    }
    ],
    "headers": [
    {
    "source": "build/*.@(js|
    css)",
    "headers": [
    {
    "key": "Cache-Control",
    "value": "public, s-
    maxage=5184000"
    }
    ]
    },
    …
    

    View Slide

41. ª
    w αʔόʔଆͰඞཁͳ

    ͍ܰλεΫΛߦ͏
    w 0(1ຒΊࠐΈ
    w 0(1ը૾ͷੜ੒
    • SSRͰ͖ͳ͍͔ΒͶ…
    41
    'JSFCBTFGVODUJPOT
    /** HTML ΛϨϯμϦϯάͯ͠ฦ͢ */
    export const insertOgp =
    functions.https.onRequest(
    async (req, res) => {
    let data: TemplateData;
    try {
    data = await routing(req);
    } catch {
    data = defaultData(req);
    }
    const html = renderTemplate(data);
    res.send(html);
    }
    );
    

    View Slide

42. CI
    

    View Slide

43. ػೳ௥Ճϑϩʔ
    w ϐΫγϒͰ͸৽ػೳ௥Ճ͸ҎԼͷϑϩʔ͕ଟ͍
    w ࣮૷
    w 1VMM3FRVFTU 13
    ࡞੒
    w ϨϏϡʔɾमਖ਼
    w ࣮૷ऀ͕Ϛʔδ
    w ࣮૷ऀ͕σϓϩΠ
    w ೔਺ճσϓϩΠ͢Δ
    43
    

    View Slide

44. όά͸࠷ѱͷମݧ
    w 13Λ੎͍Α͘σϓϩΠͨ݁͠Ռɺ݁ߏόάΛੜΜͰ͍ͨ
    w ͲΜͳʹૉ੖Β͍͠αʔϏεͰ΋Ѫ͕ྫྷΊΔ
    w ৽͍͠αʔϏεͩͱϢʔβʔ͔Βͷใࠂ΋গͳ͍
    w 18"͸Ϋϥογϡͤͣ੩͔ʹࢭ·Δ
    w Ϣʔβʔ͸ࢭ·ͬͨͷ͔ؾ͚ͮͳ͍
    w Τϥʔऩू͸͍ͯ͠Δ͕ɺ·ͣ๷͙
    44
    

    View Slide

45. ª
    w (JUIVCͰ13Λ࡞ΔͱࣗಈͰ

    ΞϓϦੜ੒
    w 13ຖͷυϝΠϯʹΞΫηε
    ͢Δ͚ͩͰಈ࡞֬ೝ͕Ͱ͖Δ
    w खݩʹQVMMͯ͠CVJME͠ͳ͘
    ͍͍ͯͷͰָ
    w IFSPLV͸੩తϑΝΠϧΛஔ
    ͚ͩ͘
    45
    IFSPLV3FWJFX"QQT
    

    View Slide

46. ຖ೔ΞϓϦΛ৮Δ
    w ϦϦʔεީิ൛Λຖ೔Ϗϧυ
    w ேձޙʹνʔϜͷΈΜͳͰϫΠϫΠࢼ͢
    w J04 18"྆ํ
    w ΈΜͳͰΫδ ෺ཧ
    Λͻ͍ͯͲΕΛࢼ͔ܾ͢ΊΔ
    w ʮยํ͚ͩݟΔʯ͜ͱʹͳΒͳ͍Α͏ʹ
    w ࣮૷ࠩҟʹؾ͚ͮΔ
    w ΫδΛҾ͘ͷ͸ָ͍͠
    w (P൑அ͕ग़ͨΒϦϦʔε
    46
    

    View Slide

47. ೔ʑͷϦϦʔεΛ

    ࢧ͑Δٕज़
    

    View Slide

48. w 18"ͷڧΈ
    w ΠϯετʔϧɾΞοϓσʔτΛҙࣝ͠ͳ͍Ͱ࢖͑Δ
    w ΦϑϥΠϯରԠɾϓογϡ௨஌ͳͲ

    ωΠςΟϒΞϓϦతػೳ͕࢖͑Δ
    w ೔ʑͷϦϦʔεΛΑΓྑ͍΋ͷʹ
    w 41"ͷٕज़͸ࣗಈԽɾεέʔϧ͠΍͍͢
    w ໘౗ͳ࡞ۀ͸ػցʹ೚ͤͨΓɺΈΜͳͰָ͠Ή
    ·ͱΊ
    48
    

    View Slide