ToDoアプリ，リーディングリストに不満があったので新しいアプリを作ってみた
こんにちは．kakekakemiyaと申します．現在は東京大学工学部電子情報工学科というところに所属しております．
今回は，新しく作ったWebアプリを紹介する記事を書かせていただきます．
ToDoアプリ・リーディングリストへの不満
みなさんは普段タスク管理をどのように行なっているでしょうか？
現在は多種多様なToDoアプリがリリースされているので，皆さんそれぞれ推しアプリがあったりなかったりすると思いますが，既存のToDoアプリに対して，僕は
- ジャンルごとの分類が行いにくい場合がある（「バグ直す」と「トイレットペーパーを買ってくる」が隣に並んでしまうなど）
- タスクの溜まり具合が把握しにくい（タスクが増えるとスクロールしないとわからない）
- かわいくない，使ってて楽しくない ← 重要
という不満がありました．
また，
リーディングリスト（Chrome等のブラウザについている機能で，ブックマークするほどではないけど後で読みたいリンクを一時的に保存しておく場所）については，機能としてはめちゃくちゃ有用なのに
- ジャンル分けができない
- 未読・既読で分けられがちなので，必ずしも必要・不要と一致しない
- リーディングリスト自体の影が薄く，保存したまま読むのを忘れがち
- かわいくない，使ってて楽しくない ← 重要
というのが気に入りませんでした．
じゃあ，かわいくて自分好みの機能を持ったアプリを作ってしまおう！
ということで作ったのが今回ご紹介させていただく「Bubble to Do」になります．
↓こちらから飛べます
（ちょっと器用さが必要ですが，スマホでも使えます．タブレットなら余裕です．）
機能と使い方
使っていて楽しいアプリということで，各タスクを泡で表現してみました．
親バブル（ジャンル）の中に子バブル（タスク）が入っていて，ドラッグすると泡が動いて楽しいですね！！
子バブルの中にはリンクを貼ることができて，リーディングリストとしての役割を果たすことができます．（リンクを貼らなくても大丈夫です．）
バブルの追加
親バブル（セクション）は背景をクリックすると，子バブル（タスク）は追加したい先の親バブルをクリックすると追加できます．
親バブルをクリックすることで，その名前を変更することもできます！
バブルの削除
各バブルの右上には×ボタンがついていて，クリックすると消えます．
親バブルをクリックするとセクションごと消せるので，とても気持ちいいです！
間違えてクリックしそうで怖いと思ったそこのあなた，左上にUndo/Redoがついていますのでご安心を
カラーテーマの変更
これはこだわりポイントなのですが，青系統の色が好きじゃない人もいると思い，好きなカラーテーマを選べるようにしました！
自分の好きな色で退屈なタスク消化を楽しく行いましょう！
ユーザーがもっと色をカスタマイズできる機能は需要がありそうだったら作ります．
バブルの色と大きさについて
バブルの色は，タスクが溜まっていれば溜まっているほど濃くなるようになっています．
親バブルの大きさも子バブルの量に比例して増えるので，タスクが溜まっていてピンチ！！となっているセクションがすぐにわかります．
デスマーチしているプロジェクトがあろうものならその存在感で圧をかけてくることでしょう．
便利そうなシチュエーション
もちろん普通にToDo＆リーディングリストとして使えるのですが，個人的にこんな使い方便利そうと思う例を何個か挙げてみます．
あるプロジェクトで使えそうな記事，リンクを一つのバブルに入れておく
僕はブックマークを割ときれいにしたい派なので，一時的にしか使わないサイトとかはこのアプリに保存しておくので十分かなと思います．
そして，開発が終了したら，バブルごとおさらばしてしまえばかなりの開放感・爽快感が得られるでしょう．
レポートの参考文献保存
レポートに書く参考文献って，ブックマークするほどではないけど書き終わるまでは参照できるようにしたいし，レポートごとに保存をわけたいので適役なのではないかと思います．同時にToDoで進捗管理できるのも◯
オンデマンド授業，授業録画のリンク管理
授業のオンライン化に伴いオンデマンドで開講される授業や，テスト前にもう一周講義録画を見返すケースなども増えてきたのですが，録画授業を追うのはURL管理が面倒くさい上に，どの授業をどこまで観たかを把握するのが難しいというお悩みを抱えている人もいるかと思われます．
そこで，このBubble To Doに各授業ごとの録画リンクを保存していけば，ぽちぽち押すだけで授業を見ることができる上に，どの講義の録画を追えていないかをバブルの色と大きさで把握できます．
これがあればテスト前に慌てふためく前に対処できるようになるでしょう．
一度きりのオンラインミーティングURLの保存
これはカレンダー等に連携させている人もいると思うのであまり刺さらないかもしれませんが，一度（もしくは数回）しか参加しないオンラインミーティングのURLや，不定期開催のミーティングのURLを保存しておいて，いらなくなったら削除というのもそれなりに便利かと思われます．
実装
にてソースコードを公開しておりますので，細かい実装は割愛させていただきますが，ポイントとなりそうな部分をピックアップして触れておきます．
データの保存
LocalStorage,SessionStorageを使っています．（よってサーバーは立てていません）
編集後のバブルの変化反映
本当はバブルがもわーっと現れたり，パチンと消えたりするアニメーションを作りたかったのですが，難しそうだったので，
編集受付→データを更新，LocalStorageに反映→画面リロード（読み込み時にLocalStorageからデータ読み込み→反映という実装なので，最新版が表示される）
という実装になっています．
ロード時いい感じにバブルが動いてくれるのでこれはこれで可愛いかなと思っています．
バブルの動き
D3.jsの物理シミュレーションを使っています．
バブル in バブル的なものは（少なくとも調べた範囲では）なかったので工夫して実装しました．
もちろんうまく表示されるよう場の力とかで微調整はしているのですが，バブル in バブルの主要な発想は親バブルの中心と（その親の）子バブルが透明な糸で結ばれていて，親が子をその上から追い出すことはない（親と子の重なりは完全に許されている）という実装になっています．
そして，それぞれのバブル同士間には多少の相互作用があるので，ゆるーく集まったり押し合ったりするようになっています．
Undo/Redoの実装
別記事【VSCode】Undo/Redoに革命を起こしたい のプロジェクトをやったときに学んだ知識を生かして，2つのStackで実装しました．（この記事で提案している特殊Undo/Redoではなく，通常のUndo/Redoでの実装です．）
Undo/Redo用のデータはSessionStorageに保存しているので，別タブで開いたり一度閉じたりすると消去されます．（よってデータがパンクすることはありません．）
まとめ
拙いアプリではありますが，
にて公開しておりますので気になった方はぜひご利用ください．
最後まで読んでいただきありがとうございました．
kakekakemiya