Bell 23 制作裏話

Bell 23 とは

複数のチャイムを設定できるウェブアプリ。音と通知で時間を知らせます。
ブラウザで利用可能。インストール可能、オフライン利用可能。

ちなみに Bell 23 と書いて「ベル兄さん」と読みます。こちら Bell 23 から実際に使えます。

制作の動機

私の所属するチームではモブプログラミングによる開発を行っています。
日々働き方を改善していて、休憩のタイミングについても試行錯誤していました。

そのなかで スクールチャイム というアプリを利用することがあったのですが、「スクールチャイムいいよね。でも鳴る時間が変更しやすいともっといいよね。」という話が出て、自分たちでアプリを作ることにしました。
詳しくは モブプロは 働き方より 休み方｜ fujiwara ｜ note に書かれているので読んでみてください。

他の動機として、個人的に TypeScript や React Hooks の練習をする場所が欲しかった、というのもあります。

時刻設定の UI について

Bell 23 を作った一番の動機にあたる部分なので、考えていたことを紹介します。

最初は自分だけの用途に合わせて使えるアプリでいいと考えていたので、ユースケースを列挙して、それを満たす UI を考えていきました。

・現在時刻から数分後にチャイムを設定する → UI: `<input type="number">`
・ある時刻にチャイムを設定する → UI: `<input type="time">`
・ある時刻から一定間隔でチャイムを設定する → UI: `<input type="time">` + `<input type="number">`
・ある時間からある時間まで、特定の「分」にチャイムを設定する → UI: `<input type="time">` + `<input type="time">` + `<input type="number">`

ですが、これではユースケースごとに入力用の UI が増えて収集がつかなくなってしまいます。
考え方を改め、合目的性よりも汎用性を高めることにしました。
特定のユースケースで使いやすくなることよりも、ユーザー自身がそれぞれの目的に合わせて工夫して使えるできるような UI を目指すことにしたのです。
この考え方は、次の記事のりんごの皮むき機と果物ナイフの話を参考にしています。

ソシオメディア | アナーキー・イン・ザ・UX

りんご皮むき機が「りんごの皮をむく」という特定のコンテクストをもとに作られた道具であるのとは対照的に、果物ナイフはコンテクストを特定していません。もしユーザーの生活環境の中で「りんごの皮をむく」というコンテクストが失われれば、りんご皮むき機はその存在意義が失われますが、果物ナイフの存在意義は失われません。

本当にユーザーフレンドリーな道具とは、個別のコンテクストに合わせた手順ではなく、様々なコンテクストに対して一貫して作用する「原理」を備えたものであると言えます。この原理は一般的な人の特性に基づいているので、汎用性や応用性があり、ユーザーは自らの行動を多少変えてでも、その道具と共に達成するゴールを最大化していくのです。

りんごの皮むき機は、「りんごの皮をむく」というユースケースに対しては多くをサポートできますが、他のユースケースにおいては役に立たないものになってしまいます。
一方で果物ナイフは、それがりんごの皮むきに使えるとユーザー自身で気づく必要がありますが、それ以外のユースケースでも役に立つ可能性が残されています。

つまり、個別性の強いユーザーコンテクストを特定することよりも、ユーザー集団が共通して持っている性質、たとえば人としての一般的な認知特性や身体特性などに基づいたデザインパターン（オブジェクトベースの UI モデリングなど）を活用することが重要だとしています。

オブジェクトベースの UI モデリングでは、まず、ユーザーの関心の対象となるオブジェクトを定義します。

Bell 23 のユーザーにとって重要な情報はチャイムが鳴る時間の一覧なので、「チャイムが鳴る時間をリストで閲覧、編集できる」という UI を目指すことにしました。
全く同じ見た目で編集するのは難しかったので、`<ul>`, `<li>` で表示し、`<textarea>` で編集する UI になっています。
これによって、どんな用途にも柔軟に対応でき、ユーザーとともにゴールを最大化できる UI になったのではないかと思っています。

実装について

こちらのリポジトリ Gyo / bell-23 · GitLab にソースコードがあります。

`useTimer` という Custom Hook を作って、それを `Timer` コンポーネントから呼び出す形で実装していますが、Hook とコンポーネントの役割の分担がうまくできていないような気がしています。
とくに `<textarea>` に表示する値を Hook とコンポーネントのどちらに格納するかという点については、改善の余地があるように思っています。

技術スタックについても簡単にまとめておきます。
TypeScript と React Hooks 以外の部分で詰まるのを避けることを第一に、慣れているもので作ることにしました。

GitLab Pages

・サーバーサイドレンダリング（SSR）はやらない
・個人的に昔から GitHub ではなく GitLab を使っている

create-react-app

・いろいろとラク
・ついでに PWA にできる
・SSR をしないので Next.js はいらない

localStorage

・最初はクラウドの DB は使わない
・IndexedDB はよくわかっていない

さいごに

Bell 23 ですが、いまは業務に欠かせないツールになってくれています。
気になる技術をすぐに試せる場所があり、しかもそれが自分たちが毎日使うものであるというのはエンジニアにとってはとても嬉しいことです。
これからも愛されるツールを目指して改善を重ねていこうと思います。