クイック エンジニアリングブログ

株式会社クイック Web事業企画開発本部のエンジニアリングチームが運営する技術ブログです。

Chrome拡張機能を使ってGoogle Meetで「脱線してません?」とツッコミ入れられるようにしてみた

最近焼き鳥は「ねぎ間(タレ)」が一番うまいのではないかと思っているhamanokamiです!

いきなりですが、私が所属しているユニットでは毎日17時〜17時15分に夕礼を開催しており、 前半は「本日のタスク実績」「共有事項」、後半は持ち回りで「まじめな話」を発表するという時間があります。

いつも「ブログネタ何にしようか?」ともがき苦しんでるのですが、 ちょうどこのブログ記事を執筆する前週の夕礼で話されたチームメンバーの「まじめな話」が天の恵みとなりました。

どういうお話か簡潔にいうと、MTGで議題から話が脱線していると思うけど、 「脱線してません?」とか「議題変わりました?」などとつっこめないというものでした。

そこでひらめいたのです!!!

コロナウィルスが蔓延して以降Web会議が増えたので、 Web会議であればWeb技術を使ってこの問題を解決できるのではと。

そこで、このブログのタイトルであるGoogle Meetでつっこみを入れることができるChrome拡張機能をつくってみることにしました。*1

システムの仕様

  • Google Meet上でのみChrome拡張機能が動作する
  • Google拡張機能で表示するボタンを押下すると、ボタン押下したユーザーが参加しているMeetの参加者全員に画面上でメッセージが通知される*2
  • メッセージはニ○動っぽく表示される
  • ボタンを押した人は誰かわからないようにする*3

完成版デモ

上記仕様からつくったものがこちらです!

f:id:aimstogeek:20211216101936g:plain

要件どおり、ニ○動っぽくメッセージが流れてますね!

システムの全体像

今回の仕様実現にあたって、下記のようなシステムを組みました。

f:id:aimstogeek:20211216115839p:plain

使用技術

Pusherとは、WebSocketを使ってリアルタイムかつ両方向の通信機能を簡単にWebサイトやモバイルアプリに組み込むことができるサービスです。(めっちゃ便利

ソースコード

こちらで公開しています。

Chrome拡張

github.com

API

github.com

注意点

  • 「とりあえず動くものつくる」をゴールにしたため、セキュリティ面や実運用面は十分に考慮されていないです
  • 今回manifest.jsのバージョンを2にしていますが、2023年にサポートが切れて使えなくなります

実装で困った点

注意点にも書いているのですが、今回manifest.jsのバージョンを2で作成しています。

その理由がバージョンが3だと、content_security_policyの設定で外部ドメインの指定ができなくなり、それに伴いバックグラウンドで動いているJSでPusherとの通信ができなくなったためです。(ここで2時間くらいつまった

「とりあえず動くものつくる」を優先していたため、調べきれていない部分もありそうなので、引き続きmanifest.jsのバージョン3で動かすことができないかは検証してみようと思います!

まとめ

今回、Chrome拡張・Pusher・GAEとこれまで使用したことのない技術・サービスを使いましたが、 とりあえず一連の動きをつくるのに約8時間くらいでできたので、 便利な世の中になったなぁ、としみじみしました。

つくったものに関しては、そもそもチームや個人が遠慮なく直接言い合えるほうが健全なので、 ブラッシュアップして使うことはない*4ですが、 Chrome拡張機能の可能性に気付かされたので、つくったことが無駄にならずよかったです!

では良きエンジニアリングライフを!


\\『真のユーザーファーストでマーケットを創造する』仲間を募集中です!! //

919.jp

*1:最初はTwilioでビデオ会議のSDKAPIもあるし、それを使ってつくってみようかなと思ったけど、せっかく作るのであれば普段から使っているGoogle Meetでやりたいことを実証したほうが生産的だと思ったから

*2:拡張機能がインストールされていることが前提

*3:極限につっこむハードルを下げるため

*4:ネタでつくってみたので