Discourseを使ってブログ、Reddit、XやFacebookのようなスクロール型プラットフォームを構築する

コミュニティ
1

Discourseをよりビジュアルで、連続してスクロールできるプラットフォームに変えていくという試みの旅を記録するために、このトピックを始めました。Reddit、X、Facebookが提供する閲覧体験に近づけることを目指しています。

このトピックを通じて、試みること、うまくいったこと、うまくいかなかったこと、使用しているコンポーネント、そして遭遇した問題について共有していきます。また、従来のフォーラムレイアウトを超えた使い方をDiscourseで実現しようとしている方々にも役立つことを願っています。

このプロジェクトの出発点は、90-9-1の法則でした。

これは、ほとんどのソーシャルメディアやブログなどで以下のような傾向があることを示しています。

  • ユーザーの**90%**は主にコンテンツを閲覧・消費しています。

  • **9%**は時々リアクション、いいね、シェア、コメントを行います。

  • **1%**がコンテンツの大部分を能動的に作成しています。

もちろん、コミュニティによって正確な割合は異なりますが、原理は依然として重要です：ほとんどの訪問者は投稿者ではなく、閲覧者です。

Discourseは、9%と1%のユーザーに対応する点で優れています。議論、返信、積極的な参加を軸に構築されているからです。しかし、私は、サイトを開いて興味深い新しいコンテンツを閲覧したいという、はるかに大きなグループの人々にも同じくらい魅力的なプラットフォームにしたいと考えています。

構築しようとしているもの

私はDiscourseを使って、Reddit、X、Facebookのような、よりビジュアルで連続的（ドゥームスクローリング）なフィードを作成したいと考えています。

理想的な体験は、次のようなものです。

  • ホームページを開くと、関連するトピックのフィードがすぐに表示される。

  • トピックから次のトピックへ、連続してスクロールできる。

  • 別のページを開かずにトピックの内容をプレビューできる。

  • 画像、動画、抜粋をフィード内で直接確認できる。

  • 興味を引かれたものにいいね、ブックマーク、返信ができる。

  • スクロールした以前のコンテンツが自動的に画面から消える。

  • 後から戻ると、毎回同じホームページではなく、新しい或未読のトピックが表示される。

  • ユーザーが操作するカテゴリ、タグ、トピックを使って、フィードを段階的にパーソナライズできる。

これを「ドゥームスクローリング」と呼ぶ人もいるかもしれませんが、これは単に、現在非常に多くの人がオンラインコンテンツを消費している方法でもあります。彼らはコメントすることなく数十もの投稿を読むかもしれませんが、それでも彼らは本物のユーザーであり、ビュー数を生み、リンクを共有し、毎日戻ってくる可能性があります。

なぜDiscourseで構築するのか？

Discourseには、困難な部分のほとんどがすでに提供されています。

  • ユーザーアカウントとプロフィール

  • カテゴリとタグ

  • いいね、ブックマーク、通知

  • 信頼レベルとモデレーション

  • トピック作成と返信

  • 既読・未読の追跡

  • おすすめトピックと関連トピック

  • 成熟したプラグインとテーマコンポーネントシステム

欠けているように見えるのは、主に発見と受動的な消費を中心に設計されたフィードです。（もちろん、Discourseはそうなるようには設計されていません）

これまでの進捗

  1. 素晴らしいReddit風テーマ（@awesomerobot氏作）から始めました。カスタムサイドバーの削除など、さまざまな側面を編集できるようにするためにフォークする必要がありました。また、CSSを大幅に編集して、私たちが望むデザインに仕上げました。
  2. ネストビューの有効化は必須でした。この種のサイトに必要なスタイルをカバーするためです。
  3. YouTube風のスクロール可能なメニューを作成し、すべてのカテゴリとカスタムリンクを表示するようにしました。リンクのカスタマイズと追加に**カスタムトップナビゲーションリンク**を使用しました。
  4. トピックプレビューモーダルは必須でした。これを設計し始めましたが、レジェンドの@Don氏がより優れたバージョンを構築してくれました。こちらで見つけることができます
  5. どこでも静的にキャッシュされた右サイドバーは必須でした。最初は右サイドバーブロックから始め、トピックなどで表示するためのテーマコンポーネントを作成しました。
  6. カスタムヘッダーリンク（アイコン）を使って、ヘッダーに「投稿を作成」を追加し、コンテナをよりクリーンにしました。
  7. 投稿の画像は中央に配置し、背景をぼかして整った見た目（Redditに類似）にしました。
  8. トピックの抜粋を150文字に設定し、トピックカードのタイトルと画像の間に表示することは必須でした（FacebookやXに類似）。

次のステップは、次のような機能を持つ専用のフィードです。

  1. 定義された期間（例：過去14日間）の最近のコンテンツから始める。

  2. ユーザーがフォローしているカテゴリやタグのトピックを優先する。

  3. 発見のために人気やトレンドのトピックを混ぜる。

  4. トピックが実際に閲覧されたか、スクロールで通過されたかの記録を行う。

  5. 閲覧済みのトピックの優先度を下げつつ、完全に非表示にはしない。

  6. フィードから直接リアクションや返信を許可する。

これは従来のトピックリストや議論を置き換えるものではありません。同じDiscourseのコンテンツを発見・消費するための追加の方法となるものです。

旅をフォローする

プロジェクトが進むにつれて、このトピックを更新し続けます。テストするコンポーネント、行う変更、そして遭遇する障害を含みます。

また、同様の試みをされた方々からの意見も聞きたいです。特に以下について。

  • 既存の既読追跡データがこれをサポートできるか。

  • アニメイトユーザーや新規登録ユーザーに対して、フィードがどのように機能するか。

  • 複雑な推薦アルゴリズムを導入せずに、どの程度のパーソナライズが可能か。

  • 連続したトピックプレビューが重大なパフォーマンス問題を引き起こすか。

目標は、沈黙の90%がコミュニティの重要な一部であることを認識し、彼らが実際にインターネットを使っている方法に合わせて設計された体験を提供することです。

このプロジェクトで使用するテストサイトは以下です。

https://www.m8wtf.com/

「いいね！」 2