PowerAppsでギャラリーに画像の表示、拡大、回転、表示位置の変更をする方法【Imageコントロール】
SharePointリストの添付ファイル列に保存されている画像をPowerAppsのギャラリーに、サムネ画像を入れるやり方と、ユーザーがその画像をタップして拡大し、それを回転、表示位置の変更ができる機能の作り方を解説しています。
（動画時間：7:17）
PowerAppsの「添付コントロール」で画像も保存ができる。
こんにちは、リーンシグマ、ブラックベルトのマイク根上です。
業務改善コンサルをしています。
今日はこの動画リクエストからです。
「ただ、画像をタップすると拡大するという機能をつけたいのですがどうしたらいいですか？」
伊藤さん、ご質問ありがとうございました。
商品一覧表にサムネイル画像があった時、
小さいのでタップしてその画像が大きくなると
ユーザーには便利ですよね。
今日はその機能の作り方をお見せしようと思います。
以前の動画でPower Automate無しで
ファイルの保存の方法をご紹介しました。
⇒「Power AppsだけでどんなファイルもSharePointに保存する方法（Power Automate無しで）【添付コントロール】」
その方法で画像も扱えるのでその延長で
今回の課題をやりたいと思います。
その動画では「添付コントロール」を使って、
どんなファイルもSharePointリストの添付ファイル列に保存ができます。
勿論画像ファイルも保存ができます。
このアプリをスマホで使うと
スマホのカメラで撮った写真もそのまま保存できるし、
Power Automate無しでできるので、
僕は画像を扱う案件なら今はこの方法でいつもやっています。
⇒「Power AppsだけでどんなファイルもSharePointに保存する方法（Power Automate無しで）【添付コントロール】」
その動画ではファイルを添付したらそのファイル名がギャラリー内に表示されて、
クリップアイコンをクリックすると、
ブラウザの新しいタブでそのファイルが開く様にしました。
今回はその画像がアプリ内で開く様にします。
PowerAppsで画像を拡大表示して、回転、表示位置の変更をする。
これが今回の完成アプリです。画像を保存したら
ギャラリー内にその画像が小さく表示されて、
それをタップしたらアプリ内でその画像が拡大します。（下図参照）
たまに画像が横とか逆さまになっている事がありますよね。
そこで画面左上のドロップダウンを使って、
その画像を回転させる事もできる様にしました。
ユーザーがPCでこのアプリを使う時はこれは便利な機能です。
もう一つのドロップダウンで画像の表示位置の変更もできます。
使う頻度は少ないかもしれませんが、
回転と同じ様に実装ができますので、
両方ともマスターしましょう。
最後に画面右上のキャンセルアイコンをクリックしてギャラリーに戻ります。
ギャラリー内にSharePointリストからのサムネ画像を表示する方法
それではこのアプリをどう作っているか説明しましょう。
ギャラリー内にサムネ画像を表示する画像コントロールを追加してて、
その「Image」属性で、表示させたい画像を指定する式がこれです。
ギャラリー内の画像コントロールの「Image」属性
First(ThisItem.添付ファイル).AbsoluteUri
SharePointリストには既定で「添付ファイル」列があり、
そこにこのファイルが保存されています。
詳しくは以前の記事を見て頂きたいですが、
その列はテーブル構造になっていて、
複数のファイルが保存できます。
⇒「Power AppsだけでどんなファイルもSharePointに保存する方法（Power Automate無しで）【添付コントロール】」
ですからその列内のどの画像を表示したいかを
指定する必要があるのです。
このアプリではいつもファイルを一つだけ保存できる様にしたので、
First関数を使って最初のファイルとしてファイルを指定して、
「.AbsoluteUri」属性で画像を表示できます。
サムネイル画像をタップして画像を拡大する機能の作り方
次が今日の本題のサムネ画像をタップして
画像の拡大をする機能の作成です。
仕組みは実はすごく簡単で、
新しい画面を一つと画像コントロールを一つ追加して
タップしたサムネ画像が
新たな大きな画像コントロールに表示する様にしただけです。
そして「OnSelect」属性にNavigate関数が入った
キャンセルアイコンをクリックして元の画面に戻ります。
最初にタップするサムネ画像の「Onselect」属性には
新たな画面に移動するNavigate関数が入っているだけです。
次の式が新たな画像コントロールの「Image」属性の式です。
新たな画像コントロールの「Image」属性
First(Gallery名.Selected.添付ファイル ).AbsoluteUri
さっきの数式と似ていますが、ギャラリーの外なので
「ThisItem」の代わりに「Gallery名.Selected」を使うと
タップされた同じ画像を表示します。
これによってサムネ画像をタップすると
その画像が拡大する様に見せる事ができるのです。
画像を回転させる機能の作り方（「ImageRotation」属性）
次に画像を回転させる機能を作りましょう。
まずはドロップダウンを一つ追加して、
その「Items」属性にSplit関数を使った次の数式を入れます。
最初のドロップダウンの「Items」属性
Split(“回転なし、時計回り 90 度、時計回り 180 度、時計回り 270 度”,”、”)
Split関数は第一引数のテキストを第二引数の区切文字で区切って
一列にしたテーブルを作ります。
それでドロップダウンの選択肢を簡単に作れるのです。
コンボボックスの「Items」属性でも同じように使えるので活用してみて下さい。
次に画像コントロールの「ImageRotation」属性に
Switch関数で次の式を入れます。
画像コントロールの「ImageRotation」属性
Switch(
DD_画像の回転.Selected.Result,
”回転なし”,
ImageRotation.None,
”時計回り 90 度”,
ImageRotation.Rotate90,
”時計回り 180 度”,
ImageRotation.Rotate180,
ImageRotation.Rotate270
)
第一引数の「ドロップダウン名.Selected.Result」で
そのドロップダウンで選択された値によって
「ImageRotation」属性の設定を変える様にしたのです。
ドロップダウンの各選択肢に
「None」、「Rotate90」、「Rotate180」、「Rotate270」の値を入れています。
これでドロップダウンで選択した値によって
どの回転をさせたいかを設定しています。
画像の配置を変更する機能の作り方（「ImagePosition」属性）
次の「画像の表示位置変更」も
「画像の回転」と同じ様に作れます。
ドロップダウンを一つ追加して、
その「Items」属性にSplit関数の次の式を入れます。
二つ目のドロップダウンの「Items」属性
Split(“自動調整、画面いっぱい、中央寄せ、拡大、タイル表示”,”、”)
これで下図の様なドロップダウンの選択肢を作成します。
そのして画像コントロールの「ImagePosition」属性に次の数式を入れます。
画像コントロールの「ImagePosition」属性
Switch(
DD_画像の表示位置変更.Selected.Result,
”自動調整”,
ImagePosition.Fit,
”画面いっぱい”,
ImagePosition.Fill,
”中央寄せ”,
ImagePosition.Center,
”拡大”,
ImagePosition.Stretch,
ImagePosition.Tile
)
Switch関数の第一引数に
「二つ目のドロップダウン名.Selected.Result」にして、
各選択肢に該当する属性を当てはめています。
- 「自動調整」は「Fit」、
- 「画面いっぱい」は「Fill」、
- 「中央寄せ」は「Center」、
- 「拡大」は「Stretch」、
- 「タイル表示」は「Tile」
各表示位置の見栄えはこうなります：
「自動調整（Fit）」
「画面いっぱい（Fill）」
「中央寄せ（Center）」
「拡大（Stretch）」
「タイル表示（Tile）」
このドロップダウンでユーザーは
表示位置を簡単に変更する事ができるのです。
今回の機能を使えば各データに関連した画像を
同じ場所に保存して、その画像を拡大し精査できるので、
業務改善の幅を格段に上げる事ができると思います。
ぜひ活用してみて下さい。
「こちらの記事も読まれてます｡」
