AppSheetで簡単アプリ開発 ～vol4. 日報アプリを作る（ビュー編）

# はじめに

こんにちは、京セラコミュニケーションシステム　西田（@kccs_hiromi-nishida）です。

vol.4となる今回は、アプリの顔部分ともいえるビュー部分をカスタマイズします！
これでグッと使いやすいアプリに近づくと思うので、ぜひお試しください。

:::note warn
本記事は2024年2月ごろに作成しております。よって、引用している文章などはこの時点での最新となります。ご了承ください。
また、特別な記載のない限り、画像は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. 日報アプリを作る（データ準備編）](https://qiita.com/kccs_hiromi-nishida/items/47326eef894558362481 "AppSheetで簡単アプリ開発 ～vol3. 日報アプリを作る（データ準備編）")
AppSheetで簡単アプリ開発 ～vol4. 日報アプリを作る（ビュー編）　<font color="Tomato">★本記事★</font>
[AppSheetで簡単アプリ開発 ～vol5. 日報アプリを作る（Automation編）](https://qiita.com/kccs_hiromi-nishida/items/d94b7c400edf2f28acb1 "AppSheetで簡単アプリ開発 ～vol5. 日報アプリを作る（Automation編）")


## この記事の対象者

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

## ビューってなに？

今回の記事ではビュー部分のカスタマイズを行いますが、そもそもビューとは何でしょうか。

ビューとは、前回の記事で作成したデータの表示方法を設定する機能です。
ビューの設定画面は画面左側の赤丸箇所のアイコンを選択すると表示されます。

<img width="400" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/3cb670d2-5177-e030-b332-e947ef9e36b7.png">


## ビューの種類

記事執筆時点でビューの種類は11種類あります。
特徴を見ていきたいと思います。（サンプル画像は選択すると拡大表示されます）

| 種類       | 説明 | サンプル画像 |
|:-----------|:------------|:------------:|
| calendar   | カレンダー形式で表示します。<BR>日・週・月表示が可能で、Googleカレンダーとの<BR>連携も可能です。| <img width="80" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/e8eb416c-58b8-33b0-5a94-3d9b663903b9.png">         |
| deck     | デッキ形式で表示します。<br>画像があればそのサムネイル画像と文字情報を<br>あわせて表示できます。|<img width="80" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/74b94bb8-c824-a9a6-609c-bd2c60f4167d.png">|
| table       |テーブル形式で表示します。<br>スプレッドシートやExcelのような見た目の表示が<br>可能です。beta機能ではありますが、<br>tableビュー上でデータを直接編集も可能です。| <img width="80" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/1f7a460e-d1f6-0b43-c7e2-db026e18776d.png">|
| gallery         |ギャラリー形式で表示します。<br>写真がメインの場合に最適なViewです。|<img width="80" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/640d6426-8d71-a004-8ec4-86b869ed71c3.png">|
| detail       |詳細形式で表示します。<br>投稿内容を確認するような画面に適しています。|<img width="80" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/ba0dbc29-3a44-039a-af63-31bd977139d8.png">|
| map    | 地図形式で表示します。<br>車のアイコンを選択するとGoogle Mapsが別タブで<br>表示され、現在地からの経路を確認できます。|<img width="80" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/3a23a77c-58b9-57d2-f5e9-cedd175ae43f.png">|
| chart    |グラフ形式で表示します。<br>グラフの種類は13種類用意されています。<br>※記事執筆時点(2024年2月)|<img width="80" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/a8a0b803-209b-a5e8-741a-7da84150bbfa.png">|
| dashboard    |ダッシュボード形式で表示します。<br>複数の要素を組み合わせた表示が可能です。|<img width="80" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/0abbb337-51bb-9531-4b87-b9db491cc83e.png">|
| form    |フォーム形式で表示します。<br>データの入力、編集時に使用するViewです。|<img width="80" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/98fec0f8-8127-cb2b-2394-40f98dad2a9a.png">|
| onboarding    |画面全体にデータを表示し、Nextを選択すると<br>次のデータに移動します。カタログのような<br>Viewです。|<img width="80" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/9f826737-12c0-5410-12e6-bab96035c3dd.png">|
| card    |カード形式で表示します。<br>カードの種類も4種類から選択できます。|<img width="80" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/9f40cafa-4400-9bce-c7fc-95387aaa5c2b.png">|

## カレンダービューを追加する

現在はこのように、`日報`という1つのViewしかありません。
<img width="200" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/62fb87d0-c8fa-7481-4dac-a817bd9e7830.png">

では、今作成しているアプリにカレンダービューを追加します。

### Viewの追加

まず、`PRIMARY NAVIGATION`の横の`＋`マークを選択します。
<img width="200" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/defa5867-56bd-7adf-8a63-75028021eb53.png">

表示された画面の`Create a new view`を選択。
<img width="400" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/70a0ffb4-9db3-86d2-7880-d62384b97fa5.png">

新しいViewが作成されました。
<img width="400" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/ad9cb69b-3c34-879e-4df9-9c430a2f60f8.png">

### カレンダーViewの設定

作成したViewをカレンダーViewにします。

まずはView nameを`カレンダー`に変更し、View typeを`calendar`にしてください。
<img width="400" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/a2f5c721-3cd6-7b77-36ad-a64e2ac66760.png">

これでカレンダーViewへの変更が行われました。
<img width="200" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/51269a5e-72d0-d616-7c86-f0e3d7a969c0.png">

次に、カレンダー上に登録された日報の製造番号を表示したいと思います。
`View Options`の`Start date`と`End date`にそれぞれ`日付`を選択してください。

そして、`Description`にはカレンダーに表示するイベント名となる項目を選択します。
今回は`製造番号`を選択することにします。

<img width="400" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/9c9fb881-73ec-985e-3dcc-847230ef05e6.png">

アプリのプレビュー画面を確認すると、カレンダーに製造番号の表示が追加されていることがわかります。
製造番号を選択→日単位のカレンダーに遷移→製造番号を選択→日報詳細画面へ遷移、という流れになります。
<img width="200" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/92c72474-31f4-3438-6d01-9ec78d64d3f1.png">　<img width="200" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/29cdceb0-3b6d-b5eb-17be-50046ab444cd.png">　<img width="200" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/f65e4d58-b111-8817-0afb-a1b539e90474.png">

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

アプリ内のOK・NGなど汎用的な項目は日本語にしたほうがわかりやすいですよね。
このやり方に関しては、vol.2の記事にて紹介しているので、やってみてください。

https://qiita.com/kccs_hiromi-nishida/items/159830c9a1289708e08a#%E6%B1%8E%E7%94%A8%E7%9A%84%E3%81%AA%E9%A0%85%E7%9B%AE%E3%81%AE%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%8C%96

今回私は、以下を変更してみました。

* Save　→　保存
* Cancel →　キャンセル
* This entry is required　→　必須項目です

## おまけ

最後におまけとして、アプリのテーマを変更してみましょう。

画面左の歯車アイコン→`Theme & Brand`を選択します。

<img width="200" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/5641809e-54c4-20fb-a3da-23c243552614.png">

`Primary color`で好きな色を選択、または色の作成も可能です。
選択するとアプリの基本色が変更されます。

また、`Header & Footer`の`Style`を変更すると、この画像のプレビュー画面のようにヘッダーとフッターが選択した色になります。

<img width="400" alt="AppSheet" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/62d25a82-d15c-c425-3d5a-ebff2891b574.png">

色が変わるだけでも結構印象が変わりますよね？

このページではアプリのロゴを変更したり、フォントを変更したりできるので、色々触ってみてください。

# 次回予告

最終回ではワークフローの作り方紹介したいと思います！
日報が登録されたら、指定した人に登録されたことを知らせる仕組みを作成します。
お楽しみに！

# おしらせ

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

https://x.com/kccs_digital