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

#はじめに

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

#作成手順

###Flowの作成
新規フローを作成し、「PowerApps」トリガーを追加。
<img width="794" alt="無題10.png" src="https://qiita-image-store.s3.amazonaws.com/0/258416/5108a080-d512-9497-037e-c78bec331b2b.png">


「作成」アクションを追加し、以下のように設定。
・アクション名：任意の名前（ここではarg photo base64）
・入力：「PowerAppsで確認」を押下してPowerAppsトリガーからの引数を設定。
<img width="792" alt="無題5.png" src="https://qiita-image-store.s3.amazonaws.com/0/258416/e233e996-950c-cb6a-46f9-493b32cca10c.png">
※「PowerAppsで確認」押下後の画面
<img width="798" alt="無題6.png" src="https://qiita-image-store.s3.amazonaws.com/0/258416/335dbd6f-3b9e-eb47-9b0f-03008a49d9fd.png">


「OneDrive for Business」の「ファイルの作成」アクションを追加し、以下のように設定。
・フォルダーのパス：OneDrive内の任意のパス
・ファイル名：png拡張子の任意のファイル名
・ファイルコンテンツ：@{base64ToBinary(replace(replace(outputs('arg_photo_base64'),'data:image/png;base64,',''),'"',''))}
<img width="796" alt="無題3.png" src="https://qiita-image-store.s3.amazonaws.com/0/258416/983bde21-9228-bd4c-a839-38f032473789.png">

※ファイルコンテンツの式は「outputs('arg_photo_base64')」の位置に先程作成した「作成」アクションの出力を指定します。
<img width="798" alt="無題7.png" src="https://qiita-image-store.s3.amazonaws.com/0/258416/2f4178d1-02d8-7bfb-ac1c-48bd94818653.png">

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

作成したFlowの全体像はこんな感じ。
<img width="799" alt="無題8.png" src="https://qiita-image-store.s3.amazonaws.com/0/258416/1102ec31-ef32-fc63-bc83-14166b5da623.png">

###PowerAppsアプリの作成
空のアプリを作成し、最初のスクリーン（Screen1）で「挿入」→「メディア」→「カメラ」を選択し、スクリーン全体にCameraオブジェクト（Camera1）を設定。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/258416/17f455c9-d626-783b-77a3-aaeb01d384a5.png)

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

「新しい画面」→「空」を選択し、２つ目のスクリーン（Screen2）を作成。
Screen2で「挿入」→「メディア」→「画像」を選択し、スクリーン全体にImageオブジェクト（Image1）を設定。
Image1のImageプロパティに「tmpimg」と設定。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/258416/d2cd96ce-3a45-a059-5e54-3dad32ff99f9.png)

Screen2で「挿入」→「ボタン」を選択し、任意の位置にButtonオブジェクト（Button1）配置。
Textプロパティに「"Retake"」、OnSelectプロパティに「Navigate(Screen1,ScreenTransition.None)」と設定。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/258416/4e50b991-8798-9bde-e509-d2b5065854b0.png)

Screen2で「挿入」→「ボタン」を選択し、任意の位置に２つ目のButtonオブジェクト（Button2）配置し、Textプロパティに「"Save"」を設定。
Button2を選択した状態で「アクション」→「Flows」を選択し、先程作成したFlow（今回はPowerApp -> OneDrive）を選択。
<img width="960" alt="無題9.png" src="https://qiita-image-store.s3.amazonaws.com/0/258416/f99326b7-a2e1-c80d-72ea-396a4e5249af.png">

Button2のOnSlectプロパティに「'PowerApp->OneDrive'.Run(tmpimg)」と設定。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/258416/a13adde6-73e1-3386-e513-f135f0cd27ae.png)

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

###動作確認

撮影画面（Screen1）で画面をタッチして写真を撮影。
<img src="https://qiita-image-store.s3.amazonaws.com/0/258416/4738bee2-dab0-5087-5a51-43dcbf932e1d.png" width=30%>

確認&保存画面（Screen2）で再撮影ならRetakeボタンをクリック、保存するならSaveボタンをクリック。
<img src="https://qiita-image-store.s3.amazonaws.com/0/258416/3511a077-9994-9b71-3583-f616645c0729.png" width=30%>

OneDriveに撮影した写真が保存されて正常に表示されていれば動作はOKです。
![スクリーンショット 2019-01-26 15.36.10.png](https://qiita-image-store.s3.amazonaws.com/0/258416/5dbf249d-5387-0ea2-f381-9ca7617763b5.png)

#おわりに

おわりにというより補足ですが、Flowの編集画面を開き直すと「ファイルの作成」アクションの「ファイルコンテンツ」に記述した式でbase64ToBinary関数が消えて、その中のreplace～の記述のみ表示されているのが見受けられると思います。MSサポートに確認したところ、このFlow編集画面を再度開く際に関数が非表示となるのは既定の動作であり、非表示となっても関数自体は問題なく動作しているとのことです。ほかにもString関数などで同様の事象が発生するので、これは変換関数独自の仕様であると考えられます。
<img width="799" alt="無題11.png" src="https://qiita-image-store.s3.amazonaws.com/0/258416/c3c2564b-4107-8a68-2e9a-55c4efe6e429.png">

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