Backlogドキュメントで検索・置換ができるChrome拡張機能を作ってみた
こんにちは。クラウド事業本部コンサルティング部の桑野です。
最近お客様へ資料を連携する際、よくBacklogのドキュメント機能を使っています。
以前はWiki機能を使っていたのですが、将来的に廃止されるそうです。
ドキュメント機能の中で個人的に一番気に入っているのは、リアルタイムの同時編集ができるところですね。
オンライン会議中、私から説明しながらも他の方からリアルタイムでコメントをもらったり、即座に修正してもらえたりと、プロジェクトにおいてチームでできることというのが格段に広がったように感じています。
一方で「これがあればな〜」と思う機能がありました。
それが記事タイトルにもなっている、検索と置換です。
今回は、Chromeの拡張機能で実現することができたので、そのお話を共有します。
きっかけ
冒頭でもお伝えしたとおり、資料をお客様に連携する場としてドキュメント機能を利用しています。
検索と置換が欲しくなったのは、連携する資料の中に設計書が含まれており、命名規則が変わった際に漏らすことなく一括で変換したいなと考えたからです。
ドキュメント内の該当箇所を検索するのはブラウザのページ内検索で事足りますが、置換はやっぱり欲しいな〜と思っています。
Backlogの機能でできること
置換を行うにあたり、まずはBacklogから提供されている機能で使えそうなものがないかを探しました。
手始めにドキュメントページを探しますが、それっぽいUIは見つかりませんでした。
続いて、候補として自分の中で挙がったのが、Backlog APIです。
イメージとして「選択したドキュメントに対し、指定された置換対象の文字列と置換後の文字列を使って該当箇所を変換する」ようなAPIがないか探しました。
探したところ、ドキュメントは以下のAPIが提供されているようでした。
- ドキュメント一覧の取得
- ドキュメントの追加
- ドキュメント情報の取得
- ドキュメントツリーの取得
- ドキュメント添付ファイルの取得
- ドキュメントの削除
どうやら更新できそうなAPIは用意されていませんでした。
ただし代替手段として以下のワークフローで実現できそうです。
- 【API】ドキュメント情報の取得
- 【ユーザー】ドキュメント情報の編集
- 【API】ドキュメント情報の削除
- 【API】ドキュメント情報の追加
要するに、新しいドキュメントを登録し直すという形ですね。
文字列を置換するというちょっとした作業のためにAPIを使ってそこそこなワークフローを用意するのは大変ですね。
APIを使うということはAPIキーの管理をしなければならないということなので、あまり積極的に採用したいなとは思えませんでした。
私がドキュメントを探すのが下手なだけで、実は手軽にドキュメント内の文字列を置換する機能が提供されているかもしれないのですが、この段階で別の手段で実現できないかを検討する方向に踏み切りました。
他の手段による実現性
続いてChrome拡張機能でなんとかできないかを考えました。
というのも、BacklogドキュメントはWebブラウザ上で動いているので、ドキュメントを構成するDOMを操作することで、あたかも人間が入力したかのように錯覚させることができるんじゃないかという期待を持っていました。
Chrome拡張機能の簡単な概要ですが、ポップアップと呼ばれるUI部分とスクリプトと呼ばれる実処理で構成されています。
スクリプトがJavaScriptによってDOMを操作することができるため、ユーザーの代わりに入力を行わせるということができたりします。
ということでJavaScriptを実行して実現できそうか、Backlogの作りを確認します。
Dev Toolsを使ってHTMLをチェックすると、リッチテキストエディタにはProseMirrorが使われていることがわかります。
開発元であるヌーラボのブログでProseMirrorを採用しているという記載を発見することができました。
JavaScriptによってProseMirrorを操作することができるのであれば、Chrome拡張機能で実現できそうですね。
私はProseMirrorを使ったことがないため、実現できそうかはClaudeと一緒に調べました。
ProseMirrorのガイドによると、タイピングなどの入力はブラウザに任せており、ブラウザがDOMを変更すると、その差分を検知してエディタに反映する仕組みのようです。
ただし、これはあくまでブラウザの入力処理を経由した変更に限った話で、JavaScriptからDOMを直接書き換えた場合は、ProseMirrorが自身の管理するデータモデルとの不整合を検知し、元に戻してしまう可能性があります。
つまりは、キーボード入力のようにブラウザの入力処理を経由させる方法であれば、JavaScriptから変更できそうです。
試す価値がありそうだと考えたため、早速Chrome拡張機能で開発をしてみました。
拡張機能の開発
私はChrome拡張機能の開発経験がないため、コーディングはClaude Codeに一任することにしました。
そのため、自身の担当範囲は実現すべき機能の定義を考えることとしました。
機能
以下は私があると嬉しいな〜考えた機能です。
これらを実装してもらい、動作確認をしつつ調整をするという繰り返しによってブラッシュアップしました。
UIにはcc-frontend-skillsを使用しましたが、本当に質の高いデザインを作成してくれる部分が非常に気に入って使っています。
検索
- テキスト検索ができる
- リアルタイム検索である
- 大文字・小文字の区別が切り替えられる
置換
- 現在選択している1件が置換できる
- 一致した全件を一括で置換できる
ハイライト
- 検索一致箇所がハイライト表示される
- 現在位置の一致箇所が他と区別できる（一致箇所：黄色、現在位置：オレンジ）
- 「前」ボタン、「次」ボタンで一致箇所を移動できる
- 移動時に該当箇所へ自動スクロールする
UI / UX
- ポップアップを閉じたらハイライトが自動的にクリアされる
- 検索文字列がページリロードまで保持される（ポップアップを閉じて再度開いても復元される）
- Backlog以外のページで開いた場合は適切なエラーメッセージを表示する
- UIはBacklogのブランドカラーに合わせる
できたもの
以下のスクリーンショットが出来上がったものです。
しっかりとリアルタイム検索、置換、ハイライトが実現されており、個人で使う分にはとても使い勝手の良いものが完成しました。ウェブストアに登録して配布するつもりは今のところ考えていませんが、リポジトリは公開しているため、もし使ってみたいという方はソースコードを落として拡張機能として登録いただければと思います。
拡張機能の登録手順
パッケージ化されていない拡張機能を登録する手順を示します。
1. リポジトリをクローンする
2. chrome://extensions/を開く
3. デベロッパーモードを有効にする
4. 「パッケージ化されていない拡張機能を読み込む」を選択する
先ほどクローンしたリポジトリのbacklog-replace-extensionというディレクトリを選択します。
5. Backlogのドキュメントページを開き、「編集」ボタンを押下する
6. 拡張機能のアイコンをクリックし、ポップアップを開く
まとめ
いかがだったでしょうか？
今回はChrome拡張機能でちょっとしたオリジナルのツールを作成しました。
作成したツールはしばらく使いつつ使用感のイマイチな部分を改善していく予定です。
将来的にBacklogの公式の機能として検索や置換が提供されると嬉しいですね。
最後までご覧いただきありがとうございました。
