Help us understand the problem. What is going on with this article?

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

ygkn
JSer。 WriterLighter ( http://writerlighter.github.io/ )という小説用のテキストエディタを作っています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした