新型コロナウイルスに関係する内容の可能性がある記事です。
新型コロナウイルス感染症については、必ず1次情報として 厚生労働省 首相官邸 のウェブサイトなど公的機関で発表されている発生状況やQ&A、相談窓口の情報もご確認ください。※非常時のため、すべての関連記事に本注意書きを一時的に出しています。
見出し画像

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

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

画像1

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

画像2

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

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

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

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

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

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

画像3

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

営業だけではなく全職種の人が外部の人と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に適切なフォーマットでメンションすることにより画像が生成出来るようになります。

画像4

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

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

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

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

画像5

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

画像6

画像7

今回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

社内からの反応

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

画像8

画像9

画像10

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

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

さいごに

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


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
26

こちらでもピックアップされています

refcome design & engineering
refcome design & engineering
  • 5本

リフカムのデザイナー・エンジニアが、「採用を仲間集めに」するための取り組みを綴ります。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。