前回はPowerAppsでポップアップウインドウを作るところまでやってみました。動かすところまでをメインでやったため、デザイン的にちょっとダサいまま終わってしまいました。本当は一回でデザインまでやる予定だったのですが、意外と記事が長くなってしまいましたので、二回に分けるることにしました。そんなわけで、今回は前回作ったポップアップウインドウをおしゃれに仕上げてみたいと思います。アプリを作ると割りと早めにメッセージをポップアップ通知したいシーンが出てきます。PowerAppsのアプリでもポップアップでメッセージを表示することができます。今回はそのや...blackbird-blog.com2022.07.17角を丸くする昭和のセダンは角張ってて好きでしたが、今日走っている車はどれもまるまるとしています。パソコンのUIもWindows2000ぐらいまでは角張っていましたが、WindowsXP以降、角が取れて丸みを帯びています。そんなわけでポップアップウインドウも時代に合わせて角を丸めてみることにします。前回作ったポップアップウインドウがこちら。角張ってますねーそれでは角を丸くしてみます。実は角を丸くするのはPowerAppsではとても簡単です。画像パーツの次の4つのプロパティの値を変更するだけで角が丸くなります。RadiusTopLeftRadiusTopRightRadiusBottomLeftRadiusBottomRightこれが画像パーツの四隅の角ばり具合です。次のようにすべての値を60にセットすると、このように角が丸くなります四隅がそれぞれ指定できるため、上側だけ丸くして下はそのまますることもできます。1)このプロパティが見つからない場合このプロパティがみつからない場合、グループを選択してしまっていると思われます。グループではなく、その中の画面パーツを選択すると表示されると思います。下のような構成になっていると思います。Group1ではなくImage2の方をクリックしてみてください。左上と右下だけ丸くして更に色を緑に変えると、このようなリーフ型のポップアップウインドウが作れたりします。1)数値をもっと大きくするとより葉っぱに形が近づきますが、肝心のメッセージを表示するエリアが少なくなってしまいます。数値を変えてどんな形ができるか試してみてください。ポップアップを半透明にする半透明にするには、画像パーツのFillプロパティに指定しているRGBA関数の第4引数の透過度で調整します。0~1で指定します(0が透明、1が不透明)。試しに透明度に70%ぐらいに設定するには、0.7とすると次のようにポップアップウインドウが半透明になります。透過度はパーセンテージでも指定可能です。背景画像を使ったポップアップウインドウ最初になぜ画像パーツをポップアップウインドウのベースに使ったのか。それはこの画像背景にも対応するためです。背景として使う画像をPowerApps内に取り込みます。画面左側のこのマーク(1)をクリックして、アップロード(2)をクリックして背景画像をアップロードします。アップロードが完了すると、このようにメディアの中に追加されます。メディアに追加した画像ファイルは、画像パーツのImageプロパティにそのまま指定できます(拡張子は除く)。おお、画像が表示されました。画像パーツなので当たり前ですね。背景が濃すぎてメッセージの文字が目立たなくなってしまいました。そんな時はメッセージの周辺部分にオブジェクトを配置して色を変化させることもできます。形はいろいろ用意されています。今回はオーソドックスに四角形を使ってみます。このように背景画像パーツの上に乗せて背景画像をアプリ上で薄く表示させてメッセージを見やすくしてみました。追加した四角形(Rectangle1)の背景色を白の半透明にして、文字色を黒に変えるとこんな感じになります。やり方は今までのやり方と同じです。表示順を調整してみてください。これもエクセルのオートシェイプと同じ要領で変更可能です。スポンサーリンクまとめいかがでしたか?全2回でご紹介したポップアップメッセージ表示方法。これに「OK」「Cancel」や「はい」「いいえ」などのボタンを乗せることでユーザの確認を取ることもできたり、とても便利です。パーツを組み合わせることでもっとすごいメッセージ表示ができると思いますのでぜひいろいろ試してみてください。Appsは、スマートフォン用のアプリやパソコン用のWebアプリなどを、コードを書かずに作成できるノーコード/ローコードツール(ソリューション)です。必要なパーツをPowerPointの感覚で配置し、必要な制御をExcelの関数の感覚で記載することでアプリを作成できます。アプリは複数の画面で構成することが多いです。PowerAppsでも自由に画面を追加して、画面間を自由に移動させることができます。画面遷移をマスターすれば作成できるアプリの自由度が上がります。画面を...IT【PowerApps】ギャラリーのソート順を変更する以前、PowerAppsのギャラリーでスプレッドシートの内容を一覧表示するアプリを作りました。PowerApps上で一覧表示するデータが入ったスプレッドシートを指定するだけで簡単に一覧表示してくれる優れものでした。アプリでよくあるメインの画面を左端から右にスワイプすると、画面左側からスルッとサブ画面が表示され、左にスワイプするとまた左側に消えていくという画面の動き。PowerAppsを使うには、Microsoftのアカウントが必要です。PowerAppsで作成したアプリはMicrosoftのアカウントに紐づいた状態でクラウド上に保存されます。Apps(パワーアップス)を使うと簡単にデータを操作できるアプリが作成できます。今回はデータの一覧表示部分として使っているギャラリーコントロールに画像を追加する方法を紹介します。14:26突然の書き込みすみません、ご存じでしたら教えてください。powerappsの「選択リストや日付」のコントロールは角を丸くする設定が表示されないのですが、別の方法で丸みをもたせる方法をご存知でしょうか。09:23コメントありがとうございます。09:17ご回答いただき、ありがとうございます。パーツを重ねるとは思いつきませんでした。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。最近はマネジメント業務ばかりやっていますが、エンジニアとしていつまでも現役でありたいので、時々手を動かしていますが、歳を重ねると物忘れがひどくなる一方なので、備忘録としてブログを運営しています。Reserved.ホーム検索トップサイドバータイトルとURLをコピーしました。