Go to Qiita Advent Calendar 2024 Top
LoginSignup
9
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

TDCソフト株式会社Advent Calendar 2023

Day 20
@nina_sinTDCソフト株式会社

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

Last updated at Posted at 2023-12-19

はじめに

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

この記事はTDCソフト株式会社 Advent Calendar 2023 20日目の記事です！

アプリイメージ

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

＜キャンバスアプリ＞
image.png

＜データソース＞
スクリーンショット 2023-12-18 0.28.40.png

手順

【事前準備】

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

【PowerApps】

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

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

テーブルとして使いたい項目を1行目に記入して、テーブルとして書式設定
image.png

先頭行をテーブルの見出しとして使用するにチェック
image.png

テーブル名に任意の名前を設定して保存
image.png

OneDriveにアップロード
スクリーンショット 2023-12-17 22.54.14.png

プライベート設定ではなくアプリを公開する相手に共有設定する（アクセス許可は編集可能にする）
※アプリを公開する相手がOneDriveの使用権限があること
スクリーンショット 2023-12-18 9.44.42.png

【事前準備-2】背景画像作成

今回はCanvaで作成（共有ボタンからダウンロード可能）
Canvaは無料でも結構いい感じの画像を作れるのでおすすめです！

image.png

【PowerApps-1】空のキャンバスアプリ作成

空のキャンバスアプリを選択して作成
image.png

名前をつけて作成
image.png

【PowerApps-2】データソース追加

データの追加からOneDrive for Businessを選択
image.png

スクリーンショット 2023-12-17 23.01.41.png

先ほど作成したエクセル・テーブルを選択して接続
image.png

image.png

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f333037333836372f37613066623362312d346630352d653033372d313135392d3465376664356461616136632e706e67.png

【PowerApps-3】背景画像選択

右側の背景の画像のドロップダウンから画像ファイルの追加を選択
image.png

作成した画像を選択
image.png

image.png

（ついでにテーマを緑にしておく）
image.png

【PowerApps-4】ボタン作成

挿入からボタンを選択
image.png

テキストを編集（Shift+Enterで改行）し、
丸いボタンを作りたいので、プロパティタブからサイズをX:100、Y:100に、詳細設定タブからRadius〜を100にする
image.png
image.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

ボタン名（項目名）かつ自分のメールアドレスがkonokiテーブルに存在する場合はボタンの色をピンクにするように、Fillに下記を入力

If(CountIf(konoki,項目名="Teamsでリアクションした👍",メール=User().Email)>0,RGBA(254,123,191,1),RGBA(73, 130, 5, 1))

image.png

【PowerApps-5】テキストラベル作成

挿入からテキストラベルを選択
image.png

ボタン名（項目名）がkonokiテーブルに1レコード以上ある場合は🌸に、ない場合は🍃になるように、Textに下記を入力

If(CountIf(konoki,項目名="Teamsでリアクションした👍")>0,"🌸","🍃")

image.png

ボタンの周りを囲むように配置し、レコード数判定の数字は1ずつカウントアップする
image.png
image.png

【PowerApps-6】動作確認

▶️ボタンをクリック
image.png

「Teamsでリアクションした👍」ボタンをクリックしてみる
image.png

🌸が咲いてボタンの色がピンクになった！もう一回クリックしてみる
image.png

絵文字が🌸→🍃に、ボタンの色がピンク→緑になった
image.png

【PowerApps-7】アプリ公開

上書き保存
image.png

公開
image.png

image.png

共有
image.png

アプリを公開する相手に共有
スクリーンショット 2023-12-18 10.26.55.png

改善点

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

さいごに

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

参考

9
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?