2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

スキマ時間で簡単にできる『運動メニューガチャ』を作ってみた(PowerApps)

Last updated at Posted at 2023-12-22

身体を動かすきっかけが欲しい!

業務をしていると、気がつくとずっと同じ姿勢でパソコン作業をしている・・・なんてこと、よくありますよね?
そんな課題を解決すべく、「運動ガチャアプリ」を作ってみました!

社内の健康増進取り組みとして運動習慣促進企画を検討しており、活動メンバーのアイデアによって生まれたプロトタイプです。
これがあれば、会議の冒頭のアイスブレイクなどでも活用できるかも?

運動メニュー提案ガチャ、誕生!

まず、完成版はこちらです。
スキマ時間に簡単にできる運動メニューをランダムに出力してくれます。

Videotogif (1).gif

アプリ作成手順(PowerApps)

<手順1> SharePoint Onlineのリスト作成/運動登録

  1. SharePoint Onlineにリストを作成し、ガチャの結果になる運動の名称を登録します。
    今回登録した運動メニューは、以下リストのとおり。
    (カスタマイズすると、オリジナルのガチャが作れます!)

• 上に伸びましょう!
• アキレス腱を伸ばそう!
• 後ろの肩をストレッチしよう!
• 左右の体側を伸ばそう!
• とりあえず前屈
• エアなわとび10回

image.png

<手順2> Power Appsアプリの作成&登録したSharePointのデータの取得

① Power Appsアプリを新規作成し、「データの追加」から「SharePoint」を選択します。
image.png

② 「接続の追加」または「作成済みの接続」を選択します。
image.png

③ 手順1で作成したリストを選択し、Power Appsの「データ」に追加されることを確認します

image.png

image.png

<手順3> 取得したデータをコレクションに格納

① AppコントロールのOnStartプロパティにて、ClearCollect関数を使用してコレクションにSharePointのデータを格納します。
※AppコントロールのOnStartプロパティに書いた式は、アプリ起動時に実行されます

image.png

② アプリ編集中にOnStartの処理を実行するには、Appコントロールの「…」マークより「OnStartを実行します」をクリックします。

image.png

③ コレクションにSharePointに登録したデータ(運動の名前、画像)が格納されます。

image.png

<手順4> 画面に必要なコントロールを配置する

① 「挿入」メニューより、「ビデオ」、「テキストラベル」を選択し、画面に必要なコントロールを追加します。

image.png

image.png

② 追加したコントロールの位置と大きさを調整します。

image.png

<手順5>  Power Appsに動画ファイルを追加

① [アップロード]ボタンより、Power Appsに動画ファイルを追加します。
※動画は以下のサイトから入手しました。(Power Appsではmp4, wavなどに対応しています)
https://telopict.com/emoji_telop_b139/

image.png

② 「ビデオ」コントロールのメディアから追加した動画を選択します。

image.png

image.png

<手順6> 運動ガチャの結果(ランダム)を作成する処理を構築

① ガチャの結果(ランダム)を作成する処理を構築します。
以下の式をVideoコントロールのOnEndプロパティに入力します。

UpdateContext({count : CountRows(運動コレクション)});
UpdateContext({number : RandBetween(1, count)}); 
UpdateContext({selected : Index(運動コレクション, number).タイトル});

image.png

※以下解説
①UpdateContext({count : CountRows(運動コレクション)});
変数「count」に運動コレクションの項目数を代入しています。
②UpdateContext({number:RandBetween(1, count)});
1~count(運動コレクションの項目数)のうち、ランダムな数を変数「number」に代入しています。
③UpdateContext({selected : Index(運動コレクション, number).タイトル});
変数「selected」に、運動コレクションの「number」番目の項目の、タイトル(運動名)を代入しています。
これらの処理が動画が終了したタイミングで実行されます。

<手順7> 運動ガチャの結果の表示

① 値を代入した変数を、画面に追加した「ラベル」のTextプロパティに設定することで、結果が表示されます。
※ここでは値を代入する変数の名前を「selected」にしています。

image.png

<補足>
動画ファイルのグリーンバックは、クロマキーなどで緑部分を抜くことができます。

まとめ

作成したメンバー(4人)で試しにガチャって出た種目を実際に試してみました。何度かやってみて、気分転換やちょっとした雑談に繋がったりもするねということで、発展性もあるのでは!?という考えです。が、果たして本当に価値はあるのか!?今後は社内展開して反応を伺っていく予定です!

2
0
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
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?