PowerAppsでお絵かきアプリを作成する　ペン入力×SharePoint List

## アプリの内容
ペン入力でお絵かきをし、お絵かきをした画像をSharePoint Listの添付ファイルに保存します。
SharePoint Listに保存されている添付ファイルをギャラリーに表示するようにします。
![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462497/268bb55f-dbce-02da-238f-764dccf73628.gif)


## 画像を表示する画面を作成する
SharePointに絵を保存する用のリストを作成する。
SharePointから新規でリストを作成しておきます。

### お絵かきパーツ、タイトルを入力する画面を作成する
挿入タブからパーツを好きな位置に配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462497/d3175e14-a109-b59d-91f8-0af6ac177d40.png)


SharePointのリストの保存したいので、フォームを使っていきます。
([こちらの記事](https://qiita.com/igarashisan_t/items/01d023c8bdaab58da506)を参考にさせていただきました！)



### FormをSharePointListと紐付ける

編集フォームのパーツを配置し、細かい設定をしていきます。
データソースをさきほど作成したSharePointListを選択します。
フォームの入力画面が自動で作成されます。
不要な項目は、フィールドから削除を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462497/176947b5-30be-9a49-ed31-6fad88e93e6c.png)

新規作成なので、Formのプロパティの規定モードを新規に設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462497/ca891715-5944-58e5-99d7-ee1437f20494.png)

Formは入力する時に邪魔なので、サイズをちっちゃくして最背面に移動し、隠しておきます。

### コレクションの作成
コレクションに添付ファイル情報を載せて、それをフォームの添付ファイル項目にセットします。
   ボタンのOnSelectに下記のように記載
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462497/0eec83f0-50a2-ddf3-68ae-6e54a83138ce.png)

```
Collect(
    LocalImages,
    {
        DisplayName: ImageName.Text & ".png", // ファイル名を指定
        Image: PenInput.Image,　// ペン入力項目を指定
        Id: "1" // なぜか必要な項目
    }
);
```
これでボタンを押すとコレクションが作成されます。
保存された内容は、ファイルのコレクションで確認できます。

### コレクションとFormの紐付け
Formに先ほどのコレクションを紐付けます。
添付ファイル項目がありますので、Itemsに値を設定をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462497/809006e8-4057-bad4-67e4-baee800c1063.png)

Itemsは詳細設定にあります。
Itemsには、コレクションを紐付け、NameにDisplayName、ValueにImageを設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462497/7688a2c4-462a-03fa-ac5f-cb1c2dfc5035.png)

### ボタンを押した時の挙動を設定する
ボタンを押した時に、以下の挙動をするように設定します。

* SharePointに保存するようにする
* 次回入力用に入力項目やFormをリセットしておく
* 違う画面に遷移させる(後で作る画像一覧に遷移するように)
 
OnSelectに下記のように追記します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462497/90a6f479-3a3b-5cc5-cfdb-00ea8cdfedf5.png)

```
Collect(
    LocalImages,
    {
        DisplayName: ImageName.Text & ".png",
        Image: PenInput.Image,
        Id: "1"
    }
);
SubmitForm(DrawImageForm);
ResetForm(DrawImageForm);
Reset(PenInput);
Reset(ImageName);
Navigate([@ImageList])
```

### 画面表示時に、コレクションをクリアするようにしておく
コレクションは作成時はクリアさせておく必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462497/68e7dbe0-c159-5045-a461-43414c0cddc4.png)


## 書いた絵を一覧表示させる画面を作る
SharePointリストに格納された画像を一覧で表示させるのはギャラリーで表示させます。
（[こちらの記事](https://qiita.com/h-nagao/items/43b467cfdc5f7161755d)を参考にさせていただきました！）
### ギャラリーでSharePointリストの添付ファイル画像を表示させるようにする
画面にギャラリーを配置しデータソースは、SharePointリストを設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462497/0e9528d2-1cde-b833-a6b4-b180c4003ffb.png)

ギャラリーのImageに添付ファイルを表示させるようにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462497/1765b0e4-3cf5-cff9-d8ef-10cf921ff2d2.png)

添付ファイルはテーブル(配列？)ようになっているので、Firstで囲って最初のレコードを取得するようにしておきます。

```
First(ThisItem.添付ファイル).Value
```
### 画像を作成日が新しい順にソートする

作成日順でソートするには、SharePointリストに作成日を表す項目を追加し、
ギャラリーのItemsを下記のように変更します。

```
Sort(DrawAppList,CreateDate,Descending)
```

## つまったところ
フォームのItems設定
Name,Valueが正しく設定されてないと保存できませんでした；；


## 最後
PowerAppsで簡単すぎず、みんなで遊べるアプリを使いたくてつくってみました。