AppSheetで電子名刺アプリ（第3回）電子名刺用のViewを作成する

電子名刺アプリを作りながら、AppSheetの使い方を学びましょう。
前回（第2回）はアプリを生成して、テーブル、列、スライスを設定しました。
今回はアプリの見た目を整える設定を進めていきましょう。
AppSheetに用意されているレイアウトのテンプレート（View）を選び、設定するだけで画面が完成します。

【お知らせ】
2022年10月以降、AppSheetエディタの画面が新しく変更されています。
AppSheetのアップデートが速すぎて（汗）、このブログ記事はまだ新エディタの画面には対応していません。
エディタ画面右上にある「Switch to the legacy editor」というアイコンをクリックすると、新エディタと旧エディタの切り替えができます。
記事のアップデートができるまでは、とりあえず、旧エディタに切り替えて解説を読んでください。

1. 連絡先Viewを設定する

それでは、電子名刺アプリのViewを設定しましょう。
AppSheetエディタの左側メニューにある「UX」をクリック、タブメニュー「Views」をクリックします。

Primary Views には「連絡先」というViewが既に作成されていると思います。
「連絡先」をクリックして、View設定パネルを開きます。

ここでは「連絡先」Viewの設定を以下のように変更しました。
View type は「deck」または「Card」の「list」あたりがよいと思いますが、ここでは「deck」にしました。

ここで試しに１件、連絡先を追加してみてください。
「連絡先」をクリック → 「+」ボタンで連絡先追加フォームになります。
追加されるとこのような感じになると思います。

2. 電子名刺Viewを設定する

電子名刺を表示するための専用Viewを作っていきます。
前回（第2回）作っておいたスライスを使用します。

AppSheetエディタ左側のメニュー「UX」をクリック、「View」タブメニューをクリックします。
「New View」をクリックして新しいViewを作成します。

Viewの設定パネルが開きます。

Viewの設定は以下のようにしました。
Actionsを「Edit」にしていますが、「電子名刺 ( slice ) 」でUpdate mode を「Read-Only」にしているため、編集アイコンは表示されません。

これでAppSheetアプリで電子名刺のリストを表示するためのViewはできました。

3. AppSheetでQRコード表示するためのViewを設定する

続いて、電子名刺のQRコードを表示するためのViewを作成しましょう。
AppSheetエディタ画面右側のプレビュー画面を操作します。
タブメニューの「電子名刺」をクリックすると先ほど追加した連絡先が1件表示されます。
この連絡先をクリックします。

プレビュー画面の下に「View: 電子名刺_Detail」というリンクがあるので、クリックします。

「電子名刺_Detail」Viewの設定パネルが表示されます。
このViewを電子名刺のQRコードを表示するためのViewとして使います。

Column Order の「Add」をクリックして「QRコード」にします。
Display modeを「Centered」にします。
他は追加したり変更する必要はありません。
忘れずに右上「Save」をクリックして保存しましょう。

以上、アプリの見た目（View）を設定しました。
アプリとしてはデータの追加、更新、削除など基本的な操作はできるようになりました。

次回（第4回）は、アプリを使いやすくするための設定を進めていきます。