「LWRサイト × Agentforce」 不動産ポータル開発連載、ついに最終回（Vol.5）です。 ここまでに、物件検索、詳細閲覧、AI提案、そして予約までの一連のフローを構築してきました。
最後は、それらの活動履歴を一元管理する 「マイページ（担当者ダッシュボード）」 の構築です。 管理画面だからといって手を抜かず、PCでは一覧性の高いテーブル、スマホでは操作しやすいカード型UIに切り替わる、徹底したレスポンシブ実装を行いました。
今回の記事で作成したコンポーネントの全ソースコードをGitHubで公開しています。 ぜひ Clone して、あなたの組織で動かしてみてください。
完成イメージ
マイページには、「週間スケジュール（カレンダー）」と「今後の内見予定リスト（テーブル）」の2つを配置しています。
- PC
- タブレット＆スマホ
なぜ lightning-datatable を使わないのか？
Salesforce開発者なら、リスト表示には標準の lightning-datatable を使いたくなるでしょう。実際、列幅の定義やカスタム型（電話リンクなど）の実装は標準コンポーネントでも可能です。
しかし、今回あえて 「HTMLテーブル (<table>) によるフルスクラッチ」 を選んだ最大の理由は、「ダークモード（サイトテーマ色）への完全対応」 です。
テーマ変数（Styling Hooks）の壁
以前の記事（ダークモード切り替えLWCの作成）で紹介したコンポーネントを追加で配置すると、LWRのテーマ機能を使って配色の動的切り替えができます。
lightning-datatable は便利な反面、内部構造（Shadow DOM）がカプセル化されており、セルの背景色や境界線に対して、LWRのブランド変数（--dxp-g-root など）を自由に適用しきれないという課題がありました。
そこで、標準の SLDSクラス を使った素のテーブルを組み、CSS変数で色を制御する設計を採用しました。
agentScheduleDashboard.css
/* テーブル背景：サイトのルート色（ダークモード時は黒など）に追従 */
.slds-table {
background-color: var(--dxp-g-root, #fff);
}
/* ヘッダー背景：ブランドのコントラスト色に追従 */
.slds-table thead th {
background-color: var(--dxp-g-brand-contrast, #f3f3f3);
}
/* 行ホバー時も色を統一 */
.slds-table:not(.slds-no-row-hover) tbody tr:hover>td {
background-color: var(--dxp-g-brand-contrast, #f3f3f3);
}このように実装することで、サイトの設定で「ダークモード」に切り替えた瞬間、テーブルの背景も文字色も美しく反転します。「機能」よりも「サイト全体の世界観（デザインシステム）」を優先する、LWRサイトならではの判断です。
レスポンス実装：テーブルからカードへの変身
PCとスマホで全く異なるUIを表示するために、CSSメディアクエリとユーティリティクラスを活用しました。
agentScheduleDashboard.html
<template if:true={hasData}>
<div class="desktop-only">
<table class="slds-table slds-table_bordered ...">
</table>
</div>
<div class="mobile-only">
<template for:each={tableData} for:item="row">
<div key={row.Id} class="slds-box slds-box_small slds-m-bottom_medium">
</div>
</template>
</div>
</template>agentScheduleDashboard.css
/* デフォルト（PC）ではモバイル用を非表示 */
.mobile-only {
display: none;
}
/* モバイル用ブレークポイント (768px以下) */
@media (max-width: 768px) {
.desktop-only {
display: none; /* テーブルを消す */
}
.mobile-only {
display: block; /* カードを出す */
}
}このシンプルな切り替えにより、PCでは情報の網羅性を、スマホでは視認性と操作性を両立させています。
カレンダーコンポーネントの再利用
ダッシュボード上部にある「週間スケジュール」は、Vol.3で作成した物件カレンダーのロジックを流用した agentScheduleCalendar です。
物件カレンダーが「空き枠(◎)」を表示するのに対し、こちらは「自分の予定(顧客名/物件名)」を表示します。 Apex側で取得するデータを変えるだけで、LWC側の 「Sticky Column（時間軸固定）」 や 「週切り替えロジック」 はそのまま再利用できています。
agentScheduleCalendar.js
// 自分の予定を取得するApexメソッドを呼び出し
const result = await getAgentWeeklySchedule({ startDate: dateStr });連載のまとめ：LWRで作る次世代ポータル
全5回にわたり、LWRサイトによる不動産ポータル開発を解説してきました。
- Vol.1: 検索UIのグリッド設計
- Vol.2: 自作スライダーによるリッチな詳細画面
- Vol.3: リアルタイム予約システム
- Vol.4: Agentforceの統合と回答解析
- Vol.5: レスポンシブ対応ダッシュボード
Auraサイトに比べて標準機能が少ないLWRですが、その分、HTML/CSS/JSの標準技術を駆使すれば、ここまでモダンで高速なWebアプリケーションを構築できます。 そして何より、「Salesforceのデータをリアルタイムに扱う」 という強みは、他のWebフレームワークでは真似できない最大の利点です。
本連載が、皆さんのLWR開発のヒントになれば幸いです。
読者の声