演習1〜お弁当注文集計システム: まずは簡単な1シートのエクセルをアプリ化する
動画
以降で操作を画像と文字で説明していますが、まとめた動画を最初に貼っておきます
データの準備
Googleドライブでスプレッドシートを作ります。
![](https://london3.jp/wp-content/uploads/image-597.png)
スプレッドシート作業をします。
- アプリ名を決めます
- 管理する項目を決めます。
- データを格納するテーブル名を決めます。
実際のデータはまだいれなくてOKです。
![](https://london3.jp/wp-content/uploads/image-598.png)
アプリを作っていきます。
- App name アプリの名前を決めます
- Category 分類ですが、なんでもいいですが、Otherにしておきます
- そして Choose your data で先程作ったスプレッドシートを選択します。
![](https://london3.jp/wp-content/uploads/image-596.png)
先程作った、bento0315のスプレッドシートを選択しました。
![](https://london3.jp/wp-content/uploads/image-599.png)
アプリの具体的な設定を行っていきます。
![](https://london3.jp/wp-content/uploads/image-601.png)
Data ー Columns の設定を行います。 以下の項目を設定します。
- 日付 → 自動で 今の日付を入れます かつ 日付の 降順(新しい順)に並び替えます。
- 名前 → 必須項目にします
- 弁当名 → プルダウンで選択できる項目を登録します。
日付の項目を設定します。
TYPE を Datetimeに変更して、 初期値(INITIAL VALUE)を now() とします。←現在時刻が自動で入る。
![](https://london3.jp/wp-content/uploads/image-604.png)
日付のINITAIL VALUEを設定します。
![](https://london3.jp/wp-content/uploads/image-603.png)
now() を入力して SAVEします
![](https://london3.jp/wp-content/uploads/image-605.png)
INITIAL VALUEに =now() が登録されました。
![](https://london3.jp/wp-content/uploads/image-606.png)
名前
名前を必須項目にします。
REQUIREにチェックをします。
![](https://london3.jp/wp-content/uploads/image-607.png)
お弁当名を設定します。
ブルダウンから お弁当を選択できるようにします。
![](https://london3.jp/wp-content/uploads/image-608.png)
Input mode は Stackにしました。 (選択する項目の見た目が変わります)
![](https://london3.jp/wp-content/uploads/image-609.png)
設定が終わったら、 右上の Done をクリックします。
![](https://london3.jp/wp-content/uploads/image-610.png)
要所で、右上の SAVEボタンを押しておきましょう。
![](https://london3.jp/wp-content/uploads/image-611.png)
アプリの見た目を設定します
UX- Vewから設定します。
![](https://london3.jp/wp-content/uploads/image-612.png)
View type で表示の見た目が変わります。
また、Sort by で並び順を 日付の降順に設定しました。
![](https://london3.jp/wp-content/uploads/image-613.png)
下の方にいって、 Display で Iconや Display nameを登録しました。
![](https://london3.jp/wp-content/uploads/image-614.png)
最後に、 UX Brand で見た目を設定してきます。
Themeや logo その表示を設定しました。
![](https://london3.jp/wp-content/uploads/image-615.png)
プレビューモードでデータの登録を試してみます。
右側にプレビューで使えるアプリが表示されています。 +ボタンでデータを登録します。
![](https://london3.jp/wp-content/uploads/image-616.png)
![](https://london3.jp/wp-content/uploads/image-617.png)
3件ほどデータを登録してみました。
![](https://london3.jp/wp-content/uploads/image-618.png)
登録されたデータをスプレッドシートで確認します。
データが登録されました。
![](https://london3.jp/wp-content/uploads/image-619.png)
スマホのアプリで使える
Andoroid 、iPhone で Appsheetのアプリをダウンロードして試してみてください。
スマホから、データが登録でき、Googleスプレッドシートが更新できるようになりました。