最近焼き鳥は「ねぎ間(タレ)」が一番うまいのではないかと思っているhamanokamiです!
いきなりですが、私が所属しているユニットでは毎日17時〜17時15分に夕礼を開催しており、 前半は「本日のタスク実績」「共有事項」、後半は持ち回りで「まじめな話」を発表するという時間があります。
いつも「ブログネタ何にしようか?」ともがき苦しんでるのですが、 ちょうどこのブログ記事を執筆する前週の夕礼で話されたチームメンバーの「まじめな話」が天の恵みとなりました。
どういうお話か簡潔にいうと、MTGで議題から話が脱線していると思うけど、 「脱線してません?」とか「議題変わりました?」などとつっこめないというものでした。
そこでひらめいたのです!!!
コロナウィルスが蔓延して以降Web会議が増えたので、 Web会議であればWeb技術を使ってこの問題を解決できるのではと。
そこで、このブログのタイトルであるGoogle Meetでつっこみを入れることができるChrome拡張機能をつくってみることにしました。*1
システムの仕様
- Google Meet上でのみChrome拡張機能が動作する
- Google拡張機能で表示するボタンを押下すると、ボタン押下したユーザーが参加しているMeetの参加者全員に画面上でメッセージが通知される*2
- メッセージはニ○動っぽく表示される
- ボタンを押した人は誰かわからないようにする*3
完成版デモ
上記仕様からつくったものがこちらです!
要件どおり、ニ○動っぽくメッセージが流れてますね!
システムの全体像
今回の仕様実現にあたって、下記のようなシステムを組みました。
使用技術
- バックエンド:PHP
- インフラ:Google App Engine(GAE)
- WebSocket通信サービス:Pusher
Pusherとは、WebSocketを使ってリアルタイムかつ両方向の通信機能を簡単にWebサイトやモバイルアプリに組み込むことができるサービスです。(めっちゃ便利
ソースコード
こちらで公開しています。
Chrome拡張
API
注意点
- 「とりあえず動くものつくる」をゴールにしたため、セキュリティ面や実運用面は十分に考慮されていないです
- 今回manifest.jsのバージョンを2にしていますが、2023年にサポートが切れて使えなくなります
実装で困った点
注意点にも書いているのですが、今回manifest.jsのバージョンを2で作成しています。
その理由がバージョンが3だと、content_security_policyの設定で外部ドメインの指定ができなくなり、それに伴いバックグラウンドで動いているJSでPusherとの通信ができなくなったためです。(ここで2時間くらいつまった
「とりあえず動くものつくる」を優先していたため、調べきれていない部分もありそうなので、引き続きmanifest.jsのバージョン3で動かすことができないかは検証してみようと思います!
まとめ
今回、Chrome拡張・Pusher・GAEとこれまで使用したことのない技術・サービスを使いましたが、 とりあえず一連の動きをつくるのに約8時間くらいでできたので、 便利な世の中になったなぁ、としみじみしました。
つくったものに関しては、そもそもチームや個人が遠慮なく直接言い合えるほうが健全なので、 ブラッシュアップして使うことはない*4ですが、 Chrome拡張機能の可能性に気付かされたので、つくったことが無駄にならずよかったです!
では良きエンジニアリングライフを!
\\『真のユーザーファーストでマーケットを創造する』仲間を募集中です!! //