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
6k
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
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
ウォンテッドリーのデータパイプラインを支える ETL のための analytics, rds-exporter / analytics, rds-exporter for ETL to support Wantedly's data pipeline
unblee
0
130
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
650
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
2.8k
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
770
What's new in Go 1.24?
ciarana
1
110
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
83k
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1.7k
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
280
Featured
See All Featured
Building Adaptive Systems
keathley
40
2.4k
Six Lessons from altMBA
skipperchong
27
3.6k
It's Worth the Effort
3n
184
28k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
RailsConf 2023
tenderlove
29
1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Practical Orchestrator
shlominoach
186
10k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
A designer walks into a library…
pauljervisheath
205
24k
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/ • ϔϯίθγЀϕ •
[email protected]
/ kinoko_iot •
ෛ憒ίθγЀϕ֢౮΅ګᴴӾ • Θֵ͚ͭ͵͚Ո΅्͠䟑ͧͥͶ͚ͫ…
Δ;Η • JavaScript͢ͷΝ;ͶͧΔ;Θͼ̵ ᜋ̸;ͩΣͽֵΥΡΞ͜ͼͣ͵ • JavaScriptΨ憝͞Άϔϝαφ΄ګக̵ςЄϝ̵ μ϶αίЀϕᒵIoTᥝΘ΄͢䟦͞ΟΡҁ͡Θ҂ • FirebaseΨֵ͞ΆψЀςЄϔЄό΄ᵞ坌Κݢ憙۸͢䮭 •
ᇙ᪁ޱ̵抅ਹꁿϹϦϸͽ͚͢͡Ҙ
FRONTEND CONFERENCE 2017