GitHubのProjectsでConvert to issue時に定型文をムリヤリ挿入するアイデア

CX事業本部の熊膳です。GitHubのProjectsでnoteをIssueに変換する際に定型文を挿入するアイデアを紹介します。

やりたいこと

参加しているプロジェクトでは、GitHubのProjectsを活用したカンバンを利用しています。このとき、POと話をしながら一旦noteとしてPBIを追加し、それをIssueに変換することが多いです。 このとき、Body部分に自動的にいつも記述する内容が入っていると便利だなぁと思います。

ご存知のように、GitHubではIssueを作成するときにテンプレートを利用できます。

• テンプレートを使用して便利な Issue やプルリクエストを推進する

ただし、GitHubのProjectsでnoteをIssueに変換する際には、このテンプレートが適用されません（たぶん）。 「Convert to issue」時にもテンプレートを適用したい（っていうか、Bodyに定型フォーマットを挿入したい）というのがモチベーションです。

Convert to issueの仕組み

Google ChromeのDevtoolsでElementsを覗いてみたところ、どうやらnoteに記述した内容を<template>タグに一旦書込み、「Convert to issue」時にクローンしてダイアログに表示しているようです。

つまり、定型文を<template>タグの<textarea>部分に挿入してあげれば（お行儀は悪いですが）できそうです。

やってみた

以下の作戦でとりあえず動くかやってみます。<template>内へのアクセスにgetElementById()は利用できないことに注意です。

1. idが「convert-to-issue-xxx」の<template>タグを取得する
2. <template>内のidが「convert-card-body」の<textarea>に定型文をセットする

ChromeのDevtoolsのConsoleで以下のスクリプトを実行してみます。

const template = document.querySelectorAll("template#convert-to-issue-42241852");
template[0].content.querySelector("#convert-card-body").value = "テンプレート挿入";

うまくいきました。

これをベースに以下を追加すれば完成です。

• 「Convert to issue」のメニュークリック時に、（冗長ですが）全<template>に定型文をセットする
• ただし「Convert to issue」時にnoteの2行目が本文に挿入される仕様なので、<textarea>に何か入っていたら実施しない

一旦ページをリロードしてから、あらためてChromeのDevtoolsのConsoleで以下のスクリプトを実行してみます。

const elm = document.querySelector('.project-columns-container')
elm.addEventListener('click', event => {
    if(event.target.matches('button[data-dialog-id^="convert-to-issue-"]')){
        const template = document.querySelectorAll("template[id^='convert-to-issue-']");
        template.forEach(element => {
        if (element.content.querySelector("#convert-card-body").value.length == 0){
            element.content.querySelector("#convert-card-body").value =  
`## ストーリー
**<Who>**として
**<What>**したい
なぜなら**<Why>**だから

## 完了条件
-`;
        }
      })
    }
})

いい感じですね。

まとめ

GitHubのProjectsでnoteをIssueに変換する際に定型文を挿入するアイデアを紹介しました。 私は個人で作成しているChrome機能拡張に追加して活用しています。

以上、どなたかの参考になれば幸いです。