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
24
エンジニアでも捗る デザイナー的思考入門
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
43
Rustとtonicで始める gRPC再入門
tinykitten
PRO
0
930
gRPCで始める ハイパフォーマンス タイプセーフウェブ開発
tinykitten
PRO
0
270
ノンデザイナーが 多少マシな見た目の資料を作る方法
tinykitten
PRO
0
200
Other Decks in Programming
See All in Programming
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
14
5.7k
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.2k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
880
CDK引数設計道場100本ノック
badmintoncryer
2
480
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
1
300
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
20250708_JAWS_opscdk
takuyay0ne
2
130
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
210
Featured
See All Featured
Designing for Performance
lara
610
69k
Faster Mobile Websites
deanohume
308
31k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fireside Chat
paigeccino
37
3.5k
Site-Speed That Sticks
csswizardry
10
700
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