Git
backlog
ブックマークレット
ブランチ

Backlogからブランチ名を作るブックマークレットの作り方!

Yourmystarのインターン、京極です!
今回、Yourmystarでの開発に役立つブックマークレットを作りましたのでそのご紹介です。

Yourmystarでの開発の流れ

Yourmystarでは、Backlogによる課題の管理を行っています。
Backlogには各課題に対してキーが割り振られ、課題としてのIDとして機能しています。
そのIDを、Gitのブランチ名と紐付けており、

<開発者名>/<チケットのキー>

というブランチ名で開発を行ってはプルリクエストを作るという開発のフローとなっています。
例えば、Backlog上のある課題のキーが、"HOGE-1234"となっている場合、

kyogoku/HOGE-1234

というのがブランチ名という感じです。

そのため、ブランチ名を入れる際に、

  1. 予め開発者名と"/"を入力
  2. Backlogで課題のキーをコピー(Backlogの課題詳細のページ上でキーの右のアイコンをShiftキーを押しながらクリックするとコピーされる、Backlog標準の機能を使う。)

という手順を踏んでいます。

今回、この流れをブックマークレットを使って簡略化してみます。

ブックマークレットを使っての簡略化

エンジニアによってGitを操作する環境は違うでしょうから(僕の場合、EmacsでMagitを使ってます。)、勝手にローカル環境でブランチ名が作られるというところはやらずに、ブランチ名のコピーをBacklog詳細ページから実現できれば十分です。

そのために、ブックマークレットを使います。ブックマークレットを簡単に説明しますと、ブラウザ上の任意のページ上で、特定のJavaScriptを実行させる仕組みで、ぐぐってみると様々なブックマークレットが公開されています。

今回ブックマークレットを使い以下の機能を実現させます。

  1. Backlogの課題ページからキー名を抽出
  2. 開発名の部分とキー名を結合させブランチ名を作る
  3. できたブランチ名をコピー

3ステップを順に見ていきましょう。

(1/3)Backlogの課題ページからキー名を抽出

Backlogの課題ページを開くと、キーはURL中に含まれていることが分かります。

https://hogehoge.backlog.jp/view/HOGE-1234

という感じで、view/以降の部分がキーです。

JavaScriptでサクっと取得できます。

location.href.match(/backlog\.jp\/view\/(\S+)/)[1]

(2/3)開発名の部分とキー名を結合させブランチ名を作る

開発者名をいちいちブックマークレットを実行させる度に入力を求めるは面倒ですので、ローカルストレージに保存するようにしました。

if (!localStorage.getItem("__account__")) {
   localStorage.setItem("__account__", prompt("アカウント名を入れてください"))
}

var branchName = localStorage.getItem("__account__") + "/" + location.href.match(/backlog\.jp\/view\/(\S+)/)[1]

(3/3)できたブランチ名をコピー

コピー機能の実装に、こちらの記事を参考にさせていただきました。

http://peccu.hatenablog.com/entry/2016/11/06/153000

内部で、divを作りその中にコピーしたい内容を入れて、documentのexecCommand関数を使ってコピーを実現するという実装で大変勉強になります。

完成したコードをブックマークレット化

コードとしては完了しましたので、ブックマークレット化すれば完了です。
ブックマークレットとして動かすには、JavaScriptのコードをエンコード化する必要があり、そのために、以下のサービスを利用しました。

https://mrcoles.com/bookmarklet/

完成したのは以下のコードになります。
確認をしたのがChrome環境ですので、Chromeでのブックマークレットの追加方法を説明しますと、Chromeのブックマークのバーを出して、ページの追加を行い、名前に"Copy branch name"等と入力して、URLの部分に以下の一行を貼り付けてください。

javascript:(function()%7Bfunction copy(copyText)%7Bif(window.clipboardData)%7Bwindow.clipboardData.setData("Text"%2C copyText)%3Breturn%3B%7Dvar tmpElem%3Ddocument.createElement('div')%3BtmpElem.style.position %3D 'absolute'%3BtmpElem.style.top %3D '-1000px'%3BtmpElem.innerText %3D copyText%3Bdocument.body.appendChild(tmpElem)%3Bvar range %3D document.createRange()%3Brange.selectNodeContents(tmpElem)%3Bvar selection%3Bselection %3D window.getSelection()%3Bselection.removeAllRanges()%3Bselection.addRange(range)%3Bdocument.execCommand("copy"%2C false%2C null)%3BtmpElem.remove()%3B%7D%3Bif (!localStorage.getItem("__account__")) %7BlocalStorage.setItem("__account__"%2C prompt("アカウント名を入れてください"))%7Dcopy(localStorage.getItem("__account__") %2B "%2F" %2B location.href.match(%2Fbacklog%5C.jp%5C%2Fview%5C%2F(%5CS%2B)%2F)%5B1%5D)%7D)()

Backlog上の課題ページを開き、作成したブックマークレットのボタンを押すとブランチ名がコピーされているはずです。

まとめ

ブックマークレットの作成の流れを説明してみました。ブックマークレットで捗るシチュエーションはいろいろありそうですのでいろいろと作ってみたいと思います。