【PowerApps】キャンバスアプリ+データソース(OneDrive)

# はじめに
私は社内広報チームに参加しているのですが、社内コミュニケーションが活性化してきたことを可視化したいねという意見があり、PowerAppsでアプリを作ってみることにしました。

この記事は[TDCソフト株式会社 Advent Calendar 2023](https://qiita.com/advent-calendar/2023/tdc) 20日目の記事です！

https://qiita.com/advent-calendar/2023/tdc

# アプリイメージ
- アプリを使用してる人がボタンの内容を達成（ボタンクリック）した数だけボタンの周りの🌸が咲く
- 自分が達成（ボタンクリック）したらボタンの色をピンクにする
- 2回以上同じボタンをクリックした場合は絵文字を🍃⇆🌸に、ボタンの色を緑⇆ピンクに変更する

＜キャンバスアプリ＞
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/9efcd23d-cd59-7c3e-2f42-f8d61be2cd83.png)

＜データソース＞
![スクリーンショット 2023-12-18 0.28.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/dbeb2977-6bf7-02df-5030-127ff03192f3.png)

# 手順

【事前準備】
1. データソース用のエクセルを作成してOneDriveにアップロード
2. 背景画像作成

【PowerApps】
1. 空のキャンバスアプリ作成
2. データソース追加
3. 背景画像選択
4. ボタン作成
5. テキストラベル作成
6. 動作確認
7. アプリ公開

### 【事前準備-1】データソース用のエクセルを作成してOneDriveにアップロード
テーブルとして使いたい項目を1行目に記入して、テーブルとして書式設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/5fef2bc5-0fc3-b3c2-51ab-ac5ba4ec88a9.png)

先頭行をテーブルの見出しとして使用するにチェック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/41466d11-a780-847c-f125-15fc3a326d83.png)

テーブル名に任意の名前を設定して保存
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/0cb21714-d526-7028-ba7e-2330987734d3.png)

OneDriveにアップロード
![スクリーンショット 2023-12-17 22.54.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/093604a4-a5f5-d521-e953-24e3371e2e6b.png)

プライベート設定ではなくアプリを公開する相手に共有設定する（アクセス許可は編集可能にする）
※アプリを公開する相手がOneDriveの使用権限があること
![スクリーンショット 2023-12-18 9.44.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/63e85d2c-9e92-4b3a-6ca9-6837635d1e97.png)

### 【事前準備-2】背景画像作成
今回はCanvaで作成（共有ボタンからダウンロード可能）
Canvaは無料でも結構いい感じの画像を作れるのでおすすめです！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/3034551f-183a-33e5-9257-1a5f4c18fc6e.png)

### 【PowerApps-1】空のキャンバスアプリ作成
空のキャンバスアプリを選択して作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/b15da266-7470-a6e6-cacd-bfdc1aa7233a.png)

名前をつけて作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/512e2a0a-f41b-82ea-61c9-b6f8860bdbaa.png)

### 【PowerApps-2】データソース追加
データの追加からOneDrive for Businessを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/b77e4b42-a700-0c53-3a4c-b4fae7e09cdf.png)

![スクリーンショット 2023-12-17 23.01.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/3ba67243-0331-00ec-bc95-dadda7ea924d.png)

先ほど作成したエクセル・テーブルを選択して接続
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/e20165d6-7ffb-3383-14b2-c2acae987579.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/b519ef32-54c2-7072-d66f-70e03498b0d0.png)

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f333037333836372f37613066623362312d346630352d653033372d313135392d3465376664356461616136632e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/5a760590-044b-5b96-ec3e-a8e4d10b772a.png)

### 【PowerApps-3】背景画像選択
右側の背景の画像のドロップダウンから画像ファイルの追加を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/fd46d822-9600-f9e7-0dc7-d1996ac68ee6.png)

作成した画像を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/bd733a6f-2332-c054-1486-71b5149af784.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/70ec9302-2ba7-594a-c255-95b88b3234de.png)

（ついでにテーマを緑にしておく）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/e5282a85-cf95-4aef-9a44-3694ceb137e6.png)

### 【PowerApps-4】ボタン作成
挿入からボタンを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/1b22ad09-47b8-5dd2-3b50-e048a5fe6ab1.png)

テキストを編集（Shift+Enterで改行）し、
丸いボタンを作りたいので、プロパティタブからサイズをX:100、Y:100に、詳細設定タブからRadius〜を100にする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/5b1b72d6-9fd3-05ad-e000-c22410d1fcb8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/a10ceec8-7939-53dc-f04f-e9d35a9576ef.png)

ボタンを押したときに、ボタン名（項目名）かつ自分のメールアドレスがkonokiテーブルに存在する場合はレコードを削除し、存在しなければレコードを追加するように、OnSelectに下記を入力
※関数の詳細は一番下の参考リンクご参照
```
If(CountIf(konoki,項目名="Teamsでリアクションした👍",メール=User().Email)>0,RemoveIf(konoki,項目名="Teamsでリアクションした👍",メール=User().Email),Patch(konoki,{項目名:"Teamsでリアクションした👍",メール:User().Email,名前:With({fullName:Split(User().FullName," ")},Last(fullName).Value&" "&First(fullName).Value),登録日時:Now()}))
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/04a157fe-2561-5f0f-8ec1-d6535012a39a.png)

ボタン名（項目名）かつ自分のメールアドレスがkonokiテーブルに存在する場合はボタンの色をピンクにするように、Fillに下記を入力
```
If(CountIf(konoki,項目名="Teamsでリアクションした👍",メール=User().Email)>0,RGBA(254,123,191,1),RGBA(73, 130, 5, 1))
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/ca730493-c3a1-9929-b70e-3850f0bfc286.png)

### 【PowerApps-5】テキストラベル作成
挿入からテキストラベルを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/e597e29f-4977-6af3-d413-c314ffa73b47.png)

ボタン名（項目名）がkonokiテーブルに1レコード以上ある場合は🌸に、ない場合は🍃になるように、Textに下記を入力
```
If(CountIf(konoki,項目名="Teamsでリアクションした👍")>0,"🌸","🍃")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/23aaeced-19b1-e00a-8dfa-0499e2cd3cb9.png)

ボタンの周りを囲むように配置し、レコード数判定の数字は1ずつカウントアップする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/5c539cc3-a9bf-b85f-0a96-977e18a1c487.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/84ab728d-ac6b-6843-7d8f-053610bcc723.png)

### 【PowerApps-6】動作確認
▶️ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/04452afa-0db9-6dc7-9b13-02af38d95dd3.png)

「Teamsでリアクションした👍」ボタンをクリックしてみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/fcc3051f-c910-284f-e142-d4d229411e47.png)

🌸が咲いてボタンの色がピンクになった！もう一回クリックしてみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/50ed52e6-0529-a7fc-fb23-d58cfa8b9667.png)

絵文字が🌸→🍃に、ボタンの色がピンク→緑になった
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/4eb71c33-022f-3e41-e930-0a3c47c986f1.png)

### 【PowerApps-7】アプリ公開
上書き保存
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/2e3a8e63-883e-569c-3acf-91f8401c9f31.png)

公開
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/ecfc5c10-4fc5-7282-8283-38962144aab3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/6c28c31c-67c5-1414-65e5-b77ee7f76dc8.png)

共有
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/07256569-519c-452e-ae64-de69c0451972.png)

アプリを公開する相手に共有
![スクリーンショット 2023-12-18 10.26.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073867/c1c3a2d4-c49a-b0d2-b32d-0539c259f725.png)

# 改善点
- リスト画面を追加してボタンの内容を達成（ボタンクリック）した人が誰かわかるようにする
- テキストラベルを用意した数だけしか🍃→🌸にならないので、テキストラベル数以上の人がボタンの内容を達成した場合は「+3」等表示し、達成人数がわかるようにする

# さいごに
PowerAppsは社内向けアプリが簡単にできますね！
身近なローコード開発ツールなので、開発初心者でも手が出しやすいのではないかと思いました！

# 参考
- [Canva](https://www.canva.com/)
- [MicrosoftPowerFx(PowerAppsのキャンバスアプリの数式言語)の概要](https://learn.microsoft.com/ja-jp/power-platform/power-fx/overview)
- [CountIf関数](https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-table-counts)
- [RemoveIf関数](https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-remove-removeif)
- [Patch関数](https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-patch)
- [Power AppsのUser().FullNameで取得した苗字／名前が逆になる問題の解決方法](https://ascii.jp/elem/000/004/135/4135750/)