SyncTimerのコードをいくつかのモジュールに分解した

これまで Main.elm だけで作ってきた Elm のコードが増えて見通しが悪くなってきたので、いくつかのモジュールに分解した。 今回はリファクタリングなので機能の変更はなし。

SyncTimerにフォントを追加した

Loraというセリフ体のフォントを追加してタイマー表示で選択可能にしてみた

早送り・早戻しボタンを追加してみた

エゴサーチしながらライブを拝見してたら、 とある方がタイマーを停止したときのコメントを話していたのでフィードバックとして受け取り、 簡単ながら「1秒戻る・1秒進める」ボタンを追加してみた。

カウントダウン時の残り時間をバーで視覚化する

カウントダウンの表示に追加要素として進み具合をバーで視覚化できるようにしてみた。

Mini Type Puzzle

Elm アドベントカレンダー 2022 の記事。 型がカチッとはまって意図通りの関数が作れたときは気持ちいいよね。

Elmアプリケーションとしての規模を小さくする

SyncTimerのリファクタリングを行った。今回のテーマは「どこまでをElmで管理すべきか?」ということ。

SyncTimer の紹介ページを作った

タイトルそのままなのだが、これまでモーダルとして表示していた使い方動画なども紹介ページへ移動してみた。 これはもともと存在していたのだが、Github Pages として公開しておりアプリケーションと同じドメインではなかったので、同じドメインに /about として表示するようにした。 https://sync-timer.netlify.app/about/ モーダルのほうがわかりやすかっただろうか?という疑問もあるが、一旦公開することにした。

時間の表示を切り替えられるようにした

タイマーの利用状況をたまに観察していると、1時間未満(アニメなどはおおよそ30分未満)の動画再生などに使われるケースもそれなりに多いため、 「時・分・秒」ではなく「分・秒」の表示だけに切り詰めたほうがレイアウトとしても便利かもしれない、と思ったので機能を追加してみた。

SyncTimerのリファクタリング

SyncTimerのコードをリファクタリングしてみた。 リファクタリングとは、動作を変更させずにコードを整理する作業のことである。 繰り返している無駄な機能をまとめたり、わかりやすく整理することで保守しやすくすることができる。

SyncTimerのレイアウトを変更

開始・リセットボタンとタイマーの表示設定の配置を変更した。