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

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

本ブログ記事及びサンプルデータの著作権は、当社に帰属します。AppSheetを学習する目的での個人使用を除き、無断での複製、転載、改変、翻案、公衆送信等の利用を禁止します。詳細は、ウェブサイト利用規約をご確認ください。

執筆・監修　AppSheet導入支援・アスラボ株式会社・松野将宏

2015年設立、10年の開発経験があり、自社開発システムで公的機関のIT開発支援事業にも複数回採択されました。2021年にAppSheet開発・内製化支援「アプリスイート」を立ち上げ、中小企業から上場企業まで幅広い業界で開発支援を行っています。豊富な経験と実績から培われた独自の知見で、技術ブログを50本以上執筆しています。

1. サンプルデータをGoogleドライブにアップロードする

それでは、AppSheetで電子名刺アプリを作成していきましょう。
AppSheetアプリにはエクセルやGoogleスプレッドシートなどのデータが必要です。

今回は、電子名刺アプリのサンプルデータとしてエクセルのデータを用意しました。
下のアイコンをクリックして、データをダウンロードしてください。

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

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

今アップロードしたエクセルデータを開きます。
「ファイル」メニューをクリックして、「Googleスプレッドシートとして保存」をクリックします。

エクセルをGoogleスプレッドシートに変換して保存しました。

2. GoogleスプレッドシートからAppSheetアプリを作成する

AppSheetアプリを作成しましょう。

先ほど変換したGoogleスプレッドシート「電子名刺アプリ」を開いた状態で、「拡張機能」メニューをクリックすると、「AppSheet」が表示されます。
「AppSheet」にカーソルを合わせて、「アプリを作成」をクリックしてください。

「We're setting up your new app!」と表示されます。
AppSheetがサンプルデータを読み込んでアプリを作成します。

アプリが無事に作成されると「Your app is ready!」と表示されます。
右上の「×」ボタンか、「customize your app」をクリックして閉じましょう。

AppSheetアプリが作成できました。
アプリエディタ（App editor）画面の右側にアプリのプレビューが表示されます。

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

アプリエディタの左側メニューにある「Data」をクリックして、データを確認しましょう。
Dataナビゲーション（青い帯の部分）に「連絡先」テーブルが追加されていることが分かります。

テーブル（Table）とは、アプリからデータを追加したり、更新したり、削除できるデータの格納庫です。
テーブルは黒い円柱のアイコンで表示されます。

「連絡先」テーブルをクリックして選択すると、連絡先のデータ項目が一覧表示されます。
こららのデータ項目を列（Columns）と呼びます。

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

「連絡先」テーブルの列を設定しましょう。

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

この1行のデータを行（Rows）と呼んだり、レコード（Records）と呼んだりします。
このブログではレコードと呼ぶことが多いので、「1行のデータのことだな」と思ってください。

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

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

ID

「ID」列は「連絡先」ワークシートのA1にあらかじめ入れておきました。
AppSheetではワークシートの1行目に「ID」を入れておくと、自動的に以下のように設定してくれます。

• TYPE：Text
• KEY：ON
• LABEL：ON
• INITIAL VALUE：UNIQUEID()

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

「ID」列には、INITIAL VALUE（初期値）に「UNIQUEID()」という関数が設定されます。
この関数を設定した列には、重複がないユニークな値（ランダムな英数字8桁）が保存されます。

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

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

• LABEL：OFF
• SHOW ?：OFF

LABELを設定した列は画面（ビュー：View）で表示したり、他のテーブルから参照したときに表示されます。
名前（例：顧客名、社員名、商品名など）やタイトルをテキスト入力する列をLABELに設定するのがオススメです。

電子名刺アプリでは「名刺のタイトル」列をLABELに設定しました。
「名刺のタイトル」列には名刺の目的（ビジネス用、私用など）を入力するので、これが表示されると他と識別ができるので分かりやすくなります。

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

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

名刺のタイトル

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

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

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

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

フルネーム

電子名刺アプリには当然、名前を入力する列があります。
「フルネーム」という列がありますが、ここは「姓」と「名」に入力した値を使って自動的に入力するようにします。

「姓」と「名」をつなげて「フルネーム」を作成したいので、CONCATENATE関数を使います。
（）の中に、つなげたい文字列や [ 列名 ] をカンマ（, ）で区切って列挙するだけで1つの文字列にできます。

では、「フルネーム」列を設定しましょう。
編集アイコンをクリックして設定パネルを開いてもよいですが、列設定パネルから直接設定してしまいましょう。
「フルネーム」の FORMULA の入力フィールドをクリックします。

Expression Assistant が表示されるので、以下のように入力してください。
姓名の間に半角スペースを入れたいので、" "を入れておきました。

文字列の連結は、以下のように「&」で [ 列名 ] を繋ぐだけでもできます。

QRコード

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

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

次回（第3回）は、アプリの画面を設定します。
画面設定はビュー（View）という機能を使いまが、電子名刺を表示する専用のビューが必要になります。

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

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

左側メニュー「Data」をクリックします。
Dataナビゲーション「連絡先」の右にある「+」アイコン（Add Slice to filter data）をクリックします。

「Create a new slice for 連絡先」ボタンをクリックします。

アプリエディタ中央（メインパネル）に、スライス設定パネルが表示されます。

スライスを以下のように設定します。
QRコードを表示するためだけのビューなので、Update mode を「Read-Only」にしておきます。

• Slice Name：電子名刺
• Update mode：Read-Only

設定が完了したら、右上「Save」をクリックして保存するのを忘れずに。

以上、電子名刺アプリを作成してみました。

ここまでの設定でとりあえず連絡先を追加するための準備はできました。

次回（第3回）はアプリの画面（ビュー）を整える設定を行います。