· 

AppSheet 使い方 | 電子名刺アプリ(第2回)スプレッドシートからアプリを作成する

スプレッドシートから電子名刺アプリを作成する

 

このブログでは、サンプルアプリを通じてAppSheetの使い方を学びます。

 

前回(第1回)はアプリの概要について紹介しました。

今回は実際にアプリを生成するところまで進めていきます。

1. スプレッドシートを作成する

 

それではアプリを作成していきましょう。

AppSheetアプリにはエクセルやGoogleスプレッドシートなどのデータが必要です。

このブログでは、電子名刺アプリのサンプルデータとしてエクセルのデータを用意しました。

まずは、下のエクセルデータをダウンロードしてください。

 

ダウンロード
電子名刺アプリのサンプルデータ
連絡先.xlsx
Microsoft Excel 9.2 KB

 

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

 

Googleドライブにエクセルのデータをアップロードする。

 

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

 

エクセルデータをGoogleスプレッドシートに変換する。

 

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

 

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

2. アプリを生成する

 

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

 

AppSheetにログイン後、「Make a new app」をクリックする。

 

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

 

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

 

App name(アプリ名)には日本語が入力できないので、とりあえず「eBusinessCard」にします。

Category(カテゴリー)は選択しなくてもよいです。

 

「Create a new app」を設定する。

 

 

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

 

Googleスプレッドシートを選択する。

 

アプリが生成できました。

画面右にプレビューが表示すると下のようになります。

 

AppSheetプレビューにアプリが表示される。

3. テーブルを確認する

 

左側メニューにある「Data」をクリックして、データを確認しましょう。

タブメニュー「Tables」をクリックするとテーブルが表示されます。

テーブルとは、アプリからデータを追加したり、更新したり、削除できるデータの格納庫です。

「連絡先」というテーブルをクリックしてみましょう。

 

テーブルを表示する。

 

「View Source」をクリックするとアプリに取り込んだスプレッドシートが表示されます。

「連絡先」というワークシートがあり、テーブル名になっています。

今回使用するスプレッドシートはワークシートが1つだけなので、テーブルも「連絡先」だけで大丈夫です。

 

列を表示する。

 

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

 

4. 列を設定する

 

続けて、タブメニュー「Columns」または、テーブルパネルの「View Columns」をクリックしましょう。

「連絡先」テーブルの「列(Columns)」が一覧で表示されます。

 

列を設定する。

 

 

列には、アプリから追加した各項目のデータの値(文字、数字、日付、時間など)が保存されます。

アプリから追加したデータは、スプレッドシートでは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」で保存することを忘れずに。

 

「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 ?」のチェックを外して非表示にします。

 

「ID」列のSHOW ? のチェックを外す

 

右上の「SAVE」をクリックして保存すると、下のようなアラート(警告)が表示されますが無視して大丈夫です。

「ID列を非表示にすると検索ができませんよ」ということで、AppSheetが自動的に SEARCH ? のチェックも外してくれるので問題ありません。

 

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

用途

 

電子名刺を仕事とプライベートで使い分けできるようにしたいと思います。

「用途」列でそれができるようにします。

 

「用途」列はTYPEを「Enum」にしています。

「Enum」は、ボタンやプルダウンリストなどで値が選択できる列タイプです。

「用途」列 の左にあるペン型の編集アイコンをクリックすると、列の設定パネルが表示されます。

 

列を編集する。

 

Type Details → Values で「Add」ボタンをクリックして、Valuesに「仕事」「プライベート」を追加しましょう。

Base Type は「Text」、Input mode は「Buttons」にしておきます。

設定が終わったら「Done」をクリックしてパネルを閉じて、右上の「Save」で保存します。

 

「Enum」の値を設定する。

名刺のタイトル

 

「名刺のタイトル」列は「仕事用」「私用」など、名刺にタイトルをつけるために用意しています。

「名刺のタイトル」だと何を入力するのか分かりにくいので、「Description」を設定してみましょう。

「名刺のタイトル」列の左にある編集アイコンをクリックして、設定パネルを表示します。

 

列を編集する。

 

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

 

「Description」を設定する。

 

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

 

Expression Assistant を設定する。

 

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

 

AppSheetアプリで確認する。

QRコード

 

「QRコード」は、追加した連絡先の値からQRコードを生成して画像リンクを保存するための列です。

後ほど(第5回)で設定方法を解説します。とりあえず、ここではTYPEを「Image」にしておくだけで大丈夫です。

 

 

5. 電子名刺表示用のスライスを作成する

 

次回(第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)を整える設定を行います。

 

 

アプリを作る前に実際に試してみたい方は、アプリスイートが作ったサンプルアプリを7日間無料体験ができます。

こちらからお問い合わせください。