【Power Platform】Power Apps くじ引きアプリを作ってみよう！ - APC 技術ブログ

くじ引きアプリ

はじめにはじめに作り方 ① PowerAppsを開始する ② PowerAppsでアプリを作成 ③ ドロップダウンの作成 ④ ギャラリーの追加 ⑤ ギャラリーの不要な項目の削除 ⑥ ギャラリーにテキスト入力を挿入 ⑦ Textプロパティの編集 ⑧ボタンの作成 ⑨データテーブルの挿入 ⑩アプリ完成アプリの使い方まとめこんにちは! Power Platform横串チームの高須です。今回はPower Appsでくじ引きアプリを作成する方法を掲載します。一からローコードでアプリを作成する必要があるため少し難しいですが、作成できればPowerAppsをより深く理解できると思いますので是非チャ…

株式会社エーピーコミュニケーションズの技術ブログです。

Power AppsPower Platform ＜ techblogAPCについて（はじめにお読み下さい）＞ - はじめに

作り方
① PowerAppsを開始する
② PowerAppsでアプリを作成
③ ドロップダウンの作成
④ ギャラリーの追加
⑤ ギャラリーの不要な項目の削除
⑥ ギャラリーにテキスト入力を挿入
⑦ Textプロパティの編集
⑧ボタンの作成
⑨データテーブルの挿入
⑩アプリ完成
アプリの使い方
まとめ

こんにちは! 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. ボタンを押すとデータテーブルにランダムな順番で値が表示されます。 1.ドロップダウンから好きな数字を選択してくじの数を決定します 2. 表示されたギャラリーのテキスト入力欄に任意の値を記入し、くじの内容を決定します。 3. ボタンを押すとデータテーブルにランダムな順番で値が表示されます。

任意でテキストを追加したりレイアウトを調整するとアプリの見栄えが良くなります

まとめ

今回は、Power Appsでくじ引きアプリを作成する方法を紹介しました。

Power Appsアプリを一から自分で作成する事で達成感があり、自分でもアプリを作れるんだという自信が得られたのではないでしょうか。今回のアプリを自分でアレンジしてもっとオシャレにしてもいいですし、機能を追加しても良いかもしれません。

また、次はアプリのアイデアを自分で出してみて、どうすれば実現できるか考えながら作ってみてはいかがでしょうか。より知識が得られ、ステップアップできると思います。

株式会社エーピーコミュニケーションズは、ITインフラ基盤・ネットワークセキュリティのプロフェッショナルとして、システムインテグレーションに加えシステム構築・運用の内製化支援や自動化サービスや、クラウドネイティブ/Platform Engineeringの導入支援、データ＆AI基盤に関連するサービスを提供しています。わたしたちは「エンジニアとお客様を笑顔にする」というVisionを掲げ、インフラエンジニアの未来を創るNeoSIerとして工夫と挑戦を行い続けます。