PowerAppsを使ってじゃんけんゲーム Part1

初投稿です！
今後自分が作ったもの、やったことなどを投稿していこうと思いますので、よろしくお願いいたします(*^-^*)

今回投稿する内容は、PowerAppsを使ってじゃんけんゲームを作ってみました！
こちらは@rnakamuramartinyさんが考えたもので、作り方を教えて頂き、なんとか形にすることができました！
本当にありがとうございます！

ただ作っただけでは勿体ないので、復習の意味でも自分なりにまとめていこうと思います。

# 本日のゴール

<img width="249" alt="111.png" src="https://qiita-image-store.s3.amazonaws.com/0/301050/de185778-59a4-3e0b-49ca-24f5d32785ee.png">

## 事前準備
### 画像の取り込み
<img width="957" alt="2018-10-11 (7).png" src="https://qiita-image-store.s3.amazonaws.com/0/301050/7eb44ea2-ffe4-a239-3c73-bae80120248b.png">
まずはグー、チョキ、パーの画像を[メディア]⇒[画像]⇒[参照]の手順で開いておきます。

### オブジェクトを配置
グー、チョキ、パーの画像を表示するためにImageオブジェクトを挿入します
<img width="733" alt="4.png" src="https://qiita-image-store.s3.amazonaws.com/0/301050/596e69d0-9be7-003c-482e-44be192f4d6f.png">


以下のように配置します。
※画像の名前を入力すると、対応した画像が表示されます。確認のためグーの画像を表示しています。
<img width="632" alt="5.png" src="https://qiita-image-store.s3.amazonaws.com/0/301050/92c34ce6-7021-b959-9122-a01f76a34d2c.png">

### 画像と関連付けるテーブルを作成
グー、チョキ、パーの画像を1,2,3という数字に関連付けるため、テーブルを作成する関数を使用
今回は以下のようなテーブルを作成

テーブル名[JankenImage]


 ID       |       Image |
|:-----------------|------------------:|
| 1             |              Goo |
| 2           |            Choki |
| 3             |              Pa |

ScreenのOnVisibleに以下の図のように関数を書きました。
<img width="662" alt="6.png" src="https://qiita-image-store.s3.amazonaws.com/0/301050/a69d8a00-82dd-9755-e8fb-437f2a1db1b8.png">
※関数
`ClearCollect(JankenImage,
    {ID:1,Image:Goo},
    {ID:2,Image:Choki},
    {ID:3,Image:Pa}
);`

## 実際にグー、チョキ、パーの画像をぐるぐる回してみる
画像をぐるぐる回す＝先ほど作ったテーブルのIDを1→2→3→1→2→3→1・・・・という感じでループさせたい。
そこで使うのは「タイマーオブジェクト」です！
<img width="350" alt="2.png" src="https://qiita-image-store.s3.amazonaws.com/0/301050/a49d267a-1696-e513-3385-ff4cf425a4e8.png">
タイマーオブジェクトを挿入し、「OnTimerEnd」に以下の関数を書きます。
`If(ImageID=3,UpdateContext({ImageID:1}),UpdateContext({ImageID:ImageID+1}))`
※ImageIDは画像を切り替えるために使用する変数です。ScreenのOnvisibleにImageIDという変数を宣言し、初期値を入れておきます。
<img width="598" alt="10.png" src="https://qiita-image-store.s3.amazonaws.com/0/301050/95ffc237-6e9f-8a14-04ca-1fbdfb7028b2.png">


グー、チョキ、パーの画像を素早く切り替え、ループさせたいので、タイマーのプロパティから期間を100(ms)、繰り返しをオンにします。
<img width="176" alt="3.png" src="https://qiita-image-store.s3.amazonaws.com/0/301050/638a3769-abc4-a564-d3d5-c6c5d1a5d373.png">

### タイマーをスタートさせる
タイマーオブジェクトの「Start」がfalseの場合、タイマーはストップし、trueの場合タイマーが動き出します。

ScreenのOnVisibleに[Janken_Start]という変数を作り、`UpdateContext({Janken_Start:false})`と指定しておきます。
<img width="617" alt="7.png" src="https://qiita-image-store.s3.amazonaws.com/0/301050/45878050-f15b-6191-a831-ba61669e32fd.png">

タイマーオブジェクトの[Start]に「Janken_Start」という変数を指定し、何も操作しない時はタイマーは動かないようにしておきます。
<img width="598" alt="8.png" src="https://qiita-image-store.s3.amazonaws.com/0/301050/22a78cb7-5d6c-6bac-07a8-f87e120f4555.png">

次に「Janken_Start = True」となるように作成していきます。
ボタンオブジェクトを挿入します。
OnSelectで以下図のように関数を書きます。
<img width="639" alt="9.png" src="https://qiita-image-store.s3.amazonaws.com/0/301050/9e806488-8cad-b467-54ac-776be236639b.png">

挿入したボタンをクリックするとタイマーが動き出し、ImageIDの値が変化していきます。
※各変数の値がどのように変化しているのか確認する際は、ラベルを挿入し、変数名を入れると確認できます。
<img width="251" alt="11.png" src="https://qiita-image-store.s3.amazonaws.com/0/301050/93e151f3-3953-063d-9fe0-8edfbd274ce7.png">
ちなみにストップボタンはスタートボタンとは逆で、Janken_Start = fasleになるようにOnSelectで関数を書けばタイマーは止まります。

### 画像をぐるぐる回す
これでImageIDの値が1→2→3→1→2・・・と変わる仕組みができたので、次はImageIDと事前準備の時に作った「JankenImage」テーブルに関連付けができれば画像がぐるぐる回ります。

挿入しておいたImageオブジェクトに以下の関数を書きます。
`LookUp(JankenImage,ImageID = ID,Image)`
<img width="733" alt="12.png" src="https://qiita-image-store.s3.amazonaws.com/0/301050/b10639c2-88c5-44c3-57cc-8cfca394f8cc.png">
※LookUp関数はテーブル内で数式を満たす最初のレコードを検索します。
　今回の場合、JankenImageというテーブルでImageID変数の値(1～3）の画像がどれか検索します。
　タイマーがスタートしていると、ImageIDは1→2→3→1→2・・・と変化しているので、画像もグー、チョキ、パー、グー、チョキ、パー・・・と変化することになります。
![15397728045W3J9t2eANZzXBw1539772803.gif](https://qiita-image-store.s3.amazonaws.com/0/301050/61e639c3-a1ec-2121-fb25-9c8c288c0970.gif)


# 本日はここまで
次回は実際にじゃんけんをして勝敗を決めるところまでやりたいと思います！