個人でPWA対応の時間管理アプリ「Hackaru」を作りました

by ktmouk

Slide 1

Slide 1 text

!LUNPVL ݸਓͰ18"ରԠͷ࣌ؒ؅ཧΞϓϦ࡞Γ·ͨ͠

Slide 2

Slide 2 text

wߕ൹༑೭ ,BJ5PNPZVLJ w ݸਓͰ18"ରԠͷ  ࣌ؒ؅ཧΞϓϦΛ։ൃ͍ͯ͠·͢ɻ w ࠓ݄ ͔ΒϚωʔϑΥʔϫʔυʹೖࣾ !2 !LUNPVL LUNPVL

Slide 3

Slide 3 text

!3 ԿΛൃද͢Δͷʁ w࣌ؒ؅ཧΞϓϦ)BDLBSVʹ͍ͭͯ w18"Ͱ։ൃͯ͠ྑ͔ͬͨ఺ w18"ͷͭΒΈ

Slide 4

Slide 4 text

!4 ର৅ w 18"ʹڵຯΛ͍࣋ͬͯΔํ w 18"ͰΞϓϦΛ࡞Ζ͏ͱߟ͍͑ͯΔํ

Slide 5

Slide 5 text

!5 ԿΛൃද͢Δͷʁ w࣌ؒ؅ཧΞϓϦ)BDLBSVʹ͍ͭͯ w18"Ͱ։ൃͯ͠ྑ͔ͬͨ఺ w18"ͷͭΒΈ

Slide 6

Slide 6 text

!6 ࣌ؒ؅ཧͱ͸ʁ

Slide 7

Slide 7 text

!7 ೔ʑ΍Δ͜ͱ͕୔ࢁ͋Δ ษڧ ࢓ࣄ झຯ

Slide 8

Slide 8 text

!8 ʜ͕ɺࠓ೔Կ͔͍֮ͨ͑ͯ͠ͳ͍ ࠓ೔Կ΍͚ͬͨͬ

Slide 9

Slide 9 text

!9 ʜ͕ɺࠓ೔Կ͔͍֮ͨ͑ͯ͠ͳ͍ ࠓ೔Կ΍͚ͬͨͬ ࣌ؒͷৼΓฦΓ͕͍ͨ͠

Slide 10

Slide 10 text

!10 )BDLBSV ଌΔ IUUQTXXXIBDLBSVBQQ

Slide 11

Slide 11 text

!11 ࡞ۀ࣌ؒΛܭଌͯ͠ʜ

Slide 12

Slide 12 text

!12 άϥϑ΍ΧϨϯμʔͰৼΓฦΓ

Slide 13

Slide 13 text

!13 ࣗ෼ͷ࣌ؒͷ࢖͍ํ͕෼͔Δ

Slide 14

Slide 14 text

!14 Ͳ͏΍ͬͯಈ͍͍ͯΔͷʁ

Slide 15

Slide 15 text

!15 /VYUKT3BJMT"1*Ͱߏங

Slide 16

Slide 16 text

!16 ಛ௃ w 8FCIPPL w 0"VUI w Φʔϓϯιʔε w ϚϧνσόΠεରԠ

Slide 17

Slide 17 text

!17 ಛ௃ w 8FCIPPL w 0"VUI w Φʔϓϯιʔε w ϚϧνσόΠεରԠ

Slide 18

Slide 18 text

!18 1SPHSFTTJWF8FC"QQT

Slide 19

Slide 19 text

!19 ͱ͸ʁ 8FCαΠτΛɺ ετΞ͔Βμ΢ϯϩʔυͨ͠ΞϓϦͷ Α͏ʹ࢖͑Δ͜ͱɻ  ಛఆͷٕज़Λ͋ΒΘ໊͢শͰ͸ͳ͍

Slide 20

Slide 20 text

!20 )BDLBSVͷ "OESPJEͷϗʔϜΞΠίϯ J04ͷϗʔϜΞΠίϯ "OESPJEͱJ04ରԠ

Slide 21

Slide 21 text

!21 ܭଌը໘ ΧϨϯμʔը໘ Ϩϙʔτը໘

Slide 22

Slide 22 text

!22 ԿΛൃද͢Δͷʁ w࣌ؒ؅ཧΞϓϦ)BDLBSVʹ͍ͭͯ w18"Ͱ։ൃͯ͠ྑ͔ͬͨ఺ w18"ͷͭΒΈ

Slide 23

Slide 23 text

!23 18"ͷྑ͔ͬͨ఺ w؆୯ʹಋೖͰ͖ͨ w1$ͱϞόΠϧͷίʔυΛڞ௨ԽͰ͖ͨ

Slide 24

Slide 24 text

!24 ؆୯ʹಋೖͰ͖ͨ

Slide 25

Slide 25 text

!25

Slide 26

Slide 26 text

!26 ɾ8PSLCPY 4FSWJDF8PSLFS ɾ.BOJGFTU ɾ.FUB ɾ0OF4JHOBM ௨஌ ౳ʑʜ

Slide 27

Slide 27 text

!27 ZBSOBEE!OVYUKTQXBͰύοέʔδಋೖ

Slide 28

Slide 28 text

!28 OVYUDPOpHKTʹϞδϡʔϧΛࢦఆ

Slide 29

Slide 29 text

!29 TXKT 4FSWJDF8PSLFS ͕ࣗಈੜ੒͞ΕΔɻ /VYUKTͰ͸ɺ 18"ͷಋೖ͸؆୯ʂ

Slide 30

Slide 30 text

!30 1$ͱϞόΠϧͷίʔυΛڞ௨ԽͰ͖ͨ

Slide 31

Slide 31 text

!31 ͦ΋ͦ΋ɺͳͥ18"Λಋೖͨ͠ͷʁ

Slide 32

Slide 32 text

!32 ͦ΋ͦ΋ɺͳͥ18"Λಋೖͨ͠ͷʁ ݸਓ։ൃͰɺJ04"OESPJE1$ͷίʔυΛ ϝϯς͢Δͷ͸େม J04 "OESPJE 1$

Slide 33

Slide 33 text

!33 ͦ΋ͦ΋ɺͳͥ18"Λಋೖͨ͠ͷʁ ݸਓ։ൃͰɺJ04"OESPJE1$ͷίʔυΛ ϝϯς͢Δͷ͸େม ࣌ؒΛܭଌදࣔ͢Δͱ͍͏γϯϓϧͳཁ݅ɻ ൃల్্ͷ18"Ͱ΋࣮૷Ͱ͖ͦ͏ͱײͨ͡

Slide 34

Slide 34 text

!34 ࣮ࡍɺԸܙ͸େ͖͔ͬͨ

Slide 35

Slide 35 text

!35 ϨεϙϯγϒରԠ͢Δ͚ͩͰωΠςΟϒΞϓϦͬΆ͘ɻ 18"൛ 1$൛

Slide 36

Slide 36 text

!36 ίʔυͱςετΛڞ௨ԽͰ͖ͨɻ

Slide 37

Slide 37 text

!37 +BWB4DSJQUΛ࢖͑͹ ωΠςΟϒΞϓϦ෩ͷ6*΋ɻ w εϫΠϓϝχϡʔ

Slide 38

Slide 38 text

!38 +BWB4DSJQUΛ࢖͑͹ ωΠςΟϒΞϓϦ෩ͷ6*΋ɻ w υϥοάυϩοϓ w εϫΠϓͰϖʔδૹΓ

Slide 39

Slide 39 text

!39 ԿΛൃද͢Δͷʁ w࣌ؒ؅ཧΞϓϦ)BDLBSVʹ͍ͭͯ w18"Ͱ։ൃͯ͠ྑ͔ͬͨ఺ w18"ͷͭΒΈ

Slide 40

Slide 40 text

!40 18"ͷͭΒΈ wJ04ͷରԠ͕େม

Slide 41

Slide 41 text

!41 18"ͷͭΒΈ wJ04ͷରԠ͕େม

Slide 42

Slide 42 text

!42 ྫ$PPLJFͷ໰୊

Slide 43

Slide 43 text

!43 ྫ$PPLJFͷ໰୊ wϒϥ΢βͱ18"Ͱ$PPLJFΛڞ༗Ͱ͖ͳ͍ w୺຤Λ࠶ىಈ͢Δͱফ͑Δ J04 Ҿ༻ʲௐࠪʳ8ΞϓϦΛ18"ͱͯ͠ىಈͨ͠৔߹ʹϒϥ΢βͷ$PPLJF͕Ҿ͖ܧ͕ΕΔ͔֬ೝ͢Δ ˞J04ΑΓલͰ͸ΞϓϦΛ࠶ىಈ͚ͨͩ͠Ͱফ͑Δɻ ˞"OESPJE͸໰୊ແ͠ɻ

Slide 44

Slide 44 text

!44 ϩάΠϯঢ়ଶͷอ࣋ͰࠔΔ ΫοΩʔɾηογϣϯ͸࢖͑ͳ͍

Slide 45

Slide 45 text

!45 ରԠ-PDBM4UPSBHFΛ࢖͏ τʔΫϯϕʔεͷೝূ

Slide 46

Slide 46 text

!46 ΞΫηετʔΫϯ +85 ͱ ϦϑϨογϡτʔΫϯͰೝূ WebUI Nuxt.js API Rails5 ϩάΠϯ (ID, PASS) ϦϑϨογϡτʔΫϯΛฦ͢ ΞΫηετʔΫϯ +85 Λฦ͢ ΞΫηετʔΫϯͰ"1*Λૢ࡞ ϦϑϨογϡτʔΫϯͰ ΞΫηετʔΫϯΛཁٻ wϦϑϨογϡτʔΫϯͰ  ΞΫηετʔΫϯΛཁٻͰ͖Δɻ wΞΫηετʔΫϯ͸୹͍༗ޮظݶʹઃఆɻ ʙ෼ wϦϑϨογϡτʔΫϯΛ-PDBM4UPSBHF ʹอଘɻ

Slide 47

Slide 47 text

!47 ྫ"OESPJEʹग़དྷͯ J04Ͱ͸Ͱ͖ͳ͍͜ͱ͕͋Δ

Slide 48

Slide 48 text

!48 ͨͱ͑͹ʜ wϓογϡ௨஌ wϗʔϜը໘ʹ௥Ճ ")4 ͷҊ಺౳ʑ

Slide 49

Slide 49 text

!49 ͨͱ͑͹ʜ wϓογϡ௨஌ wϗʔϜը໘ʹ௥Ճ ")4 ͷҊ಺౳ʑ

Slide 50

Slide 50 text

!50 "OESPJEͰ͸18"ͷҊ಺͕ग़Δ͚Ͳʜ .JOJJOGPCBS Ҿ༻$IBOHFTUP"EEUP)PNF4DSFFO#FIBWJPS

Slide 51

Slide 51 text

!51 Ϣʔβ͕18"Λ஌Δ ํ๏͕༻ҙ͞Ε͍ͯͳ͍ J04Ͱ͸Կ΋ग़ͳ͍

Slide 52

Slide 52 text

!52 Ϣʔβ͕18"Λ஌Δ ํ๏͕༻ҙ͞Ε͍ͯͳ͍ J04Ͱ͸Կ΋ग़ͳ͍ ࣗલͰ࣮૷͢ΔͳͲͷରࡦ͕ඞཁ

Slide 53

Slide 53 text

!53 ͱ͸͍͑ ͕࣌ؒղܾͯ͘͠ΕΔ͔΋ʁ

Slide 54

Slide 54 text

!54 J04Ͱ͸৭ʑग़དྷΔΑ͏ʹͳͬͨ ΞϓϦ಺ϒϥ΢β 0"VUIೝূ͕Մೳʹ ࠨεϫΠϓͰ໭Δ

Slide 55

Slide 55 text

!55 J04Ͱ͸৭ʑग़དྷΔΑ͏ʹͳͬͨ 8FC4IBSF"1*

Slide 56

Slide 56 text

!56 18"ʹ͸ग़དྷΔ͜ͱ͕૿ָ͍͑ͯ͘͠Έ΋͋Δ কདྷతʹ͸ܭଌத͸όονΛग़ͨ͠Γʜ J04Ͱ΋௨஌Λग़ͨ͠Γʜ

Slide 57

Slide 57 text

!57 ྫʮ໭ΔʯϘλϯͲ͏͢Δ໰୊

Slide 58

Slide 58 text

!58 ʮ໭ΔʯϘλϯ͕ͳ͍ͷͰɺը໘ભҠ͕ଟ͍ͱࠔΔ ϒϥ΢βͷ໭ΔϘλϯ͸18"Ͱ͸࢖͑ͳ͍ 18"ͳͷͰɺωΠςΟϒͷ/BWJHBUJPO#BS΋࢖͑ͳ͍

Slide 59

Slide 59 text

!59 ରࡦྫࣗલͰʮ໭ΔʯϘλϯΛ࣮૷͢Δ IUUQTKBPOTFOJP ϑϨʔϜϫʔΫ࢖͏ͷ΋͋Γ͔΋

Slide 60

Slide 60 text

!60 ରࡦྫʮ໭ΔʯϘλϯ͕ෆཁͳը໘ઃܭʹ )BDLBSVͷը໘ભҠ͸ϝχϡʔʹ͋Δ߲໨ͷΈ Ϟʔμϧ΍λϒΛۦ࢖ͯ͠ը໘਺Λ࠷খݶʹ