5
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

PowerAppsのカメラで撮影した写真をOneDriveに保存する

Last updated at Posted at 2019-01-26

#はじめに

  • PowerAppsのカメラ機能で撮影した写真データをOneDrive for Businessに保存する方法の紹介です。
  • 写真データの変換処理(Base64→バイナリ)、OneDrive for Businessへの保存処理にはMicrosoft Flowを利用します。

#作成手順

###Flowの作成
新規フローを作成し、「PowerApps」トリガーを追加。
無題10.png

「作成」アクションを追加し、以下のように設定。
・アクション名:任意の名前(ここではarg photo base64)
・入力:「PowerAppsで確認」を押下してPowerAppsトリガーからの引数を設定。
無題5.png
※「PowerAppsで確認」押下後の画面
無題6.png

「OneDrive for Business」の「ファイルの作成」アクションを追加し、以下のように設定。
・フォルダーのパス:OneDrive内の任意のパス
・ファイル名:png拡張子の任意のファイル名
・ファイルコンテンツ:@{base64ToBinary(replace(replace(outputs('arg_photo_base64'),'data:image/png;base64,',''),'"',''))}
無題3.png

※ファイルコンテンツの式は「outputs('arg_photo_base64')」の位置に先程作成した「作成」アクションの出力を指定します。
無題7.png

任意の名前(今回はPowerApp -> OneDrive)を付けてフローを保存したらFlowは完成です。

作成したFlowの全体像はこんな感じ。
無題8.png

###PowerAppsアプリの作成
空のアプリを作成し、最初のスクリーン(Screen1)で「挿入」→「メディア」→「カメラ」を選択し、スクリーン全体にCameraオブジェクト(Camera1)を設定。
image.png

Camera1のOnSelectプロパティに「Navigate(Screen2,ScreenTransition.None);Set(tmpimg,Camera1.Photo)」と設定。
※アプリを使いたい端末にリアとフロントなどカメラが複数ある場合は、カメラオブジェクトのCameraプロパティを0,1,2…と変更することで撮影時に使用するカメラを切り替えることができます。
image.png

「新しい画面」→「空」を選択し、2つ目のスクリーン(Screen2)を作成。
Screen2で「挿入」→「メディア」→「画像」を選択し、スクリーン全体にImageオブジェクト(Image1)を設定。
Image1のImageプロパティに「tmpimg」と設定。
image.png

Screen2で「挿入」→「ボタン」を選択し、任意の位置にButtonオブジェクト(Button1)配置。
Textプロパティに「"Retake"」、OnSelectプロパティに「Navigate(Screen1,ScreenTransition.None)」と設定。
image.png

Screen2で「挿入」→「ボタン」を選択し、任意の位置に2つ目のButtonオブジェクト(Button2)配置し、Textプロパティに「"Save"」を設定。
Button2を選択した状態で「アクション」→「Flows」を選択し、先程作成したFlow(今回はPowerApp -> OneDrive)を選択。
無題9.png

Button2のOnSlectプロパティに「'PowerApp->OneDrive'.Run(tmpimg)」と設定。
image.png

名前を付けてPowerAppsアプリを保存したらPowerAppsは完成です。

###動作確認

撮影画面(Screen1)で画面をタッチして写真を撮影。

確認&保存画面(Screen2)で再撮影ならRetakeボタンをクリック、保存するならSaveボタンをクリック。

OneDriveに撮影した写真が保存されて正常に表示されていれば動作はOKです。
スクリーンショット 2019-01-26 15.36.10.png

#おわりに

おわりにというより補足ですが、Flowの編集画面を開き直すと「ファイルの作成」アクションの「ファイルコンテンツ」に記述した式でbase64ToBinary関数が消えて、その中のreplace~の記述のみ表示されているのが見受けられると思います。MSサポートに確認したところ、このFlow編集画面を再度開く際に関数が非表示となるのは既定の動作であり、非表示となっても関数自体は問題なく動作しているとのことです。ほかにもString関数などで同様の事象が発生するので、これは変換関数独自の仕様であると考えられます。
無題11.png

最後に、私の場合だけかもしれませんが、スマートフォンのPowerAppsアプリのカメラ機能で撮影した写真の解像度がどうしても低くなってしまうので、仕様なのか、設定次第なのか今後追究していきたいです。

5
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?