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
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
260
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
150
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
130
What's new in AppKit on macOS 26
1024jp
0
170
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
980
GPUを計算資源として使おう!
primenumber
1
290
Porting a visionOS App to Android XR
akkeylab
0
910
AIのメモリー
watany
11
930
iOS開発スターターキットの作り方
akidon0000
0
170
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
190
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.3k
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.1k
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Rails Girls Zürich Keynote
gr2m
95
14k
A Tale of Four Properties
chriscoyier
160
23k
Balancing Empowerment & Direction
lara
1
490
We Have a Design System, Now What?
morganepeng
53
7.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Git: the NoSQL Database
bkeepers
PRO
431
65k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
The Pragmatic Product Professional
lauravandoore
35
6.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
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