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
スモールスタートで始める フィードバック管理システム開発入門
Search
Tsubasa SEKIGUCHI
PRO
November 04, 2023
Programming
0
290
スモールスタートで始める フィードバック管理システム開発入門
gunmaweb #51
Tsubasa SEKIGUCHI
PRO
November 04, 2023
Tweet
Share
More Decks by Tsubasa SEKIGUCHI
See All by Tsubasa SEKIGUCHI
Reactで始める リグレッションテスト概論
tinykitten
PRO
0
25
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
Gunma.web #55
tinykitten
PRO
0
210
React Nativeではじめる ハイパフォーマンス スマホアプリ開発(GENIEE Edit)
tinykitten
PRO
0
120
AWS/GCPで始める 生成AI入門
tinykitten
PRO
0
150
Rustとtonicで始める gRPC入門(GENIEE Edit)
tinykitten
PRO
0
44
Rustとtonicで始める gRPC再入門
tinykitten
PRO
0
930
gRPCで始める ハイパフォーマンス タイプセーフウェブ開発
tinykitten
PRO
0
270
ノンデザイナーが 多少マシな見た目の資料を作る方法
tinykitten
PRO
0
200
Other Decks in Programming
See All in Programming
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
190
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
117
43k
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
120
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
480
Yes, You Can Work on Rails & any other Gem
kaspth
0
110
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.2k
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
0
350
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
440
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
440
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
1
220
テスト環境にCDを導入してみた
yasaigaoisi
0
100
「App Intent」よくわからんけどすごい!
rinngo0302
1
120
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
The Cult of Friendly URLs
andyhume
79
6.5k
Making Projects Easy
brettharned
116
6.3k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Adopting Sorbet at Scale
ufuk
77
9.5k
Faster Mobile Websites
deanohume
308
31k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Building Applications with DynamoDB
mza
95
6.5k
Transcript
εϞʔϧελʔτͰ࢝ΊΔ ϑΟʔυόοΫཧγεςϜ։ൃೖ Introduction to Feedback Management System Development. Gunma.web 2023.11.04
Tsubasa SEKIGUCHI
TinyKitten Freelance frontend engineer
Tsubasa SEKIGUCHI Λڌͱ͢Δ܈അݝલڮࢢग़ ϑϦʔϥϯεϑϩϯτΤϯυΤϯδχΞ ͖ͬͨΜͱݺΕ͍ͯ·͢
ͿΓʹ໊ͷσβΠϯΛߋ৽͠·ͨ͠ɻ
NFCλά͕͋Γ·͢ ࠓൃදͰ༻͍ͯ͠ΔMacBook Airͷఱ൘ʹషΒΕͨεςοΧʔͷཪଆʹ NFCλάΛຒΊࠐΜͰ͍·͢ɻ ձࢀՃͷํNFCରԠεϚϗͰੋඇ͓ࢼ͍ͩ͘͠͞ɻ ໊࣮ࡳʹ/'$λάΛજ·͍ͤͯ·͢ɻ
TrainLCD ຊશࠃͷమಓ࿏ઢͰ͑Δ ৽ײ֮ͷφϏήʔγϣϯΞϓϦͰ͢ɻ ˞ը૾։ൃதͷͷͰ͢ɻ
ిޫܝࣔ൘෩ςʔϚ ධ৴த ˞ը૾։ൃதͷͷͰ͢ɻ
TrainLCDͷݪܕதͷݪܕͷΞϓϦʹؔͯ͠ͷηογϣϯΛͨ͠ࡍͷ৴͕YouTubeʹ͋Γ·͢ https://www.youtube.com/watch?v=zJ92TUjhdEw&t=15820s
ࠓճͷLTͰ͢ൣғ ಛఆΞϓϦʹಛԽͨ͠খنͳ ϑΟʔυόοΫཧΞϓϦͷ࡞Γํ ࣮ࡍʹ5SBJO-$%ΞϓϦͰ༻͞Ε͍ͯΔϑΟʔυόοΫཧγεςϜΛݩʹɺ ࣮ͷݟΛγΣΞ͠·͢ ͜ͷεϥΠυޙ΄Ͳ4QFBLFS%FDLʹγΣΞ༧ఆͰ͢ SpeakerDeck
ࠓճͷLTͰ͞ͳ͍ൣғ ͜ͷγεςϜͷ։ൃ͕ඞཁʹͳΔ΄ͲͷΞϓϦͷ࡞Γํ ͕Μ͍ͬͯͩ͘͞ ͷΫϚΛୀ࣏͢Δํ๏ ͜ͷൃදͳΜͯฉ͍͍ͯͳ͍Ͱࠓ͙͢৸͍ͯͩ͘͞ έʔδϚονͰউͭํ๏ Γ·ͤΜɻΠʔϩϯɾϚεΫ͔βοΧʔόʔάʹฉ͍͍ͯͩ͘͞
͡Ίʹ Introduction
ࠓճͷϓϩμΫγϣϯͳࡐ TrainLCDΞϓϦͷϑΟʔυόοΫཧγεςϜ TrainLCDͱ͍͏ΞϓϦΛझຯͰ࡞͍ͬͯ·͢ɻ ΞϓϦͷػೳͱͯ͠ʮϑΟʔυόοΫʯ͕͋Γɺ ͜ͷػೳΛ͏ͱࣗ࡞ͷγεςϜʹϝοηʔδ͕ඈͿΈͰ͢ɻ LP GitHub
ࠓճͷϓϩμΫγϣϯͳࡐ ΞϓϦଆͷૹ৴ը໘ %ZOBNJD*TMBOEͱඃ͍ͬͯΔͷޙͰ͠·͢🥴
ࠓճͷϓϩμΫγϣϯͳࡐ ࣮ࡍಈ͍͍ͯΔWeb UI جຊతʹϑΟʔυόοΫͷଞऀͷ։ࣔې͍ͯ͡ΔͷͰ΅͔͠ଟΊͰ͢
ઃܭΛߦ͏ Make a Design
γεςϜʹԿ͕ඞཁ͔ ཁ݅ఆٛ ΞϓϦ͔Β͙͢ఏग़Ͱ͖ΔΑ͏ʹ͠Α͏ ͳΔ͘ίετͰ࡞Γ͍ͨͶ νέοτ୯ҐͰWeb͔ΒཧͰ͖ͨΒ͍͍Ͷ ֎෦ͷάϧʔϓΣΞʹ௨ΛඈͤΔΑ͏ʹ͠Α͏
ͪΐͬͱਂ۷Γ͢Δ ΞϓϦ͔Β͙͢ఏग़Ͱ͖ΔΑ͏ʹ͠Α͏ ૢ࡞͕ࡶͩͱ୭ૹͬͯ͘Εͳ͍͔ =>γϯϓϧͳ6*Ͱඞཁ࠷ݶͷೖྗͰ༻Մೳʹ ͳΔ͘ίετͰ࡞Γ͍ͨͶ ΘΕ͍ͯͳ͍࣌ʹ՝ۚ͞Εͨ͘ͳ͍͠ɺͦͦ࠷ྉۚΛ͏ͷݏ => mBaaSαʔόʔϨε͕͍͍ͷͰʁ
νέοτ୯ҐͰWeb͔ΒཧͰ͖ͨΒ͍͍Ͷ Web UIΛ࡞Ζ͏ =>ϞμϯͳWebٕज़ͰΠέΠέͳUIΛ࡞Ζ͏ ֎෦ͷάϧʔϓΣΞʹ௨ΛඈͤΔΑ͏ʹ͠Α͏ ίϛϡχςΟDiscord͕͋Δ͔Βͦ͜ʹඈͦ͏ =>ఏग़࣌ʹWebhookΛୟ͚ΔΑ͏ʹ͠Α͏
ͪΐͬͱਂ۷Γ͢Δ ࠓճ͢ൣғ ΞϓϦ͔Β͙͢ఏग़Ͱ͖ΔΑ͏ʹ͠Α͏ ૢ࡞͕ࡶͩͱ୭ૹͬͯ͘Εͳ͍͔ =>γϯϓϧͳ6*Ͱඞཁ࠷ݶͷೖྗͰ༻Մೳʹ ͳΔ͘ίετͰ࡞Γ͍ͨͶ ΘΕ͍ͯͳ͍࣌ʹ՝ۚ͞Εͨ͘ͳ͍͠ɺͦͦ࠷ྉۚΛ͏ͷݏ =>
mBaaSαʔόʔϨε͕͍͍ͷͰʁ νέοτ୯ҐͰWeb͔ΒཧͰ͖ͨΒ͍͍Ͷ Web UIΛ࡞Ζ͏ =>ϞμϯͳWebٕज़ͰΠέΠέͳUIΛ࡞Ζ͏ ֎෦ͷάϧʔϓΣΞʹ௨ΛඈͤΔΑ͏ʹ͠Α͏ ίϛϡχςΟDiscord͕͋Δ͔Βͦ͜ʹඈͦ͏ =>ఏग़࣌ʹWebhookΛୟ͚ΔΑ͏ʹ͠Α͏
ٕज़બఆɾ࣮ Technology selection and implementation
ͳΔ͘ίετͰ࡞Γ͍ͨ ݱ࣌ͰFirebaseΛ͍ͬͯ·͢ ઌൃදͨ͠RustͷgRPC APIͰ࿏ઢͷরձ͚ͩߦ͍ɺ σʔλอଘ͠ͳ͍ อଘͨ͘͠ͳ͍ ྉ͚ۚͬͨͩɻBlazeϓϥϯ ैྔ੍
ʹ͢Δͱ֎෦ͱ௨৴Ͱ͖·͢ DiscordͷWebhookΛCloud Functions͔Βୟ͘ͱ͍ͬͨ͜ͱՄೳʹͳΔ ༻͍ͯ͠ΔFirebaseͷػೳ "VUIFOUJDBUJPO 'JSFTUPSF 4UPSBHF $MPVE'VODUJPOT 3FNPUF$PO fi H
ίετͰ࡞Γ͍ͨͳΒFirebase(1/2) ༻͍ͯ͠ΔFirebaseͷػೳ ༁ Authentication ಗ໊ೝূɻݸผʹϑΟʔυόοΫૹ৴ऀΛࣝผ͢ΔͨΊʹ༻ Firestore ϑΟʔυόοΫͷ༰ࣗମΛอଘ Storage
ϑΟʔυόοΫʹఴ͞Ε͍ͯΔεΫγϣΛอଘ
༻͍ͯ͠ΔFirebaseͷػೳ ༁ Cloud Functions ϑΟʔυόοΫ͕ಧ͍ͨ௨ͱ νέοτ͕ྃͨ͠ࡍʹDiscordѼʹ௨Λૹ৴ - Remote
Con fi g ΞϓϦଆͰ͏ϑΟʔυόοΫͷ࠷จࣈΛఆٛ ίετͰ࡞Γ͍ͨͳΒFirebase(2/2)
νέοτ୯ҐͰWeb͔ΒཧͰ͖ͨΒ͍͍Ͷ ݱ࣌ͰWeb UIFlutter on the WebͰ࡞ΒΕ͍ͯ·͢ ࠷ॳωΠςΟϒΞϓϦͱͯ͠Ұ෦ͷϘϥϯςΟΞCSͷํʹ൦͢ΔͨΊʹ FlutterΛͬͯωΠςΟϒΞϓϦΛ։ൃ͍ͯ͠·͕ͨ͠ɺ ϘϥϯςΟΞͷํ͕૿͑ͨͷͰWebͰಈ͘Α͏ʹ͢Δඞཁ͕͋Γ·ͨ͠
νέοτͷཧ͕Մೳ ࠓ࣮͞Ε͍ͯΔػೳͰ۩ମతʹ νέοτͷӾཡ νέοτͷղܾɾະղܾԽ ಗ໊ೝূ͝ͱͷνέοτরձ ͍ۙ͏ͪʹReact(Next.js)Ͱॻ͖͍͑ͨ Flutter on the Web·͓ͩ͢͢ΊͰ͖·ͤΜʜ ͘ͳΔͷͰཧ༝লུ͠·͢
֎෦ͷάϧʔϓΣΞʹ௨ΛඈͤΔΑ͏ʹ Cloud Functions for FirebaseͰWebhookΛୟ͘ Cloud Functions for FirebaseFirebaseͷྉۚϓϥϯΛBlazeʹ͢Δͱ
ैྔ՝͕ۚ༗ޮʹͳΓɺGoogle͔Βݟͯ֎෦ͷαʔόͱ ௨৴͕Ͱ͖ΔΑ͏ʹͳΓ·͢ɻ
DiscordʹϑΟʔυόοΫड৴Λ௨͢Δํ๏ - FirebaseͷϓϥϯΛBlazeʹมߋ - Discord͔Βಛఆνϟϯωϧͷ Webhook URLΛऔಘ͢Δ - Cloud FunctionsʹͯΒͤΔؔʹ
Webhook URLΛઃఆ͢Δ - fetchͰDiscordͷWebhookΛୟ͘
·ͱΊ Firebase͍͍ͧ օ͞ΜͪΖΜ͝ଘ͔ͱࢥ͍·͕͢ɺ FirebaseॊೈͰߴͳN#BB4αʔϏεͰ͢ɻ ίετͰαΫοͱ؆қతͳΞϓϦΛ࡞Δͷʹ͔ܽͤ·ͤΜ TrainLCDΞϓϦΛ͝ርʹ ൱ఆతͳઌೖ؍Λ͍࣋ͬͯͨਓͰɺͬͯΈΕ ʮੜ׆ʹ͔ܽͤͳ͍ʯ໘ന͍ΞϓϦͱධՁͯ͠Β͍͑ͯ·͢
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ Thank you for listening! Gunma.web 2023.11.04 Tsubasa SEKIGUCHI