Power Apps iconPower AppsことはじめPower Apps icon
ホーム
【脱・紙とExcel】クイック報告アプリ
Step 5 / 7

[機能] カメラを起動して撮影画像をプレビュー、保存する方法

カメラコントロールを使って、スマホで撮影した写真をアプリ上に表示し、保存します。

報告する内容にもよりますが、写真撮影した画像の報告も対応可能です。

カメラコントロールの追加

  1. ReportFormの写真カードを選択後、「挿入」からメディア内にある「カメラ」を選択します。
  2. 画面にカメラコントロールを配置後、詳細設定の「OnSelect」に下記の数式を入力します。
    ※Collect関数はレコードの追加に使用します。
    　ここでは、colPhotosレコードを動的生成し、Photoにはカメラコントロールの撮影処理、TakenAtはNow関数で撮影日時を取得します。
    　カメラコントロールは標準で撮影日時などのメタ情報を持てないため、Collect関数を使うことで、画像と日時を一つの塊のデータにしています。
Collect(
    colPhotos,
    {
        Photo: Camera1.Photo,
        TakenAt: Now()
    }
);
  1. カメラコントロールの「Width」はParent.Width * 0.2、「Height」はSelf.Width、「X」はDataCardKey2.X + DataCardKey2.Widthにします。
  2. カメラコントロールの位置を分かりやすくするため、詳細設定の「BorderThickness」を1、「BorderColor」をColor.Blackにします。

Tips: 単に撮像するだけならCamera1.Photoを使えばOKです。

画像のプレビュー

撮影した画像を表示するための「画像」コントロールを配置します。

  1. 写真カードを選択後、「挿入」からメディア内にある「画像」を選択します。
  2. 画面に画像コントロールを配置後、詳細設定の「Image」に下記の数式を入力します。
    ※Last関数はレコードの最後を返します。
    　写真を何回撮っても、最後に残った画像を使用します。
Last(colPhotos).Photo
  1. 画像コントロールの「Width」はParent.Width * 0.2、「Height」はSelf.Width、「X」はDataCardKey2.X + DataCardKey2.Width + Camera1.Width + 5にします。

カメラの動作確認

  1. 写真カードのDataCardValueを削除もしくは非表示にします。
  2. アプリのプレビューを実行します。
  3. 黒い枠線のカメラをクリックすると、撮影した画像が画像コンポーネントに表示されます。
    ※PCのカメラはオンにすること

カメラの動作確認

画像の保存

画像の保存処理は、Power Automateとの連携が必要です。

  1. SharePointに画像の保存先を用意します。
  2. 写真カードを選択後、「ボタン」を追加し、「Text」を「画像保存」、「X」をDataCardKey2.X + DataCardKey2.Width + Camera1.Width + Image1.Width + 10、「Y」は35にします。
  3. 画像保存ボタンの「OnSelect」に下記を入力します。
    ※Last(colPhotos).TakenAtはNow()関数でも可
// 撮影画像をJSONに格納
Set(
    varPhotoBase64,
    JSON(
        Last(colPhotos).Photo,
        JSONFormat.IncludeBinaryData
    )
);

// ファイル名作成（例：Photo_20260211_173045.png）
Set(
    varFileName,
    "Photo_" & Text(Last(colPhotos).TakenAt, "yyyymmdd_hhmmss") & ".png"
);

// Power Automate実行
'save-photo-to-excel'.Run(
    varPhotoBase64,
    varFileName
);

// 完了メッセージ
Notify("保存が完了しました", NotificationType.Success);
  1. 左メニューの三点リーダーを押下し、Power Automateを選択後、「フローを新規作成する」を選びます。
    ※フロー名は「'save-photo-to-excel'.Run」に合わせる必要があるため、「save-photo-to-excel」にします
    　フローの作り方はこちらを参照。

Caution: Power Apps内ではなく、Power Automateからフローを作る場合、Power Appsと環境は同じにすることが必要です。

画像保存のテスト

写真を撮影し、画像保存するところまでをテストします。

  1. アプリのプレビューを起動し、カメラコントロールを押下後、保存対象の画像を取得します。
  2. 画像保存ボタンを押下し、保存を実行します。
  3. 入力フォームに入力後、アプリ下部の保存ボタンを押下します。

画像の保存 Excleの確認

フォーム保存と画像保存のタイミングを合わせる

ステップ4で作成したフォーム保存処理と画像保存処理を合体させます。
上記のテストで見たように、保存タイミングが異なると、Excelへの保存も行が分かれてしまいます。

  1. 画像保存ボタンを削除します。
  2. ReportFormの「OnSuccess」の式を下記に修正します。
    ※追加内容はPatch関数で、データソースの「ReportData」を指定し、テーブル項目名の「写真」を使用します。
// 撮影画像をJSONに格納
Set(
    varPhotoBase64,
    JSON(
        Last(colPhotos).Photo,
        JSONFormat.IncludeBinaryData
    )
);

// ファイル名作成
Set(
    varFileName,
    "Photo_" & Text(Last(colPhotos).TakenAt, "yyyymmdd_hhnnss") & ".png"
);

// Power Automate実行
Set(
    varFlowResult,
    'save-photo-to-excel'.Run(
        varPhotoBase64,
        varFileName
    )
);

// 画像URL取得
Patch(
    ReportData,
    ReportForm.LastSubmit,
    { 写真: Coalesce(varFlowResult.imageurl, "") }
);

// 成功通知
Notify("保存に成功しました", NotificationType.Success);

// フォームリセット
ResetForm(ReportForm);
NewForm(ReportForm);

// 撮影画像のクリア
Clear(colPhotos);
  1. 「varFlowResult.imageurl」の「imageurl」を使用するため、Power Automateのフローを修正します。
    ※詳細はこちら

Caution: Power Automateのフローを更新後、必ずPower Apps側で該当フローに対して「祭神の情報に更新」を実行します。

できたもの

保存処理の改良 Excelの確認

← 前のステップ次のステップ →