はじめに
Power AppsでShrePointリストのイメージ(Image)列に登録されたGif画像を表示させようとするとただ参照するだけではGif画像が動いてくれません。
ちなみに添付ファイル列であれば、動いてくれます。
この記事ではその原因と解決方法を記載しています。
なぜイメージ列に登録したGifは動いてくれない？
なぜイメージ列に登録したGifは動いてくれず、添付ファイル列に登録したGifは動いてくれるのでしょうか？
それぞれPower Appsからどのような結果が取得されているのかみてみましょう。
それぞれの参照をみるために、画像コントロールで Self.Image を変数にセットしてあげます。
Set(Reference, Self.Image)
その結果をラベルなどでテキストで表示させると以下のような参照方法で取得していることが確認できます。
上記画像の赤線のようにイメージ列の画像はサムネイルが取得されているわけですね。
サムネイルではGifは動いてくれません。
ということで、SharePointリストのイメージ列に登録されたGifをPower Appsで表示させたときに動いてくれない理由はサムネイルが表示されていたからです。
イメージ列に登録されたGifをPower Appsでも動かす
Power AppsからSharePointリストのイメージ列に登録された画像を取得すると、サムネイルが取得されてしまうことが分かったかと思います。
Gifは動かして表示させたい場合はイメージ列に登録された画像ファイルに直接アクセスして取得してあげる必要があります。
イメージ列に登録した画像はどこに保存されている？
イメージ列に登録した画像は、リストが存在する「サイトのサイトのリソースファイル」に保存されます。
以下のようなリンクです。
https://[YourDomain].sharepoint.com/sites/[YourSites]/SiteAssets/Lists/[YourListID]/
ここの画像を取得してPower Appsで表示させれば動くGifを表示させることができます。
画像の取得なので、リンクとしては以下のようなリンクですね。
https://[YourDomain].sharepoint.com/sites/[YourSites]/SiteAssets/Lists/[YourListID]/[YourFileName]
注意する点としては、[YourListID]はリストのIDであるという点ですかね。
イメージ列に登録された画像ファイルを取得する
上記のようなイメージ列に登録された画像へのリンクは以下のようなSharePoint REST APIを投げることで取得することが可能です。
https://[YourDomain].sharepoint.com/sites/[YourSites]/codeless/_api/v2.1/drives/[YourDriveID]/[YourItemID]
このAPIを実行することで取得できるJSONのうち、"webUrl"が今回欲しい情報です。
このAPIはイメージ列の画像をPower Appsで参照していたリンクから取得することができます。
ここの箇所ですね。
エンコードされちゃってるのでデコードしてあげる必要があります。 Power Appsではデコードを行う関数が現時点ではないので、Power Automate側でデコードしてあげます。
また、Power AutomateでSharePoint REST APIを実行する際は「SharePoint に HTTP 要求を送信します」を利用しますが、ここで指定するURIは"_api"以降のみでよいので、そこ以降をPower Automateに渡します。
赤線の箇所は"%2Fcodeless%2F"と"%2Fthumbnails%2F"で囲まれた箇所ですね。
これは以下のような正規表現で取得することができます。
(?<=(2Fcodeless%2F)).*?(?=(%2Fthumbnails%2F))
Power Appsで正規表現にマッチしたテキストを取得するにはMatchAll関数を利用します。
よって、Power Automateには以下のような値を渡してあげます。
First(MatchAll(ImageReference, "(?<=(2Fcodeless%2F)).*?(?=(%2Fthumbnails%2F))")).FullMatch
* ImageReferenceはイメージ列の画像を取得するためにPower Appsが利用していたAPIを変数にいれたものです。
さて、続いてPower Automateです。
以下のようなフローを利用します。
作成アクション2つはなくても大丈夫です。
加工結果を出力したかっただけですので。
Power Appsから受け取ったURIはエンコードされているので、まずはデコードしてあげます。
@{decodeUriComponent(triggerBody()['text'])}
GETアクションなので以下のようになりますね。
この結果の"webUrl"をPower Appsに返したいので以下の値を返します。
@{body('SharePoint_に_HTTP_要求を送信します')?['webUrl']}
あとはPower AppsからPower Automateを実行し、受け取った値を画像コントロールで表示させてあげればいいですね。
Button.OnSelect
UpdateContext({myImage: イメージ列の元画像の取得.Run(First(MatchAll(ImageReference, "(?<=(2Fcodeless%2F)).*?(?=(%2Fthumbnails%2F))")).FullMatch)})
Image.Image
myImage.weburl
以上で、Power AppsでSharePointリストに登録されたGifをきちんと動く形式で表示させることができるようになりました！
おわりに
当たり前ではありますが、ノーコードでアプリを作成するにしても利用しているサービスや技術の専門的な知識が必要になってくる場合がありますね。
ただすべての事柄に精通するなんてことはできないので、そこはその分野が得意なメンバーと会話しながらアプリの作成を行っていくとよいのではないでしょうか？
