Power Apps : Microsoft Lists / SharePoint のリストの画像列の画像をアプリ上で追加・更新・削除できるようになった

待ちに待ったアップデートがついに僕の環境に展開されました! 特に Power Apps 市民開発者の方々には朗報かと思います。

Power Apps でアプリを作成する際のデータソースに Microsoft Lists / SharePoint のリストを利用する人は多いと思います。僕もその一人です。そして、アプリ作成の要件として画像をアップロードして閲覧したいという要件もあると思います。特にモバイルデバイス利用を想定する場合はモバイルデバイスでいつでもどこでも写真が撮れて、それを Power Apps で作ったアプリからアップロードし閲覧するという事ができると、アプリの幅が広がりますね。この2点を考慮した時に、これまでそれを実現させる方法としては、僕の場合はリストの添付ファイルを利用する方法で使っていました。以下、2018年って4年前と古いですが実装させていた方法です。

PowerApps : SharePoint のリストに添付した画像を表示させる方法

Power Apps のアプリでリストの添付ファイルに画像をアップロードさせる事は可能だったけど、そのアップロードされた画像をアプリ上で表示させるのは一筋縄ではいかなく、僕は Power Automate を使っていました。もしかしたらもっとスマートな方法があるかもしれないけど、例えば Base64 で…みたいな事を言われても、非エンジニアの初心者市民開発者の人にとっては難易度上がって挫折ポイントになりかねませんからね。

あれから4年…今年2022年3月にはついにリストの画像列の画像を Power Apps のアプリで表示させられるアップデートが来ました。

Power Apps : Microsoft Lists / SharePoint のリストの画像列の画像を表示させられるようになった

でも実はこのアップデートはガッカリだったんですよね。画像列の画像を表示することができるだけだったんです。いやいや、大事なのは Power Apps のアプリから写真をアップロードできる事ですよ。それがこの時はできなかったんです。

そしてようやく今、ついにリストの画像列に Power Apps のアプリから画像をアップロードでき、更新・削除もできるようになりました。2022/09/02 付けで Microsoft 365 管理センターのメッセージセンターに以下のメッセージが公開されました。

▼(更新)Power Apps 経由で Microsoft リスト内の画像を追加、更新、または削除する

僕の環境にアップデートが展開されたので早速触ってみたいと思います。今回は Microsoft Lists や SharePoint のリストが不慣れな方にも向けて、必要最低限だけどリストの作成からスクショで説明してみます。

■リストの作成と最低限の設定

SharePoint 経由でリスト作成でもイイし、 Microsoft Lists 経由で作成するリストでもイイです。今回は Microsoft Lists 経由でリストを作成します。検証目的なのでシンプルなリスト・アプリにします。

▼ Microsoft Lists で「+新しいリスト」

▼今回は「空白のリスト」

▼アプリを作成

▼「+列の追加」→「イメージ」

▼画像列に名前を付けて「保存」

▼リスト側は必要最低限の設定をしました

画像列の検証なので既定のタイトル列の他に画像列を追加しただけですが、皆さんが作る際には作りたいアプリの要件に応じて必要な列を追加しましょう。

■リストから Power Apps のアプリ作成

作成したリストのコマンドバーから、

▼「統合」→「 Power Apps 」→「アプリの作成」

▼アプリ名を入力して「作成」

あとは1分程度待つだけ。これだけです。カップ麺を待つよりも早いです。それで必要最低限の操作ができるアプリができるから本当に凄い時代です。ホントこのリストから Power Apps のアプリ作成は凄くお手軽でオススメです。あとは必要に応じてアプリを編集しましょう。

▼はい、アプリができました

さて、このアップデートが展開されているかどうかの見極めポイントは?

▼ツリービューから「 EditScreen1 」を選択すると、画像列(この場合「 Image 」)に「タップまたはクリックして画像を追加」という文言が表示されているかどうか?で見極めてください。

この文言が表示されていなかった方は、まだあなたの環境にアップデートが展開されていないので我慢して待つ必要があります。

▼アプリを利用するために「公開」ボタンをクリック

▼「このバージョンの公開」をクリック

■モバイルデバイスからアプリを利用

※僕の場合は iPhone です。

▼ iPhone の Power Apps アプリを起動し、作成したアプリをタップ

▼アプリを開いてもまだ何も登録していないので右上の「+」をタップ

▼この「タップまたはクリックして画像を追加」をタップ

さっきから気になってたけどこの文言ちょっと文字サイズ小さいですよね…。僕は老眼が始まっているので厳しいです!

その後、写真をその場で撮影するか、すでに撮影した写真をライブラリから選択しましょう。

▼追加した画像はすでに表示されるので画像の選択ミスがあっても気が付くので良いですね

必要事項を入力したら右上のチェックボタンをタップしたら送信されます。

▼一覧画面でもすぐに写真のサムネイル画像付きで登録された事がわかります

アイテムをタップすれば、

▼このようにアイテムの詳細画面が表示されます

画像が小さく表示されていて大きく見たい場合は、 Power Apps のアプリ自体がピンチイン・ピンチアウト(スマホの画面上で2本指でつまむようにする操作)で拡大縮小されるので、

▼画質はオリジナルよりは粗くなりますが画像を拡大表示させる事は可能

■気になる点:削除ができない?

メッセージセンターのメッセージには「追加、更新、または削除する」となっております。追加ができる事は上で確認済。一度アイテムを登録してからアプリでアイテムを編集状態にして更新(つまり画像を別の画像に変更)できる事も確認しました。しかし、アイテムから画像を削除するという点がどうやってもできないです。もちろんアイテム自体を削除する事はアプリ上からでもできますよ。じゃなくて一度登録した画像列の画像のみを削除する事ができません。

▼一度登録したアイテムを編集画面にしたところ

このように画像列の画像を別の画像に差し替えるメニューはあるけど、「削除」というメニューは存在しません。また画像部分をダブルタップしたりロングタップしてみたり色々試してみたけど削除できませんでした。これは例えば Android ではできるけど iOS ではできないのか?まだ実装されていなくてそのうちシレっと削除できるようになるのか?あたりはわかりません。もし現時点でも削除できる方法を知っているという方は是非ご一報ください。

■PCからの利用は?

モバイルデバイスからの操作確認をしましたが、PCでアプリを開いても画像追加できます。

▼PCでも「タップまたはクリックして画像を追加」をクリックし、

▼PC内の画像ファイルを選択すれば画像を追加できます

■リスト側は?

Power Apps のアプリ側からアイテムを登録すると、

▼もちろんリスト側にアイテムが登録されます

なので僕がオススメしている運用方法だけど、このアプリを利用して画像を含めた情報を登録する人はアプリを利用し、その登録されたデータ全体を俯瞰して見たり管理する側の人はアプリを利用せずにリストからチェックするという手段です。リストのビューなら Power Apps の委任問題?も気にしなくて良いし、ビュー上でフィルターやソートで一覧表示を見やすくカスタマイズしやすいですからね。それを Power Apps のアプリ側でがんばって実装しようとすると実装難易度が一気に高くなるので、俯瞰して閲覧する場合はリストのビューから、といった運用方法もアリかと思います。

■注意点

メッセージセンターのメッセージにも記載されていますが注意点があります。まずサポートされている画像ファイルのサイズは最大 30MB となっています。次にサポートされている画像形式です。メッセージセンターのメッセージに以下のページのリンクが貼ってあったのでご確認ください。

OneDrive、SharePoint、Teams でのファイルのプレビューがサポートされているファイルの種類
https://support.microsoft.com/ja-jp/office/e054cd0f-8ef2-4ccb-937e-26e37419c5e4

このようにデータソースとなる SharePoint の仕様のようです。見てみるとおよそ普通に扱う画像形式はサポートされているのであまり気にする事はなさそうです。 iOS の既定の設定で保存される HEIC HEIF あたりもサポートされているので。あ、それで気になって確認したところ、 iPhone で撮影した HEIC 形式の画像をアプリ経由でアップロードしたら、保存されたリストの画像の画像形式をチェックしたら、JPEGに変換されて保存されていました。

■その他

これはリスト側の仕様ですが、1つの画像列に複数画像を追加はできません。あくまでも1つの列に1つの画像です。なのでアプリの要件で1つのアイテムに複数の画像を追加する必要がある場合は、その分画像列を追加する必要があります。例えば不動産屋さんが物件の写真を登録するアプリを作る場合、外観の南側・北側と必ず2つの写真を撮影して登録しなきゃいけない場合は、画像列を2つ追加すると良いですね。あらかじめアプリ要件で追加する画像の枚数が決まっていると良いですね。場合によって1枚もあれば10枚以上も…みたいな要件の場合はまた別の検討をしないといけないですね。

それと気になるのがこの機能のアップデート以前に作られたアプリではどうなのか?結論から先に言うと、既存アプリの画像列のコントロールは画像の追加はできませんでした。何かしら手を加えないと利用できません。ちなみにメッセージセンターのメッセージにその旨も記載されていました。これを試してみると記事が長くなってしまうのと今日はこれから仕事が忙しいので…明日以降にあらためて別の記事として投稿予定なのでお待ちください。

TAICHI