PowerApps│パワポのような吹き出しを作る方法

アイキャッチ

こんにちは、あんこ先生です。

PowerAppsでもパワポのような吹き出しを使いたいと思いませんか?

数値を見せるときに吹き出しで括った方が見栄えがいいし、目を引きますよね。

ところが、PowerAppsの図形は角度調整どころか左右反転すらできません。

SVGを使えばなんとでもなるんですが、ちょっとした専門知識と微調整がめんどいです。

そこで、今回は「それでも吹き出しを使いたい!」という方のために、コントロールのみで吹き出しを作成する方法を解説します。

この記事を読めば、PowerAppsデザインの新天地にたどり着けるかも!

PowerAppsでパワポのような吹き出しを作る方法


吹き出しの基本パーツ


使用するのはすべて標準かつ馴染みのあるコントロールです。

具体的には、吹き出し部分にテキスト入力、先っちょ部分に図形(四角形)またはラベルを使います。

この組み合わせで表現できるのか半信半疑かもしれませんが、安心してください。

間違いなくこの組み合わせで表現できます。

この後、具体的な作成方法やアレンジ方法を紹介していきます。

吹き出し本体の作り方│テキスト入力


テキスト入力を設置しサイズを変更する

まず適当なテキスト入力を設置します。

今回は新円の吹き出しを作りますので、サイズは正方形に変更します。

後から変更も容易なので、とりあえず100×100としておきましょう。


角を丸める


実はテキスト入力に角の丸みを設定するRadiusTopLeftプロパティというものがあります。

この数値を増やすと四角から真円へ徐々に近づきます。

概ね一片の長さの60%辺りでほぼ真円になります。

計算がめんどくさいので一片の長さに合わしてしまいましょう。

今回の一片は100なので、RadiusTopLeftプロパティの値も100にします。


細かい設定


色やフォントサイズ、太さなどをお好みで変更します。

文字位置はセンターがオススメですが、なぜか左パディングが多く若干右寄りになります。

そのため、PaddingLeftプロパティの値を5に指定しておきましょう。

また、普通にテキスト入力できてしまうのでDisplayModeプロパティViewにしておきます。

これで、吹き出し部分は完成です。

吹き出し先っちょの作り方│四角形orラベル


斜めにつける


先っちょを斜めにつける場合は、同じ色の四角形を適当な位置および下層レイヤーに移動させるだけです。

四角形の1角のみ表示され、先っちょっぽくなります。

もう少しとんがった方がお好みなら、取付箇所は制限されますが三角形でも代用できます。


上下左右につける


先っちょを上下左右につける場合は、同じ色のラベルに▲▼◀▶(さんかく)を入力し適当な位置および下層レイヤーに移動させるだけです。

文字の一部のみ表示され、これまた先っちょっぽくなります。

角を丸めたものがお好みなら、こちらも取付箇所は制限されますが半円などでも代用できます。


使い勝手を向上させる

今回紹介した吹き出しは2つのコントロールで構成されていますが、位置や表示有無を変える場合は少々扱いづらいです。

それらの問題が解消するため、あらかじめコンテナを用意し、その中に格納することを強くオススメします。

吹き出しのアレンジ紹介


四角形ベースの吹き出し


テキスト入力を横長の長方形にし、RadiusTopLeftプロパティを調整することで表現できます。

文字と背景を反転させれば、色付きも可能です。

この場合、見栄えの観点から先っちょは上下に限定した方がよさそうです。


吹き出しをつなげる


真円のテキスト入力を4つ重なるように連ねました。

上下にもブレをつければ、さらにもこもこ感が高まりますね。

パワポのような吹き出しを作る方法のまとめ

今回はパワポのような吹き出しを作る方法を紹介しました。

基本はテキスト入力と何かを組み合わせて表現しています。

仕組みが分かれば単純なので、アイデア次第で様々なデザインに応用できそうです。

おしゃれっぽいアプリ作成に役立ててみてください。

アイキャッチ

ご支援よろしくおねがいします

この記事を気に入ってくださった方、寄付してあげてもいいよという方がいらっしゃっいましたら、ご支援いただけると助かります。

下記リンクからAmazonギフト券で、金額は15円からお気持ちを入力してください。

受取人のメールアドレスは amazon@anko7793.com までお願いします。

メッセージもいただけるとたいへん喜びます。

よろしくお願いします。

Amazonギフト券(Eメールタイプ) 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ABOUT US
七草あんこ
非IT系中間管理職やってます。社命によりoffice365を主軸とした業務改善プロジェクトメンバーに任命されたことでPowerAppsと出会えました。いまではビジネス・プライベートを問わず、欠かせないツールになっています。導入初期やアプリ作成時に遭遇した諸問題の解決法とサンプルアプリの作り方を紹介していきます。主にTwitterで情報収集しているので不明点など呟いているとお邪魔するかもしれません。