電子名刺アプリを作りながら、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」にしました。
設定項目 | 値 |
---|---|
View type | 「deck」 |
View Options | |
Group by | 「Add」→「用途」, Ascending |
Group aggregate | 「COUNT」 |
Main Image | **none** |
Primary header | 「名刺のタイトル」 |
Secondary header | 「フルネーム」 |
Actions | 「Edit」 |
Display | |
Icon | 「at」 |
ここで試しに1件、連絡先を追加してみてください。
「連絡先」をクリック → 「+」ボタンで連絡先追加フォームになります。
追加されるとこのような感じになると思います。
2. 電子名刺Viewを設定する
電子名刺を表示するための専用Viewを作っていきます。
前回(第2回)作っておいたスライスを使用します。
AppSheetエディタ左側のメニュー「UX」をクリック、「View」タブメニューをクリックします。
「New View」をクリックして新しいViewを作成します。
Viewの設定パネルが開きます。
Viewの設定は以下のようにしました。
Actionsを「Edit」にしていますが、「電子名刺 ( slice ) 」でUpdate mode を「Read-Only」にしているため、編集アイコンは表示されません。
設定項目 | 値 |
---|---|
View name | 「電子名刺」 |
For this data | 「電子名刺 ( slice ) 」 |
View type | 「deck」 |
Position | 「left most」 |
View Options | |
Group by | 「Add」→「用途」, Ascending |
Group aggregate | 「COUNT」 |
Main Image | **none** |
Primary header | 「名刺のタイトル」 |
Secondary header | 「フルネーム」 |
Actions | 「Edit」 |
Display | |
Icon | 「address-card」 |
これで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回)は、アプリを使いやすくするための設定を進めていきます。
- 第1回 連絡先をQRコードで表示しよう
- 第2回 スプレッドシートからアプリを作成する
- 第3回 電子名刺用のViewを作成する
- 第4回 「SHOW ?」で列の表示を切り替える
- 第5回 VCard形式のQRコードを生成する