モデレーターの方、適切なカテゴリへ移動してください。
モバイル版最新ホーム画面
Discourse 3.5 で site.mobileView が非推奨となったため、人気のある Force Mobile Homepage テーマコンポーネントは動作しないとしてマークされました。このコンポーネントは、現在の Discourse バージョンで動作する代替版です。
狭い画面ではデフォルトのホーム画面を最新に設定し、広い画面（iPad の横画面、デスクトップ）は変更しません。また、ブラウザセッションの期間中、ユーザーが「最新」と「カテゴリ」のどちらを選んだかを記憶します。
動作
iPhone / 狭い画面 — デフォルトで「最新」に遷移
ユーザーが「カテゴリ」に移動 — その選択がブラウザセッションの間記憶される
新しいセッション — 常に「最新」にデフォルトで戻る- :ipad: iPad（横画面）/ デスクトップ — 完全に影響を受けず、2 カラムの「カテゴリ」＋「最新」は変更なし
仕組み
このコンポーネントは、ビューポート検出に window.matchMedia を、デフォルト設定に setDefaultHomepage を、ページ描画前のリダイレクトに Ember の service:router を使用します。sessionStorage でユーザーの最後の選択を記憶し、ホーム画面に戻る際にその設定を尊重します。
import { apiInitializer } from "discourse/lib/api";
import { setDefaultHomepage } from "discourse/lib/utilities";
export default apiInitializer("1.0", (api) => {
if (!window.matchMedia("(max-width: 768px)").matches) {
return;
}
setDefaultHomepage("latest");
api.onPageChange((url) => {
if (url === "/categories") {
sessionStorage.setItem("mobile_homepage", "categories");
} else if (url === "/latest") {
sessionStorage.setItem("mobile_homepage", "latest");
}
if (url === "/") {
const choice = sessionStorage.getItem("mobile_homepage");
if (choice === "categories") {
const router = api.container.lookup("service:router");
router.replaceWith("discovery.categories");
} else {
const router = api.container.lookup("service:router");
router.replaceWith("discovery.latest");
}
}
});
});
768px のブレイクポイントは、Discourse 独自の狭いレイアウトの閾値と一致しています。このアプローチは、ビューポート API の変更を受けて、Discourse コアチームが このスレッド で示したガイダンスに基づいています。
テスト済み
- iPhone — 「最新」に遷移
- :ipad: iPad（横画面） — 2 カラムの「カテゴリ」＋「最新」
デスクトップ — 2 カラムの「カテゴリ」＋「最新」
インストール方法
- 管理 → カスタマイズ → テーマ → インストール → Git リポジトリから に移動
- 以下を入力:
https://github.com/shortmort37/discourse-mobile-latest-homepage - コンポーネントとしてインストールし、アクティブなテーマに追加
テーマコンポーネントのインストールが初めての場合は、Discourse テーマの初心者ガイド をご覧ください。
注意点
- ユーザーは手動で「カテゴリ」に移動可能 — セッション中はその選択が尊重される
- 必要に応じて JS ファイル内で 768px のブレイクポイントを調整可能
- ブラウザを閉じるとセッションの選択はリセットされるため、新しい訪問時は常に「最新」から始まる
質問、フィードバック、PR を歓迎します！