Power Appsのモバイルアプリのカメラを有効活用していく機能を作っていこうと思います。
アーキテクチャ
今回は、Power Apps で撮影した写真を一旦ローカルに格納して、気に入った写真だけをSharePointに保存して、またその結果を参照するアプリを作成しようと思います。
絵にすると以下のようなイメージです。②のローカルに入っている段階ではキャッシュ状態のため、Power Apps アプリを閉じるとデータは消えてしまいます。したがって、気に入った写真をとっておきたい場合保存先を準備しておく必要があります。
今回はその保存先を③のようにSharePointにしております。
③ここで、写真のアップロードはPower Automateを利用して行います。
従いまして、今回のアプリ作成にて以下のことが学べます。
[list class=”li-check li-mainbdr main-c-before”]
- Power Appsでのカメラ機能作成
- カメラで作成した写真をCollectionに追加して、ギャラリーでのローカル表示
- ギャラリーでローカルにキャッシュした写真の削除機能作成
- Power Automateを利用した、指定した画像のSharePointへの保存
- SharePointへ保存した写真のギャラリーを利用した参照表示
[/list]
ご興味のある方は以下ご覧いただければと存じます。
Power Appsでの作成
レイアウトの作成
Power Apps ではいきなり画面の開発を行うことができますので、早速Labelを挿入して以下のように画面上部にタイトルを追加します。
カメラを追加します。挿入＞メディアの配下にあります。
以下のように画面のタイトルに設置するように丈夫に固定します。
[memo title=”MEMO”]顔を映さないようにとりあえず手元にあったニベアを映しています。別にニベアの画像を貼っているわけではないです。どうでもいい情報でした。[/memo]
カメラで撮影したデータのローカルへのキャッシュ機能の作成
挿入したCamera1のOnSelect プロパティには以下のように設定します。
[codebox title=”コード”]
Set(TakenPhoto, Camera1.Photo);
Collect(PhotoGallery, {Date: Now(), Photo: TakenPhoto})[/codebox]
撮影した写真の表示機能の追加
次にギャラリーを位置的にはカメラの下につけ、横向きのレイアウトにて設定します。
ギャラリーのItemsプロパティには、先程定義したPhotoGalleryを設定します。
[memo title=”MEMO”]これでカメラで撮った写真をこのギャラリーで扱えるようになりました。[/memo]
ギャラリーにはLabelを一つだけ残しておきます。そのテキストにはこちらも先程定義した撮影日時を表すDate変数を設定します。
カメラでいくつか作成してみると、写真がギャラリーに一時保管されているのがわかります。
写真の削除機能の追加
次に選択した写真をギャラリーから削除する機能をつけるためにごみ箱アイコンを設置します。挿入＞アイコンの位置にあります。
ごみ箱アイコンのOnSelectプロパティには以下のように設定します。
[codebox title=”コード”]
Remove(PhotoGallery, ThisItem)[/codebox]
これで選択した画像を削除できるようになりました。
SharePointへのアップロード機能の追加
次にSharePointへのアップロード機能を追加します。
選択した画像をアップロードするために同じように保存アイコンを設置します。
Power Automateを作成する前に、保存先であるSharePointサイトを作成しておく必要がありますが、今回は既に別の記事にて作成済みのサイトを利用することとします。
関連記事・YouTube動画
SharePointのPower Appsでの活用方法や考え方についての解説は以下の記事にて紹介しております。
Power Appsでの画像の取り扱い方法や、今回の元となっているSharePointリストはYouTubeにて作成方法を解説しています。
[youtube]
[/youtube]
Power Automateの呼び出し機能の追加
保存アイコンのOnSelect プロパティにはPower Automateを設定します。
1本の記事としては長くなりすぎてしまったため、Power Automateの設定は以下の記事にて紹介しています。
Power AppsでのSharePointリストの表示機能の追加
さて、Power Automateにて保存した写真をPower Appsから参照してきちんと保存されているかどうかを確認しようと思います。
最初に新しい画面を追加します。画像が含まれているリスト形式にします。
SharePointのコネクターを連携します。
対象のサイトを選択します。今回はDB1という名前のサイトですが、それぞれ保存しているサイトを選択してください。
ギャラリーのItemsプロパティにはSharePointリスト名であるPhotosを設定します。
ギャラリーの一つ一つの画像には以下のようにSharePointリストに保存されている画像を設定します。ここでは以下のようになります。
[codebox title=”コード”]
ThisItem.base64photo[/codebox]
ここで一つ画像を保存すると、その画像がアップロードされているのが確認できます。
スクリーン間の遷移機能の追加
ここで一つ目のScreen1に戻り、Screen2に遷移できるようにアイコンを追加します。
OnSelectプロパティには以下のように設定してScreen2に遷移しつつ、Photosのデータソースを更新するようにします。
[codebox title=”コード”]
Navigate(Screen2, ScreenTransition.Cover); Refresh(Photos)[/codebox]
Screen2側からも戻れるように、初期から配置されているアイコンの「＋」ボタンにScreen1に戻れるように設定します。
[codebox title=”コード”]
Navigate(Screen1, ScreenTransition.CoverRight)[/codebox]
ここまでで作成完了です。
写真をとって、必要な画像だけアップロードして参照を行える機能のモバイルアプリを作成することができました。
関連記事
関連動画
Formでの画像登録に対応したSharePointへのPower Apps キャンバスアプリからの登録方法を紹介しています。
[youtube]
[/youtube]
メルマガで新しい記事を受け取る
新しい記事や講座のお知らせを、メールでお届けします。いつでも配信を停止できます。
ご登録いただいたアドレスは、メルマガの配信にだけ使います。
あわせて学びたいオンライン講座
どの講座から始めればよいか、学ぶ順番をまとめています。
コメントを残す