同時視聴配信用のタイマーを作った話

作ったものはこちら

https://sync-timer.netlify.app/

ソースコードはこちら

https://github.com/mather/simple-stopwatch

経緯

きっかけは 2020 年 8 月にとある VTuber の同時視聴配信でつぶやかれた一言。

誰かに使われる予定もなく自己満足で開発を終え早一年…。

本当はグリーンバックとか入れたほうがいいのかな、とか考えながらやり残した感はあったのですが、細かく実装を追加してもどうせ使わないかと思うのでとりあえず放置していた。

そんな折、きっかけとなった VTuber の方も突然の引退…。 「推しは推せるときに推しておけ」とはこのこと。

しかし、そういったイベントとは一切関係なく開発意欲は突然湧き上がってくるもので、

  • 使い慣れてたので Tailwind CSS を使ってたけど、1 ページだけのアプリに Tailwind はやりすぎ感があった
  • Elm アプリに対してもっと簡単に導入できる CSS はないだろうかと考えてた
    • 最近 Pico.css というものの存在を知って使ってみたくなった
  • どうせ開発するならグリーンバックとか作っちゃえ
  • どうせ開発するならヘルプとか作って使いやすくしたい

と週末に思いついたことをガンガン作ってみた。

ひとまず、やりたいことはやったかな。 あとはもし誰かからフィードバックがあったら考えよう。

技術について

言語、フレームワークなど技術的な要素は次のようなものです。

  • Elm 0.19.1
    • 関数型プログラミング言語
    • TEA (The Elm Architecture)
    • 0.19.0 がリリースされたのが 2018 年。 0.19.1 が 2019 年。なんかもうこれで慣れてきた。
    • 未体験の方はぜひ一度触ってみて欲しい。エラーメッセージの丁寧さは群を抜いている。
  • Pico.css master(2021-08-13)
    • ミニマル CSS フレームワーク
    • div とかではなく main, section, article など適切な HTML を書くことで自然にスタイルが適用されるように設計されている
  • Parcel 2
    • 設定ファイルの（ほぼ）不要なビルドツール
    • Elm にも対応している
    • 昨年の段階で使っていた v1 が非推奨になったので v2 へ変更したが、 2.0.0-rc.0 が最新だった。正式版をリリースしてから旧バージョンを非推奨にしたほうが良いのでは…？
  • Netlify
    • Github と連携すると Github Actions なしでもある程度の CI, CD を行ってくれるホスティングサービス
    • 静的ホスティングだけなら 10 サイトまで無料で公開できる

振り返って

ユーザーテストをしていない

本来ならちゃんと動いて満足行く出来になっているかユーザーにテストしてもらいたいのだが、そもそもユーザーを捕まえてテストしようとしていない。

誰か使ってみてくれないか。

Elm と CSS

関数型プログラミング言語のため、 elm-css などで型付きの CSS 記述(CSS-in-JS)をするなどの選択肢も考えられる。

今回は CSS フレームワークに乗っかって手軽に書きたいという考えで、敢えて CSS を分離することにしてみた。 個人的にはこれもありだと感じている。

技術を試す

不利益をもたらさない小さなサービスで新しい技術要素や実験的な試みをするのは大事だと改めて思った。

小ネタ

タイマーのフォントは「D-DIN」。 きっかけとなった VTuber の初回配信のカウントダウンに使われているフォント（だと思う）。

SyncTimer開発 技術ElmサービスSyncTimer