仕事以外で作成したプロダクトの自慢大会

Slide 1

Slide 1 text

2024.05.13 ࢓ࣄҎ֎Ͱ࡞੒ͨ͠ϓϩμΫτͷࣗຫେձ ʙEQMonitorͷ͝঺հʙ YUMEMI Inc. Flutter Engineer - Ryotaro Onoue גࣜձࣾ ΏΊΈ LTFes #6 (ࣾ಺)

Slide 2

Slide 2 text

whoami 23ଔ FlutterΤϯδχΞ

Slide 3

Slide 3 text

Today’s topic ݸਓ։ൃ͍ͯ͠ΔΞϓϦέʔγϣϯͷ͓࿩

Slide 4

Slide 4 text

Today’s Topic 1. ݸਓ։ൃͰ੍࡞͖ͯͨ͠ΞϓϦέʔγϣϯͷ͓࿩ - 1-1. ػೳͷ֓ཁ - 1-2. EQMonitorΛࢧ͑Δٕज़ͷ͓࿩ - 1-3. ো֐ى͜͠·ͨ͠ & ڭ܇ - 1-4. ࠓޙͷల๬ ͱ ·ͱΊ

Slide 5

Slide 5 text

1. ݸਓ։ൃͰ੍࡞͖ͯͨ͠ΞϓϦέʔγϣϯͷ͓࿩ EQMonitor(iOS/Android) - EQMonitorͱ͍͏஍਒ؔ࿈ͷΞϓϦέʔγϣϯΛ੍࡞

Slide 6

Slide 6 text

Today’s Topic 0. Whoami 1. ݸਓ։ൃͰ੍࡞͖ͯͨ͠ΞϓϦέʔγϣϯͷ͓࿩ - 1-1. ػೳͷ֓ཁ - 1-2. EQMonitorΛࢧ͑Δٕज़ͷ͓࿩ - 1-3. ো֐ى͜͠·ͨ͠ & ڭ܇ - 1-4. ࠓޙͷల๬ ͱ ·ͱΊ

Slide 7

Slide 7 text

1-1. ݸਓ։ൃͰ੍࡞͖ͯͨ͠ΞϓϦέʔγϣϯͷ͓࿩ EQMonitor - Earthquake Monitoring Application (iOS/Android) - EQMonitorͱ͍͏஍਒ؔ࿈ͷΞϓϦέʔγϣϯΛ੍࡞ - ΞϓϦέʔγϣϯࣗମ͸FlutterͰ੍࡞

Slide 8

Slide 8 text

1-1. ݸਓ։ൃͰ੍࡞͖ͯͨ͠ΞϓϦέʔγϣϯͷ͓࿩ EQMonitor - Earthquake Monitoring Application (iOS/Android) - EQMonitorͱ͍͏஍਒ؔ࿈ͷΞϓϦέʔγϣϯΛ੍࡞ - ΞϓϦέʔγϣϯࣗମ͸FlutterͰ੍࡞ ڧ਒Ϟχλ ࠃཱݚڀ։ൃ๏ਓ๷ࡂՊֶٕज़ݚڀॴ͕ ఏڙ͢Δ8FCαʔϏε IUUQXXXLNPOJCPTBJHPKQ ೔ຊશࠃͷ༳Εͷঢ়گΛϦΞϧλΠϜͰදࣔ ը૾ղੳΛߦ͍ɺ஍ਤ্ʹදࣔ

Slide 9

Slide 9 text

1-1. ݸਓ։ൃͰ੍࡞͖ͯͨ͠ΞϓϦέʔγϣϯͷ͓࿩ EQMonitor - Earthquake Monitoring Application (iOS/Android) - EQMonitorͱ͍͏஍਒ؔ࿈ͷΞϓϦέʔγϣϯΛ੍࡞ - ΞϓϦέʔγϣϯࣗମ͸FlutterͰ੍࡞ ۓٸ஍਒଎ใ ؾ৅ிʹΑΓൃද͞Εͨۓٸ஍਒଎ใΛ ϦΞϧλΠϜͰදࣔ ओཁಈ 4೾ ॳظඍಈ 1೾ ۓٸ஍਒଎ใͷσʔλΛࣗલ+40/΁ม׵͠ɺ)5518FC4PDLFU"1*Ͱ഑৴

Slide 10

Slide 10 text

1-1. ݸਓ։ൃͰ੍࡞͖ͯͨ͠ΞϓϦέʔγϣϯͷ͓࿩ EQMonitor - Earthquake Monitoring Application (iOS/Android) - EQMonitorͱ͍͏஍਒ؔ࿈ͷΞϓϦέʔγϣϯΛ੍࡞ - ΞϓϦέʔγϣϯࣗମ͸FlutterͰ੍࡞ ஍਒ཤྺ աڈͷ஍਒ΛḪͬͯݕࡧ - ࠷େ਒౓ɾ஍਒ͷن໛(Ϛάχνϡʔυ)ɾ ਒ݯͷਂ͞ͰߜΓࠐΈ΋Մೳ - 2020೥11݄Ҏ߱ͷ஍਒৘ใΛݕࡧՄೳ (ࠓޙ֦ு༧ఆ)

Slide 11

Slide 11 text

1-1. ݸਓ։ൃͰ੍࡞͖ͯͨ͠ΞϓϦέʔγϣϯͷ͓࿩ EQMonitor - Earthquake Monitoring Application (iOS/Android) - EQMonitorͱ͍͏஍਒ؔ࿈ͷΞϓϦέʔγϣϯΛ੍࡞ - ΞϓϦέʔγϣϯࣗମ͸FlutterͰ੍࡞ ஍਒ཤྺͷৄࡉ ஍਒ཤྺͰબ୒ͨ͠஍਒৘ใͷৄࡉΛදࣔ - ਒ݯͷҐஔɾ؍ଌ఺ͷ਒౓ - ֤஍Ҭͷ਒౓ΛృΓͭͿ͠Ͱදࣔ - ֤஍ͷ਒౓͔Βɺಛఆͷ਒౓Λ؍ଌͨ͠౎ಓ෎ݝɾࢢ۠ொଜɾ ؍ଌ఺Λදࣔ

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Today’s Topic 0. Whoami 1. ݸਓ։ൃͰ੍࡞͖ͯͨ͠ΞϓϦέʔγϣϯͷ͓࿩ - 1-1. ػೳͷ֓ཁ - 1-2. EQMonitorΛࢧ͑Δٕज़ͷ͓࿩ - 1-3. ো֐ى͜͠·ͨ͠ & ڭ܇ - 1-4. ࠓޙͷల๬ ͱ ·ͱΊ

Slide 14

Slide 14 text

1-2. EQMonitorΛࢧ͑Δٕज़ͷ͓࿩ ΞϓϦέʔγϣϯαΠυ: Flutter - ϚϧνϓϥοτϑΥʔϜͳϑϨʔϜϫʔΫ Flutter Λ༻͍ͯ։ൃ - ஍ਤඳըʹ͸ Maplibre ͱ͍͏OSSΛར༻ - ϞϊϨϙߏ੒ʹ͠ɺ࠶ར༻ՄೳͳύοέʔδΛ࡞੒ - ಈ࡞ݕূ༻ͷΞϓϦέʔγϣϯɾαʔόଆ࣮૷ͰҰ෦࠶ར༻

Slide 15

Slide 15 text

1-2. EQMonitorΛࢧ͑Δٕज़ͷ͓࿩ αʔόαΠυαʔϏε܈ - αʔόଆͰ΍Βͳ͍ͱ͍͚ͳ͍͜ͱ͕৭ʑ͋Δ - ஍਒৘ใɾۓٸ஍਒଎ใͷ஝ੵɾ࠶഑৴ - ߜΓࠐΈػೳͷͨΊʹɺࣗલσʔλϕʔεΛ༻ҙ͢Δඞཁ͕͋Δ - ϦΞϧλΠϜͰۓٸ஍਒଎ใΛ഑৴͢ΔͨΊͷWebSocket APIαʔό - ஍਒৘ใΛ഑৴͢ΔͨΊͷHTTP APIαʔό - ஍ਤσʔλΛ഑৴͢ΔͨΊͷ ϑΝΠϧϗεςΟϯάαʔό - ௨஌ͷ഑৴ - ↑αʔϏε܈ͷ؂ࢹ

Slide 16

Slide 16 text

αʔόؔ࿈ͷߏ੒ ৭ʑಈ͔͍ͯ͠·͢

Slide 17

Slide 17 text

αʔόؔ࿈ͷߏ੒ ৭ʑಈ͔͍ͯ͠·͢ Project DM-D.S.S - ؾ৅ி͔Βͷ஍਒৘ใ(XMLిจ)Λѻ͍΍͍͢ܗ (JSON)ʹͯ͠ɺϦΞϧλΠϜͰೖखͰ͖Δαʔ Ϗε - ൺֱత҆ՁͰݸਓ։ൃऀͷ͓αΠϑʹ΍͍͞͠ (¥2,530/݄) - ͪͳΈʹɺؾ৅ி͔Β௚઀(ਖ਼֬ʹ͸JMBSCܦ༝Ͱ) ೖख͠ Α͏ͱ͢Δͱ ॳظඅ༻6ܻ, ֹ݄5ܻޙ൒΄ Ͳඞཁ

Slide 18

Slide 18 text

αʔόؔ࿈ͷߏ੒ ৭ʑಈ͔͍ͯ͠·͢ - Oracle Cloud Infrastructure (arm64 Compute Instance)্ͷίϯςφͰ DM-D.S.S͔Βͷ஍਒৘ใΛड͚औΓ

Slide 19

Slide 19 text

αʔόؔ࿈ͷߏ੒ ৭ʑಈ͔͍ͯ͠·͢ - eqservice͕ɺdmdata-proxy͔Β஍਒৘ใΛड͚औΓ - Firebase Cloud MessagingΛ௨ͯ͡Ϣʔβ΁௨஌഑৴ - Supabase CloudͰ༻ҙͨ͠PostgreSQL Database΁౤ೖ

Slide 20

Slide 20 text

αʔόؔ࿈ͷߏ੒ ৭ʑಈ͔͍ͯ͠·͢ - SupabaseͰड͚औͬͨ஍਒৘ใ͸ɺؔ࿈ͨ͠৘ใͱ݁߹͞Εอଘ - Supabaseͷػೳͷ1ͭɺSupabase RealtimeΛ௨ͯ͡ Postgres ChangesΛड৴

Slide 21

Slide 21 text

αʔόؔ࿈ͷߏ੒ ৭ʑಈ͔͍ͯ͠·͢ - Լه৘ใΛWebSocket APIͰ഑৴ - DM-D.S.S͔Βड৴ͨ͠஍਒৘ใ - PostgresͰؔ࿈৘ใΛ݁߹ͨ͠΋ͷ - Cloudflare TunnelΛ௨ͯ͡ Πϯ λʔωοτ΁࿐ग़ - ΞϓϦέʔγϣϯ͔ΒΞΫηε

Slide 22

Slide 22 text

αʔόؔ࿈ͷߏ੒ ৭ʑಈ͔͍ͯ͠·͢ - ΞϓϦέʔγϣϯ͔Βɺ஍਒ཤྺɾ࠷৽ͷۓٸ஍਒଎ใΛཁٻ͢Δ࣌͸ɺCloudflare Workers(ΤοδͷJavaScript࣮ߦ؀ڥ)Λ௨ͯ͡Supabase΁ΞΫηε - Cloudflare WorkersଆͰ͸ɺඞཁʹԠͯ͡Ωϟογϡ΍ΞΫηε੍ޚΛߦ͏

Slide 23

Slide 23 text

αʔόؔ࿈ͷߏ੒ ৭ʑಈ͔͍ͯ͠·͢

Slide 24

Slide 24 text

αʔόؔ࿈ͷߏ੒ ৭ʑಈ͔͍ͯ͠·͢ ؂ࢹମ੍ - αʔϏεΛ҆ఆͯ͠ಈ͔ͨ͢Ίʹɺ؂ࢹ͕ඞཁ - ࣗ୐ͷMac MiniͰ Metrics ͷऩू - baselime ͱ͍͏SaaSͰ Cloudflare Workers ͷ Log, Trace Λऩू

Slide 25

Slide 25 text

- Supabase CloudͷMetrics

Slide 26

Slide 26 text

- Docker ContainerͷMetrics

Slide 27

Slide 27 text

- WebSocket ServerͷMetrics

Slide 28

Slide 28 text

- ֤छLog΋͙֬͢ೝͰ͖ΔΑ͏ʹ - SSHͰ౿Έ୆αʔό΁઀ଓ͠ byobu(Window manager)Λىಈ͢Ε͹ ͲʔΜ

Slide 29

Slide 29 text

؂ࢹମ੍Λ੔͑ΔͱԿ͕خ͍͔͠ Grafana, Prometheus, ֤छExporter - Χοί͍͍μογϡϘʔυΛ࡞ͬͯɺώϚͳ࣌ʹ೷͖ʹߦ͘ͱ χϠοͱͰ͖Δ - ͳʹ͔໰୊͕ى͖ͨ࣌(Ex. ίϯςφ͕ҟৗऴྃͨ͠)ʹSlackͰ௨஌͕ඈͿͷͰ ਝ଎ʹରԠͰ͖Δ - ໰୊Ͱͳ͘ͱ΋ɺҟৗͳϦΫΤετ͕ඈΜͰ͖ͨ࣌ʹ͙͢ؾͮ͘͜ͱ͕Ͱ͖Δ

Slide 30

Slide 30 text

Today’s Topic 0. Whoami 1. ݸਓ։ൃͰ੍࡞͖ͯͨ͠ΞϓϦέʔγϣϯͷ͓࿩ - 1-1. ػೳͷ֓ཁ - 1-2. EQMonitorΛࢧ͑Δٕज़ͷ͓࿩ - 1-3. ো֐ى͜͠·ͨ͠ & ڭ܇ - 1-4. ࠓޙͷల๬ ͱ ·ͱΊ

Slide 31

Slide 31 text

1-3. ো֐ى͜͠·ͨ͠ ͔ͳ͍͠ - ৭ʑ৽ػೳΛ٧ΊࠐΜͩ େ͖ΊͳΞοϓσʔτͷެ։ޙʹൃੜ (v2.4)

Slide 32

Slide 32 text

1-3. ো֐ى͜͠·ͨ͠ ͭΒ͍ - ׂͱେ͖ΊͳΞοϓσʔτΛެ։ޙʹൃੜ (v2.4) - ϦϦʔε௚લʹߦͬͨAndroidͷGradle(ϏϧυγεςϜ)ͷߋ৽Ͱϛε͍ͯͨ͠ - AndroidͰಈ࡞νΣοΫΛ͍ͯ͠ͳ͔ͬͨ - ʮ·͋ɺAndroidͷϏϧυ΋௨Δ͠໰୊ͳ͍ͩΖʙʯͱָ͔؍తʹߟ͍͑ͯͨ (ͱ͍͏͔ɺGradleͷߋ৽͕͏·͘ߦ͍ͬͯΔ͔͸ɺϏϧυ͕௨Δ͔௨Βͳ͍͔ͷ2୒ͩͱࢥ͍ͬͯͨ) - Play Storeͷ৹ࠪ΋͋Δ͠ɺ·͔͞ىಈ͠ͳ͍ͳΜͯ͜ͱ͸ͳ͍ͱࢥ͍ͬͯͨ (͔͠΋Α͘෼͔Βͳ͍͚Ͳɺ৹ࠪʹ3೔͘Β͍଴ͬͨ)

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

1-3. ো֐ى͜͠·ͨ͠ ͷڭ܇ ͍ͨ΁Μͩͬͨ .. . - ϦϦʔεલʹख࣋ͪσόΠεͰಈ࡞ݕূ͢Δ΂͖ - PlayStoreͳΒɺ಺෦ϦϦʔε͢ΔͱϦϦʔεલϨϙʔτΈ ͍ͨͳͷ͕ಧ͘ͷͰͦΕ΋֬ೝ͢Δͱྑͦ͞͏ ͍ͭͰʹɺFirebase Test Lab΋ճͦ͏ - ΞϓϦετΞͷ৹ࠪ͸ա৴ͪ͠ΌͩΊ - ͳΜͰىಈ͠ͳ͍ΞϓϦ͕৹ࠪ௨ΔΜͩ…Google͸ԿΛͯ͠ ͍ΔΜͩ - ৗʹPC΁ΞΫηεͰ͖Δ४උΛ͢Δ΂͠ - PCৗ͍͔࣌࣋ͬͯͳͯ͘΋ྑ͍͚Ͳ iPadͰࣗ୐Mac΁ΞΫ ηεͰ͖ΔΑ͏ʹ͓ͯ͘͠ͱ ͳʹ͔ͱ҆৺

Slide 40

Slide 40 text

·ͱΊ ݸਓ։ൃͷεεϝ - ࣗ෼͸FlutterΤϯδχΞ - ݸਓ։ൃͰΞϓϦέʔγϣϯ~αʔόαΠυ~Πϯϑϥ·Ͱશ෦ࣗ෼Ͱ΍Δͱࢹ໺ ͕޿͕Δ - ࣗ෼ҰਓͰ։ൃɾӡ༻͍ͯ͠ΔͷͰɺ৽ػೳͷ࣮૷΋޷͖ͳΑ͏ʹͰ͖Δ - ීஈۀ຿Ͱ͸ͳ͔ͳ͔΍Βͳ͍CI/CDɾίʔυϕʔεͷ࡞੒΋ࣗ෼ͰΰϦοͱ - ౰વɺʮେ͍ͳΔྗʹ͸େ͍ͳΔ੹೚͕൐͏ʯ - ݸਓ։ൃ͸ɺࣗ෼͕Ϣʔβ & & ։ൃऀͩͱָ͍͠

Slide 41

Slide 41 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠! ࣭໰ɾؾʹͳΔ͜ͱ͕͋Ε͹ ͍ͭͰ΋࿈བྷ͍ͩ͘͞! Follow me on X: @YumNumm ιʔείʔυ (YumNumm/EQMonitor) PlayStore App Store