AppSheetで電子名刺アプリ（第2回）スプレッドシートからアプリを作成

電子名刺アプリを作りながら、AppSheetの使い方を学びましょう。
前回（第1回）は電子名刺アプリの概要について紹介しました。
今回は、実際にアプリを作成してみましょう。

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

1. スプレッドシートをアップロードする

それでは、AppSheetで電子名刺アプリを作成していきましょう。
AppSheetアプリにはエクセルやGoogleスプレッドシートなどのデータが必要です。
電子名刺アプリのサンプルデータとしてエクセルのデータを用意しましたので、下のエクセルアイコンをクリックしてデータをダウンロードしてください。

Googleアカウントにログインして、Googleドライブにエクセルのデータをアップロードしましょう。

Googleドライブ上でエクセルデータを開いた後、Googleスプレッドシートに変換して保存しておきます。

Googleスプレッドシートに変換して保存しました。

2. AppSheetアプリを生成する

AppSheetにログインして、「Make a new app」をクリックします。

「Start with your own data」をクリックします。

App name（アプリ名）には日本語が入力できないので、とりあえず「eBusinessCard」にします。
Category（カテゴリー）は選択しなくてもよいです。

Choose your data（ファイルを選択）でさきほど保存したGoogleスプレッドシート（連絡先）を選択して「select」をクリックします。

これでAppSheetアプリが生成できました。
画面右にプレビューが表示されます。

3. 電子名刺アプリのテーブルを確認する

AppSheetエディタの左側メニューにある「Data」をクリックして、データを確認しましょう。
タブメニュー「Tables」をクリックするとテーブルが表示されます。
テーブルとは、アプリからデータを追加したり、更新したり、削除できるデータの格納庫です。
「連絡先」というテーブルをクリックしてみましょう。

「View Source」をクリックすると先ほどアプリに取り込んだスプレッドシートが表示されます。
「連絡先」というワークシートがあり、テーブル名になっています。
今回使用するスプレッドシートはワークシートが1つだけなので、テーブルは「連絡先」だけで大丈夫です。

テーブルの設定は特に必要ないので、次に進みましょう。

4. 「連絡先」テーブルの列を設定する

続けて、AppSheetエディタのタブメニュー「Columns」または、テーブルパネルの「View Columns」をクリックしましょう。
「連絡先」テーブルの「列（Columns）」が一覧で表示されます。

列には、アプリから追加した各項目のデータの値（文字、数字、日付、時間など）が保存されます。
アプリから追加したデータは、スプレッドシートでは1行ずつ記録されていきます。
この1行のデータを「レコード」と呼びます。

それでは、列を設定してきましょう。
下の表のように、各列のフィールドを設定してください。

列の設定ができたら、画面右上の「SAVE」をクリックして保存してください。

AppSheetには自動的に保存する機能がありません！
設定を変更したら必ず「SAVE」で保存することを忘れずに。

つづいて、列の設定について補足説明をしておきます。

ID

「ID」列はサンプルのスプレッドシート（連絡先）のA1にあらかじめ設定しておきました。
AppSheetではスプレッドシートの1行目 （カラムヘッダーといいます）に「ID」を入れておくと、自動的に認識して設定してくれます。
AppSheetのID列は

• TYPE：「Text」
• KEY：「チェック」
• LABEL：「チェック」
• INITIAL VALUE：「UNIQUEID()」

のように設定されます。

AppSheetは「ID」列をKEYとして設定します。
KEYはレコードを識別する列に設定する必要があります。

「ID」列には、INITIAL VALUE（初期値）に「UNIQUEID()」という関数が設定されます。
この関数を設定した列には、重複がないランダムな値が記録されます。

「UNIQUEID()」を設定した列によってレコードの識別が可能になるので、その列をKEYとして使用できるようになります。

電子名刺アプリでは「ID」列に以下の設定を追加します。

• LABEL：チェックを外す。
• SHOW ?：チェックを外す。

LABELを設定した列はViewで表示に使用したり、他のテーブルからリスト表示に使われたりします。
なので、LABELはレコードを代表する列に設定します。

「代表する」という意味が分かりにくいですね。
電子名刺アプリでは「フルネーム」列をLABELに設定しています。
名刺情報で一番重要なのは名前（フルネーム）ですから、「フルネーム」が代表的な列になります。

テーブルには「名前系」の列が1つあることが多いと思います。
例えば、顧客の名前、従業員の名前、商品の名前、案件名などです。
このような名前系の列をLABELとして設定するのが無難です。

最後に、「ID」列はランダムな英数字なので、アプリ上に表示されてもあまり意味がありません。
なので、「SHOW ?」のチェックを外して非表示にします。

右上の「SAVE」をクリックして保存すると、下のようなアラート（警告）が表示されますが無視して大丈夫です。
「ID列を非表示にすると検索ができませんよ」ということで、AppSheetが自動的に SEARCH ? のチェックも外してくれるので問題ありません。

用途

電子名刺を仕事とプライベートで使い分けできるようにしたいと思います。
「用途」列でそれができるようにします。

「用途」列はTYPEを「Enum」にしています。
「Enum」は、ボタンやプルダウンリストなどで値が選択できる列タイプです。
「用途」列 の左にあるペン型の編集アイコンをクリックすると、列の設定パネルが表示されます。

Type Details → Values で「Add」ボタンをクリックして、Valuesに「仕事」「プライベート」を追加しましょう。
Base Type は「Text」、Input mode は「Buttons」にしておきます。
設定が終わったら「Done」をクリックしてパネルを閉じて、右上の「Save」で保存します。

名刺のタイトル

「名刺のタイトル」列は「仕事用」「私用」など、名刺にタイトルをつけるために用意しています。
「名刺のタイトル」だと何を入力するのか分かりにくいので、「Description」を設定してみましょう。
「名刺のタイトル」列の左にある編集アイコンをクリックして、設定パネルを表示します。

Display → Description で 三角フラスコのアイコンをクリックします。

Expression Assistant が表示されます。以下のように入力して「Save」をクリックします。

アプリ上では以下のように表示されるので、何を入力すればよいのか分かりやすくなります。

QRコード

「QRコード」は、追加した連絡先の値からQRコードを生成して画像リンクを保存するための列です。
後ほど（第5回）で設定方法を解説します。とりあえず、ここではTYPEを「Image」にしておくだけで大丈夫です。

5. AppSheetで電子名刺を表示するためのスライスを作成する

次回（第3回）は、アプリの見た目（View）を設定します。
その時に、電子名刺を表示する専用のViewが必要になります。

電子名刺はQRコードで表示しますが、連絡先テーブルのデータを使用します。
よって、テーブルを新しく作る必要はありません。

ここでは、電子名刺表示用のスライスを作成します。
スライスは設定した条件に合致した列や、特定の列だけを抜き出して表示するために使用されます。
今回は「連絡先テーブルのデータから電子名刺を表示するため」に使用します。

左側のメニュー「Data」をクリック、タブメニュー「Slices」をクリックします。
「New Slice」をクリックして新しいスライスを作成します。

スライス設定パネルが表示されます。

スライスは以下のように設定します。
QRコードを表示するためだけのViewなので、Update mode を「Read-Only」にしておきます。
設定が完了したら、右上「Save」をクリックして保存するのを忘れずに。

設定項目	値
Slice Name	電子名刺
Source Table	連絡先
Update mode	「Read-Only」

以上、電子名刺アプリを生成してみました。
ここまでの設定でとりあえず連絡先を追加するための準備はできました。

次回（第3回）はアプリの見た目（View）を整える設定を行います。