Backlogの担当者の変更操作を、キーボードショートカットでできるようにするChrome拡張を作りましたので紹介します。
私が所属しているフィッツプラスでは、Backlogの運用ルールに「チケットの担当者欄は、ボールを持つ人に割り当てる」というものがあります。そのため頻繁に担当者の変更をするのですが、この操作をできるだけ簡単にしたくてこの拡張を作りました。
コメントの記入はキーボードを使うので、そのまま操作の流れで担当者が変更できると便利だろうとキーボードショートカットで操作できるようにしています。Backlogの画面への干渉も少ないので、開発やメンテナンスが楽そうだと思ったというのもあります。
詳しい拡張の使い方などに関しては、Chromeのウェブストアのほうをご覧いただくとして、この記事では、拡張の開発が思っていたより簡単だったという体験談をお話しします。
コードは以下で公開しています。
まずはローカル環境で動かす
Chrome拡張について調べてみたらかなりシンプルな構成から開発をはじめられることがわかったので、最小構成からスタートしてみました。
具体的にはパッケージの設定をするmanifest.jsonと、実際に特定のウェブサイトに機能を追加するためのJSファイルとなるcontent.jsの2つのファイルを用意するだけでOKです。
{
"manifest_version": 3,
"name": "Backlog assign helper",
"version": "1.0.0",
"description": "Assign the mentioned member as the assignee with keyboard shortcuts.",
"permissions": ["activeTab", "scripting"],
"content_scripts": [
{
"matches": ["https://*.backlog.jp/*", "https://*.backlog.com/*"],
"js": ["content.js"]
}
]
}
実際のプロジェクト初期の全体像はGitHubのinitial importにも残っています。リンク先を見ていただくと、全部で80行しかないというシンプルさがわかると思います。
適当なディレクトリに用意した2つのファイルを配置して、Chromeの拡張機能の管理画面から「デベロッパーモード」をオンにします。次に「パッケージ化されていない拡張機能を読み込む」ボタンを押して先程のディレクトリを選択すると設定が読み込まれ、ローカルで動くようになります。あまりにもあっさりできたのでビックリしました。
実装とデバッグ
この状態になったらあとはガシガシ開発を進めるだけです。不便な点は、ファイルを編集してもChrome上ではすぐに反映されないことです。変更を反映させるには、拡張機能の設定画面にある、更新ボタンを押さなくてはいけません。
いちいち更新ボタンを押すのは面倒なので、私はデベロッパーツール上でデバッグしながらコードを調整していました。
こうした手間をかけたくない場合、編集を即座に反映する仕組みも作れるようです。たとえば、以下のような拡張機能の高機能テンプレートを使う方法が簡単です。このテンプレートにはホットリロードの機能が含まれていると書いてあります。私の場合は、リポジトリが肥大化することや、よくわからないものが混入してしまうのが嫌だったので使いませんでした。
話は逸れますが、テンプレートといえばこういうシンプルなものもあるようです。設定画面やメニュー項目など、拡張でよく使う機能がひとつひとつ小さくまとまっているので、新しく作る場合はこのリポジトリをフォークして始めるのも良さそうです。
そんなこんなで、最初はローカルで試してみてすごい便利だったので開発チームに共有したところ、むしろChromeウェブストアで公開してくれという声があったので、冒頭に挙げた通りストア公開にもチャレンジしました。
ストアへの公開
ストアへの公開は今回初挑戦です。面倒だったのはちゃんとしたストア用の画像や説明文を用意するところでした。
- アイコン画像の作成
- アイキャッチ画像の作成
結果的にはスクショに文字を付けるだけの簡素なものにはなりましたが、用途が伝われば十分かなと思います。
また、根本的な問題として、拡張をアップロードするのはどこなのか、なかなか見つけられませんでした。chrome for developersというページをうろうろしてたんですが、ここはちょっと違うみたいなんですよね。未だにどうやってたどり着いたのか謎です。ストアの右上のメニューにダッシュボードへのリンクがあって、ここから行けます。
拡張にも審査があるので、各種の権限が必要な理由やリモートコードを使っているか、といった質問に答える必要があります。App StoreやGoogle Playの審査で慣れているので、なんとも思いませんが、初めての人にはちょっと面倒かもしれません。
まとめ
作り始める前は、こんなに簡単に動くものができると思っていなかったのでもっと早くやってみれば良かったです。拡張以外にも、やってみたら意外と難しくなかったということも多いので、まずはなんでもやってみるという姿勢が大事だなと改めて思いました。
みなさんも「このサイト、こういう動きができたら便利なのにな」って思うことがあれば試しに拡張作ってみてもいいんじゃないでしょうか。自分で使うだけでもだいぶ違うと思いますよ。今だと、AIを使ってより効率的に開発できるので、はじめやすいですしね。
アドバンテッジリスクマネジメント(ARM)開発チームのテックブログです。 ARMの開発・運用にまつわる技術的な知見を投稿します。 主な技術スタックは、 Vue / Java / TypeScript / JavaScript / Python / AWS などです。
Discussion