はじめに
こんにちは、京セラコミュニケーションシステム 西田(@kccs_hiromi-nishida)です。
vol.1ではAppSheetの標準機能や料金について紹介しました。
vol.2となる今回は、サンプルを使ってアプリを作る方法を紹介します。
誰でも簡単にアプリ開発できるので、ぜひチャレンジしてみてください。
本記事は2023年12月ごろに作成しております。よって、引用している文章などはこの時点での最新となります。ご了承ください。
また、特別な記載のない限り、画像はGoogle AppSheet画面をキャプチャしたものとなります。
連載記事一覧
AppSheetで簡単アプリ開発 ~vol1. AppSheetって何ができる?
AppSheetで簡単アプリ開発 ~vol2. サンプルを使って作ってみよう! ★本記事★
AppSheetで簡単アプリ開発 ~vol3. 日報アプリを作る(データ準備編)
AppSheetで簡単アプリ開発 ~vol4. 日報アプリを作る(ビュー編)
AppSheetで簡単アプリ開発 ~vol5. 日報アプリを作る(Automation編)
この記事の対象者
- AppSheetに興味のある方
- AppSheetでアプリを作ってみたい方
どんなサンプルがあるか見てみよう
AppSheetにはどのようなサンプルがあるのかを見てみたところ、2023年12月現在で60以上のサンプルがありました。
この中から、2つのアプリを紹介します。
Task Manager
定番のタスク管理アプリ。
タスク登録画面では画像やファイル添付、繰り返しタスクの設定ができるので、項目名等を日本語にすればそのまま使えそうなアプリですよね。
![Google AppSheet](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2752159%2F56fcc50b-2a66-a2ab-8e37-2007f0f019c4.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=2a07d15000d84de0a117a153e162fbf9)
![Google AppSheet](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2752159%2Fc0694199-6f95-0b49-5c03-2833095cc258.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b6bbf4a45c4ac621e3885b6f9d73a965)
Journal
旅行やお出かけの記録ができるアプリ。
カレンダー表示もできるので、いつどこに出かけたかすぐに探し出せます。
個人的に作ってカスタマイズしてみたいアプリです。
(Google Maps表示を追加して、場所まで記録できるといいなと思いました)
![Google AppSheet](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2752159%2Fcc56ff71-3e57-12fe-0d4d-a5a27ade7c36.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b53023c8c9610614ad8fb4456ef0f8fe)
![Google AppSheet](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2752159%2Ff12d038e-02fb-00cd-6d3d-265d649ee4df.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=7958c4dfa6009ab433810396f12a0e03)
サンプルからアプリを開発してみよう
では、実際にサンプルを選んでアプリを開発する手順を紹介します。
今回作成するのはIncident Report
ですが、手順は同じなので作成してみたいサンプルを選んでいただいても構いません。
サンプルを選ぶ
以下のページにアクセスし、サンプルの一覧からIncident Report
のCopy
ボタンを選択します。
![Google AppSheet](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2752159%2Fcdcc60ee-3d0e-34ff-97c9-a94de9dc4af3.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=df96fa54258984ce500feb096eb4dac1)
Copyボタン押下後、サインインを求められる場合があります。
サインインするアカウントを選択し、サインインを行ってください。(Googleアカウントを利用するのが便利かと思います)
このような画面が表示されるので、Copy app
を選択してください。
![Google AppSheet](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2752159%2F92688f38-6512-5a9c-ea74-897937f09f42.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9f5f3ac813e2eeaa906e43233e91343e)
しばらく待つと、アプリが無事作成されました!
![Google AppSheet](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2752159%2F50409459-59a3-4948-f992-ecbe4e54734b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3bed0ef2c77b1670336d624600a618c8)
作ったアプリを動かしてみよう
画面右端にプレビュー画面が表示されているとおもいます。
このプレビュー画面で、自由に作ったアプリを操作できます。
操作するときはEdit
がONだと操作がしにくいので、OFFにしておくのがオススメです。
![Google AppSheet](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2752159%2Fee2bc4d0-f352-9689-cb39-984d182ffe52.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=1b44785b5f1812ce7aaf0093a432bd36)
New Report
を選択すると、新規報告を登録する画面が表示され、事故情報を入力できます。
現在地の地図が表示されているのもいいですね。
Save
を選択すると、一覧画面のDraft
に表示されます。
![Google AppSheet](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2752159%2Fd7b02a82-5bff-a7bc-4d9a-2a791b1fcbfc.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a35c3cf7dba2b5ba91376eff3d64fec3)
![Google AppSheet](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2752159%2F9e001b22-e79b-fcc2-07d9-0793a5970779.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=1339329acfc6b10842e8e1384cb116b1)
![Google AppSheet](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2752159%2F363e42ac-de72-5f7f-6453-6fd4c5736be1.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=25299cfd29e2d719b761f99f952cc70e)
Draftから対象の報告を選択し、Submitted
を選択すると、指定しておいた連絡先にメールで事故報告内容が送信されました。
事故報告のアプリとして、ひととおりの機能がそろっているものがわずか数クリックで作れるというのはすごい!と思っていただけたのではないでしょうか。
AppSheetでアプリを作成する際、1からすべて作る方法もありますが、自分が作成したい機能をすでに持っているサンプルを探し、設定方法を確認しカスタマイズしていく、というやり方は結構効率がいいと思います。
ちょっとしたカスタマイズをしてみよう
さすがに英語だと使いにくいかな?ということで項目名を日本語にしてみましょう。
簡単にできます!
では、事故報告の投稿画面を日本語にする手順を紹介します。
まず、アプリ画面左側にあるData
アイコンを選択してください。
アプリのデータベースが表示されるので、投稿画面のデータを管理しているReports
を選択します。
![Google AppSheet](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2752159%2F9d75a4df-df35-4aba-5f48-cd4ea18af608.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=68a94edc2932b0d2730dec5609c659b3)
次に日本語化したい項目の編集画面を表示します。
たとえばlocation
を日本語にしたい場合、location
項目の左側に表示されている鉛筆アイコン
を選択してください。
![Google AppSheet](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2752159%2Fae71502c-93a5-6f91-a7e5-5aea1905f8ea.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=69fe22e99b0ad3fe4d6015825db2ff56)
画面が開くので、下の方までスクロールしDisplay name
を選択。
元の画面に戻るので、画面右上に表示されているSAVE
ボタンを選択して保存します。
アプリがリロードされ、location
→位置
に表示が変わっていることが確認できます。
あとは同じように日本語化したい項目名に対して繰り返し同じ手順を実行すればOKです。
汎用的な項目の日本語化
アプリで汎用的に使われる項目(例:Cancel,Save,Addなど)も日本語化できます。
画面左のSettings
(歯車のアイコン)を選択してください。
次にLocalization
を選択し、今回はSave
を保存
、Cancel
をキャンセル
に変更し、右上のSave
ボタンを選択します。
![Google AppSheet](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2752159%2F7b8c5c86-227a-6f03-071f-d59abf8c4912.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=58d369457cead09cb06c6d292a78154a)
アプリがリロードされ、変更が反映されていることが確認できました。
次回予告
いかがでしたか?
サンプルを使用すると、基本的な機能が備わったアプリがほんの数分で作成できるということを体験していただけたかと思います。
次回はいよいよ1からアプリを作成していく記事を投稿予定ですので、引き続き見ていただけると嬉しいです。
おしらせ
弊社X(旧:Twitter)では、Qiita投稿に関する情報や各種セミナー情報をお届けしております。情報収集や学びの場を求める皆さん!ぜひフォローしていただき、最新情報を手に入れてください