Salesforce – AI開発実践ラボ https://creativecontentlabtokyo.com AIで、作る力を手に入れる。 Sat, 04 Apr 2026 16:35:45 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 ウェルス会員ポータル|Salesforce Experience Cloud https://creativecontentlabtokyo.com/portfolio/wealth-club-portal/ Sat, 28 Mar 2026 04:17:14 +0000 https://test.creativecontentlabtokyo.com/portfolio/wealth-club%e4%bc%9a%e5%93%a1%e5%90%91%e3%81%91%e3%83%9d%e3%83%bc%e3%82%bf%e3%83%ab%e3%82%b5%e3%82%a4%e3%83%88/ プロジェクト概要

Next.js/Vercelで構築したWEALTH CLUBのWebアプリケーションを、Salesforce Experience Cloud上にLightning Web Components（LWC）を使って再構築したプロジェクトです。Salesforceプラットフォームの堅牢なセキュリティとデータ管理機能を活かしながら、元のデザインと同等のUI/UXを実現しています。

システム構成図

ウェルス会員ポータル システム構成図
ウェルス会員ポータル — System Architecture

主な機能

会員ダッシュボード

予約状況・お知らせ・ポイント残高をリアルタイム表示。会員ランクに応じたパーソナライズ。

レストラン予約

提携レストランの検索・詳細・予約。予約確定時にPlatform Eventsで即時通知。

ラウンジ予約

会員専用ラウンジの空き状況確認と即時予約。時間帯選択やオプション追加。

イベント管理

会員限定イベントの一覧・詳細・参加申込。カレンダー連携でスケジュール管理。

会員プロフィール

会員情報管理、ポイント履歴、通知設定。Shield暗号化で個人情報保護。

技術的なポイント

  • Salesforce Experience Cloud上にLWCで構築
  • WEALTH CLUB（Next.js版）のデザインをLWCで忠実に再現
  • Apex Controllers + SOQL/SOSLによるデータアクセス
  • Platform Eventsによるリアルタイム通知
  • Shield（Platform Encryption）による個人情報保護
  • カスタムオブジェクト（会員、予約、イベント、ポイント履歴）のデータモデル設計

開発プロセス

既存のNext.js版をリファレンスに、Salesforceプラットフォーム上での再実装をVibe Codingで実施。LWCコンポーネント設計からApex実装、Experience Cloudのテーマカスタマイズまで約5時間で完成しました。

]]> Salesforce App|モバイル営業支援ツール https://creativecontentlabtokyo.com/portfolio/salesforce-mobile-app/ Sat, 28 Mar 2026 16:57:56 +0000 https://test.creativecontentlabtokyo.com/portfolio/salesforce-mobile-app/ プロジェクト概要

外出先の営業担当者がSalesforceのデータにモバイルからアクセスし、取引先管理・商談確認・AI支援・名刺登録をワンストップで行えるネイティブアプリです。Salesforce REST APIとの連携により、リアルタイムのデータ同期を実現しています。

システム構成図

Salesforce モバイル営業支援 システム構成図
Salesforce モバイル営業支援 — System Architecture

主な機能

Salesforce認証 + 生体認証

Connected App OAuth認証とデバイスの指紋/Face IDによる二段階のセキュアなログイン。

取引先マップ

現在地周辺の取引先をピン表示。距離フィルタとRating色分けで重要顧客を即座に把握。

取引先・商談管理

Salesforceの取引先・商談データをモバイルで検索・一覧・詳細表示。外出先でもリアルタイムに確認。

AIコンシェルジュ

チャットUIで取引先のネクストベストアクションをAIが提案。音声入力にも対応。

名刺スキャン

カメラまたはファイル選択でAI-OCR読取。取引先・取引先責任者としてSalesforceに自動登録。

技術的なポイント

  • React Nativeによるクロスプラットフォーム開発（iOS/Android対応）
  • Salesforce Connected App OAuthによるセキュアな認証フロー
  • デバイスの生体認証（指紋/Face ID）による二段階認証
  • React Native Mapsで取引先の地理情報を可視化
  • AIエージェントによるネクストベストアクション提案
  • AI-OCRによる名刺読取→取引先自動登録パイプライン
  • Zustand + React Queryによる状態管理とキャッシュ戦略
  • Zodによる入力バリデーション

開発プロセス

AIを活用したVibe Codingアプローチで、認証フロー設計からUI実装・API連携・AI機能統合まで約5日間で完成。Salesforce REST APIの仕様に合わせたデータモデリングと、モバイル特有のUX（マップ操作・カメラ連携・音声入力）をネイティブ品質で実現しました。

]]> AI汎用入力フォームLWC https://creativecontentlabtokyo.com/portfolio/sf-universal-record-form/ Sat, 04 Apr 2026 16:35:45 +0000 https://test.creativecontentlabtokyo.com/portfolio/salesforce-%e6%b1%8e%e7%94%a8%e5%85%a5%e5%8a%9b%e3%83%95%e3%82%a9%e3%83%bc%e3%83%a0%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88-universalrecordform/ 背景・課題

Salesforceの標準フォームは1列表示が基本で、項目数が多いオブジェクトでは大量のスクロールが発生します。また、AI（Agentforce）との連携もカスタム実装が必要でした。

このコンポーネントは「あらゆるSalesforceオブジェクトに対応できる、高密度かつAI搭載の汎用入力フォーム」として設計しました。App Builderに配置するだけで動作し、objectApiNameを渡すだけで取引先・商談・カスタムオブジェクトすべてに対応します。

主要機能

列数切替（2 / 4 / 6 / 8列）

ツールバーのボタンで列数をリアルタイム切替。設定はlocalStorageに保存され、次回アクセス時に自動復元されます。8列表示では1画面に数十項目を表示でき、入力効率を大幅に向上させます。

4列グリッド表示
4列表示
2列グリッド表示
2列表示（デフォルト）
8列グリッド表示
8列表示（最高密度）

フィルタリング

「必須のみ」「空欄を隠す」の2つのトグルで表示項目を絞り込み。必要な項目だけに集中でき、大量項目のオブジェクトでも快適に入力できます。

必須項目のみフィルター
必須のみフィルター適用後
空欄を隠すフィルター
空欄を隠すフィルター適用後

セクション折り畳み & タブ表示

セクションヘッダークリックで展開・折り畳みを切替。状態はlocalStorageに保存されます。タブ表示に切り替えると、セクションをタブUIで切り替えられます。AI適用後はAIが定義したセクション構成に変わります。

セクション折り畳み
セクション折り畳み状態
タブ表示切替
タブ表示切替モード

ダーティ状態管理 & 変更ハイライト

フォームロード時の値を記録し、変更があった項目を黄色ハイライト表示。変更がある場合のみ保存・キャンセルボタンを表示。Ctrl+S（Cmd+S）でも保存できます。

未保存の変更バッジ
変更があった項目のハイライトと「未保存の変更あり」バッジ

Agentforce AI レイアウト最適化

「AI最適化」ボタンをクリックすると、AgentforceのFlex Prompt Templateがオブジェクトの項目定義を解析し、最適なレイアウト（列数・セクション構成・グリッドスパン）を提案します。提案はカスタムオブジェクト（UsfLayoutConfig__c）にサーバー保存され、チーム全員が同じ最適レイアウトを利用できます。

Agentforce AIレイアウト提案
AI提案レイアウトのプレビュー（設計意図も日本語で表示）
AI最適化適用後バッジ
適用後に「✦ AI最適化済み」バッジを表示

AI 入力補助（自然言語 → フォーム自動入力）

会話メモ・メール文章などの自然言語テキストをペーストすると、AgentforceのPrompt Templateが内容を解析して対応するフィールドに自動入力します。確信度（high/low）で✓/✗プレビュー表示し、ユーザーが確認してから適用できます。

AI入力補助 テキスト入力
自然言語テキストを入力
AI入力補助 解析プレビュー
解析結果を✓/✗でプレビュー
AI入力補助 フォーム適用後
フォームに自動入力された状態

技術的なポイント

  • 任意オブジェクト対応: objectApiNameを渡すだけで取引先・商談・カスタムオブジェクトすべてに対応
  • Prompt Template設計: Agentforce Flex Templateで列数・セクション・スパンをJSON出力。Setup > Prompt Builderで手動作成・アクティブ化
  • localStorageキャッシュ: 列数・折り畳み状態・AIレイアウトをobjectApiName単位でブラウザ保存
  • UsfLayoutConfig__c: AIが提案したレイアウト設定をカスタムオブジェクトにサーバー保存し組織共有
  • Enter移動: フィールド入力中のEnterキーで同列の次行フィールドへ移動（Excel的挙動）

コンポーネントのダウンロード

会員の方は、会員ポータルから本製品のベータ版インストール URL を確認することができます。

]]>