【PowerApps】画像ファイルをSharePointに保存するやり方(MS Flow使用)

PowerAppsで撮った画像をSharePointに保存するやり方がいくつかあり、それぞれを説明してます。特に基本となるMicrosoft Flow(現:Power Automate)でBase64をバイナリに変換するやり方を図解で説明しています。

【PowerApps】画像ファイルをSharePointに保存するやり方(MS Flow使用)パワーアップス

PowerAppsで撮った画像をSharePointに保存する三つの方法

 

こんにちは、リーンシグマ、ブラックベルトのマイク根上です。業務改善コンサルをしています。

 

今回はこの動画リクエストからです。

 

MS Flow動画リクエスト

「勉強になりました。Flowの実際の作成動画を見てみたいです。」

 

trick000magicさん、リクエストありがとうございました。承認ワークフローアプリ作成動画の第三弾になります。

 

第一回:Microsoft Flowの基本と承認ワークフローの改善プロジェクト

第二回:【PowerApps】アプリにカメラ機能を付ける。(画像の追加コントロール)

第三回:今回の記事

最終回:【Power Automate:旧名Microsoft Flow】承認ワークフロー機能を使ってみる

 

前回は承認申請用紙の画像をアプリ内に保存するところまでやりました。⇒「【PowerApps】アプリにカメラ機能を付ける。(画像の追加コントロール)」

 

その画像をアプリから出してクラウドに保存して初めて、データの再利用や他の人も使う事が出来るなど沢山の利用価値が出てきます。

 

今日はそれをSharePointに保存してみます。SharePointは社内掲示板やファイルの共有が簡単に出来るプラットフォームですがデータベースとしても使えます。

 

しかし今現在は活用するシナリオによって画像を保存するやり方が変わってきます。それを次にまとめてみました。

 

PowerAppsだけで画像を出力するシナリオ

 

一番シンプルなのはPowerAppsのアプリで撮った写真をSharePointに保存してそれをまたPowerAppsのアプリだけで見る場合で、この場合はPatch関数などで直接保存できます。

 

PowerAppsだけで画像を出力するシナリオ

 

この詳細をQiita.comというプログラマのソーシャルメディアに投稿していますので、次のリンクからご確認下さい。⇒「Qiita.com:【PowerApps】カメラで撮った画像をSharePointリストに保存し、他のアプリで見る。」

 

PowerApps以外にも画像を出力するシナリオ

 

さっきの方法は簡単に出来るのですが、問題はPowerAppsとSharePointでは画像データの扱い方が違うからSharePoint上で画像がちゃんと表示されない事です。

 

ちょっと難しい事を言うと、PowerAppsではBase64と言う64進数の型式で、SharePointではBinaryと言う2進数の型式で画像を表示します。要はそのままではその写真をPowerApps以外ではシェアーする事が出来ないのです。

 

PowerApps以外にも画像を出力するシナリオ

 

SharePointで写真が見える状態にするにはBase64をBinaryに変換する必要があります。それをマイクロソフトフロー(現:Power Automate)で出来るのです。今日はその作成作業をやってみます。

 

画像の追加コントロールを使ったり、複数画像を保存するシナリオ

 

さっきの方法はPowerAppsのカメラコントロールで撮った画像が対象です。PowerAppsではその他に画像の追加コントロールでも写真を撮れますが、その写真は今回の方法だけでは出来ません。

 

PowerApps画像追加コントロール

 

また、複数の画像を一つのフローで保存する事も出来ないのです。その為にはJSONというデータの書式の知識が必要です。そんなに難しくないですが、今回はやりません。

 

MS FlowがPower Automateに変更しました

 

ちなみにマイクロソフトフローですが、今月2019年11月からPower Automateという名前に変わりました。PowerAppsとPower BIの名前に合わせて、ビジネスの自動化ができる事を強調したいのでしょう。詳しくはマイクロソフトの吉田さんのブログをご覧下さい。

 

吉田の備忘録:「Microsoft Power Automate(旧名 Microsoft Flow)が進化し、RPA機能を搭載して公開プレビューを開始」

 

Power AutomateでPowerAppsで撮った画像をSharePointに保存するフローの作成

 

PowerAppsトリガーの設置

 

Power Automateの作業の前に今までに作ったアプリのおさらいを簡単にします。

 

承認ワークフローアプリ見本

 

これがそのアプリで、申請タイプが選べて、承認申請金額が入力出来、申請書の写真が撮れるアプリです。写真の撮り直しも出来ます。

 

下の申請提出ボタンを押してこの画像をSharePointに保存します。このボタンのOnSelect属性にそれをやる数式を入れたいところですが、まずPower Automateで承認フローを完成してないと出来ませんので、それをやってみます。

 

PowerAppsからPower Automateを起動

 

メニューバーの「アクション」から「フロー」を選び、「Create a new flow」をクリックするとPower Automateの作成画面に行きます。ここにPowerAppsに関連する沢山のフローのテンプレートがありますが、今回は一から作ります。

 

Power AutomateでPowerAppsのトリガー作成

 

左の「作成」で、上の「インスタントフロー」をクリックするとPowerAppsが選べます。PowerAppsがこのフローの始まりになるわけです。これをPowerAppsがトリガーになると言います。

 

SharePointの「ファイルの作成」アクション設置

 

新しいステップをクリックして、SharePointに画像を保存したいので、SharePointとタイプするとSharePointで出来る沢山のアクションが出てきます。画像を保存するという事は新しいファイルを作成する事なので「ファイルの作成」を選びます。

 

SharePointのファイルの作成アクション

 

話が前後しますが、画像を保存する場所を作っておかなければいけません。SharePointサイトに「Application_Photo」というドキュメントライブラリを作ってあります。画像ファイルだけでなくエクセル、ワードなど色んなファイルを保存できる場所です。SharePointについての動画もまた作ります。

 

「列の追加」からそのファイルに関連する属性情報も保存出来るので今回は「申請タイプ」と「申請金額」の列を追加しました。実際にはこの準備をしてからPower Automateの作業をした方が良いです。

 

するとPower Automateに戻って自分で作ったサイトのURLが出てきます(下図参照)。もし出ていなければSharePointのサイトのURLをコピーし、「サイトのアドレス」をクリックした後に「カスタム値の入力」でペーストしてもいいです。すると「フォルダーのパス」でさっきの「Application_Photo」ライブラリが選べます。

 

SharePointのファイルの作成アクション2

 

次が「ファイル名」ですが、これはライブラリの「名前」と連動していて、アプリから来た画像のファイル名が入ります。そこをクリックしたら「動的なコンテンツ」で選択可能なコンテンツが出てきて「PowerAppsで確認」をクリックします(上図参照)。入力されたコンテンツにマウスをもってくると「ファイルの作成_ファイル名」が入ったのを確認して下さい。

 

次の「ファイルコンテンツ」はアプリからくる画像データを指定します。それをクリックしてここの「もっと見る」をクリックするとさっきの「PowerAppsで確認」が出てくるのでそれを選びます。すると「ファイルの作成_ファイルコンテンツ」が入りました。

 

これで画像ファイルが保存出来るのですが、これだけだと画像形式がBase64で保存されてしまいます。それをBinary型式に変換する必要がありましたね。

 

SharePointのファイルの作成アクション3

 

一度「ファイルの作成_ファイルコンテンツ」を削除して、「動的なコンテンツ」の隣の「式」をクリックし「data」とタイプして「dataUriToBinary」を選び、括弧を一組“()”タイプしてカーソルをその間に持って来て「動的なコンテンツ」に戻りさっきの「ファイルの作成_ファイルコンテンツ」を選んで「OK」をクリックします。これは関数でBase64型式をBinary型式に変換してくれるのです。

 

SharePointの「ファイルのプロパティの更新」アクション設置

 

次に申請タイプと申請金額もその画像の属性として保存したいです。「新しいステップ」をクリックしてまたSharePointをタイプしてから「ファイルのプロパティの更新」を選び、さっきと同じサイトとライブラリ名を選びます。

 

次の「ID」をクリックし、「動的なコンテンツ」で「ItemId」が出てきて、それを選びます。「申請タイプ」をクリックし、選べる「動的コンテンツ」が沢山出てきますが、PowerAppsの「もっと見る」をクリックして「PowerAppsで確認」を選ぶと「ファイルのプロパティ更新_申請タイプ」が入ります。「申請金額」でも同じことをします。

 

SharePointのファイルの作成アクション4

 

最後に適当な名前で保存しましょう。今回は「SharePointに画像を保存」にしました。これで準備は完了です。

 

PowerAppsに戻るともう今作った「SharePointに画像を保存」が出ていて、それをクリックするとPowerApps関数として使える様になります。関数の構造を見て下さい。Power Automateに渡す情報が引数として出ています。一つずつ指定して行きます。

 

PowerAppsでFlowを選択した後の関数

 

最初が画像のファイル名で、今回はプログラム内で使用するだけなのであまりこだわりません。他の画像との重複を避けるために日時を使います。この式です。

Text(Now(),”yyyy-m-d-hh:mm”)&”.jpg”

 

カンマを入れて次の引数がファイルコンテンツです。今回撮った画像はすでにAppPhotoという変数に入っていますのでそれを入れます。

 

申請タイプはドロップダウンで選択されたものです。申請金額はテキスト入力の情報です。最後の掛ける1を入れているのは文字列を数字に変換するためです。

 

Altキーを押しながら申請提出ボタンを押してみましょう。Power Automateに戻って今トリガーしたフローが成功しているのが分かります。実際にSharePointのライブラリに行ってさっきの画像が保存されるのが確認できます。

 

今回は画像を保存するところまでやりました。次回はそのままPower Automateで承認ワークフローを実装する作業をお見せします。

 

「こちらの記事も読まれてます