はじめに
こんにちは! Power Platform横串チームの高須です。
今回はPower Appsでくじ引きアプリを作成する方法を掲載します。
一からローコードでアプリを作成する必要があるため少し難しいですが、作成できればPowerAppsをより深く理解できると思いますので是非チャレンジしてみてください！
■PowerAppsアプリについて
PowerAppsは、Microsoftが提供する業務アプリ開発ツールです。
従来のアプリケーション開発ではプログラム言語に関する知識と経験が必要でしたが、PowerAppsは、プログラム言語を知らない人でも手軽にアプリを制作できるノーコード、ローコードといわれる開発環境を提供しています。
今回紹介する方法ではボタンやアイコン、ラベルなどの部品を自分で画面に追加してアプリを一から作成し、少ないコードを使用して自由にアプリをカスタマイズできます。
使い方次第では複雑なアプリを作成する事もできますので、是非使いこなせるようになってみてください！
■成果物
今回作成するアプリは、くじの本数を選択してくじの内容を記載することでオリジナルのくじ引きができるアプリです。
テキストボックスやボタンなど基本的なコントロールの使い方や、ローコードでのアプリ作成に触れて頂くことができます。
■アプリの活用例
・ランダムで座席を決定するとき
・くじで景品をプレゼントするとき
・掃除当番や会議の議事録の当番などを決めるとき
クリスマス・忘年会・新年会などの催しや、業務での利用など幅広く利用できます！
作り方
① PowerAppsを開始する
1. Officeのホーム画面からPowerAppsを開く
② PowerAppsでアプリを作成
1. PowerAppsで空のアプリを作成
2. 形式をタブレットとして作成
③ ドロップダウンの作成
1. 挿入(左の＋アイコンをクリック)を選択し入力をクリック→ドロップダウンを選択し、ドロップダウンをアプリに追加、名前を「Dropdown1」にする。
2. ドロップダウンの Itemsプロパティには、「Sequence(10)」と入力する。
◇補足
〇コントロールについて
PowerAppsではアプリを構成するテキストやボタンなどの部品をコントロールと言い、各種設定項目(プロパティ)が用意されている。
〇ドロップダウンについて
ドロップダウンはクリックすると設定した選択肢を表示するコントロール。
ItemsプロパティでSequence関数に数字を指定した場合0～指定した数字までを選択肢として表示できる。
④ ギャラリーの追加
1. 挿入でレイアウト→空の水平ギャラリーを選択し、ギャラリーをアプリに挿入する、名前は何でもよい。
2. 作成したギャラリーを選択し、右画面のプロパティからレイアウトを選択し、タイトルを選択する。
3. ギャラリーのItemsプロパティには、「Sequence(Dropdown1.Selected.Value)」
と入力する。
◇補足
〇ギャラリーについて
ギャラリーはデータソースにあるデータを一覧にして表示するコントロール。
ギャラリー内の一つの項目にコントロールを配置すると全ての項目に同じようにコントロールが配置される(データソースは後ほど設定する)
ギャラリーのItemsプロパティに設定した「Sequence(Dropdown1.Selected.Value)」
は、ドロップダウンで設定した数値の分だけギャラリーの項目を追加する。
(ドロップダウンの名前を「Dropdown1」と設定したのはここで使用するため)
⑤ ギャラリーの不要な項目の削除
1.ツリービュー(左の四角形が三つ重なったアイコンをクリック)から作成したギャラリーの矢印をクリックし、子となっているRectangleとNextArrowを削除する
⑥ ギャラリーにテキスト入力を挿入
挿入でテキスト入力を選択し、テキスト入力をギャラリーの枠内にドラック&ドロップする
テキスト入力のDefaultプロパティを「"テキスト入力"」から「""」にする。
◇補足
〇テキスト入力について
テキスト入力は入力した値を格納し、他のコントロールに値を渡すことができるコントロール。
⑦ Textプロパティの編集
1. ギャラリー内のTitleを選択し、Textプロパティに、「ThisItem.Value&"本目"」と入力する。
※この時点でアプリを保存、再生すると、ドロップダウンから好きな数字を選択した場合ギャラリーに表示されるくじが選択した数字と同じ個数になる。
⑧ボタンの作成
1. 挿入でボタンを選択し、ボタンをアプリに挿入、名前は何でもよい。
2. ボタンのOnSelect プロパティに以下の値を入力する。
OnSelect = Clear(Kuji);ForAll(Gallery1.AllItems,Collect(Kuji,{Name:TextInput1.Text}));
ClearCollect(ShuffleKuji,Shuffle(Kuji))
◇補足
〇ボタンについて
ボタンは、OnSelect プロパティに値を設定するとボタンを押した際にOnSelect プロパティの内容が実行されるコントローラー。
〇OnSelect プロパティに設定した値について
Clear(Kuji)：Kujiというコレクションのレコードをすべて削除。
ForAll(Gallery1.AllItems,Collect(Kuji,{Name:TextInput1.Text}))：Kujiコレクションの「Name」列にテキスト入力の値を全てセットする。
ClearCollect(ShuffleKuji,Shuffle(Kuji))：Kujiコレクションの値をShuffle関数でランダムに配置してShuffleKujiコレクションにセットする。
〇コレクションについて
コレクションを使用すると、ユーザーはアプリで管理できるデータを格納できる。
今回はKujiコレクションを設定してテキスト入力の値を格納した。
⑨データテーブルの挿入
1. 挿入でレイアウト→データテーブル(プレビュー)を選択し、データテーブルをアプリに挿入、名前は何でもよい。
2. データソースの選択で、「ShuffleKuji」を選択(ShuffleKujiはボタンの作成の項目で作成されたもの)
3. 再度データテーブルを選択するとフィールドの選択画面が表示されるので、Nameを選択して追加ボタンを押す。
⑩アプリ完成
アプリ完成です！アプリを保存し実際に動くか再生してみましょう！
アプリの使い方
1.ドロップダウンから好きな数字を選択してくじの数を決定します
2. 表示されたギャラリーのテキスト入力欄に任意の値を記入し、くじの内容を決定します。
3. ボタンを押すとデータテーブルにランダムな順番で値が表示されます。
任意でテキストを追加したりレイアウトを調整するとアプリの見栄えが良くなります
まとめ
今回は、Power Appsでくじ引きアプリを作成する方法を紹介しました。
Power Appsアプリを一から自分で作成する事で達成感があり、自分でもアプリを作れるんだという自信が得られたのではないでしょうか。今回のアプリを自分でアレンジしてもっとオシャレにしてもいいですし、機能を追加しても良いかもしれません。
また、次はアプリのアイデアを自分で出してみて、どうすれば実現できるか考えながら作ってみてはいかがでしょうか。より知識が得られ、ステップアップできると思います。
