カメラ

Avonni Cameraコンポーネントは、Salesforce Lightningページ上のAvonniダイナミックコンポーネント内からユーザーがデバイスのカメラを直接使用して画像を撮影できるようにします。これにより、アプリケーションを離れることなく視覚的なドキュメント、証拠、プロフィール写真などをSalesforceレコードに直接追加するシームレスな方法が提供されます。

概要

このコンポーネントはカメラ機能をカスタムインターフェースに統合します。主な機能は以下の通りです:

  • 直接画像キャプチャ: ユーザーはデバイスのカメラを起動し、コンポーネント内で写真を撮影できます。

  • 柔軟な表示: カメラビューをインラインで表示するか、ボタン経由で起動できます。

  • キャプチャオプション: カウントダウンタイマー、写真プレビュー、セッションごとの単一または複数キャプチャなどの機能を構成できます。

  • Salesforce統合: キャプチャした画像を自動的にSalesforce Files(ContentDocument)として保存し、そのIDを取得します。

  • カスタマイズ可能なインターフェース: コンポーネントのサイズ、アスペクト比、ボタンアイコン、ラベルを調整できます。

使用例

CameraコンポーネントはSalesforceモバイルアプリを使用するモバイル環境で特に有用ですが、カメラ搭載のデスクトップ/ラップトップでも動作します:

  • フィールドサービス: 技術者が機器の損傷、完了した作業、現場状況の写真を撮影し、作業指示書や資産に直接リンクできます。

  • 検査・監査: 検査中の所見(例:物件の状態、安全基準の遵守)を視覚的に記録します。

  • 営業: 担当者が訪問中に製品陳列、イベント設営、顧客のホワイトボードなどの写真を撮影します。

  • カスタマーサービス: Experience Cloudの顧客や担当者がケースに関連する写真(例:破損した製品)をアップロードできるようにします。

  • 従業員記録: ユーザーレコードやカスタムの従業員オブジェクトのプロフィール写真を撮影します。

  • 保険請求: 請求のための写真証拠を提出します。

Cameraコンポーネントの追加方法

ドラッグ&ドロップ:コンポーネントライブラリ(左パネル)から「Camera」コンポーネントを見つけてキャンバス上にドラッグします。

構成

キャンバス上でCameraコンポーネントを選択すると、プロパティパネル(右パネル)でそのプロパティにアクセスできます。

基本プロパティ

これらのプロパティは基本的なラベリングと識別を制御します。

  • API名:(テキスト)このコンポーネントインスタンスの一意の識別子(例:SitePhotoCapture、EvidenceCamera)。

  • ラベル:(テキスト、任意)バリアントに応じてコンポーネントの上または横に表示されるラベル。例:「Take Site Photo:」「Upload Proof:」。

  • フィールドレベルヘルプ:(テキスト、任意)ラベルの横に表示されるヘルプテキスト。

コア機能

これらの設定はカメラの動作とユーザーの操作方法を定義します。

  • Value: (テキストまたはテキストコレクション - 出力)このプロパティは通常キャプチャ結果を保持します。

    • データバインディング:通常、単一キャプチャの場合はテキスト変数に、複数キャプチャを許可する場合はテキストコレクション変数にバインドするべきです。

    • 「Content Documentとして保存」が有効な場合、この変数はキャプチャ後に保存された画像のSalesforce ContentDocumentId(複数の場合は複数)で埋められます。そのIDを後続の操作(ファイルをレコードにリンクするなど)で使用できます。

  • 表示方法: (選択)カメラインターフェースの表示方法を選択します:

    • inline:ライブカメラプレビューがページ上のコンポーネント領域に直接埋め込まれます。

    • button:ボタンが表示されます。ボタンをクリックするとカメラインターフェースが開きます(特にモバイルでは全画面またはモーダルになることが多い)。

  • キャプチャした写真の表示: (ブール - チェックボックス)有効にすると、現在のセッション内でユーザーが撮影した写真のサムネイルやプレビューを、カメラビューの下またはキャプチャ後に表示します。

  • カウントダウンの表示: (ブール - チェックボックス)有効にすると、ユーザーがキャプチャを開始してから実際に写真が撮影されるまでにカウントダウンタイマー(例:3...2...1...)を表示します。

  • カウントダウン時間: (数値)「カウントダウンの表示」が有効な場合に、カウントダウンの長さを秒単位で指定します(例:3)。

マルチキャプチャ設定

これらの設定は複数キャプチャが許可されている場合にのみ適用されます。

  • 複数キャプチャを許可する:(ブール値 - チェックボックス)

    • チェック済み:ユーザーは確認する前に1回のセッションで複数の写真を撮影できます。

    • 未チェック(デフォルト):ユーザーはセッションごとに1枚の写真のみを撮影します。

  • 画像レイアウト:(選択 - 「複数キャプチャを許可」が有効な場合)複数のキャプチャ済み写真プレビューをどのように配置するかを定義します(例:グリッド、カルーセル)。

  • デフォルト画像タイトル:(テキスト - 「複数キャプチャを許可」が有効な場合)Salesforce Filesとして保存されるキャプチャ画像のデフォルトのベースタイトルを設定します。意味のある名前を作成するために数式や変数と併用することがあります(例:"{!CaseNumber}"証拠").

出力/保存

これらの設定は、キャプチャした画像がSalesforce内でどのように保存され、関連するレコードにリンクされるかを制御します。

  • コンテンツドキュメントとして保存: (ブール値 - チェックボックス)

    • 有効(推奨): これはキャプチャ画像を扱う最も一般的で分かりやすい方法です。これをチェックすると、コンポーネントは 自動的に保存します キャプチャされた画像を ファイル(ContentDocument) ユーザーがキャプチャを確定したときにSalesforceのレコードとして保存します。

    • 無効: 未チェックの場合、画像データを出力するコンポーネントの動作は異なる場合があります(例:プロパティを介してBase64データを提供する可能性)。 Value その場合、出力データを手動で処理し、Salesforce Fileレコードを作成し、別のレコードに関連付けるための必要な ContentDocumentLink レコードを作成するためのカスタムロジック(おそらくフローやインタラクションでトリガーされるApexを使用)を実装する責任があなたにあります。このアプローチははるかに複雑で、正確な要件がない限り一般的には推奨されません。

  • コンテンツドキュメントの関連付け先レコードID: (テキスト - 「コンテンツドキュメントとして保存」が有効な場合にのみ表示および関連します)

    • 目的: この重要な設定はAvonniに次のことを指示します: どの特定のSalesforceレコードに 新しくキャプチャされた画像ファイルを自動的にリンクするべきかを指定します。これはSalesforceが作成する LinkedEntityId フィールドを ContentDocumentLink ジャンクションレコードに入力します。

    • 設定方法: ファイルをリンクしたいレコードの15桁または18桁のSalesforce レコードID を提供する必要があります。動的にバインドするには、プロパティの横にある リソースセレクタアイコン(x) )を使用してください。一般的かつ推奨されるソースは次のとおりです:

      • selectedAccountId (リソースセレクタ経由): (最も一般的なユースケース) 動的コンポーネントにその ターゲットページオブジェクト が設定され、レコードページ(例:取引先ページ)に配置されている場合、 コンポーネント > 「入力プロパティを追加」をクリック (しばしば表示される)を選択します。これにより、キャプチャされた画像はページで表示されている @recordIdに自動的にリンクされます。 現在のレコード ページ上で表示されているレコードに自動的にリンクされます。

      • 変数リソース: リンクしたいレコードのIDを保持する変数リソース(例: {!inputRecordId})を選択します。これは、カメラコンポーネントがレコードIDを入力として受け取ったモーダルやパネル内にある場合に一般的です。

      • レコード変数のフィールド: レコード変数にレコードを読み込んでいる場合(例: {!relatedAccount})、その ID フィールドを選択できる可能性があります(例: {!relatedAccount.Id}).

高度な外観と動作

これらのプロパティは、外観やインタラクション状態の微調整を可能にします。

  • サイズ: (選択)コンポーネントフレームのおおよそのサイズを制御します(特に「インライン」表示の場合):small、medium、large、responsive。

  • ビデオアスペクト比: (選択)ライブカメラプレビューのアスペクト比を設定します(例:1:1、4:3、16:9)。一般的なデバイスの向きや望ましい出力に合うものを選んでください。

  • トリミングフィット: (選択)定義されたアスペクト比内でライブビデオフィードがどのように収まるかを決定します(例:Cover - 領域を埋め、トリミングされる可能性がある;Contain - フィード全体を表示し、レターボックスが発生する可能性がある)。

  • ボタンアイコン: (アイコンセレクタ)コンポーネント内の標準アクションで使用するアイコンをカスタマイズします:

    • 写真撮影ボタンのアイコン

    • 写真削除ボタンのアイコン

    • (カメラ切替、確認などの他の可能なアイコン)

  • ラベル: (テキスト入力)カメラインターフェース内のボタンや他の要素に表示されるテキストラベルをカスタマイズします(例:「Capture」を「Take Photo」に変更する)。

  • 無効: (ブール - チェックボックス)コンポーネント全体を無効にし、操作を禁止します。

  • 読み取り専用: (ブール - チェックボックス)通常はカメラキャプチャには適用されませんが、使用されると既にキャプチャされたプレビューの削除を防ぐ場合があります。

  • 必須: (ブール - チェックボックス)先に進む前に少なくとも1枚の画像のキャプチャを必須にします(通常はフォーム検証と併用されます)。

  • 表示: (ブール)コンポーネントの全体的な表示/非表示を制御します。

インタラクションの設定

キャプチャ機能に加え、Camera コンポーネントでは特定のイベントに基づいて標準の Avonni インタラクションをトリガーし、より動的なワークフローを実現できます。これらは インタラクション コンポーネントが選択されているときのプロパティパネルのセクションで設定します。

画像キャプチャ時

  • 発火するタイミング: このイベントは通常、トリガーされます の後に ユーザーが1枚以上の画像を正常にキャプチャして操作を確定したとき(例:カメラインターフェース内で「完了」または「保存」をクリックしたとき、特に コンテンツドキュメントとして保存 が有効になっている場合)。

  • 一般的なユースケース:

    • 表示例: Show Toast 画像が保存されたかリンク準備ができていることを確認するメッセージ(例:「写真証拠がキャプチャされました!」)。

    • レコード変数の更新 / フローの実行: 関連レコードのフィールドを更新して写真が追加されたことを示すアクションをトリガーします(例、 Photo_Taken__c を true に設定)。

    • クリックされた項目が表すレコードの詳細ページに移動します。通常、ナビゲートアクションでは キャプチャ成功後に自動的にユーザーを別の場所へ誘導します。

    • (「コンテンツドキュメントとして保存」を使用していない場合): をトリガーする フローを実行 または Apex アクションを使って 処理および保存する コンポーネントが出力する画像データを。

    • 保存されたファイルをリンクする(必要な場合): をトリガーする フローを実行 を作成するために ContentDocumentLink レコードを作成する場合は、もし しなかった を使用しなかった場合でも Content Document Linked Entity Id 設定、しかし を使用した とキャプチャした ID を コンテンツドキュメントとして保存 に保存した場合 Value 変数に代入します。

カメラ開始時

  • 発火するタイミング: このイベントはカメラプレビューが有効になったときにトリガーされます(コンポーネントが読み込まれたときに 表示方法インライン、またはユーザーがボタンをクリックしたときに 表示方法ボタン).

  • 一般的なユースケース: 重大な操作としてはあまり一般的ではありませんが、次の目的で使用されることがあります:

    • をトリガーする フローを実行 ログ記録/監査目的のため。

    • 変数値を設定 カメラのアクティブ状態を追跡するため。

カメラ停止時

  • 発火するタイミング: このイベントはカメラビューが閉じられるか無効化されたときにトリガーされます。キャプチャが成功していない場合も含まれます(例:利用可能な場合の「キャンセル」ボタンをユーザーがクリックした、または別のページに移動したなど)。

  • 一般的なユースケース:

    • クリックされた項目が表すレコードの詳細ページに移動します。通常、ナビゲートアクションでは ユーザーを以前の状態や画面に戻す。

    • 変数値の設定: カメラがもはやアクティブでないことを示す変数を更新する。

ケースに写真証拠を追加する

1

カメラコンポーネントを追加

カメラコンポーネントをキャンバスに追加します。

2

カメラを設定

  • API 名: evidenceCamera

  • ラベル:「写真証拠を添付」

  • 表示方法: ボタン

  • 複数キャプチャを許可:チェック済み

  • コンテンツドキュメントとして保存:チェック済み

3

ボタンにインタラクションを追加

  • 先ほど追加した evidenceCamera レコード操作のための主要なインタラクション

  • ことを確認してください(例: 真偽値入力にテキストを送らない)。 インタラクション 必要に応じて複数項目を追加することで、いくつでもプロパティを渡せます

  • 次にアクションを追加: 画像キャプチャ時 イベント(または類似の成功イベント)。

  • アクションタイプ: Show Toast

  • トーストを設定: バリアント success、タイトル 成功、メッセージ 写真がケースに添付されました!.

次を確認してください: コンテンツドキュメントとして保存 オプションがコンポーネント上で有効(チェックされている)であり、かつ Content Document Linked Entity Id フィールドが現在のレコードのIDに設定されていること(リソースセレクタを使用して selectedAccountId にバインドすることで)

結果: ユーザーが「写真証拠を添付」をクリックし、写真を撮影して確認します。写真はFilesとして保存されます 値を参照するフィルターを追加します: 自動的にケースにリンクされます。成功のトーストが操作を確認します。

重要な考慮点

まとめると

Avonniのカメラコンポーネントは、Lightningページ内のSalesforce UIで直接画像をキャプチャする統合されたノーコードソリューションを提供し、フィールドサービス、点検、証拠収集などのワークフローを合理化します。特にモバイルでの利用ケースに適しています。

最終更新

役に立ちましたか?