コンパクトなメッセージスタイル

GVG · 2022 年 2 月 1 日午前 10:55

こんにちは。

Discourseのデフォルトメッセージスタイルは、私の意見では2022年1月時点でかさばりすぎ、気を散らし、スペースを無駄にしています。修正案を2つ提案します。

メッセージコントロールをよりコンパクトかつ正確に配置できます。私のスケッチをご覧ください。特にデザインv2とv4が好きです。
モバイルでは、[いいね、編集、返信、…その他] のように、常に表示する必要のあるボタンがあるはずですが、デスクトップ（Win/Mac/Lx）では、[いいね、編集] のみ常に表示し、他のコントロールは各メッセージにマウスカーソルを合わせたときにのみ表示することが可能です。

追伸：いいねをメッセージの反対側（非常に遠く離れた場所）に配置することは、意図的な決定です。これにより、「無意味な「いいね」、「笑顔のための「いいね」、「冗談のための「いいね」、「また会えたための「いいね」、「機嫌が良いからという理由での「いいね」など、現在無意味に使われすぎている、無駄で客観性のない「いいね」が大幅に減少します。

このようなスタイルを作成できる方はいませんか？

anon40545810 · 2022 年 2 月 1 日午後 5:54

こんにちは、@GVG！
あなたの問題を解決するためのアイデアは以下の通りです。

FAQ

1. 初期ソリューション

ユーザースタイルシートを使用して、Discourse のスタイルを変更できます。

2. なぜユーザースタイルシートを使用するのか？

「好きなようにウェブサイトの外観と感触をカスタマイズできます。」 - https://userstyles.org/

3. これが私の問題をどのように解決できるか？

CSS スタイルを設定して、このメッセージを Discourse でコンパクトにすることができます。

4. 利点？

コンパクトなメッセージのカスタムスタイルはすでに存在しており、必要に応じて Discourse に適応させることができます。
ユーザースタイルシートは、実装が簡単です。
これが魅力的で実行可能であれば、Discourse がこのスタイルを公式に採用するかもしれません。
これはブラウザで直接機能し、このスタイルを他の人と共有できます。

5. 欠点？

ビジュアルスタイルを無効にすると、コンパクトなメッセージは表示されません。
サイトを操作するには、CSS と JavaScript の知識が必要です。

6. アイデア？私の意見？

あなたのアイデアは、ユーザースタイルシートを使用するか、Discourse 用のカスタムテーマを作成することで適用できると思います。

7. もっと簡単なアイデアはありますか？

テーマを作成し、このコンパクトなメッセージのアイデアのように、必要なものをすべてカスタマイズします。

8. 参考文献？

Canapin · 2022 年 2 月 1 日午後 7:07

アイコンやメニューを移動させる必要もなく（さらに、あなたのスクリーンショットには表示されていない、編集回数や、誰に返信したかの言及などの他の要素もあります…）、まずはマージンに取り組むことができます。

デフォルト:

.post-menu-area {
    margin: 20px 0;
}

カスタム:

.post-menu-area {
    margin: 0;
}

比較:

アイコンやアクションボタンの移動は、常に単純な作業ではなく、より詳細な作業が必要になる場合があります。

anon40545810 · 2022 年 2 月 1 日午後 7:11

@Canapin さん、私のユーザー・スタイル案についてどう思いますか？悪いと思いますか？このアイデアは良いですか？

ご意見をお聞かせください。このコードから、Discourse 用のカスタム・ユーザー・スタイルを作成できます。

Canapin · 2022 年 2 月 1 日午後 8:18

Userstyles はクライアントサイドでのみ機能し、通常はサイトごとに機能します（私は userstyles を使用しており、いくつか作成しました）。

Discourse 全体の外観を改善したい場合は、UX で提案できます。誰もテーマコンポーネントを作成しない場合や、Discourse に必要な変更が含まれない場合は、ユーザーが独自のソリューションを作成できると思います。管理者であればテーマコンポーネント、そうでなければクライアントサイドのソリューションで、ブラウザプラグインから好きな CSS を使用できます。

しかし、これはもはや Discourse 固有の議論ではないと思います。

@GVG この関連する議論をご覧ください。興味深いかもしれません。

GVG · 2022 年 2 月 1 日午後 8:51

いいえ、あなたのメッセージはあなたのウェブサービスを古典的に宣伝するスパムのように見えます。

ありがとうございます。しかし、a）マージンを小さくすることは自分でできます。b）それは十分ではありません。なぜなら、それらのアクティブな要素はスペースを無駄にし、作りすぎているからです。したがって、主な目標は、メッセージコントロールボタンを現在の場所から、より少ないスペースを無駄にする別の場所に移動することです。

anon40545810 · 2022 年 2 月 1 日午後 8:57

@GVG

いいえ、あなたのメッセージは、あなたのウェブサービスに対する典型的なスパム広告のように見えます。

1. すみません意図としては、ユーザースタイルを使用して Discourse のクライアントサイドのカスタマイズを行うことでした。これは、テーマを作成する必要がない場合に機能します。あなたのアイデアは非常に有効だと思います。MVP（Minimum Viable Product）としてお手伝いしたかったのです。プラグインやテーマを開発しなくても、誰もがユーザースタイルで UX 体験を感じられるようにしたかったのです。
1. カスタマイズしたいときに多くのウェブサイトで行うことなので、そのように考えました。
1. 投稿されたリンクは、私が調査し、読んだことへの参照でした。
1. それがお役に立たなかった場合は、申し訳ありません。私の間違いでした。

anon40545810 · 2022 年 2 月 1 日午後 8:59

@Canapin

あなたがおっしゃったことは非常に興味深いと感じましたが、

私の意図は、ユーザースタイルを使用して Discourse のクライアント側でカスタマイズを行うことでした。これは、テーマを作成する必要がない場合に機能します。
MVP (Minimum Viable Product) で支援したかっただけです。プラグインやテーマを開発しなくても、誰もがユーザースタイルで UX 体験を感じられるようにしたかったのです。
たとえば、Refined GitHub というリポジトリがあります。これは、GitHub の改善点を投稿する場所です。これを可能にするブラウザ拡張機能さえあります。
1. 私のアイデアは、このリポジトリのアイデアと同様のものです。おそらく、MVP としてさまざまな視覚的強化を含む userstyles.css ファイルである Refined-Discourse を作成できるでしょう。そうすれば、コミュニティは何が最善で、何が理にかなっているかを見ることができます。
2. テーマやプラグインを実装または作成しなくても、必要な調整を見ることができるのは素晴らしいことです。
3. コンパクトなメッセージというアイデアが本当に良いと思ったので、これを思いつきました。ユーザースタイルでこれをカスタマイズできます。これは簡単な方法です。
4. これは、私が「オズの魔法使い」体験と呼ぶものになるでしょう。ユーザースタイルを作成すれば、アイデアを開発するのに多くの時間を費やす必要はありません。
- オズの魔法使い実験: HCI (Human-Computer Interaction) の分野では、オズの魔法使い実験とは、被験者が自律的であると信じているコンピューターシステムと対話する研究実験ですが、実際には、見えない人間によって操作されているか、部分的に操作されています。
  - 人々は、テーマやプラグインがなくても、改善された UX/UI を見ることができます。
  - ユーザースタイルを使用する人にとっては、テーマやプラグインのように見えるかもしれませんが、実際はそうではありません。
  - これは MVP (Minimum Viable Product) のアイデアのように見えます。

これは悪い考えですか？

最後の質問でした。あなたの見解や視点に満足できるかどうか。
もっとフィードバックが欲しいです ;D

参考

オズの魔法使いテスト – まだ存在しないシステムをテストする方法

Moin · 2022 年 2 月 1 日午後 9:02

投稿が長くなった場合の動作について考えたことはありますか？その場合、投稿を読んで、それを「いいね！」するために上にスクロールし、次の投稿を読むために再び下にスクロールしなければなりません。

GVG · 2022 年 2 月 1 日午後 9:22

論理的には同意しますが、それは良い contra ですが、あまり良くはありません。なぜなら：

何よりもスタイル v4 が好きです。メッセージコントロールが投稿の右側に表示され、垂直方向には「できるだけ下、メッセージの最後と画面の下」に配置できます。コントロールパネルは、現在のマウス位置に最も近い各メッセージの垂直位置に動的に垂直に表示することもできます！したがって、これは問題ではありません。
大きな投稿を作成および読み取るほとんどのユーザーは、回答に正確なテキスト引用を使用するか、常にトピック自体に回答できます。したがって、「回答」ボタンはあまり必要ありません。
モバイル向けについて以前に述べたように、右側の空きスペースとタッチスクリーンの欠如により、メインコントロールボタンは常に標準的な場所に表示される必要があります。これは、垂直方向に狭いモバイル画面にとって最良のデザインのようです。
メインメッセージコントロールが下部に留まるv3を常に選択できます。
したがって、メッセージコントロールを下部に維持することを好む場合は、それはOKですが、それらの上下のすべての垂直スペースを最小限に抑え、マウスロールオーバー時（デスクトップの場合）にのみコントロール（いいね/編集を除く）を表示するように支援してください。

Canapin · 2022 年 2 月 1 日午後 9:34

Discourse を手間なくカスタマイズするために、サードパーティ製のものは何も必要ありません。

こちらで可能です: https://theme-creator.discourse.org/。それが目的で作られています。

プロフィールメニューからテーマを作成できます: https://theme-creator.discourse.org/my/themes

フォーラムコンポーネントのすべての外観は、こちらで参照できます: https://theme-creator.discourse.org/styleguide/

投稿スタイル自体については、こちらをご覧ください: https://theme-creator.discourse.org/styleguide/organisms/post

新しく作成したテーマからの CSS 変更はリアルタイムで適用されるため、ページをリロードする必要はありません。

詳細情報:

詳しく教えていただけますか？創造性を発揮して他のアイデアを提案してほしい、それとも CSS を書いてほしいということですか？

トピック		返信	表示
Feng Shui (Simplifying the UI for new users) Community	23	629	2024 年 9 月 9 日
Is there a "compact" option like gmail? UX	12	2463	2018 年 10 月 6 日
Such a tiny window to edit here on a cell phone UX composer	37	1864	2024 年 1 月 3 日
Printer Friendly CSS UX	30	6559	2022 年 11 月 19 日
Discourse Button Styles Theme component	40	10504	2025 年 9 月 18 日