はじまり

今年の2月頃に、「議論のための掲示板」を目指して、『ディスカッションツリー』というWebサイトを作りました。

コメントにコメントを重ねていく事で議論をツリー状に展開して、1列で進む他のSNSや掲示板と違って過去の意見がどんどん流れていかないようにするというのがコンセプトです。

初期バージョンはとりあえず必要最低限の実装だけだったため、

トピックの作成
ツリーとしてコメントを重ねる

という本当にコンセプト通りの最小限の機能しか備えていない状態でした。

これでは例えば何階層も深い所にあるコメントまでたどり着くのが大変であったり、新しいコメントが追加されてもどこにあるのかが分かりにくかったりで、実際に掲示板として利用しようとすると色々と不便なところがありました。

解決したかった課題

初期バージョンの時点で課題に感じていたのは主に以下の3つです。

コメントにアクセスしやすくしたい
基本的に初期表示ではコメントは全て畳んで表示→掘り下げたい意見を順次手動で開いていくという形なのですが、これでは新しく追加されたコメントがどこにあるのかが初期表示の状態では分かりづらいです。使いやすくするためにも、任意のコメントを開きやすくするのが急務でした。
誰のコメントなのかを分かりやすくしたい
初期バージョンでは完全匿名性で個人の識別方法がなかったため、誰がトピックを作成し、誰がコメントを返したのかが分かりづらい状態でした。ただそこを解消しようにも、どこまで厳密に判定するか(アカウントを作成できるようにするか、あるいはIPアドレスなどで識別するかなど)の判断が難しく、仕様がなかなか定まりませんでした。
色んな機能を設定から調整できるようにしたい
1つ目、2つ目の問題を解決する上で、色々な設定項目を作る必要性がありました。(例えば初期表示で指定された階層までコメントを自動で開くようにするだとか、アカウント管理を作るだとか)

解決方法を考えた結果…

そんなこんなで、より使いやすくするために色々な機能を考えてみた結果、達した結論は……

あんまり難しく考える事なかった

でした。

全部一列に並んでればとりあえず見やすいのは歴史が証明している

1つ目の「コメントへのアクセスしやすさ」について。
これは結果、本体のコメントツリーとは別で、「最新のコメント一覧」を開閉メニューとして横に並べる事で解決しました。
コメント一覧からコメントをクリックすると、該当する箇所まで自動で一気に開く形です。
これであれば全体でどんなコメントがあるかもすぐに見られますし、最新のコメントも一番上にあるので、新しいコメントを開くのも簡単です。
最初は「設定画面にデフォルトでどこまで開くかの項目を作って、ページ内検索的な機能を作って……」と色々ややこしい事を考えていたんですが、そのいずれも不要でした。
(これに関しては、後述の「初期バージョンの時点で要らなかったもの」の影響が大きかったです)

コテハンでいいじゃん

2つ目の「誰のコメントなのかを分かりやすく」について。
これも結局アカウントの概念などは作らず、「お名前」の設定を追加する形で解決しました。
アカウントを作れれば個人の判別はしやすくなるのですが、利用のハードルが高くなるため結構悩んでいたのですが、利用ハードルの低さに某匿名掲示板やブログのコメント欄では「お名前」で識別するのが一般的であって、別に悩む必要もなかったなと……。
とはいえ確実に個人を識別できるならその方が良いのは確かなので、これについてはいずれ変える可能性はあります。

結局、設定もいらなくなった

3つ目の「いろいろな設定項目」について。
最終的に、設定画面に増えたのは「お名前」だけで、他は全部なくなりました。
コメント一覧の使いやすさや個人識別の問題は、上記の方法で解決してしまったのです。
後は後述の「初期バージョンの時点で要らなかったもの」関連で、元々あった機能についても設定項目が必要かと考えていたのですが、結局その機能も削ってしまったので不要になりました。

初期バージョンの時点で要らなかったもの

別にhtmxいらなかった

初期バージョンでは「ツリーがどんなに重なっていても無限に読み込めるように」と、話題だったhtmxによる非同期読み込みを実装していたのですが、

読み込み回数が増えるためむしろ遅い
深い階層のコメントから浅い階層まで辿るのが大変
そもそも一つのトピックに無限にコメントが来る事を想定する必要がない。某掲示板のようにコメント数を1000に制限すれば、多少階層が深くなっても問題なく表示できる

と結局、「ページ表示にそのトピックのコメントを全て読み込み&全て表示する」形に落ち着きました。
この変更によって、コメント一覧が表示できるようになり、深い階層からツリーを辿るのも簡単になり、と良いことづくめでした。

コメントの評価機能いらなかった

初期バージョンでは、「それぞれの意見に対して高評価/低評価をつけて、自分の意見を明確化する」という目的のため、コメントに対する評価機能をつけていました。
それを付けた結果、高評価/低評価したコメントによって表示順を変えたり、評価履歴をどの程度保存するかとか、色々と考える事が増えていたのですが、これも結局のところ、他のSNSや掲示板にない機能をわざわざ付ける必要がないという理由から削除してしまいました。
別にあっても良いとは思うのですが、あったところでいちいちクリックするのが面倒くさいのも確かですし、上記の通り実装面でも色々と面倒くさい所があったので、**だったらなくてよくない？**という判断になりました。

結論

とりあえず作るだけなら他のサービスのほぼパクリで良い
変に独自性を出そうとしても作るのが大変な上に結果に繋がるとも限らないですし、とりあえず作るだけならベースは他のサービスのパクリで、コンセプトに沿った差別化点があれば十分なのかな、と思いました。
無理に新しい技術を使う必要はない
今回、「htmxなら簡単に無限に入れ子のリスト読み込めるじゃん！」と思って最初の開発を行ったのですが、その結果仕様がかえって複雑になり、今回の変更がなかなか大変になってしまいました。もちろん使い方の問題も大いにあるとは思いますが、あえてレガシーな技術を使って扱いやすさを確保するのも継続的な開発を行っていく上では大事なのかもしれません。
フォントは大事
初期バージョンではYoutubeにならってフォントにRobotoを指定していたのですが、今回Rounded M+に変えてみた所、劇的に見た目が良くなって驚きました。
普段はNoto Sans JPばかり使っているのでどのフォントが良いなどはあまり意識した事がなかったのですが、フォントを変えるだけでここまで変わるのかとその威力を実感させられた次第です。

……というのが、今回の学びでした。

今後動かし続けるうちに結局また機能追加を行う形にはなるかもしれませんが、一旦は今回の形で良い感じに落ち着いたかなと考えています。

『ディスカッションツリー』は色々な人の意見を集い寄って、それぞれの意見を流さずに新しく意見を重ねていく掲示板です。
気が向いたらで良いので、ちょっとトピックを立ててみたり、コメントを書いてみたりしていただけるととても嬉しいです。