この記事にはプロモーションが含まれていることがあります

【PowerApps】ギャラリーに画像表示を追加する

IT

これからのDX時代に向けてローコード誰でもアプリ開発者になれる!
システム開発未経験でもアプリが作れる!! それがローコードPowerApps

スポンサーリンク

【PowerApps】ギャラリーに画像表示を追加する

前回までのおさらい

今回はデータ一覧表示部分として使っているギャラリーコントロール画像追加する方法を紹介します。

前回作ったアプリをベースにやっていきますので、実際に作ってみたいという方は、こちらの記事を先に読んでアプリを作ってください。

さて、Googleスプレッドシートからデータを取得して一覧表示するところまで作りました。今回はここに画像を追加して更にアプリ感を出していこうと思います。

画像素材の入手

今回はこの販売記録表示一覧画面に対して、販売者のアイコンと販売したフルーツのイラストの表示を追加してみます。

まずはイラスト素材の入手ですが、これは普段から大変お世話になっている「いらすとや」さんから提供いただくことにします。いらすとやさん、いつもありがとうございます。

かわいいフリー素材集
いらすとやは季節のイベント・動物・子供などのかわいいイラストが沢山見つかるフリー素材サイトです。

今回使いそうな素材をダウンロードします。ファイル名はPowerApps上でわかりやすいようにリネームしておきました。

いらすとや さん

今回、適当なデータを作ってから、あ、ギャラリーに絵を出そう!(無計画)

と急に思いついたんですが、ちょうどいいのあるかなーといらすとやさん行ったら全部揃いました。まさか、カブトムシの人型キャラまであるとは、、、恐れ入りました。ないイラストないんじゃないかと思うぐらいの充実しています。

画像データをPowerAppsにアップロード

PowerAppsで使いたい画像ファイルは、PowerApps上にアップロードしておくと扱いやすいです。

左のバーのメディアアイコン(①)をクリックし、アップロードリンク(②)をクリックします。パソコン内から画像ファイルを選択できるダイアログが開きますのでPowerAppsで使いたい画像ファイルを指定(③)します。複数まとめて選択することもできます。選択できたら、開く(④)をクリックします。

PowerAppsへのアップロードが終わるとメディア欄にこのように追加されます。

ギャラリーにイメージコントロール追加

ギャラリーにイメージを追加するには、まず対象のギャラリーコントロールを選択します。

次にメニューの「挿入」⇒「メディア」⇒「画像」をクリックします。

ギャラリーの中にイメージコントロールが追加されます。まだ中身をセットしていないのでサンプルイメージが表示されています。

イメージ枠の大きさと位置を整えましょう。

次はイメージコントロールに読み込む画像を選択します。

①画像を表示したいイメージコントロールをクリックします。

②右側のプロパティの「画像」で表示したい画像を選択します(③)

指定した画像が表示できましたね。

ただ、ギャラリーに表示している内容に合わせて画像を切替えたいですよね。ここの前回同様、各データを示すThisItemを使って画像データを切り替えるようにコードを入れていきましょう。

前回のSwitch関数で切り替えるという手法が、ここの画像切替でも使えます。

対象のイメージコントロール(①)のImageプロパティ(②)を選択し、③の部分に画像切替のコードを書きます。

各データの商品名を判定して、それに該当する画像を指定します。既にPowerAppsのメディアとしてアップロードしているものを指定する場合は、画像名をシングルクォートで囲って書きます。

画像を指定する場合は、ファイル名のみ指定します。拡張子は含めると正しく動きません。

とりあえず、いちごとりんごだった場合の処理を書くとこんな感じです。いずれにも該当しなかった場合は、SampleImageを指定することで下のバナナのように特定の画像が指定されていないのがわかるようなイメージが表示されます。

Switch(ThisItem.商品,
    "いちご", 'いちご',
    "りんご", 'りんご',
    SampleImage
)

ちなみに、SampleImageを指定しない場合は、画像が非表示となります。ここはお好みで。

これでギャラリーの表示内容によって画像の切り替えができるようになりましたが、一点問題があります。

それは、画像のパターンが増えると、このSwitch関数の分岐処理を追加する必要がでてきてしまいます。

そんな時は、このようにデータ上の名前と画像の名前を同じにしておくと、分岐処理は不要で、データとして保持している名前を直接指定して画像を表示することができます。

ThisItem.商品だけ書けば良さそうですが、PowerAppsにアップロードした画像を使う場合は、”appres://resources//” で指定しないと画像を認識できません。

"appres://resources//" & ThisItem.商品

商品名に合致する画像が自動で表示されるようになりましたね。これなら画像の表示パターンが増えても分岐処理のコードを追加する必要がありません。

画像を丸枠でくり抜いてアイコンっぽく表示方法

次は販売者のアイコンをギャラリーに追加してみましょう。

アイコンを表示するスペースを作りましょう。表示項目を右にずらします。

イメージコントロールを新しく追加し、大きさを整えます。

画像の出し方はさきほどの果物の画像と同じように、今度はデータの名前と一致させれば表示することができます。

"appres://resources//" & ThisItem.名前

いらすとやさんからもらってきたイメージファイルだと透過処理が入っていて、丸くくり抜かなくてもアイコンぽく表示されてしまいました(汗)

PowerAppsイメージコントロールの機能を使って丸くくり抜くのをやりたいので、フリー素材のPAKUTASOさんから写真を借りてきました。モデルの大和くるみさん、ご協力ありがとうございます。
(アプリの見栄え上、敬称略ですみません🙏)

みなとみらいの海を背景にポーズをとる女性|フリー素材のぱくたそ
みなとみらいの海を背景にポーズをとる女性の写真は海・女性に関連する人物のフリー素材です。高解像度(3456px×5184px)の素材を無料でダウンロードできます。

今までの要領でスプレッドシートにデータを追加して、同じ名前で画像をPowerAppsにアップロードすると、ギャラリーに表示できると思います。

イメージコントロールの次のプロパティを変更することで、表示する画像の四隅を丸くすることができます。

  • RadiusBottomLeft – コントロールの左下隅を丸める度合い
  • RadiusBottomRight – コントロールの右下隅を丸める度合い
  • RadiusTopLeft – コントロールの左上隅を丸める度合い
  • RadiusTopRight – コントロールの右上隅を丸める度合い

いくつか値を変更したパターンを載せておきます。角を丸めるだけでなく、面白い形で型抜きもできますし、Twitterのように完全な丸形にすることもできます。

画像をクリックすると拡大表示できます。

被写体を中心にして正方形でトリミングしないと、PowerApps上できれいに表示されないので素材を準備する際にはそこを注意してください。
それでもうまく丸まらない場合は、イメージコントロール自体のサイズも正方形にしてみてください(HeightとWidthの値を同じにする)。

イメージコントロールをもっと詳しく知りたい方は、公式ドキュメントを参照してみてください。

スポンサーリンク

まとめ

ギャラリーにイメージを追加すると、だいぶアプリの見栄えも良くなってきますね。

今回は縦に並ぶギャラリーを使いましたが、PowerAppsには横に並べることができるギャラリーもあり、いろいろな表現ができると思います。

見栄えについてはいろいろできてきたので、次回はギャラリーに表示するデータの制御(フィルターや表示順)についてやってみようと思います。それではまた!

コメント

タイトルとURLをコピーしました