Sansan Tech Blog

Sansanのものづくりを支えるメンバーの技術やデザイン、プロダクトマネジメントの情報を発信

vCardで非Eightユーザーでもオンライン名刺が受け取れる体験を作る

Eight Rails サーバーサイド

こんにちは。Eight のGrowthチームというところでサーバーサイドエンジニアをしている坂田です。
2019年の新卒で入社し、現在は2年目です。1年はあっという間でした😋

さて、弊チームでは最近オンライン名刺交換機能の開発を行っています。
今回はオンライン名刺交換の開発の中で非ユーザーへのオンライン名刺交換体験を作るためにvCardを用いることがあり、個人的にはあまり触れた事のなかった貴重な経験だったので、今回はそれについて書こうと思います！

EIghtオンライン名刺交換とは

まずEightオンライン名刺とはどういうものなのかですが、Eightに登録している名刺を使って相手とオンラインで名刺交換することができる機能で、これを利用すれば、直接会うのが難しい場合やオンラインでの商談時などでも自分の名刺を渡し、相手の名刺をEight上に保存することができます。

簡単に概要を説明しておくと、Eightではユーザーに対して一意のオンライン名刺交換用トークンとそのトークンを使ったURLを作成しています。

そのURLにリクエストすると、トークンから識別されたEightユーザーのオンライン名刺を表示することができます。
さらに、そのオンライン名刺URLをQRコード化した画像や、Zoomのバーチャル背景とQRコードを合成した画像をEightからダウンロードして利用することができるので、簡単に自身のオンライン名刺を渡すことが可能になります。

f:id:dsakata:20200818154115p:plainf:id:dsakata:20200818162843p:plain
Eightオンライン名刺用QRコードが合成されたバーチャル背景ダウンロード画面とQRを読み取ることで表示されるオンライン名刺画面

Eightユーザー同士の場合の体験

このオンライン名刺を受け取った相手がもしEightユーザーであれば「Eightに登録」ボタンを押すことでEight上で繋がることができます。
また、オンライン名刺URLをQRコード化していた場合はEightアプリのQRコードリーダで読み取れば、オンライン名刺画面が表示されることなく即座にEight上で繋がることもできます。

お互いがEightユーザーであればとてもスピーディーに相手の名刺情報を受け取ることができるのでとっても便利ですね！

では非ユーザーの場合はどうか？

しかし、実際の利用シーンでは相手がEightユーザーではない場合もかなり多いと思います。Eightを利用してオンライン名刺交換しようとしたとしても、相手がEightユーザーではなかった場合、あの画面が表示されるだけでは、体験としてあまり良いものではありませんよね。

当然Eightとしてはぜひこの機会にEightを使い始めて欲しいわけではありますが、スピーディーさが求められる会議などの場でEightをインストールして会員登録してもらって... なんて事は中々できません。
Eightを利用したオンライン名刺交換がしたくとも相手もEightユーザーかどうか気にしなくてはいけないのは、ユーザーとしてはかなり面倒です。

そのため、Eightユーザーではない人にも気軽にオンラインで名刺情報が保存できる体験が必要で、そこで目を付けたのがvCardでした。

vCardとは

vCardは電子名刺の標準規格フォーマット。項目として名前、住所、電話番号、URL、企業ロゴのほか、写真や音声などを含むことも出来る。
https://ja.wikipedia.org/wiki/VCard

まさに、オンライン名刺交換に相応しそうな感じですね 😳
vCardのフォーマットに沿ったプレーンテキストファイルを作成して、ダウンロードさせれば、あとはvCardに対応したクライアントアプリケーション内(GmailなどのメールクライアントやiOS、Androidの連絡先アプリなど)にサクッと名刺情報が保存できてしまう。という感じですね。
更にその内容もかなりシンプルで

BEGIN:VCARD
/* この中に書いていく */
END:VCARD

基本的には key:値 のような形でデータを埋め込むだけです。
Propertyなどの情報はwikiが表形式で綺麗にまとまっていてとても見易かったのでオススメです。
https://en.wikipedia.org/wiki/VCard#Properties

Eight上のデータとマッピング

というわけで、Eight上のデータをvCard形式に変換していきます。
Eightオンライン名刺画面で見ることができる情報は以下です。

  • 氏名
  • ふりがな
  • 会社名
  • 会社住所
  • 部署役職
  • メアド
  • 電話番号(携帯, 自宅, 会社FAX, 代表番号, 部署番号)
  • URL
  • プロフィール写真

上記の情報をvCard形式に変換すると次のようになります。

BEGIN:VCARD
VERSION:3.0
N:#{名前};;;;
FN:#{名前}
ADR:;;#{番地情報};;;#{郵便番号};
ORG:#{会社名} #{部署名}
EMAIL:#{メアド}
TITLE:#{役職}
TEL;TYPE=work,fax:#{fax}
TEL;TYPE=work,voice:#{代表番号}
TEL;TYPE=work,voice:#{部署番号}
TEL;TYPE=home,voice:#{自宅tel}
TEL;TYPE=cell,voice:#{携帯}
URL:#{URL}
PHOTO;TYPE=image;ENCODING=B:#{base64エンコードした画像のバイナリ}
X-PHONETIC-LAST-NAME;CHARSET=UTF-8;X-IRMC-N:#{名前フリガナ}
END:VCARD


因みに、PHOTOに関しては画像取得できるURLを入れることも可能ですが無用な通信が発生してしまうので、大きな画像でないならバイナリで良いのかなと思います。
X-PHONETIC-LAST-NAMEに関しては、 vCard Propertyが柔軟に拡張されたもの(例えばOutlook専用のpropertyなどが定義されていたりするもの)の一つで代替スペルを表現するものとして幅広いアプリで対応されています。
日本語用のアプリケーションの場合、ここにフリガナを入れることでフリガナとして機能してくれるものが多い為、Eightではこれを利用しています。

RubyでvCardが作れるgems

https://github.com/qoobaa/vcard
https://github.com/brewster/vcardigan

以上の二つなどが見つかりました。どちらもかなりシンプルかつRubyっぽくvCardが作成できるようになっています ✨
が、少しマイナーなgemなので不安な方は自前で一から実装しても良いかもしれません。（それほど複雑なことをやるようなものでもありませんしね。)

RailsでvCardをエクスポートする

シンプルにsend_dataを利用してtypeを vcardにすればOKです（簡単ですね！）

class VCFController < ApplicationController
  def sample
    vcf_text = <<~VCFTEXT
      BEGIN:VCARD
      VERSION:3.0
      N:山田;太郎;;;
      FN:山田太郎
      EMAIL:hoge@example.com
      END:VCARD
    VCFTEXT
    send_data(vcf_text, type: "text/x-vcard; charset=utf-8", filename: 'sample.vcf')
  end
end

iOSサファリから上記のようなアクションが呼ばれるボタンを押すと...

f:id:dsakata:20200818171822g:plain

オンライン名刺交換って感じですね！ ✨

さいごに

今回は、Eightが非ユーザー向けにオンライン名刺を受け取る体験の方法としてvCardを採用した事について書かせていただきました。vCard(特にiOSサファリ)の体験はかなり良いので、ユーザーが人物データをダウンロードできるような機能を考えている場合はCSVなどと合わせて、vCardを検討するのも良いと思います 😊
Eightでは、これからも更にオンラインでも成立する名刺交換体験を磨いていくので是非使ってみてください！




buildersbox.corp-sansan.com
buildersbox.corp-sansan.com
buildersbox.corp-sansan.com

© Sansan, Inc.