Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Developers.IO CAFEがなぜアプリからPWAになったのか
kamedon
November 01, 2019
Technology
5
2.2k
Developers.IO CAFEがなぜアプリからPWAになったのか
kamedon
November 01, 2019
Tweet
Share
More Decks by kamedon
See All by kamedon
kamedon
1
480
kamedon
0
670
kamedon
4
3.4k
Other Decks in Technology
See All in Technology
clustervr
PRO
0
220
kawaguti
2
270
charity
12
14k
kota2and3kan
2
360
ks91
PRO
0
350
htomine
0
170
nnstt1
2
120
ytaka23
11
2.8k
you
0
110
line_developers
PRO
1
590
jaguar_imo
0
120
line_developers
PRO
2
190
Featured
See All Featured
mongodb
23
3.9k
denniskardys
220
120k
hannesfritz
29
980
lauravandoore
440
28k
notwaldorf
19
2.1k
morganepeng
20
1.3k
addyosmani
495
110k
lara
172
9.8k
akmur
252
19k
ufuk
56
5.5k
addyosmani
312
21k
holman
462
280k
Transcript
εϥΠυޙͰೖख͢Δ͜ͱ͕ग़དྷ·͢ͷͰ ൃදதͷ༰ΛϝϞ͢Δඞཁ͋Γ·ͤΜɻ ࣸਅࡱӨΛ͢Δ߹ ϑϥογϡɾγϟολʔԻ͕ग़ͳ͍Α͏ʹྀ͍ͩ͘͝͞ Attention
%FWFMPQFST*0$"'&͕ ͳͥ18"ʹͳͬͨͷ͔ $9ࣄۀຊ෦ ُҪӫར
͝ΊΜͳ͍͞ ·ͣλΠτϧΛमਖ਼͍ͤͯͩ͘͞͞ʂ
%FWFMPQFST*0$"'&͕ΞϓϦΛΊͯ 18"ʹͳΓͬͺΓΞϓϦ৴͢Δͷ͔ $9ࣄۀຊ෦ ُҪӫར
͢·Μ ͬͺΓωΠςΟϒΞϓϦΔ
εϥΠυޙͰೖख͢Δ͜ͱ͕ग़དྷ·͢ͷͰ ൃදதͷ༰ΛϝϞ͢Δඞཁ͋Γ·ͤΜɻ ࣸਅࡱӨΛ͢Δ߹ ϑϥογϡɾγϟολʔԻ͕ग़ͳ͍Α͏ʹྀ͍ͩ͘͝͞ Attention ϋογϡλά DNEFWJP DNEFWJP)
ϓϩϑΟʔϧ wُҪӫར w"OESPJEΤϯδχΞ w,PUMJO͖Ͱ͢ w࠷ۙ8FC 7VF Λ͍ͬͯ·͢ wϘʔυήʔϜ͕͖Ͱ͢
ΞδΣϯμ wͦͦ%FWFMPQFST*0$"'&ͬͯʁ w࠷ॳωΠςΟϒΞϓϦͩͬͨ wͳͥ18"ʹͳͬͨͷ͔ wͳͥωΠςΟϒΞϓϦ৴͢Δͷ͔
ͦͦDevelopers.IO CAFEͬͯʁ
ͦͦ%FWFMPQFST*0$"'&ͬͯʁ ·ͣͪ͜ΒΛͲ͏ͧ
ಈըΛ࠶ੜ͠·ͨ͠
%FWFMPQFST*0$"'& wΥʔΫεϧʔͱϞόΠϧΦʔμʔͰΛߪೖ͢Δ શΩϟογϡϨεͷ$BGF wΥʔΫεϧʔ "NB[PO(PͷΑ͏ʹళͷΛͱͬͯ ͓ళΛग़ΔͱࣗಈͰࢧ͍͕ྃ͢Δ wϞόΠϧΦʔμʔ εϚϗ͔ΒΛจ͠ళฮͰ͏͚ͱΔ
2018.07 2019.07 ΧϑΣϓϩδΣΫτͷྺ࢙ ࢀઓ
࠷ۙͷɿଟళฮల։ͷରԠΛਐΊ͍ͯΔ তঁࢠେళ ৽্ׁӽళ
ΥʔΫεϧʔͷΈ ఱҪͷΧϝϥ͔Β ୭͕ͱ͔ͬͨఆ ॏྔͷ૿ݮͰ ͱͬͨݸΛఆ ΞϓϦͷ23ίʔυͰ νΣοΫΠϯ ୀళΛݕͯ͠ ࣗಈܾࡁ
ϞόΠϧΦʔμʔͷΈ ΞϓϦ͔Βจ αΠωʔδʹ Φʔμʔঢ়گΛදࣔ
ࠓΞϓϦͷ ΞϓϦ͔Βจ αΠωʔδʹ Φʔμʔঢ়گΛදࣔ
࠷ॳωΠςΟϒΞϓϦͰ ͡·ͬͨ
ωΠςΟϒΞϓϦͬͯʁ wϓϥοτϑΥʔϜͰಈ࡞͢ΔΞϓϦ wεϚϗͷഎܠͰࡶʹ͍͏ͱɺ "QQ4UPSFɺ(PPHMF1MBZͰ৴͍ͯ͠ΔେͷΞϓϦ w8FCωΠςΟϒΞϓϦͰͳ͍
ͳΜͰωΠςΟϒΞϓϦʹͳͬͨͷ͔ʁ ͱʹ͔͘࠷ͰΧϑΣΛΦʔϓϯ͔ͨͬͨ͠ wೲظ͕͙͘͢ϦϦʔε͔ͨͬͨ͠ wϲ݄ఔ wωΠςΟϒΞϓϦͨ͘͞Μͷݟ͕͋ͬͨ wΈΜͳҊ݅Λֻ͚͍࣋ͪͯ͠Δ༗ࢤͷूஂ ख࣋ͪͷٕज़Ͱεϐʔυ༏ઌͰ͡·ͬͨ
J04"OESPJE͕ແࣄʹϦϦʔε͕Ͱ͖ͨ w࠷ॳJ04ΞϓϦ͚ͩͩͬͨ wJ04ϦϦʔεޙɺ"OESPJEຽͷਓݖΛ֫ಘ͢ΔͨΊ "OESPJEͰίʔώʔҿΈ͔͓ͨͬͨ͡͞Μ͕ J04Λਅࣅͨײ͡Ͱ"OESPJE࣮ wJ04ຽʮͳʹ͔པΈ·͔͢ʁʯ ͓͡͞Μʮ࠷ॳͷҰഋ"OESPJE͔Βจͯ͠ҿΉΜʯ wݱࡏʹࢸΔ
࣮ݧͱͯ͠ϑϧʹ׆༻ ళฮͳΜͱ͔͍͚ͦ͏ wࢧ͍पΓͷ֦ॆ wΫϨδοτΧʔυɺ"QQMF1BZ (PPHMF1BZ -*/&1BZ "MJQBZ wΥʔΫεϧʔϞόΠϧΦʔμʔͷӡ༻ܦݧ wΧϑΣۀ
࣍ͳΔνϟϨϯδ ଟళฮରԠʹνϟϨϯδ
Ұ୴ϓϩδΣΫτͱͯ͠અ ͜ͷ··ͷԆͰଟళฮʹରԠͰ͖Δʁ
ͳͥPWAʹͳͬͨͷ͔
ωΠςΟϒΞϓϦͷ w։ൃϦιʔε͕ͨΓͳ͍ wΈΜͳֻ͚࣋ͪͷ༗ࢤͷूஂͳͷͰ ฒΈͦΖ͑ͯJ04ɺ"OESPJEΛ։ൃ͢Δͷ͕͍͠ w৽͍͠ମݧΛૣ͘ఏڙͰ͖ͳ͍ wJ04ͷ৹͕͔ࠪͬͨΓɺϦδΣΫτͰ͕࣌ؒͱΒΕΔ wৗʹޙํޓΛؾʹͯ͠Ξοϓσʔτ͠ͳ͍ͱ͍͚ͳ͍
ωΠςΟϒΞϓϦͷ wདྷళ͓ͨ͠٬͞ΜҿΈΛങ͍ʹདྷͯΔͷʹɺ ΞϓϦͷμϯϩʔυΛ͠ͳ͍ͱ͍͚ͳ͍ͨΊ໘͕͘͞Δ w04ຖʹ6*͕ҟͳΔͨΊʹɺ ళฮΦϖϨʔγϣϯͰ2"͕େมʹͳ͍ͬͯΔ
ԿΛΓ͔ͨͬͨΜ͚ͩͬʁ ৽͍͠ମݧΛߴʹ࣮ݧ͍ͨ͠
ࠓͰ͖Δ͜ͱΛ͍ͬͯͳ͍ʁ ωΠςΟϒΞϓϦΛ࡞Γ͍ͨΜ͡Όͳ͍
̍ళฮ͔ΒଟళฮΛࢦͯ͠ ωΠςΟϒΞϓϦͷ··ͰΑ͍ͷ͔ʁ ͬͯ͘Έ͍ͨ ͘ମݧͯ͠Έ͍ͨ ͘ϑΟʔυόοΫ͍͖͍ͨͩͨ ͑Δ͜ͱ͕Ͱ͖Δʁ
ωΠςΟϒΞϓϦͷ··Ͱ͍͍ͷ͔ʁ NO
ߴʹվળ͢ΔͨΊʹඞཁͳ͜ͱԿʁ wJ04"OESPJEΛ͚ͣʹ։ൃϦιʔεΛͭʹूத͍ͨ͠ wֻ͚͕࣋ͪଟ͍ͷͰϫϯιʔεʹͯ͠ମݧͷ࡞ΓࠐΈʹूத͍ͨ͠ wళฮΦϖϨʔγϣϯͷෛ୲ΛԼ͍͛ͨ w04ຖʹ͓٬༷ͷ2"Λ͑Δͷ͕େม wಉ͡6*ɺಉ͡ભҠͷ΄͏͕Ҋ͕͍͢͠ wΞϓϦόʔδϣϯͰҊ͕มΘΔ
ϫϯιʔεΛ࣮ݱ͢Δʹ ϚϧνϓϥοτϑΥʔϜܥʹखΛग़ͯ͠ΈΔ͔
ϚϧνϓϥοτϑΥʔϜͰٻΊΔͷԿʁ w͖উखʹΞοϓσʔτ͍ͨ͠ wJ04"OESPJEΛϫϯιʔεʹ͍ͨ͠ wͳΔ͘γϯϓϧͳঢ়ଶΛΩʔϓ͍ͨ͠ wωΠςΟϒΞϓϦͬΆ͍ମݧʹ͓͖͍ͯͨ͠ 8&#ͷ18"ͰͬͯΈΔ͔
18"ͱ 18"ʢ1SPHSFTTJWF8FC"QQTʣͱ wωΠςΟϒΞϓϦͷΑ͏ͳ༻ײ wΞΠίϯΛϗʔϜը໘Ճ wϓογϡ௨ wΩϟογϡʹΑΔߴԽΦϑϥΠϯରԠԽ ωΠςΟϒΞϓϦͬΆ͍ମݧ͕Ͱ͖ͦ͏
18"ͰͷΈ͔͑ͨ ϒϥβ 18"
18"ͰΞϓϦͬΆ͍6*࣮ݱՄೳ ϗʔϜʹΞΠίϯΛ ઃஔͰ͖Δ
18"ͰΞϓϦͬΆ͍6*࣮ݱՄೳ ΞΫγϣϯόʔɺλϒͳͲ ΞϓϦͷΑ͏ͳ6*Մೳ
εϓϥογϡՄೳ ΞϓϦͷεϓϥογϡՄೳ
ϓογϡ௨Մೳ όοΫάϥϯυͰ ϑΥΞάϥϯυͰ 1VTI௨Λ͏͚ͱΕΔ ˞4BGBSJඇରԠ
J04Ͱ1VTIΛಧ͔ͳ͍ ϩάΠϯʹ߹Θͤͯ1VTI௨ͷΘΓΛૹΔ w4.4ϩάΠϯ4.4௨ w-*/&-*''-*/&.FTTBHF͔Β௨ w"OESPJE͞Βʹ8FC1VTIબՄ
ΦϑϥΠϯ͋ΔఔՄ ͏·͘Ωϟογϡ͏ͱ ΦϑϥΠϯͰΛදࣔͰ͖Δ 4FSWJDF8PSLFSΛ͏·͓͘͏ ͪΖΜจ͢Δͱ͖ ΦϯϥΠϯͰ͋Δඞཁ͋Δ
͔͠͠։ൃνʔϜεΩϧϚοϓ͕߹Θͳ͍ ωΠςΟϒΞϓϦ։ൃऀͷΈ ϦχϡʔΞϧ·Ͱϲ݄͔͠ͳ͍ͧʂʁ
࣌ؒͳ͍͚Ͳ You ͬͪΌ͍ͳΑ
ωΠςΟϒΞϓϦͷϊϋ͍͔ͤΔ wಉ͡ϑϩϯτपΓͳͷͰશ͘ҧ͏จԽͷͷͰͳ͍ w8FCπʔϧͷมԽ͕ܹ͍͚͠Ͳɺ ҰͳΜͱ͔͢ΕͳΜͱ͔ͳΔͣ wͨ͘͞ΜͷύϑΥʔϚϯεؔͷٕज़͋Δ͚ͲΛͭͿΔ w8FCΛ͔Βษڧ͢ΔͨΊɺΘ͔Γ͍͢πʔϧΛ͏ wॳ৺ऀ͕࢝Ί͍͢7VFΛબ w6**POJDΛબɻΞϓϦͬΆ͍6*Λ؆୯ʹ࡞Εͦ͏
7VF 7VFॳ৺ऀʹ ͍͞͠ͱΑ͘ฉ͘ ࣾͷᷚͰ ʮए͞ͰͳΜͱ͔ͳΔʯ ͱͷ͜ͱͰܾఆ εΫϥοϓϏϧυͳͷͰ ԿϦχϡʔΞϧνϟϯε ͋Δ͔Βૣ͘࡞ΕΔͷΛબ
ΧϑΣϓϩδΣΫτͰ ཧը໘Ͱ"OHVMBS ͍ͬͯΔ Vue.js
*POJD J04 "OESPE 8FC શ෦Ͱ͍͍ײ͡ͷ 6*ʹͯ͘͠ΕΔ ϑϨʔϜϫʔΫ IonicFramework
ٹ͍ ·ͩళฮ w2"Ͱݱߦ͚Δ wଞࣾͰ·ͩಋೖ͍ͯ͠ͳ͍ wϦχϡʔΞϧͷλΠϛϯάͰΔͳΒࠓ͔͠ͳ͍
ແࣄʹϦϦʔε ͳΜͱ͔ͳͬͨ
18"ʹͨ͜͠ͱͷ෭࢈ ৭ΜͳνϟωϧͰՄೳʹͳͬͨ
8FCͷϫϯιʔεͰ͍Ζ͍ΖνϟωϧʹରԠ wϒϥβ wJ04ɺ"OESPJEɺ1$ w18" w"OESPJEɺ1$ɺҰ෦4BGBSJ w-*/& w-*'' -JOF'SPOUFOE'SBNFXPSL
-JOF'SPOUFOE'SBNFXPSL -*'' -*/&ΞϓϦͰಈ࡞͢Δ ΣϒΞϓϦͷ ϓϥοτϑΥʔϜ -*/&ͷϢʔβʔ*%ɺ -*''"1*Λར༻͢ΔͨΊͷ τʔΫϯΛ-*/&͔Βऔಘ Ͱ͖Δ
LINE Front-end Framework
8FCͷϫϯιʔεʹΑΔඍົͳࠩؤுΔ wϨΠΞτ wJ04Ͱ8FCͷ௨͕ಧ͔ͳ͍͚Ͳɺಧ͚͍ͨ
ϓϥοτϑΥʔϜʹΑΔϨΠΞτͷࠩ 18" ϒϥβ -*/&-*'& ϔομʔΛআ ϔομʔ༗Γ ίϯςϯπ ྖҬ͕͍
J04Ͱ1VTIΛಧ͔ͳ͍͚Ͳಧ͚͍ͨ ϩάΠϯʹ߹Θͤͯ1VTI௨ͷΘΓΛૹΔ w4.4ϩάΠϯ4.4௨ w-*/&-*''-*/&.FTTBHF͔Β௨ w"OESPJE'JSFCBTFͷ8FCબՄ
18"ʹͨ͜͠ͱʹΑΔ෭࢈ LINEͰಈ͘Α͏ʹͳ͔ͬͨΒ ߋʹΠϯετʔϧ͍Βͣʹ؆୯ʹ͑Δ
ͳͥωΠςΟϒΞϓϦ৴͢Δͷ͔
ྡͷࣳ੨͘Έ͑ͨ υαΧϯΩϣϊνΨΠΧϥχήϥϨφΠ
ྡͷࣳ੨͘Έ͑ͨ wJ1IPOFϢʔβ͕4BGBSJͷϓϥΠϕʔτϞʔυͰ༻͢Δ wJ1IPOFͰ4BGBSJͰϗʔϜʹՃͷͱ͖ͷಈ࡞ w8FCͷγϣʔτΧοτ͕͍ʹ͍͘
J1IPOFϢʔβ͕4BGBSJͷϓϥΠϕʔτϞʔυͰ༻͢Δ େֶੜͳͲए͍ࢠ͕݁ߏϓϥΠϕʔτͰ༻͢Δ wຖճϩάΠϯ͕֎ΕΔ w-*/&1BZϩάΠϯͷࡍʹ֎෦αΠτʹඈͿ͕ ϓϥΠϕʔτͰͳ͍௨ৗͷϒϥβ͕։͖ࣦഊ͢Δ wجຊతʹ8FCةͳ͍ͷͰ͋ΓϓϥΠϕʔτϞʔυͰ༻ wΞϓϦͷ΄͏͕ઐ༻Ͱةͳ͘ͳ͍Πϝʔδ
J1IPOFͰ4BGBSJͰϗʔϜʹՃͷͱ͖ͷಈ࡞ wϓϥΠϕʔτϞʔυಉ༷ʹ֎෦͔ΒϦμΠϨΫτͰ ͬͯ͜Εͳ͍ wҊɺϒϥβͷγϣʔτΧοτ͕͍ͩͮΒ͘ɺ ϗʔϜΞΠίϯ͔Βىಈ͢Δͷ͕؆୯Ͱศར
ྫɿ-*/&1BZޭύλʔϯ
ྫɿ-*/&1BZࣦഊύλʔϯ ભҠෆՄ
ղܾࡦ ΨϫωΠςΟϒͰ৴͢Δ ʢ༧ఆʣ
ΨϫωΠςΟϒͬͯʁ w8FCͰ৴ͯ͋͠ΔͷΛ 8FC7JFXͳͲͰද͍ࣔͯ͠Δ͚ͩͷΞϓϦ w"QQ4UPSFɺ(PPHMF1MBZʹ ৴͍ͨͨ͠ΊʹΞϓϦͰϥοϓ͍ͯ͠Δ w8FCʴЋʢωΠςΟϒػೳʣ ͍ͯ͠Δ͜ͱ͕ଟ͍͕ຊ࣭తʹ8FCΞϓϦͰ͋Δ
J04ͷΨϫωΠςΟϒ w"QQ4UPSFͰ৴Ͱ͖Δ wϗʔϜʹΞϓϦΞΠίϯΛ͓͚Δ wJ04Ͱͷ1VTI௨͕ՄೳʹͳΔ wϓϥΠϕʔτϞʔυͰىಈ͞Εͳ͍
"OESPJE͍ͭͰʹΨϫωΠςΟϒ ͔͔ͤͬͩ͘Β྆04ͱ৴͢Δ w58" 5SVTUFE8FC"DUJWJUZ Ͱ(PPHMF1MBZͰ৴͢Δ w18"ಉ༷ͷ$ISPNFϒϥβΛશը໘ʹϞʔυͰදࣔͰ͖Δ w΄ͱΜͲ18"ͱϢʔβͷ༻ײ͔ΘΒͳ͍ w(PPHMF1MBZʹ৴Ͱ͖Δͷ͕ڧΈ
58"ͷઃఆ 8FC͕ࣗͷॴ༗Ͱ͋Δ͜ͱΛࣔ͢ wΞϓϦଆʹ8FCͷใΛઃఆ w8FCଆʹΞϓϦͷϑΟϯΨʔϓϦϯτΛઃఆ͢Δ wXFMMLOPXOBTTFUMJOLTKTPOΛ8FCଆʹઃஔ͢Δ [{ "relation": ["delegate_permission/common.handle_all_urls"], "target"
: { "namespace": "android_app", "package_name": "https://sprout.devio.jp", "sha256_cert_fingerprints": ["App package fingerprint"] } }] Using Trusted Web Activitiesࢀর
58"ઃఆͷޭࣦഊͷஅ ޭ͢Δͱ εςʔλεόʔ͕ඇදࣔ ͜ͷ͕ͳ͍ͱ୭ͰυϝΠϯ͑͞ ͍ͬͯͨΒ͕ࣗ࡞͔ͬͨͷΑ͏ʹ 1MBZͰ৴Ͱ͖ͪΌ͏ΑͶ /( 0,
Ϣʔβ͕͖ͳͷͰମݧͯ͠Β͏ wϒϥβ wJ04ɺ"OESPJEɺ1$ w18" w"OESPJEɺ1$ɺҰ෦4BGBSJ w-*/& w-*'' -JOF'SPOUFOE'SBNFXPSL
wωΠςΟϒΞϓϦ
·ͱΊ
8FCͷϫϯιʔεʹͳͬͨ͜ͱʹΑΔϝϦοτ w͙͢ʹϦϦʔεͰ͖ΔΑ͏ʹͳͬͨ w։ൃϦιʔεΛମݧʹूதͰ͖ΔΑ͏ʹͳͬͨ w8FC -*/&-*'' ωΠςΟϒΞϓϦΛఏڙͰ͖ΔΑ͏ʹͳͬͨ wϢʔβ͕͖ͳͷͰମݧͰ͖ΔΑ͏ʹͳͬͨ wళฮͷҊ2"͕؆୯ʹͳͬͨ wߴʹվળͰ͖ΔΑ͏ʹͳͬͨ
·ͩ·ͩ8FCԽͰΔ͜ͱͨ͘͞Μ w18"ͷ࠷దԽ wΩϟογϡͷઃఆ w7VFͷύϑΥʔϚϯεઃఆ w͞·͟·ͳσόΠεͰಈͨ͘Ί6*ͷςετ w&&ςετͷಋೖͳͲ wϒϥβͷΩϟογϡ͕ڧ͍ͨΊͷߋ৽ॲཧͷ࣮
Զͨͪͷઓ͍͜Ε͔Βͩͥ ·ͩ·ͩΔ͖ࣄ͕ͨ͘͞Μ
։ൃϝϯόʔืूத αʔόαΠυ AWS, Lambda, Serverless API, ܾࡁ, ೝূ ΫϥΠΞϯταΠυ
Vue.js Angular.js ϋʔυΣΞ / IoT ॏྔηϯαʔɺToFηϯαʔ σδλϧαΠωʔδ Ϛωʔδϟʔ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠