Power Apps データソースによる画像コピペ貼付けの違いについて その① SPOリスト編

はじめに

この記事は、Microsoft Power Apps Advent Calendar 2024 12月21日担当分の記事です。

今回はよくTeamsでやり取りする場合スクショを取ってそのまま貼り付けて共有する。というようなことがキャンバスアプリでも出来るか。という点について記事にしました。
イメージとしては複数行テキスト(HTML)列を用意して上記のスクショ貼り付けが出来るかとなります。

TIPS検証不足だったので再検証し内容を更新しました。失礼しました。
(SPOでも列設定の調整でBase64で登録は可能)


・SharePointリストがデータソースの場合は無理っぽい →複数行テキスト列の設定で可能(SPO側は文字列表示)
・Dataverseの場合は出来ます!またモデル駆動型の場合はよりリッチに出来る(保持の仕方が異なる)
 ※キャンバスとモデル駆動型で併用の場合は保持の仕方が異なるため基本不可。
・さらにDataverese for Teamsでも出来ます!
 ※キャンバス、Dataverese for Teamsの場合はBase64で保持

という感じです。

Base64テキストで保持の場合はデータ量が大量となるのであまり推奨されない実装かと思います。

今回はその①としてSPOリストを使った場合の挙動や検証についてとなります。

SPOリストの複数行(HTML)で画像のコピペ貼り付け

以下、以前作成したナレッジ共有アプリをもとに検証してみます。
リッチテキスト形式に対応した列に対してコントロールもHTML編集コントロールを使っています。

複数行テキストの設定で拡張リッチテキストがオンの場合

以下のような感じで適当にスクショした画像をペッと貼り付け自体は可能です。
適当な文字と貼り付け画像をいれて保存します。

保存後に再度見ると、貼り付けた画像はなくなっています。。テキストなどの他の部分はちゃんと保存されています。

閲覧ビューでの表示

再度編集ビューでみたところ

複数行の中身をテキストで見てみると以下のようになっています。イメージタグがあるけど中身がない状態ですね。
<imp /> のみが残っている

TIPSということで普通にスクショ貼り付けても画像の保持がされず空になっちゃうので、この設定では無理なようです。

複数行テキストの設定で拡張リッチテキストをオフにした場合

複数行テキストの拡張リッチテキストの設定をオフ(HTMLではない普通の複数行テキスト列)にしてみます。

そうすると同様にスクショ貼り付けを行い登録した場合に、ちゃんとアプリ上に残ってくれます。

閲覧でHTMLテキストで表示、編集ではリッチテキスト入力で表示

TIPSSPO側ではHTML処理されず文字列として保持されます。SPO上ではリッチテキスト形式では見れないため、アプリとSPOリストどちらも参照する利用用途では使えないですが、閲覧も登録もアプリから限定するケースであればコピペ画像の保持がSPOリストでも可能となります。

複数行テキスト上にBase64テキストで画像データが保持される

Base64テキストでの保持は文字数大量となる点が大きなデメリット

上記のようにSPO上でも複数行テキストの設定(普通の複数行にする)ことでアプリ上での利用であればスクショの貼り付けが可能でした。

ただし、Base64テキストの場合、大量の文字数となるため、レコード数が増えるにつれリスト自体の操作が重くなり、挙動が不安定となるケースが多いです。そのため可能とはいえ、あまり推奨されない実装と言えます。

NOTE※実際にそういったケースで削除が正しく出来ないなどの事象を確認したこともあります(削除処理の調整で対応は出来たが、リストを開く際には重すぎるなどありました。

今回のようにスクショ貼り付けだと1アイテムに複数件の画像データを保持することもあるので、より不安定となるかもしれません。

画像貼り付け以外の対応案

その他の方法としてはリンクにイメージ画像のURL(以下では添付ファイルの配置URL)を指定したりは可能ですが、あくまでリンクなのでクリックして別画面で画像が表示されるという挙動です。これだとイメージとは異なりますね。

リンクで画像ファイルURLを指定

リンクは出来るが別画面で開くのでイメージと異なる。画像埋め込みは出来ない

画像列や添付ファイルを活用した実装がよさそう

上記のように複数行テキストの設定により対応は可能でしたが、データ量などを考慮すると、キャンバスアプリ×SPOリストのアプリの場合は、画像列を用意してそっちに付けたり、添付ファイルに付けたりで対応が良いのではと思われます。添付ファイルを使う場合は必要に応じてギャラリーで表示するなどの工夫も出来ます。

SPOサイト上だとどうか(リッチテキスト形式の場合)

複数行テキスト列がリッチテキスト形式の場合、SPOリスト上でも同様にコピペでの画像保存は出来ません。
以下SPOリストのフォーム上でコピペして画像保存した場合です。保存後はやはり残っていません。

クラシックの編集画面で確認した場合です。この際に「ソースの編集」からみると
貼り付けた時はBase64エンコードされて存在しているのですが、保存すると消えてしまってます。

以下のように貼り付け時点ではBase64でイメージ情報がありますが、保存後にはイメージタグの枠だけの状態になっています。

TIPS上記のようにSPOリスト自体がコピペ貼り付けには対応していないようです。
キャンバスアプリ側で出来ないのもしょうがないですね。

SPOリストの場合は画像URLを指定して画像埋め込みをする

SPOリストの場合、以前から画像を埋め込むには画像のURLを指定して埋め込みます。
事前に存在する画像のURLを指定すれば対応出来ます。
モダンだとサイズ調整が出来ないようでしたが、クラシック編集画面に変換すればサイズ調整なども可能です。

画像を挿入からURLを入れれば挿入できる

クラシックの編集画面上であればサイズの調整なども出来る

※上記SPO側で保存してサイズ調整した画像をキャンバスアプリの編集画面で開くとサイズ調整は効いてないようでした💦デカっ!閲覧ビューだと大丈夫。編集用のリッチテキストエディターではその辺把握できてないのかもですね。

リッチテキストエディターだとサイズ調整効いてない。HTMLビューだと大丈夫

Dataverse系の場合は普通に対応している(別記事で紹介)

上記SPOの場合は上記のような感じですが、Dataverseの場合(リッチテキスト)だと普通に対応しています。
公式のDocsにも記載があります。以下モデル駆動型について記載がありますが、キャンバスアプリでも保持はできます(ただしBase64保持となる違いがある)さらにDataverese for Teamsでも出来ました。(こちらもBase64で保持)

ちょっと長くなったので、Dataverese編はその②で書きますー!

モデル駆動型アプリに リッチ テキスト エディター コントロールを追加する – Power Apps | Microsoft Learn

おわりに

今回はキャンバスアプリ×SPOリストの複数行リッチテキストで画像貼り付け保存が出来るかの検証でした。
設定により可能なことは確認できましたが、Base64テキストでの保持は容量も増えてしまうのでむやみに実装するのは危険かなと感じました。

次回Dataverese、さらにはDataverese for Teamsでの検証の記事になりますのでそちらも併せてご参考ください。それでは!

関連記事



この記事は役に立ちましたか?

もし参考になりましたら、下記のボタンで教えてください。

ヨウセイ

ヨウセイ

一般職からSharePoint、C#、.NET系技術者へ、そこからPower App、Power Automate技術者へと転身。 ワンランク上のおっさんはPower Appsでシステム開発が出来る〜! qiitaや自社HPでも技術ブログを書いていました。

関連記事

コメント

この記事へのコメントはありません。

CONTENTS