AppSheetで電子名刺アプリ（第5回）VCard形式のQRコードを生成する

電子名刺アプリを作りながら、AppSheetの使い方を学びましょう。
前回（第4回）はアプリを使いやすくする設定をしました。
今回はQRコードを生成して、電子名刺として表示します。

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

1. 電子名刺データの標準規格はVCard形式

電子名刺アプリでは、連絡先データからQRコードを生成して表示します。
QRコードのデータはVcard形式にします。
AppSheetで追加した連絡先データをVCard形式で保存し、QRコードをスマホで読み取れば相手の連絡先に追加できるようになります。

VCard形式は電子名刺データの標準規格として使用されています。
VCard形式のデータは以下のようなフォーマットになっています。
列名を [列名] という形で追加しています。

用途が「仕事」の場合

BEGIN:VCARD
VERSION:3.0
N:[姓];[名]
X-PHONETIC-FIRST-NAME:[名（フリガナ）]
X-PHONETIC-LAST-NAME:[姓（フリガナ）]
FN:[フルネーム]
ORG:[会社名]
TEL;WORK;VOICE:[電話（勤務先）]
TEL;CELL;VOICE:[電話（仕事携帯番号）]
EMAIL;INTERNET:[メール（勤務先）]
ADR;WORK:;;[勤務先住所（番地以降）];[勤務先住所（市区町村）];[勤務先住所（都道府県）];[勤務先郵便番号]
URL;WORK:[URL]
END:VCARD

用途が「プライベート」の場合

BEGIN:VCARD
VERSION:3.0
N:[姓];[名]
X-PHONETIC-FIRST-NAME:[名（フリガナ）]
X-PHONETIC-LAST-NAME:[姓（フリガナ）]
FN:[フルネーム]
TEL;CELL;VOICE:[電話（私用携帯番号）]
EMAIL;HOME:[メール]
ADR;HOME:;;[自宅住所（番地以降）];[自宅住所（市区町村）];[自宅住所（都道府県）];[自宅郵便番号]
END:VCARD

「ADR」は住所ですが、英米式の書き順（番地 → 市町村 → 都道府県 → 郵便番号）になっています。
VCard形式では全部で6項目を “ ; “ で区切って入力できるようですが、連絡先では4項目だけなので最初の2項目は空欄にしています。

2. 改行を含むデータをURLエンコードをする

VCard形式のデータをURLに格納してQRコードを生成したいのですが、困ったことにVCard形式には改行が含まれています。

改行データが含まれているとURLが生成できないので、ここでURLエンコードを行います。
一旦、[列名]を取り除いてからURLエンコードを行うと以下のようになります。

用途が「仕事」のVCard形式データをURLエンコード

BEGIN%3AVCARD%0D%0AVERSION%3A3.0%0D%0AN%3A%3B%0D%0AX-PHONETIC-FIRST-NAME%3A%0D%0AX-PHONETIC-LAST-NAME%3A%0D%0AFN%3A%0D%0AORG%3A%0D%0ATEL%3BWORK%3BVOICE%3A%0D%0ATEL%3BCELL%3BVOICE%3A%0D%0AEMAIL%3BINTERNET%3A%0D%0AADR%3BWORK%3A%3B%3B%3B%3B%3B%0D%0AURL%3BWORK%3A%0D%0AEND%3AVCARD

エンコード結果をよく見ると

• :（コロン）=> "%3A"
• ;（セミコロン）=> "%3B"
• 改行 => "%0D%0A"

に置き換えられていることが分かります。

URLエンコードできるサイトがいくつかありますので参考にしてください。
[列名]を入れたままエンコードしないように注意しましょう。

3. 電子名刺のQRコードを生成するURLを作成する

QRコードの生成には、「TEC-IT」というQRコードジェネレーターを使用します。
このサイトのURLにURLエンコードした値をくっつけるだけです。

AppSheetの連絡先データをURLエンコードして、QRコードジェネレーターのURLに格納すると以下のような式ができあがります。
IF関数を使って「用途」が「仕事」の時とそれ以外（「プライベート」）の時で分岐しています。
QRコードの大きさを指定した文字列（&dpi=96）を最後にくっつけていますが、特に理解する必要はないので、そのままコピペして使います。

QRコードジェネレーターで使用するURL

IF(
 [用途]="仕事",
 "https://qrcode.tec-it.com/API/QRCode?data=BEGIN%3AVCARD%0D%0AVERSION%3A3.0%0D%0AN%3A"&[姓]&"%3B"&[名]&"%0D%0AX-PHONETIC-FIRST-NAME%3A"&[名（フリガナ）]&"%0D%0AX-PHONETIC-LAST-NAME%3A"&[姓（フリガナ）]&"%0D%0AORG%3A"&[会社名]&"%0D%0ATEL%3BWORK%3BVOICE%3A"&[電話（勤務先）]&"%0D%0ATEL%3BCELL%3BVOICE%3A"&[電話（仕事携帯番号）]&"%0D%0AEMAIL%3BINTERNET%3A"&[メール（勤務先）]&"%0D%0AADR%3BWORK%3A%3B%3B"&[勤務先住所（番地以降）]&"%3B"&[勤務先住所（市区町村）]&"%3B"&[勤務先住所（都道府県）]&"%3B"&[勤務先郵便番号]&"%0D%0AURL%3BWORK%3A"&[URL]&"%0D%0AEND%3AVCARD&dpi=96","https://qrcode.tec-it.com/API/QRCode?data=BEGIN%3AVCARD%0D%0AVERSION%3A3.0%0D%0AN%3A"&[姓]&"%3B"&[名]&"%0D%0AX-PHONETIC-FIRST-NAME%3A"&[名（フリガナ）]&"%0D%0AX-PHONETIC-LAST-NAME%3A"&[姓（フリガナ）]&"%0D%0ATEL%3BCELL%3BVOICE%3A"&[電話（私用携帯番号）]&"%0D%0AEMAIL%3BHOME%3A"&[メール]&"%0D%0AADR%3BHOME%3A%3B%3B"&[自宅住所（番地以降）]&"%3B"&[自宅住所（市区町村）]&"%3B"&[自宅住所（都道府県）]&"%3B"&[自宅郵便番号]&"%0D%0AEND%3AVCARD&dpi=96"
)

4. AppSheetでVCard形式のQRコードを生成する

では、連絡先の列設定パネルに戻りましょう。
AppSheetエディタ左側メニュー「Data」をクリック、「Columns」タブメニューをクリックします。
「連絡先」をクリックして列設定パネルを表示し、「QRコード」列のFORMULAをクリックします。

Expression Assistant に「QRコードジェネレーターで使用するURL」をコピペして「Save」をクリックして保存します。

これで連絡先データからVCard形式のQRコードを生成できるようになります。

VCard形式のQRコード生成方法については、こちらの動画を参考にしました。

5. AppSheetで表示したQRコードをスマホで読み取る

では、実際にAppSheetで連絡先データをQRコードで表示してみましょう。
その前に、第3回で追加した連絡先データを更新する必要があります。

プレビューで「連絡先」タブメニューをクリックし、追加済の連絡先をクリックして表示します。
右下にある編集アイコンをクリックします。

「Save」をクリックして保存（更新）します。

タブメニュー「電子名刺」をクリックして、追加した連絡先をクリックして表示します。
無事にQRコードが表示されたでしょうか？

最後にスマホでQRコードを読み取って連絡先に追加できるかをテストしてみましょう。
例えば、iPhoneのカメラで読み取ると通知が表示されます。

通知をタップすると、iPhoneの連絡先に追加できます。

6. 注意点

VCard形式に問題がなければ、スマホのQRコードリーダーで読み取ることができます。

実は、テスト機ではiPhoneでは問題なく連絡先に追加できるのですが、Androidでは姓名が逆になったり、住所が1ヶ所のフィールドにまとめて入ってしまったりして、うまく連絡先に追加できませんでした。
原因は分かりませんが、とりあえずiOSでは上手く動きますので、その点ご容赦いただければと思います。