Goodpatchでフロントエンドエンジニアをしている池澤です。
この記事はGoodpatchが提供しているオンラインホワイトボードStrap について、Chrome機能拡張でカスタマイズしたお話です。
Strap はその直感的に分かる操作性と学習コストなく馴染めるUXが特徴のオンラインホワイトボードツールです。
日々精力的に新機能や改善案を社内外問わず収集し、アップデートを行っています。
先日も待望のボード内テキスト検索やチュートリアル機能等をリリースしどんどん進化しています。
Goodpatchでは自社サービスを自分たちでもどんどん使用するドッグフーディングの中で改善サイクルを高速化したり、テクニカルプロトタイプとしてモック機能を作って提案する文化があります。
今回私も、大好きなStrapがもっと自分にフィットするようChrome機能拡張を使ってカスタマイズしてみました。そんな「My Strap」の便利＆おもしろ機能をご紹介します。
※ この機能拡張はStrap非公式のツールです。個人が趣味で開発したことをご理解の上自己責任にてご利用ください。
※ 今後のStrapの仕様変更で挙動が変わる可能性がありますが、このChrome機能拡張では動作保証されません。
利用方法
インストール方法について
このChrome機能拡張はchrome ウェブストアには未公開中です。そのためChromeの機能拡張画面（ chrome://extensions/ ）からインストールします。
詳しい手順はGitHubの方に記載していますのでこちらを御覧ください。
https://github.com/ikezaworld/my-strap#install
chrome機能拡張のダウンロード
My StrapのChrome機能拡張ファイルはこちらからZipファイルをダウンロードしてお使いください。
https://github.com/ikezaworld/my-strap/raw/main/my-strap-for-chrome-extension.zip
機能1. カウントダウンタイマー
Strapのボード画面右上にタイマー表示と時間選択用のセレクトボックスを追加する機能です。タイマー操作したブラウザのみでしか表示されず、他の閲覧者に共有表示はできません。
例えばKPTやワークショップでの時間内作業する時に、さくっとタイムキーピングするのにおすすめです。作業中気が散らないよう音や派手なエフェクトはなく、控えめ演出にしています。
使い方
- 「timer」セレクトボックスを選択すると10秒〜30分の選択肢が表示されます。
- 任意の時間を選択すると左側のテキストフォーム欄に時間が表示されます。
- 10秒以下になると赤く点滅して残り時間わずかの警告をします。
- カウントダウン中でもセレクトボックスから任意の時間を選択することで時間変更できます。
機能2. 手のひらモードショートカット設定
Strapのボードでは画面移動するのに「手のひらモード」にします。
私はPhotoshop等グラフィック系ツールに慣れているので、画面移動なら「h」キーを押すごとにモードがトグル式に切り替わる操作感にしてみたいです。また環境によっては「h」以外のキーに割り当てたいこともあるでしょう。
そこで「手のひらモード」切り替えを任意のショートカットキーを押すごとにONOFFが切り替わる機能を作成しました。
使い方
- デフォルトでは「h」キーを押す度に手のひらモードのON・OFFが入れ替わります
- 付箋やカードでテキスト編集時は動作させません
- ショートカットキーを「h」以外にしたい場合は「My Strap設定」ポップアップから任意のキーを設定できます。
機能3. 絵文字ピッカー
Strapにはアイコン機能というかわいい表情や天気、記号をスタンプのようにボードに貼れる便利な機能があり、手軽で賑やかなコミュニケーションに欠かせません。
ここで更に文字としてペーストできる絵文字一覧を追加してみました。 Unicode用絵文字が1800個以上揃っています。付箋や図形のテキストに絵文字をペーストして名前の代わりに使うなど工夫の幅が広がります。
使い方
- Strapのボード画面右上の「絵」アイコンを押すと絵文字一覧が表示されます。
- ここから任意の絵文字をクリックすることでクリップボードにコピーされます。
- Strapアイコンとは異なりただの文字扱いなので、バウンディングボックスでの拡大縮小や輪郭のみ表示はできません。
- 図形やテキストモードにしてペーストしてお使いください。
まとめ
今回カスタマイズする中で、例えばcanvasで描画済み要素の変更はできなそうとか、Chrome機能拡張自体の制限でできないこと等色々壁がありました。
ですがStrapの画面上に出ているボタン等のDOM部分はアクセスできるぞと判明し、それなら手のひらモードショートカットを入れられないかという所から試行錯誤していました。
そこからどんどん面白くなってきて、タイマー機能等を入れたり遊び要素で絵文字ピッカーを追加していました。
これからも使いやすさと遊び心で機能拡張を追求し楽しんで行きたいと思います。
Goodpatch には、デザインと技術の両方を追求できる環境があります。 少しでもご興味を持ってくださった方、ぜひ一度カジュアルにお話ししましょう！
- 新卒採用エンジニア 22卒 / 23卒
- 中途採用フロントエンドエンジニア
