· 

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

電子名刺のQRコードを生成する

 

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

 

前回(第4回)はアプリを使いやすくする設定をしました。

今回はQRコードを生成して、電子名刺として表示します。

 

電子名刺アプリでは、連絡先データからQRコードを生成して表示します。

QRコードのデータはVcard形式にします。

追加した連絡先データをVCard形式で保存し、QRコードをスマホで読み取れば相手の連絡先に追加できるようになります。

1. VCard形式のデータ

 

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エンコードできるサイトがいくつかありますので参考にしてください。

[列名]を入れたままエンコードしないように注意しましょう。

URLエンコードできるサイト

3. URLを作成する

 

QRコードの生成には、「TEC-IT」というQRコードジェネレーターを使用します。

このサイトのURLにURLエンコードした値をくっつけるだけです。

QRコードジェネレーター

 

連絡先データをURLエンコードして、QRコードジェネレーターのURLに格納すると以下のような式ができあがります。

IF関数を使って「用途」が「仕事」の時とそれ以外(「プライベート」)の時で分岐しています。

また、QRコードの大きさや色を指定した文字列を後ろのほうにくっつけていますが、特に理解する必要はないので、そのままコピペして使います。

 

 

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

 

IF(

 [用途]="仕事",

 "https://barcode.tec-it.com/barcode.ashx?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&code=QRCode_Business_vCard&multiplebarcodes=false&translate-esc=false&unit=Fit&dpi=96&imagetype=Gif&rotation=0&color=%23000000&bgcolor=%23ffffff&codepage=Default&qunit=Mm&quiet=0&eclevel=L",

"https://barcode.tec-it.com/barcode.ashx?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&code=QRCode_Business_vCard&multiplebarcodes=false&translate-esc=false&unit=Fit&dpi=96&imagetype=Gif&rotation=0&color=%23000000&bgcolor=%23ffffff&codepage=Default&qunit=Mm&quiet=0&eclevel=L"

)

 

4. QRコード列を設定する

 

では、連絡先の列設定パネルに戻りましょう。

左側メニュー「Data」をクリック、「Columns」タブメニューをクリックします。

「連絡先」をクリックして列設定パネルを表示し、「QRコード」列のFORMULAをクリックします。

 

「QRコード」列のFormulaを設定する。

 

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

 

Expression Assistant に式をコピペする。

 

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

 

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

 

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

 

では、実際に連絡先データをQRコードで表示してみましょう。

その前に、第3回で追加した連絡先データを更新する必要があります。

 

画面右のプレビューで「連絡先」タブメニューをクリックし、追加済の連絡先をクリックして表示します。

右下にある編集アイコンをクリックします。

 

 

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

 

 

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

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

 

 

最後にスマホでQRコードを読み取って連絡先に追加できるかをテストしてみましょう。

iPhoneのカメラで読み取ると通知が表示されます。

 

QRコードを読み取ると通知が表示される。

 

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

 

iPhoneの連絡先に追加できる。

6. 注意点

 

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

 

実は、テスト機ではiPhoneでは問題なく連絡先に追加できるのですが、Androidでは姓名が逆になったり、住所が1ヶ所のフィールドにまとめて入ってしまったりして、うまく連絡先に追加できませんでした。

原因は分かりませんが、とりあえずiOSでは上手く動きますので、その点ご容赦いただければと思います。

 

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

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