Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Developers.IO CAFEがなぜアプリからPWAになったのか
Search
kamedon
November 01, 2019
Technology
5
3.5k
Developers.IO CAFEがなぜアプリからPWAになったのか
kamedon
November 01, 2019
Tweet
Share
More Decks by kamedon
See All by kamedon
KotlinでDI
kamedon
1
750
Androidで使えるKotlinレシピ
kamedon
0
1.5k
少し幸せにする技術
kamedon
4
3.9k
Other Decks in Technology
See All in Technology
大企業でもできる!ボトムアップで拡大させるプラットフォームの作り方
findy_eventslides
1
820
Lambdaの常識はどう変わる?!re:Invent 2025 before after
iwatatomoya
1
620
Reinforcement Fine-tuning 基礎〜実践まで
ch6noota
0
190
ActiveJobUpdates
igaiga
1
140
WordPress は終わったのか ~今のWordPress の制作手法ってなにがあんねん?~ / Is WordPress Over? How We Build with WordPress Today
tbshiki
1
810
NIKKEI Tech Talk #41: セキュア・バイ・デザインからクラウド管理を考える
sekido
PRO
0
140
ログ管理の新たな可能性?CloudWatchの新機能をご紹介
ikumi_ono
1
850
子育てで想像してなかった「見えないダメージ」 / Unforeseen "hidden burdens" of raising children.
pauli
2
260
AWSを使う上で最低限知っておきたいセキュリティ研修を社内で実施した話 ~みんなでやるセキュリティ~
maimyyym
2
1.7k
因果AIへの招待
sshimizu2006
0
980
Jakarta Agentic AI Specification - Status and Future
reza_rahman
0
110
Lookerで実現するセキュアな外部データ提供
zozotech
PRO
0
150
Featured
See All Featured
For a Future-Friendly Web
brad_frost
180
10k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
286
14k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.7k
Six Lessons from altMBA
skipperchong
29
4.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.6k
Building Applications with DynamoDB
mza
96
6.8k
Stop Working from a Prison Cell
hatefulcrawdad
273
21k
Side Projects
sachag
455
43k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Optimizing for Happiness
mojombo
379
70k
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ηϯαʔ σδλϧαΠωʔδ Ϛωʔδϟʔ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠