Developers.IO CAFEがなぜアプリからPWAになったのか

εϥΠυ͸ޙͰೖख͢Δ͜ͱ͕ग़དྷ·͢ͷͰ ൃදதͷ಺༰ΛϝϞ͢Δඞཁ͸͋Γ·ͤΜɻ ࣸਅࡱӨΛ͢Δ৔߹͸ ϑϥογϡɾγϟολʔԻ͕ग़ͳ͍Α͏ʹ͝഑ྀ͍ͩ͘͞ 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_ﬁngerprints": ["App package ﬁngerprint"] } }] 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ηϯαʔ σδλϧαΠωʔδ Ϛωʔδϟʔ

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

Developers.IO CAFEがなぜアプリからPWAになったのか

Developers.IO CAFEがなぜアプリからPWAになったのか

More Decks by kamedon

Other Decks in Technology

Featured

Transcript