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
Firebaseで作るIoTバックエンド
Search
Yosuke Onoue
February 12, 2017
Technology
1
1k
Firebaseで作るIoTバックエンド
キノコがIoTについて勉強する会の発表資料です。
Yosuke Onoue
February 12, 2017
Tweet
Share
More Decks by Yosuke Onoue
See All by Yosuke Onoue
ネットワーク可視化の世界
likr
7
6.1k
Think About Front-end Web Development with Rust
likr
2
510
Yewにおけるoff-the-main-thread
likr
1
730
行政事業レビューデータの可視化 / Visualization of Japan's National Budget with JUDGIT!
likr
1
210
モダンJavaScript再入門 / Re-introduction to Modern JavaScript
likr
24
11k
Web-based Data Visualization with Rust and WebAssembly
likr
4
5.6k
Introduction to Graph Drawing
likr
0
470
20190707Ionic_Meetup.pdf
likr
0
400
About the end of the web
likr
2
510
Other Decks in Technology
See All in Technology
IAMのマニアックな話2025
nrinetcom
PRO
6
1.4k
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.6k
手を動かしてレベルアップしよう!
maruto
0
250
フォーイット_エンジニア向け会社紹介資料_Forit_Company_Profile.pdf
forit_tech
1
1.7k
Platform Engineeringで クラウドの「楽しくない」を解消しよう
jacopen
4
190
20250304_赤煉瓦倉庫_DeepSeek_Deep_Dive
hiouchiy
2
120
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
12k
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
550
目標と時間軸 〜ベイビーステップでケイパビリティを高めよう〜
kakehashi
PRO
8
970
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
410
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
210
実は強い 非ViTな画像認識モデル
tattaka
3
1.4k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Making Projects Easy
brettharned
116
6k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
How to Ace a Technical Interview
jacobian
276
23k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Visualization
eitanlees
146
15k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Transcript
Firebaseͽ֢ΡIoTϝϐμεЀϖ ͠΄͜͞ (@_likr) κϛπ͢IoTͺ͚ͼۣ䔶ͯΡտ
ᛔ૩奧Օ • ͠΄͜͞ (@_likr) • Ղ᮷य़ 檭ᣟݳᣟݳරᙙᎸᑪവ昲ψЀόЄ ᒽ΄͵Η΄ᑀϳϘϐϕ ᇙਧۗර •
ૡᎸᑪᑀ΄櫮䶲ૡ䌑ධͼ ;ͩΣΨץԧͭ͵䶲ͯ͢Ρ • ng-kyoto̵GDGᐟ䜜̵KFUG • ݢ憙۸΄Ꮈᑪ;͡ΚͼΡ • ͺͥ͵ https://egrid.jp/
扖ٖͯ • JavaScript + IoTΨᘍ͞Ρ • ฌՔ΄JavaScript&WebϢϺЀϕεЀϖԪఘΨ承Ρ • JavaScript +
RaspberryPI ͽ֢͵Θ΄Ψ奧ՕͯΡ
JavaScript;IoT
JavaScript • Ԇϣ϶γσӤͽ㵕֢ͯΡ敽ᰁϤϺν϶ϬЀν承 • 㵕ጱࣳ՞ͧ • ϤϺόαϤϦЄφ΄ηϣυδμϕݻ • ๋ᬪͷΝ;Δ;Θ͵(ES2015뺶) •
arrow function • class • Promise • ϣ϶γσզक़ͽΘڥአ͢䓈͢ͼ͚Ρ
ϣ϶γσզक़΄厏ह • πϫЀϖ϶αЀϑЄϸ̵ςЄϝςαϖ • Node.js • ϔφμϕϐϤίϤϷ • Electron̵NW.js •
ϜαϣϷϐϖίϤϷ • Ionic̵Onsen UI̵React Native̵…
JavaScript;IoT • Node.js䌏䖕 • Arduino (Johnny-Five) • RaspberryPI • Intel
Edison • Tessel • https://tessel.io/ • Firefox OS • ᜉ͚ΚͺͶ͵΄…
JavaScriptͶͧͽᜋ̸ͽͣΡ
JavaScriptͽIoTϢϸφόϐμ IoTϔϝαφ IoTϝϐμεЀϖ ϢϺЀϕεЀϖ Web / ίϤϷ ςЄϝ Webϣ϶γσ φϫЄϕϢζЀ
ϔφμϕϐϤ ίϤϷ DB ᥴຉ ψЀςЄ ϷϯπЀ … ͩͩ΄扖 ͩͩΨ͚͡䮭ͯΡ͡Ҙ
Firebase • Google΄׀ͯΡBaaS (Backend as a Service) • Ԇ䱛ᚆ •
扯戣 • ϮЄϸ扯戣̵OAuth (Twitter̵Facebook̵…) • ϷίϸόαϭDB • Ϸίϸόαϭݶ๗ݢᚆφκЄϫϹφDB • ϨφϓΰЀν • ᇿᛔϖϮαЀ̵HTTPS̵HTTP/2䌏䖕 • 僻ාϤ϶Ѐ͘Π
αϮЄυ Webϣ϶γσ φϫЄϕϢζЀ ϔφμϕϐϤ ίϤϷ ᥴຉ ψЀςЄ
ฌՔ΄JavaScriptԪఘ
JavaScriptϤϺν϶ϬЀν΄ᝒ䘁 • 揞୧承䱛ᚆ ꔄ ϕ϶ЀφϞα϶ • ϯυϲЄϸτφϓϭ΄ӧࣁ ꔄ ϯυϲЄϸϝЀϖ϶ •
WebϢϺЀϕεЀϖྲ᯿΄䃀ے ꔄ WebϢϺЀϕεЀϖϢϹЄϭϼЄμ
ϕ϶ЀφϞα϶;ϯυϲЄϸϝЀϖ϶ • ϕ϶ЀφϞα϶ • JS΄䱛ᚆΨ䝭䔴̵ݘ͚ϣ϶γσΎ΄䌏䖕 • Babel̵TypeScript • ϯυϲЄϸϝЀϖ϶ •
愢හ΄JSϢήαϸᒵΨ㶨Ӟ΄ϢήαϸΔ;ΗΡ • Node.jsφόαϸ΄ϤϺν϶ϬЀν(CommonJS) • Webpack • loaderͽϕ϶ЀφϞαϸΘݢᚆ
Webpack • https://webpack.js.org/ • ϺЄύЄ̵Ϥ϶ναЀΞΡ䝭䔴 • Webpack 2 • Tree
Shaking • webpack-dev-server • ϺЄθϸ樄咲አςЄϝ • ϶αϣϷϺЄϖ • BrowserHistoryΎ΄ϢζЄϸϝϐμ
Babel • https://babeljs.io/ • ๋ෛ΄ES΄՛䯭ᒵΨES5䄜䟵 • ES(ECMA Script) • JavaScript΄䰤伛憒໒
• https://kangax.github.io/compat-table/es6/ • plugin̵presetΞΠ䝭䔴 • babel-preset-es2017̵babel-preset-react
WebϢϺЀϕεЀϖϢϹЄϭϼЄμ • SPA(Single Page Application)΄ฦ݊ • JavaScriptΞΡUI䯤塈΄ྲ᯿͢䃀ے • DOM̵֢ϔЄόϢϺЄ΄愢櫏۸Ύ΄䌏䖕 •
Angular̵ReactJS̵… ϒϥβ HTMLΨኞ౮ ίϤϷξЄτϴЀ ςЄϝ 8FCαʔό ϒϥβ ᶉጱϢήαϸΨᯈמ "1*αʔό JSONᒵΨኞ౮ ϚαϓΰϣίϤϷ 䕪΄WebίϤϷ SPA
ReactJS • https://facebook.github.io/react/ • Facebook͢樄咲ͯΡηЄϤЀϊЄφ΄ WebϢϺЀϕεЀϖView϶αϣ϶Ϸ • 㫪మDOM • DOM
(Document Object Model) • ᥝ᮱ړͶͧΨๅෛͯΡͩ;ͽ㵁ሲጱൈኮ • JSX • HTML϶αμဩͽViewΨਧ嬝ͯΡ
FirebaseͽIoTϝϐμεЀϖΨ֢Ρ
ፓጱ • ψЀςЄᒵ΄ϔЄόΨᵞ坌ͯΡ • Webϣ϶γσӤͽݢ憙۸ͯΡ • ค֢͵ΚͺΨςЄϠφΓͥͯΡ • https://vizlab-thermometer.firebaseapp.com/ •
AngularFire + D3.js
䯤౮ • RaspberryPI 1 TypeB • Firebase • 扯戣̵ϷίϸόαϭDB̵ϨφϓΰЀν •
WebϢϺЀϕεЀϖ • ReactJS̵D3.js • webpack 2̵babel • https://github.com/likr/thermoviz
None
ϔϯ • https://thermoviz.firebaseapp.com/ • ϔϯίθγЀϕ • demo@example.com / kinoko_iot •
ෛ憒ίθγЀϕ֢౮΅ګᴴӾ • Θֵ͚ͭ͵͚Ո΅्͠䟑ͧͥͶ͚ͫ…
Δ;Η • JavaScript͢ͷΝ;ͶͧΔ;Θͼ̵ ᜋ̸;ͩΣͽֵΥΡΞ͜ͼͣ͵ • JavaScriptΨ憝͞Άϔϝαφ΄ګக̵ςЄϝ̵ μ϶αίЀϕᒵIoTᥝΘ΄͢䟦͞ΟΡҁ͡Θ҂ • FirebaseΨֵ͞ΆψЀςЄϔЄό΄ᵞ坌Κݢ憙۸͢䮭 •
ᇙ᪁ޱ̵抅ਹꁿϹϦϸͽ͚͢͡Ҙ
FRONTEND CONFERENCE 2017