Zoom用の名刺風 背景画像をSlack Botに作ってもらう

こんにちは！Refcome CTOの道川(@michiomochi)です。
本記事ではZoomで使う名刺風 背景画像をSlack Botで作成出来るようにした話を書いていきます。

作成された画像をZoom上で使うと↓のような感じになります。

どんな問題を解決したかったか

リフカムでは3月頃より新型コロナウィルスの感染拡大防止策として全職種で在宅勤務を実施しております。

今までは外部の方とのお打ち合わせは、直接お会いして行っていましたが、在宅勤務により、ビデオ会議をさせていただくことが大変増えてきました。
初対面の方には名刺を渡し、自分の名前、部署、会社、商品を覚えてもらっていましたが、ビデオ会議では名刺を渡すことは出来ません。
初対面の方とは名刺をベースにしたコミュニケーションを行っていたためビデオ会議が主になり、不都合を感じていました。

改善策を構想、数時間で形に、そして自動化へ

この問題に対して、代表の清水がある企業とのMTG時に、その企業の方が背景画像に名刺風の画像を設定しているのに目をつけ、「これいいな〜」とSlack上で発言しました。
それをきっかけにデザイナーの楢木(@nara_narami)が2時間ほどでデザインを固め、画像を作成しました。(はやい)

他にも数人欲しいという社員がいましたが
・たくさん手動で作るのは大変
・いれたい情報は変わることがある
・ベースの画像に文字を合成するのはプログラムで簡単に出来そう
・ブランディングの観点で各々の社員が思い思いに作成してしまい、統一感が取れないのは避けたい
といった理由で、僕が名刺風の背景画像を自動で生成するツールを作ることにしました。

どのように自動で画像を作れるようにしたか

営業だけではなく全職種の人が外部の人とMTGをする可能性があるので、全職種の人が気軽に触れる形で画像を作成出来るのがベターだなと思いました。
なので、作るツールは全職種の人が日常使っているSlack上で使えるようにしました。

弊社Slackではrefcome-botという名前のSlack Botが動いています。
refcome-botはr7kamura氏が作成したrubotyというgemで動いています。
https://github.com/r7kamura/ruboty

画像生成ツールはrefcome-bot上で動かすので、Rubyで書くと動かしやすいだろうということでRubyで書くことにしました。

作ったツールについて

今回作ったツールは以下です。
・https://github.com/refcome/virtual_name_card
・https://github.com/refcome/ruboty-virtual_name_card

それぞれ説明していきます。

virtual_name_card

https://github.com/refcome/virtual_name_card
virtual_name_cardはRubyとImageMagickを使い指定されたベースの画像に指定した文字を合成するツールです。
リポジトリ内にはデザイナーに作成してもらったベースの画像とフォントファイルも同梱されています。
フォントはNoto Sans JPというOpen Font Licenseで作られたフォントを使用しました。

このツールでは以下のように実行すると画像が生成されるようになっています。

VirtualNameCard::Generator.generate(
 name_kanji: "道川 雅嘉", 
 name_romaji: "Michikawa Masayoshi", 
 role: "CTO", 
 email: "masayoshi.michikawa@refcome.com", 
 twitter_account: "michiomochi", 
 url: "https://about.refcome.com/",
)

詳しい使い方はリポジトリ内のREADMEをご覧ください。
https://github.com/refcome/virtual_name_card#usage

このリポジトリではRefcome社用の画像が使用されるようになっていますが、GitHub上でforkし処理を書き換えることで他の企業でも使えるように出来ると思います。(当たり前ですが)
複雑な処理はなく、ライセンスもMITで公開していますのでこちらを参考に各社で使っていただけると嬉しいです。

ruboty-virtual_name_card

https://github.com/refcome/ruboty-virtual_name_card
前述した通り弊社Slackではrefcome-botという名前のSlack Botが動いています。
また、refcome-botはrubotyというgemで動いています。
ruboty-virtual_name_cardはrubotyでvirtual_name_cardを動かすためのgemです。
このgemをrubotyで使うよう設定すると以下のようにSlack上でbotに適切なフォーマットでメンションすることにより画像が生成出来るようになります。

ツールをSlack上で使う上で工夫した点

画像生成は以下のフォーマットでSlack Botにメンションする必要があります。

@refcome-bot 背景画像 “漢字の名前”,”ローマ字の名前”,”役職”,”メールアドレス”,”QRとして埋め込みたいURL”

運用開始当初はSlack上のテキストエリアで頑張ってミスなく入力するようにしていましたが、複雑な記述をミスなく入力するのは無理があり、度々記述を間違え生成出来ないことがありました。

長く複雑なテキストをミスなくSlack上で入力するのは難しいということがわかったため、Slack Workflowを使いSlack Workflowから提供されるフォームを入力すればSlack Botへメンションが送れるようにすることでミスなく画像が生成できるよう改善しました。

今回Slack Workflowを初めて使いましたが、Slack Botと組み合わせることで他にもいろいろな面白い使い方ができそうだなという気づきが得られました。
Slack WorkflowはSlackを使っていれば手軽に試せるので気になった方は是非試してみてください。
https://slack.com/intl/ja-jp/help/articles/360035692513-%E3%83%AF%E3%83%BC%E3%82%AF%E3%83%95%E3%83%AD%E3%83%BC%E3%83%93%E3%83%AB%E3%83%80%E3%83%BC%E3%82%AC%E3%82%A4%E3%83%89

社内からの反応

ツールが出来ると、すぐにいろんな人が使ってくれて、「便利」や「すごい」といった声をたくさんもらい、やってよかったなと思いました。
社内で使うプロダクトを開発するのはこういう点が楽しいですよね。

また使ううちにこういう情報が書けると嬉しい、この情報は任意入力だと嬉しいといったフィードバックももらえました。

以下の点はフィードバックをもらい改善した点です。
・メールアドレスを入れられるようにした
・役職、メールアドレス、twitterアカウントは任意入力にした
・URLをQRコードとして入れられるようにした

さいごに

リフカムはこういった便利なツールをみんなでわいわいしながら作れる会社ですが、まだまだエンジニアを絶賛募集中です！
Slack Botの話を聞きたいというだけでもかまいませんので、まずはお話しませんか？
ご興味ある方は是非ご連絡ください 👋

株式会社リフカムの採用/求人一覧 - Wantedly