Power Appsのモバイルアプリのカメラを有効活用していく機能を作っていこうと思います。
目次
アーキテクチャ
今回は、Power Apps で撮影した写真を一旦ローカルに格納して、気に入った写真だけをSharePointに保存して、またその結果を参照するアプリを作成しようと思います。
絵にすると以下のようなイメージです。②のローカルに入っている段階ではキャッシュ状態のため、Power Apps アプリを閉じるとデータは消えてしまいます。したがって、気に入った写真をとっておきたい場合保存先を準備しておく必要があります。
今回はその保存先を③のようにSharePointにしております。
③ここで、写真のアップロードはPower Automateを利用して行います。
従いまして、今回のアプリ作成にて以下のことが学べます。
- Power Appsでのカメラ機能作成
- カメラで作成した写真をCollectionに追加して、ギャラリーでのローカル表示
- ギャラリーでローカルにキャッシュした写真の削除機能作成
- Power Automateを利用した、指定した画像のSharePointへの保存
- SharePointへ保存した写真のギャラリーを利用した参照表示
ご興味のある方は以下ご覧いただければと存じます。
Power Appsでの作成
レイアウトの作成
Power Apps ではいきなり画面の開発を行うことができますので、早速Labelを挿入して以下のように画面上部にタイトルを追加します。
カメラを追加します。挿入＞メディアの配下にあります。
以下のように画面のタイトルに設置するように丈夫に固定します。
顔を映さないようにとりあえず手元にあったニベアを映しています。別にニベアの画像を貼っているわけではないです。どうでもいい情報でした。
カメラで撮影したデータのローカルへのキャッシュ機能の作成
挿入したCamera1のOnSelect プロパティには以下のように設定します。
Set(TakenPhoto, Camera1.Photo);
Collect(PhotoGallery, {Date: Now(), Photo: TakenPhoto})
撮影した写真の表示機能の追加
次にギャラリーを位置的にはカメラの下につけ、横向きのレイアウトにて設定します。
ギャラリーのItemsプロパティには、先程定義したPhotoGalleryを設定します。
これでカメラで撮った写真をこのギャラリーで扱えるようになりました。
ギャラリーにはLabelを一つだけ残しておきます。そのテキストにはこちらも先程定義した撮影日時を表すDate変数を設定します。
カメラでいくつか作成してみると、写真がギャラリーに一時保管されているのがわかります。
写真の削除機能の追加
次に選択した写真をギャラリーから削除する機能をつけるためにごみ箱アイコンを設置します。挿入＞アイコンの位置にあります。
ごみ箱アイコンのOnSelectプロパティには以下のように設定します。
Remove(PhotoGallery, ThisItem)これで選択した画像を削除できるようになりました。
SharePointへのアップロード機能の追加
次にSharePointへのアップロード機能を追加します。
選択した画像をアップロードするために同じように保存アイコンを設置します。
Power Automateを作成する前に、保存先であるSharePointサイトを作成しておく必要がありますが、今回は既に別の記事にて作成済みのサイトを利用することとします。
関連記事・YouTube動画
SharePointのPower Appsでの活用方法や考え方についての解説は以下の記事にて紹介しております。
Power Appsでの画像の取り扱い方法や、今回の元となっているSharePointリストはYouTubeにて作成方法を解説しています。
Power Automateの呼び出し機能の追加
保存アイコンのOnSelect プロパティにはPower Automateを設定します。
1本の記事としては長くなりすぎてしまったため、Power Automateの設定は以下の記事にて紹介しています。
Power AppsでのSharePointリストの表示機能の追加
さて、Power Automateにて保存した写真をPower Appsから参照してきちんと保存されているかどうかを確認しようと思います。
最初に新しい画面を追加します。画像が含まれているリスト形式にします。
SharePointのコネクターを連携します。
対象のサイトを選択します。今回はDB1という名前のサイトですが、それぞれ保存しているサイトを選択してください。
ギャラリーのItemsプロパティにはSharePointリスト名であるPhotosを設定します。
ギャラリーの一つ一つの画像には以下のようにSharePointリストに保存されている画像を設定します。ここでは以下のようになります。
ThisItem.base64photo
ここで一つ画像を保存すると、その画像がアップロードされているのが確認できます。
スクリーン間の遷移機能の追加
ここで一つ目のScreen1に戻り、Screen2に遷移できるようにアイコンを追加します。
OnSelectプロパティには以下のように設定してScreen2に遷移しつつ、Photosのデータソースを更新するようにします。
Navigate(Screen2, ScreenTransition.Cover); Refresh(Photos)
Screen2側からも戻れるように、初期から配置されているアイコンの「＋」ボタンにScreen1に戻れるように設定します。
Navigate(Screen1, ScreenTransition.CoverRight)
ここまでで作成完了です。
写真をとって、必要な画像だけアップロードして参照を行える機能のモバイルアプリを作成することができました。
関連記事
関連動画
Formでの画像登録に対応したSharePointへのPower Apps キャンバスアプリからの登録方法を紹介しています。
突然のコメントすみません。
こちらのカメラの種類を
office lens のカメラで立ち上がるように
設定する事は現段階ではやはり
出来ないのでしょうか….
(PDFとしてキレイに撮りたい)
色々と調べていますが、このまま調べて
続けるべきか、根本的に無理な事なのか
分からず悩んでいます。
何かアドバイス頂けると幸いです。
iPhoneでしょうか？デフォルトのカメラアプリを変えられないのでできないですね…。Android ならデフォルトのカメラアプリを変えられるのでMicrosoft Lensに変更できるかもしれないですね！
現時点ではMicrosoft Lensで事前に撮影しておき、画像をカメラコントロールではなく画像コントロールにアップする形式になるかと思います。
ご返信ありがとうございます！
Androidで使用を想定しています。
可能性があるかもしれないという
事で希望がみえました。引き続き
模索しながら、いつか業務改善につなげ
られるように勉強を続けていきます！
ありがとうございます。
書いてあるとおりに操作しても、少なくとも 20 はバグが出るけどなぁ…
かなり端折ってるのかしら ?