友達とクリスマスイブにパワポカラオケをすることになり（リア充！）、そのためのアプリを作りました。
その後、細かいバグ潰しやスタイリングをして今日公開しました。
使い方
- 「スライド」、「お題」を設定します。
- 必要なら「設定」で制限時間/音声ONorOFF/一人あたりのスライドの枚数を設定できます。
- 出場者を入力します。
- カメラのマークをクリック/ドロップで顔写真を設定できます。
- 「START」を押したらあとは画面クリックですすみます。
パワポカラオケを支える技術
React
最初はライブラリ不使用でいけるかなと思ったのですが、データの取り扱いなどが煩雑になってきたので、設計の段階で React + Redux で作ることにしました。Vue など他のライブラリでも大差なかったのではないかと思います。
Create React App
いつものやつです。
Redux
いつもの。React Reduxと一緒に。
styled-jsx
今回CSSは styled-jsx という新しめのライブラリを試しました。
といった点でよさげだったので選びました。
結果は、メリットは上記の通りで、
- react-transition-group の CSSTransition がうまく動かない？（自分の書き方が悪いだけ？）
- Babel の設定が必要なので Create React App を
ejectしなきゃいけない
といったデメリットがありました。
また、情報が少ない（英語でも少ない。日本語は皆無）ので今度記事を書こうかなと考えています。
ESLint、prettier
ソースコードを綺麗にするやつです。
自動整形してくれるのでコードの（見た目の）綺麗さは気にしないでバリバリ書いていけるのが快感です。やみつきになる。
自分はVSCodeで書いているのでVSCodeの拡張機能で保存時に整形するようにしています。
FontAwesome
5.0 になってめっちゃ変わってて驚きました。上記リンクは 5.0 のです。
5.0で追加されて機能で、Web Font ではなく、SVG を JavaScript で直埋めするというのがユーザーのフォント設定やリーダーアプリなどのアクセシビリティ的にいいです（もちろん Web Fontsを利用した従来のやり方も使えます）。
今回は react-fontawesome を使いました。
React Slot Machine
このパワポカラオケのためにDIYしたライブラリです（宣伝）。
ドキュメントが 適当 未完成なので充実していきます。
効果音
効果音ラボ様からお借りしました。
再生にはHTMLAudioElementを使っています。
これから
このアプリでは画像とテーマを用意する必要があるので自動生成できるようにしたい。
→ このパワポカラオケのアプリはできる。
面白かった人の投票機能とかも作る？。
タイマーで redux-saga を使ったほうがいいんですかね。
さいごに
FontAwesome の中で SVG の fill を CSS の color と一緒にするために使われる currentColor という CSS の値を初めて知りました。
いろんな所に応用が効きそうです。