Edited at

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

More than 1 year has passed since last update.

友達とクリスマスイブにパワポカラオケをすることになり(リア充!)、そのためのアプリを作りました。

その後、細かいバグ潰しやスタイリングをして今日公開しました。

パワポカラオケ


使い方


  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 と比べ)余計なコンポーネントを作る必要がなくなる


  • HyperNowZEIT プロダクト

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

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



  • react-transition-group の CSSTransition がうまく動かない?(自分の書き方が悪いだけ?)

  • Babel の設定が必要なので Create React App を eject しなきゃいけない

といったデメリットがありました。

また、情報が少ない(英語でも少ない。日本語は皆無)ので今度記事を書こうかなと考えています。


ESLintprettier

ソースコードを綺麗にするやつです。

自動整形してくれるのでコードの(見た目の)綺麗さは気にしないでバリバリ書いていけるのが快感です。やみつきになる。

自分は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 の値を初めて知りました。

いろんな所に応用が効きそうです。