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
November 04, 2023
Programming
0
260
スモールスタートで始める フィードバック管理システム開発入門
gunmaweb #51
Tsubasa SEKIGUCHI
November 04, 2023
Tweet
Share
More Decks by Tsubasa SEKIGUCHI
See All by Tsubasa SEKIGUCHI
React Nativeではじめる ハイパフォーマンス スマホアプリ開発(GENIEE Edit)
tinykitten
0
90
AWS/GCPで始める 生成AI入門
tinykitten
0
110
Rustとtonicで始める gRPC入門(GENIEE Edit)
tinykitten
0
12
Rustとtonicで始める gRPC再入門
tinykitten
0
790
gRPCで始める ハイパフォーマンス タイプセーフウェブ開発
tinykitten
0
240
ノンデザイナーが 多少マシな見た目の資料を作る方法
tinykitten
0
170
はじめての GitHub Actionsアクション開発
tinykitten
0
130
UI/UXをないがしろにしない「きもちのいい」Webサービスの作り方
tinykitten
0
130
React Nativeではじめる ハイパフォーマンス スマホアプリ開発
tinykitten
0
91
Other Decks in Programming
See All in Programming
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.5k
Ruby on cygwin 2025-02
fd0
0
180
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
880
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.6k
Open source software: how to live long and go far
gaelvaroquaux
0
660
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
500
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
920
CloudNativePGを布教したい
nnaka2992
0
110
Datadog Workflow Automation で圧倒的価値提供
showwin
1
160
楽しく向き合う例外対応
okutsu
0
590
バッチを作らなきゃとなったときに考えること
irof
2
520
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
110
Featured
See All Featured
Producing Creativity
orderedlist
PRO
344
40k
We Have a Design System, Now What?
morganepeng
51
7.4k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
The Language of Interfaces
destraynor
156
24k
What's in a price? How to price your products and services
michaelherold
244
12k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Documentation Writing (for coders)
carmenintech
67
4.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Visualization
eitanlees
146
15k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
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