Slide 1
Slide 1 text
QJYJWDIBUTUPSZͷ
18"ͱͯ͠ͷऔΓΈ
2018/7/8 HTML5 APP CONFERENCE 2018
ikasoumen
Slide 2
Slide 2 text
ൃදࢿྉ
2
w ຊͷൃදࢿྉͪ͜Β
w ͜ͷޙ͠Β͘දࣔ͠·͢
Slide 3
Slide 3 text
ª
ൃදࢿྉ
3
ࣗݾհ
w JLBTPVNFO
w UXJUUFS!@JLBTPVNFO
w HJUIVCJLBTPVNFO
w ϐΫγϒԬΦϑΟε
w ৽ଔೖࣾ
w 8FCٕज़͕͖ͳΤϯδχ
Ξ
Slide 4
Slide 4 text
ª
ൃදࢿྉ
4
ϐΫγϒגࣜձࣾ
w 8FCαʔϏε։ൃɾӡӦ
w QJYJW
w #005)
w QJYJW'"/#09
w ͳͲ
w 8FCͰ׆༂͢Δ
ΫϦΤΠλʔͷ࡞׆ಈࢧԉ
w ΄΅ࣗࣾαʔϏε
Slide 5
Slide 5 text
ൃදࢿྉ
5
Slide 6
Slide 6 text
ª
ൃදࢿྉ
6
ԬΦϑΟε
w ݄͔Βຊ֨࢝ಈ
w ਖ਼ࣾһ໊
w ΞϧόΠτ໊
w QJYJWDIBUTUPSZΛ
࡞ͬͯ·͢
Slide 7
Slide 7 text
ª
ൃදࢿྉ
7
Ԭ͍͍ͧ
w த৺͔Βۭߓ·Ͱ
w Ո͍҆
w ͝൧ඒຯ͍͠
w 8FCܥاۀͷਐग़͕Μ
w ҰॹʹԬͰಇؒ͘Λ
ืू͍ͯ͠·͢ʂʂ
Slide 8
Slide 8 text
Google Pixel
By Victor Stuber
www.VictorStuber.com
QJYJWDIBUTUPSZ
Slide 9
Slide 9 text
ª
Google Pixel
By Victor Stuber
www.VictorStuber.com
9
w νϟοτܗࣜͷ
খઆΛߘͰ͖ΔαʔϏε
w J04ʜ/BUJWF 4XJGU
w "OESPJE
1$ʜ18"
w 18"ϐΫγϒͰॳɻ
͔ͳΓख୳Γ
w ࠓ18"൛ͷݟΛ
͠·͢
QJYJWDIBUTUPSZ
Slide 10
Slide 10 text
w 18"ͷڧΈͱQJYJWDIBUTUPSZʹ͓͚ΔऔΓΈ
w ʑͷϦϦʔεΛࢧ͑Δٕज़
ࠓ͢͜ͱ
10
Slide 11
Slide 11 text
w 18"ͷࡉ͔͍Έ
w Ͳ͏ͬͨΒ18"ʹͳΔͷ͔
͞ͳ͍͜ͱ
11
Slide 12
Slide 12 text
18"ͷڧΈͱ
QJYJWDIBUTUPSZͷऔΓΈ
Slide 13
Slide 13 text
w ҎԼͷΑ͏ͳಛΛ࣋ͬͨ8FCΞϓϦ
w ϗʔϜը໘͔ΒΞΫηε
w ϓογϡ௨͕ར༻Մೳ
w ΦϑϥΠϯͰ͑Δ
w ͳͲ
w ετΞ͔ΒΠϯετʔϧͰͳ͘ɺ8FC͔ΒΞΫηε͢Δ
w ωΟςΟϒΞϓϦͰͳ͍ͱ͔ͬͨ͠ػೳͷ࣮ݱ
w ৄ͍͠࡞Γํ(PPHMF%FWFMPQFSTͰʂ
18" 1SPHSFTTJWF8FC"QQ
13
Slide 14
Slide 14 text
A2HS
(Add To Home Screen)
Slide 15
Slide 15 text
ª
Google Pixel
By Victor Stuber
www.VictorStuber.com
15
w ʮϗʔϜը໘ʹՃʯ
w 18"ʹ͓͚Δ
ʮΞϓϦͷΠϯετʔϧʯ
w "QQ*OTUBMMCBOOFSʹΑΔ
Πϯετʔϧૌٻ "OESPJE
$ISPNF
")4
Slide 16
Slide 16 text
ª
Google Pixel
By Victor Stuber
www.VictorStuber.com
16
w ผΞϓϦ͔ΒαʔϏεͷ63-Λ
౿Ήͱ18"Ͱ։͔͘બΔ
"OESPJE
w "OESPJEͰΞϓϦѻ͍
w ෦తʹʮϗʔϜը໘ʹ
Ճʯͨ͠ͱ͖ʹBQLΛੜ
͍ͯ͠Δ
")4ΞϓϦͰ։͘
Slide 17
Slide 17 text
ª
Google Pixel
By Victor Stuber
www.VictorStuber.com
17
w "OESPJEͰ"QQ*OTUBMM
#BOOFS͕ग़Δ
w ݅ɿճҎ্ͷΞΫηε͕
͋Γɺ࠶๚ʹҎ্ͷִؒ
͕͋Δ
w ճͷདྷ๚Ͱग़ͳ͍
")4"QQ*OTUBMMCBOOFS
Slide 18
Slide 18 text
ª
Google Pixel
By Victor Stuber
www.VictorStuber.com
18
w QJYJWDIBUTUPSZͰ
Πϯετʔϧखॱ͕ݟΒΕΔ
ՕॴΛ༻ҙ͍ͯ͠Δ
w ໌ࣔతʹΞϓϦΠϯετʔϧͷ
ҙࢥ͕͋ΔϢʔβʔ༻
QJYJWDIBUTUPSZͷ߹
Slide 19
Slide 19 text
JS ͷ Lazy Load ͱ Cache
Slide 20
Slide 20 text
w 18"Ͱ༻͍ΒΕΔ4FSWJDF8PSLFSΛ͏ͱɺ
8FC"QQͷશͯͷϦΫΤετɾϨεϙϯεΛϋϯυϦϯά
Ͱ͖Δ
w $BDIF"1*ΛͬͯϨεϙϯεͷΩϟογϡ͕Ͱ͖Δ
w ΞϓϦͷಈ࡞ʹඞཁͳϑΝΠϧ IUNMKTDTTJNBHF
ΛΩϟογϡ͢ΔͱΦϑϥΠϯରԠͰ͖Δ
4FSWJDF8PSLFSʹΑΔ$BDIJOH
20
Slide 21
Slide 21 text
w +BWB4DSJQUͷϑΝΠϧׂͯ͠৴Ͱ͖Δ
w ࠷ॳͷը໘Ͱɺඞཁͳͷ DIVOLKTϑΝΠϧͷΈΛ
ಡΈ͜Ή
w αʔϏεʹॳΊͯΞΫηεͨ࣌͠ɺαʔϏεશମͷίʔ
υΛಡΈࠐ·ͳͯ͘ྑ͍
w ૉૣ͍࢝͘ΊΒΕΔ
+4ͷ-B[Z-PBE
21
Slide 22
Slide 22 text
ª
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Λ͍ͬͯΔ
Slide 23
Slide 23 text
w 4FSWJDF8PSLFSαΠτʹΞΫηεͯ͠ډͳͯ͘ߋ৽
νΣοΫ͕Δ
w ࠷Iʹճ
w DIVOLKTͷߋ৽͕͋ͬͨ߹ɺ4FSWJDF8PSLFSߋ৽
͢ΕQSFDBDIFΛ࠶ΒͤΔ͜ͱ͕Ͱ͖Δ
4FSWJDF8PSLFSͷࣗಈߋ৽
23
Slide 24
Slide 24 text
w ॳظϩʔυ࠷ॳͷը໘ͷϦιʔεͷΈ
w ॳظϩʔυ͕ऴΘΔͱ΄͔ͷϦιʔεΛΩϟογϡ։࢝
w Ωϟογϡ͕ऴΘΔͱΦϑϥΠϯͰ͑Δ
w ߋ৽͕͋ͬͨΒ࣍ͷΞΫηε࣌ʹϦιʔεΛ%-
w ࣍ͷ࣍ͷΞΫηεࣗಈతʹΞοϓσʔτ͞Ε͍ͯΔ
w ωΠςΟϒΞϓϦͱൺΔͱΠϯετʔϧͪΛ
͘Ͱ͖Δ
ͭ·Γɺ18"ͳΒ͜͏Ͱ͖Δ
24
Slide 25
Slide 25 text
w QJYJWDIBUTUPSZΦϑϥΠϯରԠͷΈෆ࠾༻
w "1*ͱ௨৴Ͱ͖ͳ͍ͱՁ͕ൃشͰ͖ͳ͍αʔϏε
w ͓ؾʹೖΓͷετʔϦʔΛಡΊΔͱ͔͋Γ͔
w ΦϑϥΠϯதͷૢ࡞ΛΦϯϥΠϯ෮ؼ࣌ʹ࠶ࢼߦٕज़తʹͰ͖Δ
w ͦͦຊ͋·Γ௨৴ڥͰࠔΒͳ͍ʜ
w DIVOLKTΩϟογϡ͍ͯ͠Δ
w -B[ZMPBEରԠ͢ΔͱɺσϓϩΠલޙͰҧ͏Ϗϧυͷ DIVOLKTΛಡ
Έࠐ͏ͱͯ͠མͪΔ͜ͱ͕͋Δ
w ΩϟογϡΛͬͯɺҰճͷىಈதͰಉ͡ϏϧυͷKTͷΈΛ͏
QJYJWDIBUTUPSZͷ߹
25
Slide 26
Slide 26 text
ϚϧνϓϥοτϑΥʔϜରԠ
Slide 27
Slide 27 text
w QJYJWDIBUTUPSZͷ߹ɺରԠ04ϒϥβ
ஈ֊తʹ૿ͨ͠
w ॳ"OESPJE$ISPNFΛϝΠϯʹରԠ͍ͯͨ͠
w ")4͢ΔͱJ04൛ͱಉ͡ϑϧػೳ͕͑Δ
w ετʔϦʔͷΤσΟλͱ͔Ͷ
w ͦΕҎ֎Ͱ7JFXFSͷΈ
w ରԠϒϥβΛߜΔ͜ͱͰૣ͘։ൃͰ͖ͨ
ϚϧνϓϥοτϑΥʔϜରԠ
27
Slide 28
Slide 28 text
w ϓϩμΫτͷঢ়ଶʹ߹Θͤͯॱ֦࣍େͨ͠
w 1$DISPNFରԠ
w ")4ΛඞਢͰͳ͘͢
w 4BGBSJ'JSFGPY&EHFରԠ
w ߜͬͨλʔήοτ͚ʹૣ͘࡞ͬͯɺ͋ͱͰରԠΛ֦େ
ஈ֊త֦େ
28
Slide 29
Slide 29 text
18"ͷڧΈͱ
QJYJWDIBUTUPSZͷऔΓΈ
Slide 30
Slide 30 text
͜͜ͰҰ୴࣭ͱ͔͋Ε
Slide 31
Slide 31 text
Q. ͳͥPWA?
ͳͥ iOS͚ͩωΠςΟϒʁ
Slide 32
Slide 32 text
ʑͷϦϦʔεΛ
ࢧ͑Δٕज़
Slide 33
Slide 33 text
ΞʔΩςΫνϟ
w "1*4FSWFS3BJMTPOIFSPLV
w )PTUJOH4FSWFS
w 'SPOUFOE'JSFCBTFIPTUJOH
w 6TFS"TTFUT"844 PSJHJO
*NBHFqVY DBDIF
ը૾
w 'SPOUFOE"OHVMBS *POJD
w 1VTIOPUJpDBUJPO0OFTJHOBM
33
Slide 34
Slide 34 text
Ionic
Slide 35
Slide 35 text
ª
Google Pixel
By Victor Stuber
www.VictorStuber.com
*POJD
35
w 8FCٕज़ͰJ04
"OESPJE
ΞϓϦΛ࡞ΔͨΊͷ
ϑϨʔϜϫʔΫ 044
.*5
w 6*ίϯϙʔωϯτͷ
ݟӫ͕͑ωΠςΟϒʹ͍ۙ
w $PSEPWBͰΞϓϦʹͯ͠
ετΞʹฒΔͷ͕ओྲྀ
w QJYJWDIBUTUPSZͰෆ࠾༻
Slide 36
Slide 36 text
$PSEPWBෆ࠾༻ʁ
36
w QJYJWDIBUTUPSZϒϥβ"1*͚ͩͰࣄΓΔ
w ಛʹ"OESPJEDISPNFલఏͰ͋Ε
w ϓογϡ௨
w ΞϓϦͱͯ͠ͷΠϯετʔϧ
w ґଘ͕গͳͯ͘ࡁΉͳΒͦͷํ͕ྑ͍ͱ͍͏ελϯε
Slide 37
Slide 37 text
*POJD18"
37
w *POJDͷ్த͔Β18"ରԠ͕͞Εͨ
w $PSEPWBΛ֎͢ͷެࣜͷ௨Γʹ͍ͬͯΔ
w ҰํͰ8FCͷੈքʹରԠ͖͠Εͯͳ͍ͱ͜Ζ͋Δ
w ௨ৗͷ"OHVMBSͷ͓࡞๏Ͱ443Ͱ͖ͳ͍
w ͨ·ʹόάͬͯΔʜ
w *POJD ։ൃத
ͰΖΖྑ͘ͳΔ
Slide 38
Slide 38 text
Hosting
Slide 39
Slide 39 text
ª
w 18"൛J04൛ͱಉ༷ʹ
ΫϥΠΞϯτΞϓϦͷͭ
ͱͯ͠ఏڙ
w 3BJMT"1*ʹઐ೦
)5.-Λฦ͞ͳ͍
w QJYJW4LFUDIͱࣅͨࢥ
w ੩తϑΝΠϧΛαʔόʔʹ
ஔ͚ͩ͘
39
#VJMEͱIPTUJOH QJYJW4LFUDIͷߏ
Slide 40
Slide 40 text
ª
w ੩తϑΝΠϧͷϗεςΟϯά
ʹ༻
w DMJͰσϓϩΠͰ͖Δ
w KTPOͰIFBEFSSFXSJUFϧʔ
ϧͷΧελϚΠζ
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"
}
]
},
…
Slide 41
Slide 41 text
ª
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);
}
);
Slide 42
Slide 42 text
CI
Slide 43
Slide 43 text
ػೳՃϑϩʔ
w ϐΫγϒͰ৽ػೳՃҎԼͷϑϩʔ͕ଟ͍
w ࣮
w 1VMM3FRVFTU 13
࡞
w ϨϏϡʔɾमਖ਼
w ࣮ऀ͕Ϛʔδ
w ࣮ऀ͕σϓϩΠ
w ճσϓϩΠ͢Δ
43
Slide 44
Slide 44 text
όά࠷ѱͷମݧ
w 13Λ͍Α͘σϓϩΠͨ݁͠Ռɺ݁ߏόάΛੜΜͰ͍ͨ
w ͲΜͳʹૉΒ͍͠αʔϏεͰѪ͕ྫྷΊΔ
w ৽͍͠αʔϏεͩͱϢʔβʔ͔Βͷใࠂগͳ͍
w 18"Ϋϥογϡͤͣ੩͔ʹࢭ·Δ
w Ϣʔβʔࢭ·ͬͨͷ͔ؾ͚ͮͳ͍
w Τϥʔऩू͍ͯ͠Δ͕ɺ·͙ͣ
44
Slide 45
Slide 45 text
ª
w (JUIVCͰ13Λ࡞ΔͱࣗಈͰ
ΞϓϦੜ
w 13ຖͷυϝΠϯʹΞΫηε
͢Δ͚ͩͰಈ࡞֬ೝ͕Ͱ͖Δ
w खݩʹQVMMͯ͠CVJME͠ͳ͘
͍͍ͯͷͰָ
w IFSPLV੩తϑΝΠϧΛஔ
͚ͩ͘
45
IFSPLV3FWJFX"QQT
Slide 46
Slide 46 text
ຖΞϓϦΛ৮Δ
w ϦϦʔεީิ൛ΛຖϏϧυ
w ேձޙʹνʔϜͷΈΜͳͰϫΠϫΠࢼ͢
w J04
18"྆ํ
w ΈΜͳͰΫδ ཧ
Λͻ͍ͯͲΕΛࢼ͔ܾ͢ΊΔ
w ʮยํ͚ͩݟΔʯ͜ͱʹͳΒͳ͍Α͏ʹ
w ࣮ࠩҟʹؾ͚ͮΔ
w ΫδΛҾ͘ͷָ͍͠
w (Pஅ͕ग़ͨΒϦϦʔε
46
Slide 47
Slide 47 text
ʑͷϦϦʔεΛ
ࢧ͑Δٕज़
Slide 48
Slide 48 text
w 18"ͷڧΈ
w ΠϯετʔϧɾΞοϓσʔτΛҙࣝ͠ͳ͍Ͱ͑Δ
w ΦϑϥΠϯରԠɾϓογϡ௨ͳͲ
ωΠςΟϒΞϓϦతػೳ͕͑Δ
w ʑͷϦϦʔεΛΑΓྑ͍ͷʹ
w 41"ͷٕज़ࣗಈԽɾεέʔϧ͍͢͠
w ໘ͳ࡞ۀػցʹͤͨΓɺΈΜͳͰָ͠Ή
·ͱΊ
48