APC 技術ブログ

株式会社エーピーコミュニケーションズの技術ブログです。

株式会社 エーピーコミュニケーションズの技術ブログです。

Azure DevOpsのコメントをバチバチにデコる

f:id:thanaism:20211111142235p:plain

こんにちは、コンテナソリューショングループの髙井です。

ADO(Azure DevOps)を使っていてよく感じることトップ10に「DescriptionとかDiscussionのコメント欄でもっといろんな書式が使いたい」があると思います。

今日はそんなDiscussionをバチバチにデコって遊んでいくことを目論んだ記事です。

普通のコメントでDiscussionが進んでいるところに、いきなり華美な装飾が施されたコメントを投下すれば度肝を抜けること間違いなしです。

ADOのDiscussionで使えるデフォルト書式

f:id:thanaism:20220326134221j:plain
Discussionのコメント編集画面

まず、デフォルトで使える書式を列挙すると以下のようになります。

  • 太字
  • 斜体
  • 下線
  • 箇条書き
  • 番号付き箇条書き
  • ハイライト
  • 文字色
  • 絵文字
  • インデント下げ
  • インデント上げ
  • 取り消し線
  • 文字サイズ
  • コードブロック
  • メンション
  • 作業項目
  • プルリクエスト
  • 書式クリア
  • 画像挿入
  • ハイパーリンク挿入
  • ハイパーリンク削除

ADOでは、コメントでMarkdownを使うことはできません。したがってGUI上で出来ることは原則として上記の書式に限定されます。

開発のコラボレーションツールとして、インラインコードブロックや引用の書式がないのはちょっと厳しさを感じなくもないですよね。

これをなんとかしていきましょう。

【対策1】コピペでなんとかする

f:id:thanaism:20220326135616j:plain
Webページをコピペすれば書式が反映される

コメントがWeb上で表示されるということは、このコメント欄は最終的にHTMLとして表現されているわけなので、別のWebページをコピペしてくればその書式が反映されます。

上記の画像は、Zennのスクラップ編集画面にMarkdownで記入してプレビュー画面から内容をコピペしてきたものです。引用やインラインコードブロックが反映されているのが分かります。

別にZennでなくともQiitaでもGitHubでも書式がつけばなんでもよいので、好きな書式にレンダリングされた結果をコピペしてくればOKです。

おそらくこれが一番シンプルな方法かと思います。

ただし、注意すべき点として、コメント画面に直接HTMLタグを入力してもレンダリングはされません。勝手にエスケープが効いているようです。

【対策2】REST APIで直接HTMLタグを送信する

f:id:thanaism:20220326140810j:plain
REST APIからHTMLタグを直接送り込んだパターン

GUIの画面からはHTMLタグをそのまま使うことはできませんが、ADOのREST APIを使えば直接HTMLで情報を送り込むことができます。

コメントの追加は以下のAPIが利用できます。

docs.microsoft.com

【参考】Azure DevOps REST APIの利用方法

参考までにADOのREST APIの使い方を書いておきます。

一番簡単なのは、PostmanなどのGUIツールとPAT(Personal Access Token)を使ってAPIを叩く方法かと思います。

ADOの画面右上の歯車マークから「Personal Access Token」を発行し、APIのリクエストをBasic認証させればOKです。

PostmanだとAuthorizationヘッダーのbase64エンコードなども自動でやってくれるので面倒はありません。

Postman等を使わずにやる場合も ユーザー名とトークンをコロン:で結んだ文字列をbase64エンコードしてAuthorizationヘッダーに入れればよいでしょう。

Authorization:Basic {<ユーザー名>:<トークン>をbase64エンコードした文字列}

Basic認証について なおBasic認証と言葉に少し不安を感じる方もいるかもしれませんが、APIはHTTPSで暗号化されており、PATは有効期限の設定や事後的な権限の抹消が可能ですので、Basic認証だからといって必ずしも危険というわけではありません。

おわりに

HTMLタグが使えるということはHTMLタグで実現できるようなものは全てコメント上で実現できるということです!完全勝利したと言っても過言ではないでしょう。

もちろんSCRIPTタグなどはインジェクションを避けるためにサニタイズされますので、あくまで利用可能なのは書式設定レベルということになりますが。

それでは今日のところはここまで。みなさんもデコりまくったコメントで周囲の度肝を抜いていきましょう!