前回記事はこちら

PowerApps で画像を使わずに、7セグLEDを表現してみた

一桁表示じゃやっぱり味気ない

まぁそりゃそうでしょうよ。
こんなの全く意味ないもの。
やっぱり複数桁表示できてこそ・・・ですよね。

でも・・・

あんなの毎回コピペなんてできない・・・

フラグを各桁毎に7つ用意しないといけないんですもんよ。
そりゃ厳しいですって。

そうだ！コンポーネント化しよう！！

というわけで、前回作った7セグLEDをコンポーネント化していきます。

コンポーネント化とは

PowerAppsで実験的に提供されている
複数のオブジェクトを関数や変数ごとまとめて
一つのオブジェクトとして扱います。
コンポーネントがグループと全く異なるのは
コンポーネントに対して入出力が設定できるところです。

ようは、コンポーネントに対してデータを送って表示を制御したり
コンポーネント側の実行結果を本体アプリに返す
ということが可能になります。

@h-nagao さんのこちらの記事が非常にわかりやすいです！ぜひ参考になさってください。
PowerApps の Componentsについて紹介 (実験的な機能)

コンポーネント化の有効化

キャンバス表示から「ファイル」をクリックして

「アプリの設定」から

「詳細設定」をクリックし

一番下の「コンポーネント」を有効化します。

すると、画面ビューの横に「コンポーネント」が表示されていると思います。

また、挿入タブにも新しく「コンポーネント」が表示されていれば有効化されています。

7セグLEDをコンポーネント化

画面ビュー横の「コンポーネント」をクリックし
コンポーネントビューに切り替えたら
「新しいコンポーネント」をクリックしましょう。

Component1というのが作られますので
名前を7SegLEDに変更し
サイズを　Widthを 177 Heightを 327 にします。

出来たら、画面ビューに戻り、7SegLEDのオブジェクトを
スライダーを残してすべて選択し、コピーします。

タイマーコントロールは非表示にしておきましょう。

入力データ受信用にカスタムプロパティを設定する

数字を受けて表示を切り替えるので、本体アプリから数字を受信できるようにカスタムプロパティを設定します。

コンポーネント「7SegLED」をクリックすると
「新しいカスタムプロパティ」が表示されますのでそちらをクリックします。

今回は本体アプリから数字を受信するため
入力としてカスタムプロパティを以下のように設定します。

設定したら作成をクリックします。
「numdata」が作成されていることを確認します。

プロパティにも作成されています。

こちらは中のデータを空にしておきましょう。

これでカスタムプロパティの準備は完了です。

表示制御用のタイマーコントロールを変更する

前回ではスライダーの値を取得して切り替えていましたが
今回は本体アプリの「numdata」を受信して切り替える為
表示制御用のタイマーコントロール「OnTimerStart」を
以下のように変更します。

OnTimerStart

Switch('7SegLED'.numdata, //←ここを変える
    0,Set(object1,true)&Set(object2,true)&Set(object3,true)&Set(object4,true)&Set(object5,true)&Set(object6,true)&Set(object7,false),
    1,Set(object1,false)&Set(object2,false)&Set(object3,false)&Set(object4,true)&Set(object5,false)&Set(object6,true)&Set(object7,false),
    2,Set(object1,true)&Set(object2,true)&Set(object3,false)&Set(object4,true)&Set(object5,true)&Set(object6,false)&Set(object7,true),
    3,Set(object1,true)&Set(object2,true)&Set(object3,false)&Set(object4,true)&Set(object5,false)&Set(object6,true)&Set(object7,true),
    4,Set(object1,false)&Set(object2,false)&Set(object3,true)&Set(object4,true)&Set(object5,false)&Set(object6,true)&Set(object7,true),
    5,Set(object1,true)&Set(object2,true)&Set(object3,true)&Set(object4,false)&Set(object5,false)&Set(object6,true)&Set(object7,true),
    6,Set(object1,true)&Set(object2,true)&Set(object3,true)&Set(object4,false)&Set(object5,true)&Set(object6,true)&Set(object7,true),
    7,Set(object1,true)&Set(object2,false)&Set(object3,true)&Set(object4,true)&Set(object5,false)&Set(object6,true)&Set(object7,false),
    8,Set(object1,true)&Set(object2,true)&Set(object3,true)&Set(object4,true)&Set(object5,true)&Set(object6,true)&Set(object7,true),
    9,Set(object1,true)&Set(object2,true)&Set(object3,true)&Set(object4,true)&Set(object5,false)&Set(object6,true)&Set(object7,true)
)

これでコンポーネント化は終了です。

本体アプリで使ってみる

スクリーン1のオブジェクトを一旦すべて削除しましょう！

コンポーネントを配置

挿入タブからコンポーネントをクリックすると
7SegLEDが表示されているので、そちらをクリックします。

以下の通り、作ったコンポーネントがそのまま表示されています。

同じように全部で6桁分追加して配置しましょう！

数字増減確認用のスライダーを設定

例のごとくスライダーを作りましょう。
今回は、6桁なので以下の通りにします。

Min 0
Max 999999
Default 0

各コンポーネントに入力データを送信

私のこちらの記事を参考に、各コンポーネントに
各桁の数字を送信するように設定します。
PowerApps GameDev#1 スコア表示フォントをゲームっぽいものにしてみる

1桁目numdata

Value(Mid(Text(Slider1.Value),Len(Text(Slider1.Value)),1))

2桁目numdata

Value(Mid(Text(Slider1.Value),Len(Text(Slider1.Value))-1,1))

背景を黒にする

背景が白だとちょっと見づらいので、黒にしてみましょう！

では実際に動かしてみましょう！

実験的内容２
Components をつかったら複数桁表示も行けた！！
画像なしでもちゃんと表現できるね！#PowerApps pic.twitter.com/QnItVrZot2
— りなたむ（RINATAMU） (@R_t_A_n_M) 2019年2月25日

こんな感じになれば成功です！

まとめ

いかがでしたか？
2回にわたって試してみた
画像を使わずにして数字を表現する

コンポーネントという実験機能が追加されたことで
PowerAppsの表現の幅がさらに広がりました！

テスト的に作っていたパーツも
これを機にコンポーネント化して開発効率のさらなる向上を目指しましょう！

PowerAppsで作った7セグLEDをコンポーネント化して6桁表示にしてみた