業務改善と標準化を同時に実現:MS 365業務システム開発

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

    
【PowerApps】画像ファイルをSharePointに保存するやり方(MS Flow使用)
\ この記事を共有 /
【PowerApps】画像ファイルをSharePointに保存するやり方...

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

(動画時間:10:02)

初級編:「マイクロソフトPowerApps【コントロールと関数 完全ガイド】」
Udemyオンラインコースを作りました!

⇒ 半額になる「ディスカウントリンクページ」へ

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というデータの書式の知識が必要です。
そんなに難しくないですが、今回はやりません。

Microsoft 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内で設定をする。

PowerAppsに戻るともう今作った「SharePointに画像を保存」が出ていて、
それをクリックするとPowerApps関数として使える様になります。

関数の構造を見て下さい。
これはフロー作成中の「PowerAppsで確認」でできた項目で、
Power Automateに渡す情報が引数として出ています。一つずつ指定して行きます。

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

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

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

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

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

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

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

初級編:「マイクロソフトPowerApps【コントロールと関数 完全ガイド】」
Udemyオンラインコースを作りました!

⇒ 半額になる「ディスカウントリンクページ」へ

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