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

folder_openAppSheet

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

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

Switch to the legacy editor」で旧エディタに切り替える。

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

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

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

Googleドライブにエクセルのデータをアップロードしましょう。

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

エクセルデータを、Googleスプレッドシートに変換して保存しておきます。

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

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

2. AppSheetアプリを生成する

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

AppSheetにログインします。

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

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

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

AppSheetアプリの設定をします。

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

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

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

AppSheetアプリが生成されます。

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

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

AppSheetメニューからテーブルを表示する。

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

AppSheetの列を表示する。

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

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

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

AppSheetの列を設定する。

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

スプレッドシートのレコードを識別する。

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

NAME TYPE KEY LABEL
_RowNumber Number
ID Text チェック
用途 Enum
名刺のタイトル Text
Text
姓(フリガナ) Text
Text
名(フリガナ) Text
フルネーム Text チェック
会社名 Text
電話(勤務先) Phone
電話(仕事携帯番号) Phone
電話(私用携帯番号) Phone
メール(勤務先) Email
メール Email
勤務先郵便番号 Text
勤務先住所(都道府県) Text
勤務先住所(市区町村) Text
勤務先住所(番地以降) Text
自宅郵便番号 Text
自宅住所(都道府県) Text
自宅住所(市区町村) Text
自宅住所(番地以降) Text
URL Url
QRコード Image

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

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

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

ID

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

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

のように設定されます。

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

KEYレコードを識別する列に設定する。

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

「ID」列にはランダムな値が入る。

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

UNIQUEID関数設定した列に重複がないランダムな値を記録する。

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

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

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

LABELレコードを代表する列に設定する。

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

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

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

AppSheetの列設定では「ID」列のSHOW ? のチェックを外す

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

AppSheetの列設定で「ID」列の SHOW ? のチェックを外すとアラート(警告)が表示される。

用途

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

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

AppSheetの列を編集する。

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

AppSheetの列設定で「Enum」の値を設定する。

名刺のタイトル

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

AppSheetの列を編集する。

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

AppSheetの列設定で「Description」を設定する。

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

AppSheetの列設定でExpression Assistant を設定する。

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

AppSheetアプリで確認する。

QRコード

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

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

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

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

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

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

AppSheetのスライスを作成する。

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

AppSheetのスライスを設定する。

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

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

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

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

Share Me!

前の投稿
AppSheet で電子名刺アプリ(第1回)連絡先をQRコードで表示しよう
次の投稿
AppSheetで電子名刺アプリ(第3回)電子名刺用のViewを作成する

関連記事

メニュー