SharePoint リスト に画像保存

この記事は、Microsoft Power Apps Advent Calendar 2024 シリーズ2 12/11担当分の記事です。

はじめに

Power Apps のアプリを作成していると、文字情報だけでなく画像も保存したいケースが多くあります。
みなさんどう実現しますか？

画像保存の実現方法としては、SharePoint リスト の画像列を利用する方法、Power Automate を利用する方法、Base64に文字化する方法など、いくつかの選択肢があります。各方法にはメリット/デメリットがあるので、優劣をつけることはできないのですが、最も気軽に実装できる方法は、SharePointリスト の画像列を利用する方法ではないかと思います。この記事ではSharePoint リスト を使った画像保存の実装方法について記載します。

実現方法

全体的な流れは、下記のとおりです。

１．保存先の  SharePoint リスト を作成します

２．Power Apps上で、SharePoint リスト の紐づけ設定をします

３．写真を撮影して画像を保存する Power Appsアプリを作成します

１．保存先の SharePoint リスト を作成します

下記のリストを作成します。

• リスト名: PictureList
• 列構成:
  • Picture（画像型）

2．Power Apps上で、SharePoint リスト の紐づけ設定をします

Power Appsアプリと、保存先のSharePoint リストの紐づけ設定をします。

データから、SharePointを選び、１．で作った「PictureList」を選択します。

３．写真を撮影して画像を保存する Power Appsアプリを作成します。

• 写真を撮って、登録ボタンを押すだけのシンプルなアプリ構成とします。
• 画面上に以下のコントロールを配置してください。
  • カメラコントロール
    • 現在、カメラから見えている映像がリアルタイムで表示されます。
    • 映像の任意の場所をタップすると、写真を撮ることができます。

※カメラコントロールは、コントロール一覧の下記にあります。

• 登録ボタンを押したら、SharePoint リスト に撮った写真を画像登録をする処理の追加を追加します
  • 登録ボタンのOnSelectに下記コードを記載します。

Patch( PictureList , Defaults (), { Picture: Camera1.Photo } )

---

補足

画像列に登録できるコントロールは、上記で説明した 「カメラ」コントロール以外に、「画像の追加」コントロールがあるのでケースに合わせて使ってください。

• 「画像の追加」コントロール について
  • 「タップまたはクリックして画像を追加」をタップすると、端末内の画像を選ぶか、写真を撮るかを聞かれますので、どちらか選択すると、画像の追加ができます。

• 登録ボタンを押したら、SharePoint リスト に画像登録をする処理の追加
  • 登録ボタンを押したときに、SharePoint リスト に撮影した写真を登録する処理を書きます。
• 登録ボタンのOnSelectに下記コードを記載します。

Patch( PictureList , Defaults (), { Picture: UploadedImage1.Image } )

※「カメラ」コントロールは　「画像の追加」コントロールと比べると拡張性は低いものの、操作が1ステップで完了します

（※「画像の追加」では2ステップ以上が必要となります）

補記：登録した画像の一覧表示

ここまで登録方法のみ紹介しましたが、登録した画像をアプリ上で表示したいというケースもあるかと思います。

登録した画像を一覧表示する方法を紹介します。

実現方法

※保存先の  SharePoint リスト は作成済みとします。

画像列の一覧を表示する Power Appsアプリを作成する

• 画面上に以下のコントロールを配置してください。
  • Galleryコントロール
    • GalleryのItemsプロパティに、上記で作成した「PictureList」 を設定します。
    • Galleryのアイテムの下に、「画像」 コントロールをはります。
      • 「画像」コントロールの Imageプロパティには、「ThisItem.Picture.Large」 を指定します。
    • 画像列から画像を取得する場合、4段階の画質の画像が取得できるので、見た目で調整してください。（Full（無変換）、Large、Medium、Small）
    • ここでは画像を鮮明に表示させるために、画像列のLargeを選択します。

まとめ

Power AppsとSharePoint の画像列 を使うと、簡単に画像の記録アプリを作成できます。

画像列に登録できるコントロールは２つあります。写真を即登録したい場合は 「カメラ」 コントロール、柔軟な登録がしたい場合は 「画像の追加」コントロールと、ケースに合わせて使ってください。

この記事を参考に、SharePoint リスト への画像登録を試してみてください。

次回

次回は、今回の記事を応用して、手書き画像（撮った画像を手書きでマル書いて）を SharePoint リスト に保存する方法について考察します。

2024/12/25公開予定です。