AppSheetで簡単アプリ開発 ～vol2. サンプルを使って作ってみよう！

# はじめに

こんにちは、京セラコミュニケーションシステム　西田（@kccs_hiromi-nishida）です。
vol.1ではAppSheetの標準機能や料金について紹介しました。

vol.2となる今回は、サンプルを使ってアプリを作る方法を紹介します。
誰でも簡単にアプリ開発できるので、ぜひチャレンジしてみてください。

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

## 連載記事一覧
[AppSheetで簡単アプリ開発 ～vol1. AppSheetって何ができる？](https://qiita.com/kccs_hiromi-nishida/items/2f060675dbe59cab51be "AppSheetで簡単アプリ開発 ～vol1. AppSheetって何ができる？")
AppSheetで簡単アプリ開発 ～vol2. サンプルを使って作ってみよう！　<font color="Tomato">★本記事★</font>
[AppSheetで簡単アプリ開発 ～vol3. 日報アプリを作る（データ準備編）](https://qiita.com/kccs_hiromi-nishida/items/47326eef894558362481 "AppSheetで簡単アプリ開発 ～vol3. 日報アプリを作る（データ準備編）")
[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にはどのようなサンプルがあるのかを見てみたところ、2023年12月現在で60以上のサンプルがありました。

https://www.appsheet.com/Templates

この中から、2つのアプリを紹介します。

### Task Manager

定番のタスク管理アプリ。
タスク登録画面では画像やファイル添付、繰り返しタスクの設定ができるので、項目名等を日本語にすればそのまま使えそうなアプリですよね。

<img width="250" alt="Google AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/56fcc50b-2a66-a2ab-8e37-2007f0f019c4.png">
　<img width="250" alt="Google AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/c0694199-6f95-0b49-5c03-2833095cc258.png">

### Journal

旅行やお出かけの記録ができるアプリ。
カレンダー表示もできるので、いつどこに出かけたかすぐに探し出せます。
個人的に作ってカスタマイズしてみたいアプリです。
（Google Maps表示を追加して、場所まで記録できるといいなと思いました）

<img width="250" alt="Google AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/cc56ff71-3e57-12fe-0d4d-a5a27ade7c36.png">
　<img width="250" alt="Google AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/f12d038e-02fb-00cd-6d3d-265d649ee4df.png">

## サンプルからアプリを開発してみよう

では、実際にサンプルを選んでアプリを開発する手順を紹介します。
今回作成するのは`Incident Report`ですが、手順は同じなので作成してみたいサンプルを選んでいただいても構いません。

### サンプルを選ぶ

以下のページにアクセスし、サンプルの一覧から`Incident Report`の`Copy`ボタンを選択します。

https://www.appsheet.com/Templates

<img width="400" alt="Google AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/cdcc60ee-3d0e-34ff-97c9-a94de9dc4af3.png">

:::note info
Copyボタン押下後、サインインを求められる場合があります。
サインインするアカウントを選択し、サインインを行ってください。（Googleアカウントを利用するのが便利かと思います）
:::
このような画面が表示されるので、`Copy app`を選択してください。

<img width="400" alt="Google AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/92688f38-6512-5a9c-ea74-897937f09f42.png">

しばらく待つと、アプリが無事作成されました！

<img width="500" alt="Google AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/50409459-59a3-4948-f992-ecbe4e54734b.png">

### 作ったアプリを動かしてみよう

画面右端にプレビュー画面が表示されているとおもいます。
このプレビュー画面で、自由に作ったアプリを操作できます。

操作するときは`Edit`がONだと操作がしにくいので、OFFにしておくのがオススメです。

<img width="200" alt="Google AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/ee2bc4d0-f352-9689-cb39-984d182ffe52.png">

`New Report`を選択すると、新規報告を登録する画面が表示され、事故情報を入力できます。
現在地の地図が表示されているのもいいですね。
`Save`を選択すると、一覧画面の`Draft`に表示されます。

<img width="200" alt="Google AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/d7b02a82-5bff-a7bc-4d9a-2a791b1fcbfc.png">
　<img width="200" alt="Google AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/9e001b22-e79b-fcc2-07d9-0793a5970779.png">
　<img width="200" alt="Google AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/363e42ac-de72-5f7f-6453-6fd4c5736be1.png">

Draftから対象の報告を選択し、`Submitted`を選択すると、指定しておいた連絡先にメールで事故報告内容が送信されました。
<img width="600" alt="Google AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/414776e7-a343-0ab9-a9a2-6f48771a7664.png">

事故報告のアプリとして、ひととおりの機能がそろっているものがわずか数クリックで作れるというのはすごい！と思っていただけたのではないでしょうか。

AppSheetでアプリを作成する際、1からすべて作る方法もありますが、自分が作成したい機能をすでに持っているサンプルを探し、設定方法を確認しカスタマイズしていく、というやり方は結構効率がいいと思います。

### ちょっとしたカスタマイズをしてみよう

さすがに英語だと使いにくいかな？ということで項目名を日本語にしてみましょう。
簡単にできます！

では、事故報告の投稿画面を日本語にする手順を紹介します。

まず、アプリ画面左側にある`Data`アイコンを選択してください。
アプリのデータベースが表示されるので、投稿画面のデータを管理している`Reports`を選択します。

<img width="500" alt="Google AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/9d75a4df-df35-4aba-5f48-cd4ea18af608.png">

次に日本語化したい項目の編集画面を表示します。
たとえば`location`を日本語にしたい場合、`location`項目の左側に表示されている`鉛筆アイコン`を選択してください。

<img width="500" alt="Google AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/ae71502c-93a5-6f91-a7e5-5aea1905f8ea.png">

画面が開くので、下の方までスクロールし`Display name`を選択。
<img width="500" alt="Google AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/d1f37c48-2c6b-6300-cabc-3b477d9282cb.png">

日本語を入力し、`Save`を選択。
<img width="500" alt="Google AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/e18acfd1-6b3c-a7fb-66f3-0e115c7288ed.png">

画面上部の`Done`を選択。
<img width="500" alt="Google AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/049bb1cb-e6ff-f12f-d693-62c845c4f537.png">

元の画面に戻るので、画面右上に表示されている`SAVE`ボタンを選択して保存します。
<img width="500" alt="Google AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/055bdc60-08c0-106e-efc3-e56d55a6dee6.png">

アプリがリロードされ、`location`→`位置`に表示が変わっていることが確認できます。
<img width="500" alt="Google AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/60177a13-4b74-4b08-48f0-e9c1d200f3fc.png">

あとは同じように日本語化したい項目名に対して繰り返し同じ手順を実行すればOKです。

### 汎用的な項目の日本語化

アプリで汎用的に使われる項目（例：Cancel,Save,Addなど）も日本語化できます。
画面左の`Settings`（歯車のアイコン）を選択してください。

次に`Localization`を選択し、今回は`Save`を`保存`、`Cancel`を`キャンセル`に変更し、右上の`Save`ボタンを選択します。

<img width="500" alt="Google AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/7b8c5c86-227a-6f03-071f-d59abf8c4912.png">

アプリがリロードされ、変更が反映されていることが確認できました。
<img width="500" alt="Google AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/8442ffd9-0dd9-14dc-e867-6e895d59ea81.png">

## 次回予告

いかがでしたか？
サンプルを使用すると、基本的な機能が備わったアプリがほんの数分で作成できるということを体験していただけたかと思います。

次回はいよいよ1からアプリを作成していく記事を投稿予定ですので、引き続き見ていただけると嬉しいです。

## おしらせ

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

https://x.com/kccs_digital