freeeの開発情報ポータルサイト

社内向けのChrome拡張機能を作ってみんなの生産性を上げた話

こんにちは、freee会計のエンジニアをしている 7kz です。
freee Developers Advent Calendar 2023 の8日目の記事です。

この記事は?

私は、社内向けに便利なChrome拡張機能を作っています。
Chrome拡張機能を作ることになったきっかけと、自分がどんなものを作ってきたかについて紹介します。

拡張機能を作ることになったきっかけ

Chrome拡張機能では、公開範囲を「非公開」とすることで、特定のGoogleグループのメンバーのみに機能を公開することが可能です。
その為、気軽に拡張機能を作ることが出来ます。

freeeには、以前QAエンジニアのMさんという方が在籍しており、その方が色々と便利な社内向け拡張機能を作ってくれていました。

  • スーパーマサキボタン
    • サポートチームのメンバーが、日常業務で使う機能をまとめたブックマーク集
  • ミラクルマサキボタン
    • 検証用環境へサインアップする際のフォーム入力を自動化してくれるボタン
  • スーパーマサキボタン to search
    • お客様の事業所IDを選択状態にすると、右クリックメニューへ管理画面へのURLを追加する拡張機能

いずれもとても便利なツールで、サポートチームやQAエンジニアでは、入社時オンボーディングでインストールを案内するぐらいに定着していました。
私はMさんと一緒のプロジェクトで関わっていたときに、これらの拡張機能のレビューを担当していたのですが、Mさんがfreeeを卒業されるタイミングで、今後のメンテナンスを任せられました。

新しい拡張機能を作ってみたい

freeeには、開発合宿という「普段の業務から離れて自分のやりたい開発ができる期間」が設けられています。

developers.freee.co.jp

2021年の開発合宿のときに、限られた期間の中で何か成果を出したい。どうせならば多くのメンバーの課題となっているものを解決して、承認欲求を満たしたいと思い、次の拡張機能を作りました。

拡張機能1. プロダクト・サービスのブックマークリスト 〜どこでもマサキボタン〜

freeeが提供しているプロダクト・サービスは、現時点でも25プロダクト程存在しており、かつ、それぞれに対して本番環境と14の検証環境があって、全てURLが異なります。また、ローカル開発環境でのURLも異なります。

エンジニアは動作確認のためにこれらの環境を行き来する必要がありますが、これらのURLを全部ブックマークに入れるのは大変だし、新しいプロダクトが追加された時にURLが分からないということが起きてしまいます。

この課題を解決するため、全てのプロダクト・サービスのURLにクイックにアクセスできるブックマークリストを作りました。
利用者によっては、本番環境のURLだけ分かれば良いとか、よく使うプロダクトを上位に配置したいということで、表示・非表示機能、ソート機能も実装し、設定画面から簡単に表示内容を変更できるようにしています。

拡張機能の名称は、これまでの「マサキボタン」シリーズの評判を生かして同じ名前にしようと思い、「どこでもマサキボタン」としました。なお、私の名前はマサキではありません。

アソビゴコロがあった方が良いなということで、どこでもドアのようなアイコンにしました。

こちらの拡張機能ですが、リリース後の評判も良く、開発環境で作業を行うエンジニアを中心に多くの人が広めてくれたこともあって、社内でかなりの方が利用してくれています。
新しいプロダクトが追加になったら作ったチームが自発的にPull Requestを出してくれたり、また、有志が多言語対応をしてくれたりと、自分たちでメンテナンスを行うムーブメントもかなり定着しています。

developers.freee.co.jp

エンジニア以外も使える拡張機能が作りたい

私が「どこでもマサキボタン」を開発後、主にエンジニアからの評判が良かったこともあって、新たな拡張機能を作ってみたいなーという気持ちが湧いてきました。
以前、Mさんが作っていた拡張機能はエンジニアのみならず、サポートチームのメンバーにも浸透している機能であり、同じように何かfreeers(freeeで働く人)のみんなが便利になるようなツールを作ってみたいと考えていました。

そんな中、freeeでは2022年8月に五反田にあった本社を大崎に移転しました。それが新しい拡張機能を作るきっかけとなったのです。

拡張機能2. 大崎オフィスの会議室の場所を調べる拡張機能 〜どこなの?マサキボタン〜

大崎オフィスの会議室ですが、コンセプト会議室と言って「ネンマツチョウセイ」や「タイシャクタイショウヒョウ」「インボイス」「フクギョウ」のようなアソビゴコロのあるネーミングとなっています。

note.com

当時はまだ移転したばかりだった為、会議室名と場所が一致しておらず、打ち合わせの際に会議室がどこにあるのか分からず、オフィス内をウロウロしたり、その結果会議に遅刻してしまうということが周囲で発生していました。

これはマズい!だけど、この問題を解決すれば再び承認欲求を満たすチャンスだ!ということで、次の開発合宿を待たずして、会議室名を入力することで、何階のどの場所にあるかをサクッと地図上に表示できる拡張機能を作りました。

名称は、「どこなの?マサキボタン」としました。繰り返しますが、私の名前はマサキではありません。

この拡張機能も評判が良く、今度はエンジニアに限らず、大崎オフィスにいるほぼ全てのfreeersがインストールしてくれるような拡張機能になりました。

マジ価値は誰でも届けられる

私が作ったChrome拡張機能ですが、正直技術的に難しいことをやっている訳ではなく、freeeのエンジニアは誰でも作れるようなものかと思います。
それでも、今回のように多くの人の課題を解決するような価値を届けることが出来ました。

今年の開発合宿でも、マサキボタンシリーズに機能追加をしてくれる人や新しい拡張機能を作ってくれる人も出てきています。
Mさんからのバトンをつなぐことで、自分以外のところでもムーブメントが起きており、これはマジ価値だなーと思います。

私からの記事は以上です!

明日の freee Developers Advent Calender 2023 は、freeeカードチームのエンジニア@junpayさんの記事になります。お楽しみに!