こんにちは、あんこ先生です。
会社の都合でクラウドストレージにファイルを保存しないといけないことがありますよね。
SharePointリストの添付ファイル経由なら簡易に行えるこの作業です。
DropBoxやBoxなどはコネクタが容易されていますが、PowerAppsではそれらに保存したExcelファイルのテーブルにのみアクセスできます。
つまり、ファイルの保存や移動、削除は行えません。
それを補完するため、PowerAutomate（以下フロー）を経由して課題を解決します。
今回はアプリで撮影した画像をBoxにPng形式で保存する方法をコード付きで紹介していきます。
Contents
カメラコントロールで撮影した画像をBoxに保存する方法
作成するアプリの概要
カメラコントロールで撮影した画像をフロー経由でBoxに保存します。
撮影したらいったんその画像を表示します。
問題なければ保存、ダメならキャンセルできます。
Boxに保存するためのフロー作成
直接PowerAppsから保存できないため、フローを経由します。
見ての通り３ステップととてもシンプルです。
動作としては、アプリからイメージファイルを取得してBoxに保存、その結果をアプリに返すといったものです。
それでは細かく見ていきましょう。
PowerAppsからフローを作成する
画面左側のメニューからフローアイコンを押します。
それから フローの作成 ▶ フローを新規作成する ▶ 一から作成する の順で選びます。
すると下図のような画面が表示されます。
先頭行はトリガーといってフローが実行される条件を示しています。
今回の場合はPowerAppsから指示を受けた際に実行されます。
トリガー部分は触る必要はありません。
新しいステップから Box ▶ ファイルの作成 を選びます。
ここでワンポイント！
ひとまずファイルコンテンツにPowerAppsで確認を選択します。
すると理由はわかりませんが、ファイルの作成_ファイルコンテンツ に変わります。
いったん選んだPowerAppsで確認は不要なので削除してください。
その後、各項目を以下のように埋めていきます。
基本直接コピペして、慣れてる人は式から指定していってもかまいません。
フォルダーのパス
Box内の保存先
ファイル名
@{formatDateTime(utcNow(), 'yyyyMMdd_hhmm')}.png
ファイルコンテンツ
@{dataUriToBinary(triggerBody()['ファイルの作成_ファイルコンテンツ'])}これでファイル名は本日の日付時間という名前で指定したフォルダにPng形式で保存されます。
なお、ファイルコンテンツにdataUriToBinaryを使わなくても保存はできますが、ファイルが開けなくなりますので注意してください。
最後は正常終了したあと、アプリにその旨表示できるようにします。
中身はファイル名＋正常に保存できたよってテキストにしています。
@{body('ファイルの作成')?['DisplayName']}を正常に保存しました。
あとはフローに名前を付けて保存してください。
とりあえず、PowerAppsからBoxへ写真投稿という名前にしておきます。
アプリの作成│カメラとフロー連携
使用するコントロールは５つです。
撮影結果の確認が不要であればカメラとボタンの２つでいけますよ。
カメラコントロールの設定
初めにカメラコントロールを設置します。
タップするとその画像を変数glbImageに格納します。
//OnSelect
Set(glbImage,camGetImage.Photo)たったこれだけです。
カメラが複数ある場合はCameraプロパティの数値を増減してみてください。
SurfaceProの場合、0が前面、1が背面カメラでした。
ボタンコントロールの設定
ボタンを押したらフローに画像を渡して実行されます。
実行するだけならPowerAppsからBoxへ写真投稿.Run(glbImage)のみの記述でいけます。
フロー実行後、正常終了のメッセージを画面に表示するためNotify関数を使用してanserを指定しました。
また、おなじ画像で複数回実行されないよう変数glbImageを空にしておきます。
//OnSelect
Notify(
PowerAppsからBoxへ写真投稿.Run(glbImage).anser
);
Set(glbImage,Blank())画像を撮る前に実行するとフローがエラーになるので制御もかけます。
変数glbImageが空の場合はボタンが押せないようにしておきます。
//DisplayMode
If(IsBlank(glbImage),DisplayMode.Disabled, DisplayMode.Edit)以上で最低限の機能は搭載できました。
この時点で動作します。
撮影した画像を確認する
撮影した画像がいまいちなものだと困りますよね。
そのため、撮影した画像を表示し、かつキャンセルする機能を追加します。
いやいや、一発勝負でいいよねって人は読み飛ばしてください。
使うコントロールはコンテナとその中に入るイメージとアイコンの３つです。
まずコンテナをカメラコントロールと同じサイズ・同じ位置に設置します。
その中にコンテナと同じサイズのイメージとアイコンを入れます。
コンテナは必ずカメラコントロールより前面に配置してください。
まずイメージの設定です。
撮影した画像が格納された変数glbImageを表示するために使用します。
//Image
glbImage次に撮影した画像が気に入らずやり直したいときに使うアイコンです。
形はわかりやすいキャンセルがオススメです。
押したときに変数glbImageを空にします。
//OnSelect
Set(glbImage,Blank())最後にコンテナの設定です。
撮影した、つまり変数glbImageが空ではないときに表示されるようにします。
//Visible
!IsBlank(glbImage)これで撮影したらコンテナが表示されて画像を確認できます。
気に入らなければキャンセルしてやり直せますね。
Boxに撮影した画像を保存する
実際に実行すると数秒で処理が終わります。
下図のようにBoxに保存され、サムネイルも表示されました。
ファイル名が9時間前のものになっていたら、M365のタイムゾーンがUTCです。
気になるようなら9時間進めさせた名前にしてください。
カメラコントロールで撮影した画像をBoxに保存する方法のまとめ
今回はカメラコントロールで撮影した画像をBoxに保存する方法を紹介しました。
原理は同じなのでSharePointやDropBoxでも同じことができます。
現場写真をひたすら投げ込みたい、証明写真を収集したいなど用途は多々あると思います。
その場合、ファイル名に現場名やユーザー名を追加するとなお便利になりますね。
ベースアプリは初心者でも概ね30分あれば完成しますので、お勉強もかねて作ってみましょう！
ご支援よろしくおねがいします
この記事を気に入ってくださった方、寄付してあげてもいいよという方がいらっしゃっいましたら、ご支援いただけると助かります。
下記リンクからAmazonギフト券で、金額は15円からお気持ちを入力してください。
受取人のメールアドレスは amazon@anko7793.com までお願いします。
メッセージもいただけるとたいへん喜びます。
よろしくお願いします。
あたりまえだけどカメラ機能のあるデバイスじゃないと使えないよ。
背面カメラのないノートPCには不向きです。