Meta ブランドテーマの再構築：新しいアイコン、カスタムホームページ、そして Blocks API の初公開

[manuel (Manuel Kostka)]

テーマの再構築に関する2回目のアップデートを刚刚リリースしました。最初のアップデートは、以前の Meta Branded テーマを基にしたビジュアルのリフレッシュでしたが、今回のバージョンは実質的にゼロから再構築された新しいテーマです。新しいブランド言語は以前のリリースで既に導入されているため、その方面での目に見える変化はあまりありません。今回のアップデートで大きく変わったのは、テーマの実装そのものであり、Discourseのカスタマイズがより広範にどのように進んでいくかを示すものです。

いくつかの実装詳細を、小さな項目から順にご紹介します。

Lucide アイコン

Lucide はモダンなストロークアイコンのオープンソースセットであり、私たちは複数のカスタマイズプロジェクトでこれを採用しています。今回のイテレーションでは、Meta Branded テーマにも含めました。Discourse コア内の Font Awesome を置き換える計画はありませんが、Font Awesome の無料版ではストロークスタイルのアイコンの選択肢が限られており、一貫したストロークアイコンシステムを形成するには不十分です。テーマコンポーネントは Discourse Lucide Icons で利用可能です。

色パレットを制限するテーマ修飾子

管理者およびユーザーのインターフェース設定において、特定のテーマで利用可能な色パレットを制限する新しい only_theme_color_schemes テーマ修飾子を追加しました。Meta には複数のユーザー選択可能なパレットがあり、これらは Meta Branded テーマのビジュアルアイデンティティと衝突する可能性があります。この修飾子により、テーマにバンドルされたパレットのみがオプションとして提供されます。 PR: FEATURE: add modifier to restrict theme color schemes

全幅レイアウト

メインコンテンツをページ上でより適切に中央揃えにするため、Discourse Full-width コンポーネント の調整も試みています。ヘッダーには多くの動的要素があり、設定が複雑化しているため、現時点では実験的であり、コンポーネントのブランチでのみ利用可能です。

ウェルカムバナーの表示を制御する値変換子

新しい welcome-banner-display-for-route 値変換子を使用して、コアのウェルカムバナーがどのルートで表示されるかをプログラム的に制御しています。これにより、バナーがデフォルトのカスタムホームページでのみ表示され、ユーザーが個人のランディングページとして設定したページでは表示されないようにしています。 PR: DEV: Add welcome-banner-display-for-route value transformer

これで、2 つの大きな変更について説明します。

テーマ修飾子によるカスタムホームページ

custom_homepage テーマ修飾子はほぼ 2 年間利用可能でしたが、Meta 自体のホームページ体験を形作るために使用するのは今回が初めてです。注目のコンポーネントで構成されたカスタムランディングページを導入します。最初のリリースでは、注目のカテゴリのハイライトと最新のトピックのプレビューが含まれます。

これらの注目コンポーネントは、新しい実験的な Blocks API を使用して構築しました。これが最大の变化につながります。

Blocks API: 初の本番環境での利用

Blocks API は、Discourse でモジュール化され、組み合わせ可能なレイアウトを構築するための新しいフレームワークです。テーマ開発者は、定義されたレイアウト領域に配置できる自己完結型で再利用可能なコンポーネントからページを組み立てることができます。Meta テーマは、この API の初の本番環境でのデプロイです。

このフレームワークには豊富な開発者ツールが備わっています。開発者ツールを有効にすると、すべてのアクティブなレイアウト領域とそのコンポーネントを可視化するビルトインのオーバーレイを使用して、任意のページのブロック構造を検査できます。

ホームページ以外にも、各カテゴリのサブカテゴリを表示するカスタムカテゴリバナーのレンダリングにもブロックを使用しています。

これは本番環境でのシステムの実装に関する初期プレビューです。近日中にドキュメントとさらに多くの例を公開する予定です。 PR: DEV: Add Block API for declarative, validated UI extension points

[Canapin (Coin-coin le Canapin)]

@manuel

Lucide はモダンなストロークアイコンのオープンソースセットであり、私たちはいくつかのカスタマイズプロジェクトでこれを採用しています。

これは良い選択ですね。Discourse で利用可能なアイコンセットを検討していた際に、このセットに目が留まりました。洗練されており、エレガントです。

塗りつぶされたアイコンが完全に存在しないことがいくつかの問題を引き起こしていました。例えば、未読インジケーターが色付きの円としてほとんど見えないことや、ダーク/ライトの切り替えボタンが塗りつぶされた部分なしでは適切に描画しにくいことなどです。

メタブランデッドテーマではこれらの問題を解決されているのにお気づきでしょうか？これのためにカスタムアイコンを追加されたのでしょうか？

---

余談ですが、メタブランデッドテーマの左上にある Discourse ロゴはクリックできません（数ヶ月前からそうなっていると思います）：grimacing

[manuel (Manuel Kostka)]

@Canapin

メタブランデッドテーマでそれらの問題が解決されたのを見かけました。これのためにカスタムアイコンを追加されたのでしょうか？

いいえ、circle や square などのいくつかのアイコンを Lucide 版にマッピングしなかっただけです。正確には、これらのアイコンについては Fontawesome のストローク版（far-circle など）のみをマッピングしました。マッピングの改善が必要となる他の事例もあるかもしれません。

例えば、ハートアイコンは少し厄介です。いいねされた際には塗りつぶし版の方が良いと思うのですが、現時点ではそれをどう実装するのが最適か確信が持てません。

@Canapin

余談ですが、メタブランデッドテーマの左上にある Discourse ロゴがクリックできないようです（数ヶ月前からそうだったと思います）

再現できませんが、もっと詳しい情報はありますか？

[NateDhaliwal]

Blocks が Plugin Outlets にはないどのような違いをもたらすのか、気になります。

[Canapin (Coin-coin le Canapin)]

Chrome と Edge のみでテスト済みであり、デスクトップでのみ発生します：

サイドバーのトグル div がロゴを覆っており、クリックできません。

（そしてはい、枠線付きのいいねハートは見た目が悪いです ）

---

編集：すみません、この挙動はユーザースクリプトに起因するものであり Discourse のバグではありません。無視してください。

[Canapin (Coin-coin le Canapin)]

「返信した」の現在のアイコンが全く気に入らないです：

Lucide に適切な FA の同等アイコンがないため、一時的なものだと推測しますか？

---

トピック一覧のアイコンは非常に、非常に小さすぎます：

編集：他のテーマでも同じです。

カテゴリアイコンはタグアイコンよりも小さく見え、不自然です。選択されたカテゴリアイコンのサイズ全体が、ボックス型のカテゴリスタイルによって制約され、スペースが不足しているように感じます…

[darkpixlz (Pyx)]

公式テーマにLucideが追加されるとは思いもしませんでした。とても素敵ですね！ただ、ハートが塗りつぶされていると良かったのにと思います。その小さな不満を除けば、このテーマはモバイルでも私には最高に見えます。

PMの本文にパディングがないようです：

[Ed_S]

@Canapin

「返信した」の現在のアイコンは全く気に入らないです

同意します！

上記にも同意ですが、空心のハートは良くありません。

[NateDhaliwal]

ふむ…一つ変更できるとすれば、チャットアイコンを message-square-text から message-square にするのはどうでしょうか？線が少し気になります。

[manuel (Manuel Kostka)]

アイコンに関するフィードバックをありがとうございます！セット専用のトピックを新たに作成しました：Discourse Lucide Icons。

できれば、そこでさらにフィードバックを集めながら、セットを続けて磨いていければと考えています。

[ToddZ]

現在の .74em ではアイコンがほとんど判読できないことに同意します。約 1em が必要です。

[ToddZ]

気のせいでしょうか、それとも今日のトピックリスト内の縦方向のパディングが増えたのでしょうか？レイアウトが以前より緩やかになったのか、それとも私が以前より鈍感になったのか。

[darkpixlz (Pyx)]

それ、私も気づきました。手動で元に戻そうとしましたが（見た目の美しさより情報の密度を優先するので）、うまくいきませんでした

[manuel (Manuel Kostka)]

@NateDhaliwal

Blocks が Plugin Outlets と比べてどのような違いをもたらすのか、気になります。

デザイン観点からの主な違いは、PluginOutlet が挿入ポイントである点です。コアテンプレートに直接コンポーネントを注入します。つまり、すべてのカスタマイズが実際にはアプリの構造を変更します。

一方、BlockOutlet はレイアウトフレームです。フレームに1つ以上のコンポーネントを登録します。その後、カスタマイズはアプリテンプレート内ではなく、そのフレーム内で実行されます。これにより、より予測可能で安定したレイアウトを実現できます。

もう一つの大きな違いは、Blocks API が条件付きレンダリングロジックの全範囲を処理できる点です。コンポーネントにそのロジックを追加する必要はありません。ブロックコンポーネントはコンテンツとテンプレートに専念でき、重複するロジックが大幅に削減されます。

[darkpixlz (Pyx)]

@darkpixlz

でもうまくいきませんでした

もし誰かがよりコンパクトなトピック一覧を希望されるなら、私にはこれが機能しました：

.topic-list .topic-list-data {
  padding: 8px 0px;
  line-height: 0px;
}

[Canapin (Coin-coin le Canapin)]

新しいメタブランドテーマは、モバイル端末で見ると私の好みよりも余白が多すぎます。

• 画面の端とコンテンツのコンテナの間に1段の余白
• ページのコンテナと実際のコンテンツの間に2段の余白

他のテーマでは、画面の端とコンテンツのコンテナの間にこの最初の隙間はありません。

そのせいで、コンテンツが横方向に少し「押し潰された」ように見え、非常にスペースが狭くなっています。これは「私の投稿」ページでHorizonと比較するとよくわかります。

Horizonの方が可読性を損なうことなく、はるかに多くのコンテンツを表示できます。

フルコンテンツページでテーマのブランド要素を目立たせるために、紫色の「アウトライン」背景を採用した意図は理解できますが、狭い画面ではスペースを失いすぎていると思います。

もう一点、小さな指摘事項があります。

左上のアイコンが完全な円形ではありません。わずかに扁平になっています。

下部のアイコンもわずかに縦方向に引き伸ばされています。

カテゴリ/タグのポップアップで、テキストエリアがわずかにはみ出しています（このテーマに関連しているかは不明）。

。
カバーするように修正されると良いと思います。

[Canapin (Coin-coin le Canapin)]

モバイル版のリーダーボードで日付範囲を選択すると、コンテンツが横方向にオーバーフローします：

これが完全にテーマに関連する問題かどうかは確信が持てません。他のテーマでは、行全体を表示するのに十分なスペースがあるため、この問題が発生しない可能性があります。

[cuo_wu (James)]

@manuel

例えば、ハートアイコンは少し厄介です。いいねがついたときに塗りつぶされたバージョンを表示したほうが良いと思うのですが、現時点ではその実装方法がまだ確信が持てません。

Meta がハートアイコンの問題を解決したと聞きました。どのように解決されたのか教えていただけますか？私のフォーラムでは現在もハートアイコンが空のままです。

[manuel (Manuel Kostka)]

Lucide Icons コンポーネントにマージされ、更新すると表示されるようになります。

これまで「いいね」状態はフルアイコンとしてのみ表示されていましたが、コンポーネント設定でさらに例外を追加できるようになりました。

[Canapin (Coin-coin le Canapin)]

「少し仕上げが甘い」というカテゴリーに属するもう一つの指摘：

「アップvote」要素の上と下の余白が異なり、矢印を含むこのコンテナの上部が下部よりも高いです。少し不自然に見えます。テーマが「角丸の要素」を採用しているなら、ここでは完全な円形にしてもよいかもしれません。現状のままでは少し奇妙に見えますね