Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
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.3k
Developers.IO CAFEがなぜアプリからPWAになったのか
kamedon
November 01, 2019
Tweet
Share
More Decks by kamedon
See All by kamedon
KotlinでDI
kamedon
1
720
Androidで使えるKotlinレシピ
kamedon
0
1.4k
少し幸せにする技術
kamedon
4
3.8k
Other Decks in Technology
See All in Technology
データの品質が低いと何が困るのか
kzykmyzw
6
1.1k
速くて安いWebサイトを作る
nishiharatsubasa
11
13k
ホワイトボードチャレンジ 説明&実行資料
ichimichi
0
130
Platform Engineeringは自由のめまい
nwiizo
4
2.1k
エンジニアが加速させるプロダクトディスカバリー 〜最速で価値ある機能を見つける方法〜 / product discovery accelerated by engineers
rince
4
380
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
440
データマネジメントのトレードオフに立ち向かう
ikkimiyazaki
6
1k
自動テストの世界に、この5年間で起きたこと
autifyhq
10
8.6k
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
6.2k
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
3
1.3k
現場で役立つAPIデザイン
nagix
34
12k
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.3k
Featured
See All Featured
Music & Morning Musume
bryan
46
6.3k
Facilitating Awesome Meetings
lara
52
6.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Bash Introduction
62gerente
611
210k
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ηϯαʔ σδλϧαΠωʔδ Ϛωʔδϟʔ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠