JavaScript
FontAwesome
React
パワポカラオケ
styled-jsx

パワポカラオケ用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 と比べ)余計なコンポーネントを作る必要がなくなる
  • 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 の値を初めて知りました。
いろんな所に応用が効きそうです。