【LWR開発】LWCとCMSを拡張する実践ガイド

必須級のLWCコンポーネント

• LWRサイトのテーマに完全適応するログイン・ログアウトを切り替えるボタンの実装
• LWRサイトに「ダークモード」を実装するテーマ管理コンポーネント作成ガイド

“Experience Delivery 時代”の新常識

• LWRにおけるサードパーティスクリプトの正しい読み込み方：x-oasis-script の活用とExperience Delivery (SSR) 時代の注意点
• LWRサイトのパフォーマンス・デバッグ術：Chrome DevToolsとSSR時代のボトルネック特定

LWRにおけるLWC開発とスタイリング

LWR環境特有のCSS変数（Styling Hooks）や設定ファイルの書き方をマスターします。

• LWRにおけるCSS変数の活用 (Styling Hooks)
• js-meta.xml 設定ガイド

データ連携とCMS拡張

CMSコンテンツやSalesforceデータをより柔軟に扱うための実装テクニックです。

• 拡張CMSデータバインディング
• データテーブルのカスタム型実装

マーケティング施策

• CMS連携・効果測定機能付きのA/Bテスト用LWCを自作する

UX for Admins

LWR専用

• LWRサイトのプロパティ入力を完全掌握！ExperiencePropertyTypeBundle 実装ガイド

LWR以外

• LWC設定画面をカスタマイズ！Custom Property Editor (CPE) 実装ガイド

実践

• LWCで「美しい商品詳細ページ」を作る！CMS画像連携とStyling Hooksによるテーマ設計
• 「カートに入れる」ボタンをどう実装する？Lightning Message Service (LMS) でコンポーネント間通信を実現する
• 「ページ遷移」の正解はこれ！NavigationMixinとパンくずリストの実装ガイド
• LWCとApexで自作するカスタムAgentforce「執事セバスチャン」の実装ガイド

• 検索UI構築：SLDSグリッドとコンポーネント分割の実践
• 画像スライダーを自作する：標準コンポーネントの壁を越えるCSS/JS実装
• 「ダブルブッキング」を防ぐリアルタイム予約システム
• Agentforceをサイトユーザーに開放する裏技：指定ログイン情報ループバック接続とAgentforce回答解析
• ダークモード対応を見据えたデータテーブル自作とレスポンシブ実装