Backlogから日報・工数記録用のテキストをブックマークレットで生成する

はじめに

会社ではBacklogで対応した課題をスプレッドシートにまとめて作業管理をしているのですが、毎回の転記が地味に面倒でした。

• 日付を入れる
• 担当者を入力する
• カテゴリを入力する
• 課題タイトルを入力する
• 課題URLを入力する

1件ごとは単純ですが、件数が増えると地味に面倒です。
しかも、手入力だと転記漏れや表記ゆれも起きやすくなります。

そこで今回は、Backlogの課題ページ上で実行すると、スプレッドシートに貼り付けやすい形式の文字列をクリップボードへコピーするブックマークレットを作りました。

単純作業ではあるものの、件数が増えると無視しにくい手間になります。
そこで、Backlogの課題ページ上で実行すると、スプレッドシート貼り付け用のテキストをそのままコピーできるブックマークレットを作りました。

やりたかったこと

やりたかったのは、Backlogの課題ページを開いた状態で、次のような形式のテキストを一発でコピーすることです。

YYYY/MM/DD    名前    カテゴリ    PROJ-123 課題タイトル    https://xxx.backlog.jp/view/PROJ-123

この形式でコピーできれば、そのままスプレッドシートに貼り付けるだけで記録できます。
タブ区切りにしておけば、各列にきれいに分かれてくれます。

作成したブックマークレット

今回作成したのはこちらです。

javascript:(()=>{  const today = new Date();  const yyyy = today.getFullYear();  const mm = ("0" + (today.getMonth() + 1)).slice(-2);  const dd = ("0" + today.getDate()).slice(-2);  const dateStr = `${yyyy}/${mm}/${dd}`;  const name = "YOUR NAME";  const category = "";  const rawUrl = window.location.href.split('#')[0];  const ticket = document.querySelector(".ticket__key-number").innerText;  const title = document.querySelector(".title-group__title-text").innerText;  const text = `${dateStr}\t${name}\t${category}\t${ticket} ${title}\t${rawUrl}`;  navigator.clipboard.writeText(text);})();

何をしているのか

このブックマークレットでは、以下の情報を取得しています。

• 当日の日付
• 固定の名前
• 固定のカテゴリ
• Backlogの課題番号
• Backlogの課題タイトル
• 課題URL

そして、それらをタブ区切りの1行テキストにして、クリップボードへコピーしています。

ポイントはこの部分です。

const text = `${dateStr}\t${name}\t${category}\t${ticket} ${title}\t${rawUrl}`;
navigator.clipboard.writeText(text);

\\t を使っているので、GoogleスプレッドシートやExcelに貼ると列ごとに分かれます。

使い方

1. ブックマークとして登録する

ブラウザのブックマークを新規作成し、URL欄にブックマークレット全体を貼り付けます。

名前は適当に付けちゃってOKです。

---

2. 自分用に書き換える

この部分は自分の運用に合わせて変更します。

const name = "YOUR NAME";
const category = "";

例えば、次のようにしておくと毎回入力しなくて済みます。

const name = "山田太郎";
const category = "開発";

カテゴリを案件や作業種別ごとに使い分けたいなら、ここは空欄のままでもよいです。

---

3. Backlogの課題ページで実行する

Backlogの課題詳細ページを開いた状態で、登録したブックマークをクリックします。

その後、スプレッドシートに貼り付けると、1行分の記録として入れられます。

---

便利だった点

実際に使ってみて、次の点がかなり楽になりました。

• 転記ミスがなくなる
• コピー作業が一回で済む
• ストレスフリー

この手の記録作業は、1回あたり数秒でも積み重なると無視できません。
また、面倒だと記録そのものを後回しにしがちです。
そこを　「1クリックでコピー」　にできるのは小さいことではありますが、かなり便利になりました。

注意点

BacklogのHTML構造に依存する

今回のコードは、Backlog上の次のCSSセレクタに依存しています。

document.querySelector(".ticket__key-number")
document.querySelector(".title-group__title-text")

つまり、Backlog側のHTML構造やクラス名が変わると動かなくなる可能性があります。

その場合は、ブラウザの開発者ツールで対象要素を確認して、セレクタを調整する必要があります。

臨機応変に入力したい場合

例えば、カテゴリを毎回入力したいなら次のようにもできます。

javascript:(()=>{  
  const today = new Date();  
  const yyyy = today.getFullYear();  
  const mm = ("0" + (today.getMonth() + 1)).slice(-2);  
  const dd = ("0" + today.getDate()).slice(-2);  
  const dateStr = `${yyyy}/${mm}/${dd}`;  
  const name = "YOUR NAME";  
  const category = prompt("カテゴリを入力してください", "") ?? "";  
  const rawUrl = window.location.href.split('#')[0];  
  const ticket = document.querySelector(".ticket__key-number").innerText;  
  const title = document.querySelector(".title-group__title-text").innerText;  
  const text = `${dateStr}\t${name}\t${category}\t${ticket} ${title}\t${rawUrl}`;  
  navigator.clipboard.writeText(text);
})();

また、コピー完了が分かりにくい場合は下記を追加してもいいかもです。

alert("コピーしました");

ただし、アラートが邪魔に感じる場合もあるので、そのあたりは運用次第です。

まとめ

Backlogの課題情報を手でスプレッドシートへ転記する作業は、単純ですが地味に面倒です。
今回のようにブックマークレットを使うと、必要な情報を整形済みの状態で1クリックコピーできるので、作業記録の負担を地味ですが減らせます。

今回のケースはかなりピンポイントすぎますが、色々と応用が利きそうです！