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

電子名刺アプリを作りながら、AppSheetの使い方を学びましょう。
前回（第3回）は、電子名刺を表示する画面をビュー（View）で作成しました。
今回はQRコードを作成して、電子名刺として表示します。

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

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

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

VCard形式は住所やURLも含めることができますが、電子名刺アプリでは省略しました。

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

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

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

VCard形式データをURLエンコード

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

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

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

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

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

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

AppSheetの連絡先データをURLエンコードして、QRコードジェネレーターのURLに格納すると以下のような式ができあがります。
QRコードの大きさを指定した文字列（&dpi=96）を最後にくっつけていますが、特に理解する必要はないので、そのままコピペして使います。

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

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

では、連絡先の列設定パネルに戻りましょう。
アプリエディタ左側メニュー「Data」をクリックします。
Dataナビゲーションで「連絡先」テーブルを選択して、「連絡先」テーブルの列設定パネルを表示します。
「QRコード」列のFORMULAをクリックして、Expression Assistantを開きます。

Expression Assistant に「QRコードジェネレーターで使用するURL」をコピペして「Save」をクリックして保存します。
コピペした式が正しければ、グリーンのチェックマークが表示されます。

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

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

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

AppSheetで連絡先データを追加して、QRコードを作成して表示してみましょう。

アプリエディタ右側にあるプレビュー画面で「連絡先」タブメニューをクリックします。
「+」ボタン（Add）をクリックして、連絡先を1件追加してみましょう。

名刺のタイトルから順に項目を入力していきます。
最後に、「Save」をクリックして保存します。

タブメニュー「電子名刺」をクリックして、追加した連絡先をクリックして表示します。

無事にQRコードが表示されたでしょうか？

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

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

6. 注意点

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

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