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