スケジュール管理アプリ　～その１～

# はじめに
ノーコードはどのようなものか、興味があったのでAppsheetを使用してMTG参加有無スケジュールアプリを開発をしてみました。

## 環境
windows 10
googleアカウント
Appsheet (google cloud serviceの一つで機械学習も可能)

## 環境を整える
googleアカウントを作成する。※すでにお持ちの方は不要です。

~~~
https://support.google.com/accounts/answer/27441?hl=ja
~~~

Appsheetを設定する。

~~~
https://www.appsheet.com/
~~~

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444928/e5ad6f8e-0108-6737-62dc-5ae41dcc4b02.png)

無料で始めるを押下。チュートリアルがはじまるので対応する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444928/d2c6e6f9-58c6-cd01-1dd2-b2388a1638e9.png)

アプリの開発を行うためのスプレッドシートを準備する。
今回は以下のように準備する。

シート１
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444928/7b4af88c-0a16-1f50-c054-397892adce5b.png)

シート２
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444928/aa659453-5a52-8f62-eb50-ea155c26ff73.png)

スプレッドシートを作成したら、準備は以上になります。

## 実装
### 独自のデータから始めるを押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444928/cad0cc96-2733-8378-dfd4-b7e898701c53.png)

### 独自のデータから始めるを押下
アプリ名とカテゴリーを入力

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444928/59744b2f-0472-8772-b7b9-cbc994766677.png)

### データを選択してくださいを押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444928/14374e74-9a4c-04df-6e5f-a49ee43216bc.png)

準備タスクにて作成したスプレッシートを選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444928/afa42909-7dfc-ded0-282c-2040feea16d4.png)

Start customizeingを押下する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444928/269174ee-a312-b04c-51b2-1725b785d4d1.png)

この時点で画面が作成されます。

次に左側のタブでData＞Columsを選択します。そのあと赤枠の筆を押下します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444928/195f7b18-9689-83f8-e875-b0764d5ff2fd.png)

カラムの設定を行います。TypeをEnumにします。TypeDetailsのValuesを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444928/cbe32dde-d934-9cab-5dad-1f5f44118c4d.png)

DisplayのDisplayNameを変更してアプリケーションに項目を表示させます。Doneを押下したら完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444928/9df5eb9c-6f99-9f35-406c-75386bf39cde.png)

変更を反映させるためにRegenerateStructureを押下。同じ場所にAre you Sureボタンが出てくるので押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444928/4d0f8f9e-d828-4e4f-eff1-b2edf55f84a8.png)

右側のアプリケーションから＋マークを押下する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444928/0dbb2176-40a5-c251-986c-a7c001053421.png)


アプリケーションに反映されていることが確認できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444928/b87bfd67-cad1-c9eb-12fe-303aef9860dc.png)

先ほどの工程を繰り返し行い、設定する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444928/4157787a-3ae6-17e1-47c8-3b5388e81baa.png)

これで追加画面の完成になります。適宜入力していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444928/a654dfcc-1f6c-b482-7c1a-17c771c3bb30.png)


UIを変更したい場合は以下を設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444928/8424c7d9-561e-f969-6fa4-ecc06e1bde30.png)

一番上のTitle goes hereを選択すると、右側の赤枠に表示されている内容がプルダウン形式にて表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444928/423bec17-560f-d174-cd60-cbfb92a007c0.png)

これを今回はHeader goes here 以外をNoneにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444928/299643d1-77e5-2be4-6a0d-04eb84f3eff0.png)


上記の山田タブをクリックすると追加した内容が表示され、編集を行うことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444928/facfebb5-edc8-31f7-4459-f7abea062165.png)


この入力したデータはどこに保管されるかというと、一番最初に作成したスプレッドシートのシート１に保管されます。
このようにスプレッドシートでDBと同じ役割を果たすことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444928/83c27120-dc19-5e4d-2cda-9446cff71653.png)


## まとめ
・表示されるViewの設定は他にもいっぱいあるので、使用してみるのも面白そうです。
・コーディングのスキルを持っていなくても、誰でもアプリケーション開発が行えるので、低コストだなと思いました。

## 課題
・人数の集計機能を作成中ですが、警告で怒られているので、動くように精査していきたいと思います。