react+redux+node.js+raspberry piで ビデオプレイヤーを作りたかった話
TRANSCRIPT
F I C C B X C R E A T I V E T E A MP U B L I S H E D B Y
H I K A - L A B OD A T E2 0 1 6 . 0 6 . 3 0
P R O J E C T
HIKA-LABO LIGHTNING TALK
React+Redux+Node.js+Raspberry Piで ビデオプレイヤーを作りたかった話
[email protected] / FICC inc. / BXクリエイティブ事業部
2016.06.30
福岡 陽 / akirafukuoka
F I C C B X C R E A T I V E T E A MP U B L I S H E D B YD A T EP R O J E C T
H I K A - L A B O 2 0 1 6 . 0 6 . 3 0プロフィール
- 株式会社FICC 勤務 - ブランドエクスペリエンスクリエイティブ事業部シニアディレクター - 在籍12年くらい（よく覚えてない） - 企画、デザイン、制作、フロント、サーバーサイド、いろいろやるで☺
福岡 陽akirafukuoka
F I C C B X C R E A T I V E T E A MP U B L I S H E D B YD A T EP R O J E C T
H I K A - L A B O 2 0 1 6 . 0 6 . 3 0最近の作品
- 個室トイレのドア開閉をRaspberry Piを使ってセンシング - Node.jsで作られたサービスにデータを送信、リアルタイムに空き情報を配信 - 結果トイレの混雑率の圧倒的改善が見られた - 命名はチームラボさんの同様のシステムより頂戴しました
- http://type.jp/et/log/article/_make_make
FICC Heavensdoor (2015.04)http://ficc-heavensdoor.herokuapp.com
F I C C B X C R E A T I V E T E A MP U B L I S H E D B YD A T EP R O J E C T
H I K A - L A B O 2 0 1 6 . 0 6 . 3 0
ensdoor (2015.04)
F I C C B X C R E A T I V E T E A MP U B L I S H E D B YD A T EP R O J E C T
H I K A - L A B O 2 0 1 6 . 0 6 . 3 0正直ベースで申し上げて
最近のフロントエンドの話題を聞いてる時のワイ
F I C C B X C R E A T I V E T E A MP U B L I S H E D B YD A T EP R O J E C T
H I K A - L A B O 2 0 1 6 . 0 6 . 3 0技術を身につけるために
ブランクを解消するためには とりあえず作るしかないやんけ
わかる
F I C C B X C R E A T I V E T E A MP U B L I S H E D B YD A T EP R O J E C T
H I K A - L A B O 2 0 1 6 . 0 6 . 3 0まず “何を作る？”
MIDI Fighter GIPHY
GIPHYのGIFアニメで MIDI Fighterみたいに遊べる VJツールが欲しい😻😻😻😻😻😻
それな
F I C C B X C R E A T I V E T E A MP U B L I S H E D B YD A T EP R O J E C T
H I K A - L A B O 2 0 1 6 . 0 6 . 3 0こうしたらええんちゃう？
Raspberry Pi
Node.jsExpress
React Redux
HDMI
管理画面
GIF再生画面
プロジェクタ
ネットワーク
ブラウザ
MIDI
Arduino
F I C C B X C R E A T I V E T E A MP U B L I S H E D B YD A T EP R O J E C T
H I K A - L A B O 2 0 1 6 . 0 6 . 3 0とりあえず
どこから手つけていいかわからんし Node.jsからとりあえず触ったろ!!
ヒェ～ッ
F I C C B X C R E A T I V E T E A MP U B L I S H E D B YD A T EP R O J E C T
H I K A - L A B O 2 0 1 6 . 0 6 . 3 0しかし
- どこから手をつけていいかわからない - 今まで使っていたFluxxorはいつの間にか死んでいた - 時代はReduxとか言われてもだな…
ブランクから山積する問題
何をしていいのか全くわからない状況ッ…!!
F I C C B X C R E A T I V E T E A MP U B L I S H E D B YD A T EP R O J E C T
H I K A - L A B O 2 0 1 6 . 0 6 . 3 0こういう時は
型 (ボイラープレート) で覚える
F I C C B X C R E A T I V E T E A MP U B L I S H E D B YD A T EP R O J E C T
H I K A - L A B O 2 0 1 6 . 0 6 . 3 0いい感じのボイラープレート、入場!!
react-webpack-nodehttps://github.com/choonkending/react-webpack-node
- 極めて今っぽいボイラープレート（2016.06.30現在 ver 1.7.15） - ES6/ES2015, React.js, Redux, React Router, React Router Redux Hot reloading, CSS
modules, Express 4.x…
Este.jshttps://github.com/este/este
redux-webpack-es6-boilerplatehttps://github.com/nicksp/redux-webpack-es6-boilerplate
他にも色々
採用している技術が細かく違うんじゃ
F I C C B X C R E A T I V E T E A MP U B L I S H E D B YD A T EP R O J E C T
H I K A - L A B O 2 0 1 6 . 0 6 . 3 0react-webpack-node触ってみた
一通りの知識を仕入れるにはもってこいじゃ😤😤
- React-Router、サーバーサイドレンダリング対応 - ホットローディング対応（react-transform-hmr） - ログイン認証サンプル付き - HerokuやDigital Oceanにすぐにデプロイできる - とりあえず今までできたことを最新の環境で実現できそう
react-webpack-nodeで感じた便利ポイント
F I C C B X C R E A T I V E T E A MP U B L I S H E D B YD A T EP R O J E C T
H I K A - L A B O 2 0 1 6 . 0 6 . 3 0PostCSS
秘密結社みたいなマークが怖い😱😱
- いまグイグイきてるCSSプリプロセッサ - モジュールをどんどん作れる
- ネストは標準では非対応、でもpostcss-nestedを使えば🙆🙆 - CSS NEXTに対応するにはpostcss-custom-properties
- Reactと組み合わせるとコンポーネント単位でスタイルが適用できる
PostCSShttp://postcss.org
F I C C B X C R E A T I V E T E A MP U B L I S H E D B YD A T EP R O J E C T
H I K A - L A B O 2 0 1 6 . 0 6 . 3 0PostCSS+React実演
.list { border-top: #CCCCCC solid 1px; &:hover { background: #000000; color: #FFFFFF; } .title { font-size: 14px; } .date { font-size: 10px; } }
import classNames from 'classnames/bind'; import styles from 'css/components/style'; const cx = classNames.bind(styles);
const List = ({data}) => { return ( <div className={cx('list')}> <p className={cx('title')}>{data.title}</p> <p className={cx(‘date')}>{data.date}</p> </div>); };
1 2 3 4 5 6 7 8 9
10 11 12 13
style.css
1 2 3 4 5 6 7 8 9
10 11 12 13
List.jsx
classnamesを使うことで、コンポーネント単位でスタイルを適用可能
F I C C B X C R E A T I V E T E A MP U B L I S H E D B YD A T EP R O J E C T
H I K A - L A B O 2 0 1 6 . 0 6 . 3 0結局のところ
Raspberry Pi
Node.jsExpress
React Redux
HDMI
管理画面
GIF再生画面
プロジェクタ
ネットワーク
ブラウザ
MIDI
Arduino
F I C C B X C R E A T I V E T E A MP U B L I S H E D B YD A T EP R O J E C T
H I K A - L A B O 2 0 1 6 . 0 6 . 3 0結局のところ
今日までに完成しませんでした…
F I C C B X C R E A T I V E T E A MP U B L I S H E D B YD A T EP R O J E C T
H I K A - L A B O 2 0 1 6 . 0 6 . 3 0これからの話をしよう
ここで希望のない話をしよう!!
F I C C B X C R E A T I V E T E A MP U B L I S H E D B YD A T EP R O J E C T
H I K A - L A B O 2 0 1 6 . 0 6 . 3 0これからの話をしよう
少なくともこれからWebサイトは “裏通り” になる
AMP Facebook Instant Articles Apple News …
僕らはプラットフォームに逆らうことが出来ない。弱みを握られている…
F I C C B X C R E A T I V E T E A MP U B L I S H E D B YD A T EP R O J E C T
H I K A - L A B O 2 0 1 6 . 0 6 . 3 0これからの話をしよう
一方で増大するフロントエンド技術習得コスト
28日後のフロントエンドの話題は一体どうなっている？ （28週後は言わずもがな…）
F I C C B X C R E A T I V E T E A MP U B L I S H E D B YD A T EP R O J E C T
H I K A - L A B O 2 0 1 6 . 0 6 . 3 0これからの話をしよう
支払うものは多く、得るものは少ない
技術習得 成果
F I C C B X C R E A T I V E T E A MP U B L I S H E D B YD A T EP R O J E C T
H I K A - L A B O 2 0 1 6 . 0 6 . 3 0大切なのは “何を作るか”
習熟と並行して「何を実現するか」を考える
…ということが言いたかったんや😄😄
F I C C B X C R E A T I V E T E A MP U B L I S H E D B YD A T EP R O J E C T
H I K A - L A B O 2 0 1 6 . 0 6 . 3 0
React+Redux+Node.js+Raspberry Piで ビデオプレイヤーを作りたかった話
HIKA-LABO LIGHTNING TALK
終制作・著作
福 岡 陽