AppSheetで簡単アプリ開発 ～vol3. 日報アプリを作る（データ準備編）

# はじめに

こんにちは、京セラコミュニケーションシステム　西田（@kccs_hiromi-nishida）です。
vol.2ではAppSheetに用意されているサンプルを使ってアプリを簡単に作る方法を紹介しました。

vol.3となる今回は、ついに自分でアプリを作ってみよう！という記事になります。
まずはデータの準備から紹介しますので、ぜひ最後までご覧ください。

:::note warn
本記事は2024年1月ごろに作成しております。よって、引用している文章などはこの時点での最新となります。ご了承ください。
また、特別な記載のない限り、画像はGoogle AppSheet画面をキャプチャしたものとなります。
:::

## 連載記事一覧
[AppSheetで簡単アプリ開発 ～vol1. AppSheetって何ができる？](https://qiita.com/kccs_hiromi-nishida/items/2f060675dbe59cab51be "AppSheetで簡単アプリ開発 ～vol1. AppSheetって何ができる？")
[AppSheetで簡単アプリ開発 ～vol2. サンプルを使って作ってみよう！](https://qiita.com/kccs_hiromi-nishida/items/159830c9a1289708e08a "AppSheetで簡単アプリ開発 ～vol2. サンプルを使って作ってみよう！")
AppSheetで簡単アプリ開発 ～vol3. 日報アプリを作る（データ準備編）　<font color="Tomato">★本記事★</font>
[AppSheetで簡単アプリ開発 ～vol4. 日報アプリを作る（ビュー編）](https://qiita.com/kccs_hiromi-nishida/items/b077c980662753fcc6dc "AppSheetで簡単アプリ開発 ～vol4. 日報アプリを作る（ビュー編）")
[AppSheetで簡単アプリ開発 ～vol5. 日報アプリを作る（Automation編）](https://qiita.com/kccs_hiromi-nishida/items/d94b7c400edf2f28acb1 "AppSheetで簡単アプリ開発 ～vol5. 日報アプリを作る（Automation編）")


## この記事の対象者

* AppSheetに興味のある方
* AppSheetでアプリを作ってみたい方


## 今回作るアプリの概要

今回は作業日報アプリを作ってみたいと思います。
日報をAppSheetアプリから入力し、カレンダーに入力内容をリンクさせます。
また、日報を入力したらメールを責任者に送信する機能も追加します！

モバイルアプリ（iOS用、Android用）とブラウザアプリの双方に対応したアプリが作成できるので、PCからでもスマートフォンからでも使えるので便利です。
ぜひ作成にチャレンジしてみてください！


## データソースの準備をしよう

今回はデータソースとしてスプレッドシートを準備します。
スプレッドシートを開き、画像のような項目を持つシートを作成してみました。
（製造業の作業日報のようなものをイメージ）

スプレッドシートのシート名が後ほど出てくるテーブル名になるため、今回シート名は`日報`と変更しておいてください。

<img width="600" alt="スプレッドシート" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/d3addd8f-ac7a-ed3b-27b5-2df319787b99.png">

<font color="DarkGray">_Google スプレッドシート_</font>


## データからアプリを作成

データが準備できたら、データからアプリを作成します。

スプレッドシートのメニューから、拡張機能 → AppSheet → `アプリを作成`を選択。

<img width="600" alt="スプレッドシート" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/1f2fc89d-7cda-777c-463f-36183a4e2af8.png">

<font color="DarkGray">_Google スプレッドシート_</font>

AppSheet画面に自動遷移し、しばらくすると以下の画面が表示されアプリの作成準備が整ったことがわかります。

<img width="600" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/2b14d035-585b-28c3-9354-314113e9a7b6.png">

この時点ですでにアプリとしての基本形は自動で作成されています。
この画面上でアプリを操作することが可能です。

`＋`マークを押すと、日報の入力画面に遷移し、実際に入力して保存することも可能です。

<img width="200" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/47e1192a-41a8-8982-f1f7-d3247b434281.png">

ただし、この時点では項目の型や必須項目の設定などは自動定義されたものなので、正しい項目定義とはいえないこともあります。
（たとえばこの画面だと、使用機械が金額になってしまっていますね）

画面下部の`Customize with AppSheet`を選択して、まずはこのデータ周りをカスタマイズします！


## データをカスタマイズする

ではさっそくデータのカスタマイズをしましょう。
今回行うカスタマイズは以下の3点です！

* 項目の型変更
* 初期値の設定
* 必須項目の設定


### 項目の型変更

スプレッドシートから自動作成された項目の型は正確ではないことがあるので、正しい型に変更します。

まず、画面左の`Data`アイコンを選択します。

<img width="500" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/10887246-9aa7-71a2-ddb3-5c3e87edbad3.png">

先ほど作成したスプレッドシートの項目を持つテーブルが自動作成されています。

使用機械の`TYPE`が`Price`になっているのでプルダウンを選択し、`Text`に変更したら画面右上の`Save`ボタンを選択してください。
これで型変更は完了です。

<img width="500" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/891940e3-796b-b4e8-6a5b-27a21835d0b5.png">

変更が反映されているかは、プレビュー画面で確認できます。
画面右横に表示されているプレビュー画面で`＋`を選択し、入力画面を表示します。

使用機械の欄がきちんとテキストボックスになっていて、変更が反映されていることがわかります。

<img width="400" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/46de26e9-9148-5dde-4b21-8461fadd1585.png">　<img width="175" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/2010255f-87b3-26db-eb7a-e4dbd0a9c5e6.png">

同じようにID項目も`Number`から`Text`に変更しておいてください。


### 初期値の設定

次に初期値の設定をします。
初期値は新規で日報の報告画面を開いたときに、あらかじめ設定した値を表示させておきたいときに使用します。

今回は、IDと報告者の2項目に初期値を設定します。
※ちなみにIDは日報テーブルのKEYとなる項目で必ず一意の値を持つ必須項目です。

では、まずIDに対して初期値を設定しましょう。

ID行の`INITIAL VALUE`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/4405ef24-af19-eb67-272d-0fe906e6b138.png)

式を入力する欄に、`UNIQUEID()`と入力し、`Save`を選択。
※UNIQUEID()は自動的に乱数の値が生成される式で、KEYとなる項目には設定をオススメします（KEY項目は値の重複がないようにしないといけないため）

<img width="400" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/eccb7daa-cfc5-e476-add3-da9ece9ec515.png">

ID項目に関してはユーザに見える必要がない項目なので、非表示の設定も併せて実施しておきます。
`LABEL?`と`SHOW?`のチェックを`OFFにしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/b2467b41-b707-8208-557d-f6aa31cac807.png)

プレビューでIDが非表示になっていることが確認できます。
<img width="200" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/8990c2ce-d7d7-8b49-bda6-4040e9a5c6f2.png">

次に報告者欄にログインしているユーザのメールアドレスを初期値として表示する設定を追加します。
先ほどと同じ手順で報告者行の`INITIAL VALUE`を選択し、式を入力する欄に`USEREMAIL()`と入力、`Save`を選択。

<img width="400" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/96377989-1780-9386-fa48-e6230b507ddb.png">

プレビューで報告者欄にメールアドレスが表示されていることが確認できます。
<img width="200" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/8f41b3a3-54ec-171a-bf92-770e8c19e1b7.png">

確認が終わったら、画面右上の`Save`ボタンを忘れずに選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/0481274a-afc9-9d96-36a4-0e9db6dbe67f.png)


### 必須項目の設定

必須項目の設定を行うと項目名の横にアスタリスクが表示され、未入力状態で`Save`すると必須チェックを実行し、エラーメッセージ表示まで自動で行われます。

設定は非常に簡単で、必須項目にしたい項目の`REQUIRE?`のチェックをONにするだけです。

<img width="500" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/fcaae3f2-74af-cb2a-f469-a05a7d59a466.png">

プレビュー画面で必須項目を未入力のまま`Save`を選択すると、きちんと必須チェックエラーになっていますね！（英語のメッセージになってますが、これは次回記事で変更します）

<img width="200" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/b186cb9e-8752-2261-c6e9-d1502d85df91.png">

確認が終わったら、画面右上の`Save`ボタンを忘れずに選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/0481274a-afc9-9d96-36a4-0e9db6dbe67f.png)


### その他の設定に関して

他にもいろんな設定を行うことができますので、簡単に解説します。
色々変更してみてくださいね！
※変更後は、画面右上の`Save`ボタンの選択を忘れずに。

<dl>
  <dt>SHOW?</dt>
  <dd>チェックONで画面に表示、OFFで画面から非表示</dd>
  <dt>EDITABLE?</dt>
  <dd>チェックONで編集可、OFFで編集不可</dd>
  <dt>DISPLAY NAME</dt>
  <dd>設定すると、詳細画面を表示したときの項目名が設定した名称になる<br>
  例えばデータソースの項目名は英語で定義し、アプリ上は日本語で表示したい時に設定</dd>
  <dt>DESCTIPTION</dt>
  <dd>設定すると、登録画面の項目名が設定した名称になる</dd>
  <dt>SEARCH?</dt>
  <dd>チェックONで検索対象項目となる</dd>
  <dt>SCAN? NFC? PII?</dt>
  <dd>チェックONで項目にマークが表示され、マークをタップすることでQRスキャナやNFCが作動する（対応機種のみ）</dd>
</dl>


# 次回予告

今回はデータの準備編ということで、アプリの基盤となるデータソースの作成とカスタマイズを行いました。
次回の記事は、アプリの顔ともいえるView画面をカスタマイズする方法を紹介するので、引き続き見ていただけると嬉しいです！


# おしらせ

弊社X（旧：Twitter）では、Qiita投稿に関する情報や各種セミナー情報をお届けしております。情報収集や学びの場を求める皆さん！ぜひフォローしていただき、最新情報を手に入れてください:grinning:

https://x.com/kccs_digital