画面に自由にお絵描きできるChrome拡張機能を作った話

Googleに申請し無事に通りました、正式版はこちらからDLできます。

きっかけ

みなさんリモートワークしてますか？
私の働いているBreuwusはコロナに関係なくフルリモート(強制ではないので、もしオフィスに来たい人であれば可能という感じですが、社長含め全員フルリモート状態)環境で業務を行っています。

この一年半リモートワーク中に画面共有を使って説明していると相手に伝わりにくい時が何度かありました。(特にUI/UXの話題とか)

で、思いつきました！

「カーソル大きくすれば見やすくなるんじゃね？」

と、しかし

カーソルサイズには規格があるのよねぇ…

で、思いついたのはいいんですが、私は知っていました（年の功？）。
カーソルってwindowsの場合はcurファイルという拡張子で、大きさの規格が決まっているんですね。

で、まぁでも「ブラウザの中だけならいけるな！」って思ったので早速作ろうと思って拡張を作ること3分…

できました！(プロトタイプが)

いやぁ、これぐらいのChromeの拡張を作るのなら特に難しいことじゃないので「楽勝！」って思ってたんですが…

カーソルだけじゃぁ微妙

そうなんです、どうせなら「書き込み」をしたくなります。
これも、「結構簡単にイケるはず！」と思い、10分ぐらい格闘…

できた！(プロトタイプが)

この段階で、会社のメンバーに見せたところ「面白い！」と言われたんですが、もちろん要望も出てきました…

まぁ、そうなるよね…

あと、意外と評判よかったのでちゃんとした拡張としてGoogleに申請してリリースしようかなぁという欲求が出てきました。

製品化するにはUIやアイコンを作らねば

こういう時、ユーザーの意見を全て聞くのは危険です。
機能が多すぎて使われなくなったり、UIが煩雑になって最終的に便利じゃなくなることが多いのです。
それでもちょっと機能過多になったかなぁと思ったりしています。

そうじゃなくてもプログラミング以外に説明用の動画作ったり、動画用のBGM作ったり(BGMはこちらの記事で作った開発戦隊ディベロンジャーのサビを使いました）説明用のページをgithubpageで用意して多言語化したり…
結構時間がかかります。

あと、この拡張機能はどのサイトでもローカルファイルでも使えるようにするために

 "matches": ["<all_urls>"],

って設定を入れてるんですが、これを入れてると審査が遅くなるようです。(が、意外とすんなり通りました。)

入れたかったけど入れなかった機能

・ホワイトボード機能
これは、「真っ白なタブを新規で開いて、そこに自由にお絵描きできる」って機能を入れたかったんですが、複数人が書き込みできるならまだしも、使わないかもなぁって思ってやめました。

・Undo/Redo
これもほしいなぁって思ったんですが、「履歴を何回持つんだ？」って思ってやめました。

当然仕様という名のバグ?もあります

まぁ、いつものように「ないよりマシよね」っていう感じで作ったのでこんなもんです。

技術について補足

先ほどの仕様という名のバグについて補足しておきます。

1と2についてwebfrontの技術に詳しい方ならお分かりでしょうが、既存のHTMLの上に1つcanvasタグを追加してお絵かきしてるだけなんです。

が、このcanvasちょっと制限がありまして…

ブラウザの解像度を変更してcanvasのサイズを変更すると元から書いていたものが消えてしまう。

という制限があって、この制限により1と2の場合の挙動をどうするか非常に悩みました。

ただ、勝手に消えるのも微妙だし、「仕様として割り切った方がいいなぁ」という諦めを選びました。 3の画像化する話ですが、chromeのextensionで使えるAPIに現在見えている表示領域のみをキャプチャできるものはあるんですが、スクロール領域を含めたfullpageのキャプチャのAPIはなさげでした。

で、一番簡単に実行できる方法でやったんですが、noteのようなページでは元の画像がちゃんと表示されないなどバグがあります。
また、画面のフルキャプチャはChrome DevTools内にもあるし、GoFullPageのような優れた拡張もありますので、おまけ程度につけました。

尚、この辺りの面倒臭さはQiitaの「Chrome でなるべく早くスクリーンキャプチャを撮る拡張機能を作りましたが想像以上に大変でした」という記事を参考するとよいかなぁと思います。

まとめ

いつもの如く、思いついて

「なければ作ればいい！ないよりマシ」

の精神で作りましたが久々にwebページ用のJavascriptを書いたので四苦八苦しました。

技術は簡単でも、それを形にすることとアイディア次第ではリモート環境を便利にすることは可能だと思います。

言語やプラットーフォームに関係なく面白そう・便利だなと思うものを作れるのはITの素晴らしさの1つだと思います。
皆さんも体に気をつけて、よりよいリモートワークを続けてください！