浜松市オープンデータを使ってイベントカレンダーアプリを作りました

浜松市がオープンデータとして公開しているイベント情報を使ってイベントカレンダーアプリを作りました。

アプリの見た目部分はReact + TypeScript + Tailwind + Flowbite、
バックエンドは AWS AppSync、DynamoDB、AWS Lambda、AWS Amplify等を組み合わせています。

Transcript

1. Φʔϓϯσʔλ
   3FBDU
   
   5ZQF4DSJQU
   "84 খ໦༔ే
   !KBDPZVUPSJVT
2. ࡞͍ͬͯΔ΋ͷ IUUQTIBNBNBUTVFWFOUTDPEFIBNBNBUTVPSH
3. ࡞͍ͬͯΔ΋ͷ ‣ 3FBDU੡ͷ41"ɻ
   ‣ ͞͞΍͔ͳ஍Ҭͷ՝୊ղܾͱɺݸਓతͳٕज़ݕূͷͨΊʹ࡞͍ͬͯ·͢ɻ
4. ղܾ͔ͨͬͨ͠՝୊ ‣ ि຤ɺՈ଒Λ࿈Εͯग़͔͚Δ৔ॴ͕ͳ͍ɻʢແ͍Θ͚Ͱ͸ͳ͍ͷ͕ͩɺ͍ͭ΋ಉ͡ͱ͜Ζʹߦ͖͕ͪʣ
   ‣ 4/4ͱ͔Λݟ͍ͯΔͱɺۙ৔Ͱ໘നͦ͏ͳΠϕϯτ͕։࠵͞Εͨʢաڈܗʣ৘ใΛಘΔɻ
5. ʢ༨ஊʣ
   
   ͨ·ͨ·։࠵Λ஌ͬͨͷͰߦ͖ͬͯͨʰϨΦφϧυɾμɾϰΟϯνཧ૝౎ࢢ໛ܕల
   
   ײછ঱ʹཱͪ޲͔͏೥લͷཧ૝౎ࢢɻʱ
   
   ϖετՒʹଧͪউͭͨΊʹμɾϰΟϯν͕ґཔ͞Ε੍ͯ࡞ͨ͠ϝϞΛݩʹཱମ͕ى͜͞ Ε͍ͯΔɻ
   ֊ஈ͕ೋॏཐટߏ଄ʹͳ͍ͬͯͯਓͱ͢ΕҧΘͳ͍ߏ଄ʹͳ͍ͬͯͨΓɺਫ ࿏͕छʢ͖Ε͍ͳ΋ͷͱԼਫʣ͋ͬͨΓɺԼ૚ࢢຽ͸Լਫ෇ۙΛา͘ߏ଄ʹͳ͍ͬͯ ͨΓɻ
6. ࡞͍ͬͯΔ΋ͷ ‣ ඿দࢢΦʔϓϯσʔλͷΠϕϯτ৘ใΛΧϨϯμʔܗࣜͰදࣔ͢Δɻ
   ‣ ΋ͱ΋ͱ%ZOBNP%#ʹ֨ೲͨ͠σʔλΛ5XFFU͢Δ΋ͷΛ࡞͍͕ͬͯͨɺ5XJUUFSΞΧ΢ϯτ͕ౚ݁͞ ΕͨͷͰผҊʹ੾Γସ͑ͨɻ
7. ࿩͢͜ͱ ‣ ΞϓϦέʔγϣϯͷߏ੒ʹ͍ͭͯɻ
   ‣ ར༻ͨ͠πʔϧʹ͍ͭͯɻ
   ‣ $MPVE8BUDI
   36.
   ʹ͍ͭͯɻ
9. ͳͥ
   %#Λ࢖͏ͷ͔ʁ ‣ ΦʔϓϯσʔλͰެ։͞Ε͍ͯΔΠϕϯτ৘ใɺର৅͕ͪΐͬͱ೥ྸߴΊɻ
   ‣ 4/4ͩͬͨΓɺࢪઃͷ8FCαΠτʹ͔͠ܝࣔ͞Ε͍ͯͳ͍৘ใ΋কདྷతʹऩू͍ͨ͠ɻ
   ‣ ΫϩʔϦϯάʹΑΔࣗಈԽɻ
   ‣ ొ࿥ϑΥʔϜͷ࣮૷ɻ
10. "84ͷϦιʔεΛ࡞੒͢Δ$-*πʔϧ "84
    4".
    4FSWFSMFTT
    "QQMJDBUJPO
    .PFMͷུɻ$MPVE'PSNBUJPOͷαϒηοτɻ:".-ͰϦιʔεఆٛΛॻ͘ɻz4FSWFSMFTTz
    ͷ໊લͷ௨Γɺ -BNCEBΛத৺ͱͨ͠αʔϏεʢ"1*
    (BUFXBZ΍%ZOBNP%#ɺ&WFOU#SUJEHFͳͲʣΛੜ੒Ͱ͖Δɻ಺෦తʹ$MPVE'PSNBUJPOͷఆٛϑ ΝΠϧΛੜ੒࣮ͯ͠ߦ͢Δɻ "84
    $%,
    $MPVE
    %FWFMPQNFOU
    ,JUͷུɻ1ZUIPO
    
    +BWB4DSJQU
    
    5ZQF4DSJQU
    ౳ͷϓϩάϥϛϯάݴޠΛ༻͍ͯ"84ͷϦιʔεఆٛΛॻ͘͜ͱ͕ Ͱ͖Δɻ"84ͷαʔϏε΄΅શͯʹରԠ͍ͯ͠Δɻ಺෦తʹ$MPVE'PSNBUJPOͷఆٛϑΝΠϧΛੜ੒࣮ͯ͠ߦ͢Δɻ "84
    "NQMJGZ
    3FBDU
    7VF
    4XJGU
    "OESPJE
    'MVUUFS
    ͳͲͷΞϓϦέʔγϣϯΛߴ଎ʹ։ൃ͢ΔͨΊͷෳ߹తͳϑϨʔϜϫʔΫɻ"NQMJGZ
    $-*͸ "NQMJGZΛར༻͢ΔͨΊͷҰͭͷπʔϧɻϗεςΟϯάɾೝূɾ"1* 3&45
    (SBQI2- ɾετϨʔδɾ஍ਤ
    ౳ͷ"84ϦιʔεΛ؆୯ʹ૊ ΈࠐΊΔɻ಺෦తʹ$MPVE'PSNBUJPOͷఆٛϑΝΠϧΛੜ੒࣮ͯ͠ߦ͢Δɻ
11. "84ͷϦιʔεΛ࡞੒͢Δ$-*πʔϧ
    ࠓճ͸࢖͍ͬͯͳ͍΍ͭʣ "84
    $PQJMPU
    &$4
    
    'BSHBUF
    
    "QQ
    3VOOFS
    ͷϦιʔεΛ࡞ͬͯ͘ΕΔɻΞϓϦέʔγϣϯͷιʔείʔυͱ
    %PDLFS fi MF͚ͩ͋Ε͹
    $PQJMPUΛ࢖͏͜ ͱͰ&$4΍'BSHBUFͷϦιʔεఆٛΛҰׅͰ࡞ͬͯ͘ΕΔɻ "84
    $-*
    "84ͷશ͕ͯૢ࡞Ͱ͖Δɻ.BOBHFNFOU
    $POTPMFͰ͸Ͱ͖ͳ͍͚Ͳ"84
    $-*ͳΒઃఆͰ͖ΔՕॴ΋͋ͬͨΓ͢Δɻ
12. "84
    4". "84
    $%, "NQMJGZ .BOBHFNFOU
    $POTPMF -BNCEB %ZOBNP%# "QQ
    4ZOD )PTUJOH "VUI $MPVE8BUDI
    36. &WFOU#SJEHF
13. $MPVE8BUDI
    36. ‣ ϦΞϧϢʔβʔϞχλϦϯάػೳɻ
    ‣ ΞϓϦέʔγϣϯͷύϑΥʔϚϯεʹؔ͢ΔΫϥΠΞϯτσʔλΛऩू͠ՄࢹԽɻ
    ‣ ϖʔδͷಡΈࠐΈ࣌ؒ
    ‣ ΫϥΠΞϯτଆͷΤϥʔ
    ‣ Ϣʔβʔͷ׆ಈ
14. $MPVE8BUDI
    36.
15. $MPVE8BUDI
    36.
16. $MPVE8BUDI
    36.
17. $MPVE8BUDI
    36. "QQUTY
18. "QQ4ZOD ‣ %ZOBNP%#
    ΁ΞΫηε͢ΔͨΊͷ(SBQI2-Λఆٛ͢Δͷʹར༻ɻ
    ‣ Ϧιʔεࣗମͷఆٛ͸$%,
    
    5ZQF4DSJQUͰॻ͍͍ͯΔɻ
    ‣ %#΁ͷϦΫΤετ͸ຊɻ
    ‣ l೥݄z
    Λࢦఆͯ͠ɺͦͷ݄ʹ։࠵͞ΕΔΠϕϯτ৘ใΛ࠷େ݅औಘ͢Δɻ
    ‣ lΠϕϯτͷΩʔ %#΁Πϯϙʔτ࣌ʹಠࣗʹൃߦͨ͠Ұҙͷ஋ z
    Λࢦఆͯ͠ɺͦͷΩʔʹඥͮ͘Πϕ ϯτͷৄࡉ৘ใΛऔಘ͢Δɻ
19. "QQ4ZOD ‣ "NQMJGZͰ΋"QQ4ZODͷఆٛ͸ՄೳͰ͸͋Δɻ
    ‣ σʔλϕʔε͕͢Ͱʹଘࡏ͍ͯͨ͜͠ͱͱɺͦͷσʔλϕʔεର͢Δ(SBQI2-ͷεΩʔϚఆٛΛ
    "NQMJGZͷϑϩʔ্Ͱ΍Ζ͏ͱ͢Δͱࢼߦࡨޡ͕ඞཁͦ͏ͩͬͨɻͦ͏͢Δͱ"NQMJGZͰ࢖͍ͬͯΔଞͷ ϦιʔεʹѱӨڹ͕Ͱͳ͍͔৺഑ͩͬͨɻ
    ‣ ·ͨɺ"NQMJGZͷΧελϜϦιʔε
    BNQMJGZ
    BEE
    DVTUPN
    Ͱ΋$%,Λ࢖ͬͯಠࣗʹ"84Ϧιʔεͷఆ ٛΛ࡞Δ͜ͱ͕Ͱ͖Δ͕ɺ࣮૷ͨ͠౰࣌ʢࠓ೥ͷ݄͘Β͍ʣͰ͸·ͩQVCMJD
    QSFWJFXͳঢ়ଶͩͬͨͷ Ͱɺར༻ΛݟૹΓɺผϦϙδτϦͰ$%,Ͱಠࣗʹ࡞Δ͜ͱʹͨ͠ɻ ͳͥ$%,Λ࢖͍ͬͯΔͷ͔ʁ
20. "QQ4ZOD ͳͥ$%,Λ࢖͍ͬͯΔͷ͔ʁ
21. "QQ4ZOD ݄͝ͱͷΠϕϯτҰཡɻ։࠵݄ ::::..
    ͝ͱʹऔಘɻ
22. "QQ4ZOD Πϕϯτৄࡉ৘ใͷऔಘɻ֤ϨίʔυʹҰҙʹৼͬͨ*%ͰϨίʔυΛऔಘɻ
23. "QQ4ZOD
    
    "84
    "NQMJGZ
24. ࣍ճʹଓ͖·͢ɻ ‣ 3FBDU
    
    5ZQF4DSJQU
    
    5BJMXJOE
    
    'MPXCJUF
    Ͱ࡞Δ41"ɻ
    ‣ "QQ
    4ZOD
    ʹ͍ͭͯɻ