パワポカラオケ用Webアプリを作った

友達とクリスマスイブにパワポカラオケをすることになり（リア充！）、そのためのアプリを作りました。
その後、細かいバグ潰しやスタイリングをして今日公開しました。

パワポカラオケ

使い方

1. 「スライド」、「お題」を設定します。
   • 必要なら「設定」で制限時間/音声ONorOFF/一人あたりのスライドの枚数を設定できます。
2. 出場者を入力します。
   • カメラのマークをクリック/ドロップで顔写真を設定できます。
3. 「START」を押したらあとは画面クリックですすみます。

パワポカラオケを支える技術

React

最初はライブラリ不使用でいけるかなと思ったのですが、データの取り扱いなどが煩雑になってきたので、設計の段階で React + Redux で作ることにしました。Vue など他のライブラリでも大差なかったのではないかと思います。

Create React App

いつものやつです。

Redux

いつもの。React Reduxと一緒に。

styled-jsx

今回CSSは styled-jsx という新しめのライブラリを試しました。

• Vue や Shadow DOM っぽく書ける
• （styled-components と比べ）余計なコンポーネントを作る必要がなくなる
• Hyper、Now の ZEIT プロダクト

といった点でよさげだったので選びました。

結果は、メリットは上記の通りで、

• 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 の値を初めて知りました。
いろんな所に応用が効きそうです。