1
/
5
This page is intended for users in Japan. Go to the page for users in United States.

テクニカル担当が振り返る、リモート社員総会の裏の裏!!

皆さんこんにちは!運営メンバーとしてテクニカル面を担当しました小野寺です。

リモート社員総会の記事第4弾では、少々テッキーな内容になりますがコメント機能の実装であったり、私が携わった「裏の裏」について記事を書かせていただきます!

(↓ちなみに第1弾~第3弾はこちらからご覧ください。)

イベント直前でのリモート開催は社員総会が初ではなかった!

まずコメント機能開発の背景について説明させてください。

もともと日本各地の拠点や社員数の増加などの観点からイベントのリモート開催(ライブ配信)の需要は見込んでおり、それに併せインタラクティブな機能が必要と考えていました。どうしても自身の体で参加するイベントと異なり、聞きっぱなしになりがちだからです。

昨年末より社員総会で使用したコメント機能の前身となるツールを開発を進め、2月19日に開催される社内イベントで使用する予定でした。
といっても、大半はオフィスのラウンジなどに集まり参加となるため「作ったツールをどう使ってもらうか?」というのが私の中での課題でした。

そんな中世界は一変してしまいます。2月17日夕方(イベントの前々日)、弊社で最初の「新型コロナウイルス対策」が告知され、前々日の夕方に急遽リモート開催と変更になったのです!
イベントの段取りを変更しなくてはならず大変でしたが、まさにピンチはチャンス「作ったツールをどう使ってもらうか?」という課題が思わぬ要因により解決されました。

リモート開催での手応えは上々!そして、社員総会運営メンバーに。

結果としてこのイベントのリモート開催は成功に終わり、ツールも参加者からのコメントや質疑応答に活用することが出来ました。
また、参加者からのリモート開催に対する反応もポジティブな内容が圧倒的に多く、とても嬉しかったです。(この件が社員総会もリモート開催で問題ないと判断された材料の1つでもあったとか)

※当時のイベント特設ページ

そんな背景があり「独自にコメント機能を実装できるエンジニア」として、リモート社員総会の運営メンバーに声をかけられることになります。

このあたりからの流れについては第2弾の記事に書かれていますのでぜひご覧ください!

どのように実装したか?

前置きが長くなりました。では今回リモート社員総会が活用したコメント機能をどのように実装したかの説明に入りましょう。

もともと実験的なツールであったことや開発コストを考慮して、全体で1つのツールでまとまっている訳ではなく様々な物を組み合わせてコメント機能を実現しました。
「参加者がコメントを書く」ところから「ライブ配信の映像に書いたコメントが表示される」ところまで順を追って説明します。

1. コメント入力用のUI

テキストで自由入力はもちろん必須ですが、感情やリアクションを簡単に絵文字で表現出来る機能も付けています。

Slackなどのチャットツールをご利用の方なら感じたことがあると思うんですが、文字を書くより絵文字をピコッと付けるのってすごく気が楽というか、ついつい押しちゃうんですよねw

結果として拍手の絵文字などは押されすぎて表示が間に合わない自体になるなど、絵文字機能はすごく機能していました。
(特に意味もなくゴリラを並べていたのですが、結構押されてたり...)

この部分は G Suite のサービスとして提供されている「App Maker」を利用して作成しています。

ボタンなどの画面設計などをドラッグ&ドロップなどの簡単な操作で作ることができ、処理については Google Apps Script を実行することが出来ます。

ここでは「入力されたコメントをデータベースに送信」までを行います。

2. データベースからコメント情報をライブ配信用のパソコンに取得する。

入力されたコメントはスプレッドシートに蓄積されます。
当初はスプレッドシートに直で送っていたのですが「コメントが同じタイミングで入力されたとき片方の内容が上書きされてしまう」という事象が発覚したのですが、フォームを経由させることで解決されました。
「Googleのフォームが何件まで受け付けてくれるのか?」という不安は有りましたが、さすがのGoogle様です!数千件のコメントではびくともせず。

コメント表示は、OBS Studio(ライブ配信ソフト)で Youtube Live で配信される映像に直接表示させています。
そのため、コメントを表示させるツールが必要とするデータフォーマットにあわせコメント情報をスプレッドシートから取得する必要がありました。

こちらは難しい処理ではないので Python でプログラムを自作。
2秒ごとに Google の Sheets API でデータを取得し、XML形式で書き出すといった内容です。やってることはすごく地味なんですよね...

3. コメントをライブ配信の映像に表示する。

こちらは有志の方が作成された「HTML5コメントジェネレーター」に「機能を追加拡張させた物」を使用させていただきました。

これらのツールは HTML と JavaScript で構成されており、OBS Studio では内蔵ブラウザでHTMLを表示することが出来ます。
前のステップで書き出されたXML形式のコメントデータが読み込まれ、追加されたコメントをいい感じにシュッと表示してくれるのです。

テストは行っているとはいえ、社員総会が始まり皆さんコメントが表示された瞬間はすごく嬉しかったです!

ライブ配信はこのような有志の方が作成してくれたプラグインやツールによって支えられている一面があったりします。本当に感謝です!

ライブ配信スタジオの設営もがんばってみた!

しかし3日前の夜、東京都の外出自粛要請を受けたことから、運営メンバーを必要最低限に絞るため「協力会社無しで、自社運営メンバーでのみの実施は可能か?」という旨の質問をされたのですが「出来ます」と即回答をしました。
もちろん不安な要素はいくつかありましたが、これから全社員で達成を目指す「VISION2030」の発表や期の締めでありスタートでもある重要なイベントを延期してよいのか?と考えた時、チャレンジしない理由は無いと考えたからです。

数時間後、自社運営メンバーでのみの実施が決定しました。その後そうなったら早速ライブ配信スタジオの設営開始です!
すぐにどうしても必要となる機材の買い出しに行き準備をはじめました。

出来上がったライブ配信スタジオはこんな感じ。
登壇者の方がコメント含む映像のプレビューとスライド資料を2画面で確認出来るようにしたり(写真:1枚目)、結構それらしく設営が出来ちゃったので満足です!

前日にこの形でリハーサルを行うことが出来たので「あれ?実は出来ちゃうんじゃん!」という安心感すら生まれていたり。

そんなこんなで無事終了...!!

改めて無事開催出来て本当に良かったです。皆さんのご協力のおかげです!

色々と状況が変わっていく中で、すごいスピードで準備が進められていくのを側で見ているとメンバーズの底力を感じることができ、会社のことがさらに好きになった社員総会でした。

今回だけでなく今後もあらゆる面でオンライン化が進み、働き方もどんどん変化していくかと思いますが、エンジニアとして技術を磨きナレッジを共有しながら時代を牽引する立場として努めていきたいと思います。

株式会社メンバーズでは一緒に働く仲間を募集しています
22 いいね!
22 いいね!
同じタグの記事
今週のランキング