作った物
『ディスカッションツリー』というWebサイトです。
一つの話題に対して複数の意見を出し、それぞれに対して更に複数の意見、またそれに対し複数の意見といった形で、ツリー状にコメントを重ねていく掲示板です。
一つの意見に対して補足や訂正を重ねていく事で、SNSなどで起こりがちな「それぞれ好き勝手な事を言うだけ言って、そのまま話が流れていく」ような状況を回避し、情報を残しながら議論を行う事を目的としています。
<画面>
使い方
早い話が、コメントに対してコメントする機能が付いたYahoo!知恵袋です。
- 意見を集めたい、知りたい事に関するトピックを作成
- コメントで回答
- 回答に対してコメントで意見する
- 回答に対するコメントにコメントで意見する
- 回答に対するコメントに対するコメントにコメントで……(以下無限に伸びる)
- コメントを評価して、自分の意見に合う物を上に、合わない物を下に移動させる
- 上の方に固まったコメントが、その話題に対する自分のスタンスとなる
作ろうと思ったきっかけ
SNS(主にX)でおすすめツイート欄に日々熱い激論が流れてくるのを見て、「SNSは議論するには向かないな」という考えは以前からありました。
そこから「作ってみよう」となったのは、以下3つの出来事があったためです。
Xに「コミュニティノート」が実装
ユーザによる誤った情報への対策として、「コミュニティノート」という機能が実装されました。
これは投稿に対して他のユーザが訂正を付け加えられるという物で、歓迎もありつつ受け入れられましたが、「コミュニティノートに対する訂正」はハードルが高く、コミュニティノートまで誤情報であった場合に判断が困難という問題がありました。
「では、どうすればより正確な情報にたどり着けるんだろう？」と自分なりに考えた結果が、コメント(訂正)に対し無限に訂正を重ねられる掲示板でした。
回答に対するコメントができないYahoo!知恵袋
しかし上記だけでは本当に需要があるか自信がなく、「作ろう」と思うまでには至りませんでした。
そのため結局そのまま安穏とした日々を過ごしていたのですが、ある日流れてきたポストで、下記リンク先の知恵袋の投稿が話題になっていました。
今回の本旨とは外れるので内容には触れませんが、その回答の中で「●●さんの回答へのコメント」といった形で「回答に対する訂正」に触れており、「回答に対して訂正できる知恵袋」は需要があるのか、とある程度の確信に至りました。
htmxが話題に
それ以来、どうやって作るのかをしばらく考えていたのですが、Qiita上でhtmxなる技術が話題になっているのを見かけ、「これなら楽に作れそうだな」という事で、ようやく開発に至った次第です。
目的 / 採用・却下した仕様について
このサイトの目的は、主に3つです。
- 情報を残したまま議論を進める事
- できるだけ公平な議論が進められる場を整える事
- 答えのない問いにも、利用者それぞれで結論を出せるようにする事
以上をコンセプトとして、考えていく内に出てきた案を、
最低限必要な仕様・必要だが重要でない仕様・ひとまず必要でない仕様
の3つに分けて、ひとまずの実装を行いました。
最低限必要な仕様
トピック・コメントの投稿機能
言わずもがなですね。
最初は本当に作成日時と本文だけのデータで運用を考えていたのですが、
最終的に後々必要になった場合に備え、閲覧数・コメント数・公式トピックフラグ・優先表示フラグなどのフィールドを追加しました。
閲覧数・コメント数を更新するプログラムは動いていますが、ひとまず表示は行っていません。
公式トピック・優先表示フラグについては、もし利用者が増えたら「サービス改善案募集」のような公式トピックを作って優先表示させようかと考えています。
コメントの評価・並び替え機能
コメントを高評価/低評価する事で、自分のスタンスに合った意見をより上の方に固める事ができます。
3つ目の「答えのない問いにも、利用者それぞれで結論を出せるようにする事」のコンセプトを果たすために必要と考え、実装しました。
保存方法については、
- ローカルストレージに保存してJavaScriptで並び替えする
- Cookieに保存してサーバー側で並び替えする
- DBに保存してサーバー側で並び替え、評価数を表示する
の3つの案があったのですが、
Cookieに保存する案は保存期間や容量上限への懸念と、ローカルストレージで十分機能を満たせるとの判断から却下。
DBに保存する案は、個人識別の機能が必要となる事とDB側の負担は最小限にしたかったので却下。
結果、ローカルストレージに保存してJavaScriptで並び替えを行う形で実装を行いました。
必要だが重要でない仕様
トピックカテゴリ・カテゴリ検索機能
ひとまずのリリースにあたって、『ディスカッションツリー』ではフリーワードによる検索機能しか実装していません。
カテゴリを作る事で、利用者が興味のある話題のみに絞り込みやすくなるかとは思ったのですが、実装にあたって
- プルダウンとすると、必要なカテゴリを網羅しないといけない
- 自由入力とすると、誤字脱字を考慮してまとめられるようにしないといけない
上記2つを考慮して良い仕様を考えるのが 面倒臭かった 大変だったので、一旦なしになりました。
画像の添付機能
画像の添付ができるとトピックの画面で画像を見ながらコメントをする事ができるので便利ではあるのですが、こちらもサーバー側の負担を減らすためひとまず実装しない事としました。
容量の問題もあるのですが、可能な限りデータを全て文字ベースで管理できるようにする事で、例えば将来データ件数が増えてきた場合にアーカイブ化やデータの移行をしやすくする意図があります。
あるいは本文中のURLから画像を自動で識別して、見つかった画像はインラインで自動表示、のような形は一考しても良いかもしれません。
ひとまず必要でない仕様
画面上で投稿者を確認できる機能
こちらは割と最初の頃に考えた仕様ではあるのですが、
- アカウントを作らない場合、どう識別するのか？
- アカウントを作る場合、どの程度作成に手間がかかり、どの程度効果が見込めるのか？
上記2点を考え、「できるだけ公平な議論が進められる場を整える事」のコンセプトと照らし合わせた結果、「投稿者の判別ができる事はそこまで重要じゃない」という結論になりました。
とはいえこれはあくまで利用者側の話で、荒らしやスパム対策としてある程度の識別情報を保持するような仕組みは導入しています。
プロモーショントピック機能
サービスとして展開する以上、収支のバランスを全く考慮しないわけにはいきません。
もし利用者が増え、収益化が視野に入ってきた場合に備え、「プロモーショントピック機能」という機能を検討していました。
仕組みとしては単純で、
- トピック作成時、サイト上でプロモーションポイントを購入
- 「プロモーショントピック」の専用枠で、プロモーションポイントが高い順にトピックを優先表示
- コメント数によってポイントを消費し、0になると表示優先度が最低に
といった形です。
作るのが大変というのもありますが、利用者が増える目算がまだない以上は検討するだけ無駄なので、「将来的にそうする事もできるかも」といった程度で落ち着いています。
使用した技術
フロント：htmx、バニラJS
バック：PHP8.1、MariaDB
サーバー：エックスサーバー プレミアムプラン(https://www.xserver.ne.jp/)
フロント
実装方法は以前から色々考えていたのですが、最近話題のhtmxが「コメントに対するコメントを無限に掘れる」仕様にピッタリだったので採用しました。
JSのライブラリについては、勉強の意味も兼ねてReact.jsの採用も検討したのですが、「一度バニラでどれだけ頑張れるか確かめたい」気持ちがあったので、今回はバニラで頑張って書いてしまいました。
実際綺麗にできたかというと、正直あまり自信はないです。
サーバー
元々エックスサーバー上に趣味で作ったWebサイトがあったので、ドメインだけ買ってそこに乗せています。
作った感想
どうしても一番大きな反省点としてあるのは、やはり自分にはデザインセンスがないな……という事。
最初からできるだけベーシックなWebサイトにしようとは思っていたのですが、それにしたって随分手作り感満載な見た目になってしまった気がしています。
それでもコンセプト通りの機能は満たしているはずなので、よろしければ使っていただけると嬉しいです。
誰も使ってくれなかったら、自分一人で考えをまとめるように使おうと思います。