Azure DevOps サービス
ヒント
テーマ設定や VSS からの移行など、最新の拡張機能開発ガイダンスについて説明します。SDK については、 Azure DevOps Extension SDK 開発者ポータルを参照してください。
この記事では、スプリントおよびクエリ ハブの後に Azure Boards に表示されるハブを作成します。
前提条件
- Node.js
- パッケージツールを拡張して実行
npm install -g tfx-cli
拡張機能の構造を作成する
拡張機能のディレクトリを作成し、初期化します。
mkdir my-hub-extension cd my-hub-extension npm init -y npm install azure-devops-extension-sdk --saveディレクトリは次のようになります。
|--- my-hub-extension |--- node_modules |--- azure-devops-extension-sdk |--- images |--- icon.png |--- hello-world.html |--- package.json |--- vss-extension.json
ハブ ページを作成する
拡張機能ディレクトリのルートに hello-world.html を作成します。 このページでは、SDK を読み込んで初期化し、現在のユーザーの名前を表示します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script>
window.requirejs.config({
enforceDefine: true,
paths: {
'SDK': './lib/SDK.min'
}
});
window.requirejs(['SDK'], function (SDK) {
SDK.init();
SDK.ready().then(() => {
document.getElementById("name").innerText = SDK.getUser().displayName;
});
});
</script>
</head>
<body>
<h1>Hello, <span id="name"></span></h1>
</body>
</html>
ターゲットにできるハブ グループの完全な一覧については、 拡張ポイントのリファレンスを参照してください。
拡張機能マニフェストを作成する
拡張機能ディレクトリのルートに vss-extension.json を作成します。
{
"manifestVersion": 1,
"id": "sample-extension",
"version": "0.1.0",
"name": "My first sample extension",
"description": "A sample Azure DevOps extension.",
"publisher": "fabrikamdev",
"public": false,
"categories": ["Azure Boards"],
"targets": [
{
"id": "Microsoft.VisualStudio.Services"
}
],
"icons": {
"default": "images/icon.png"
},
"contributions": [
{
"id": "hello-world-hub",
"type": "ms.vss-web.hub",
"description": "Adds a 'Hello' hub to the Work hub group.",
"targets": [
"ms.vss-work-web.work-hub-group"
],
"properties": {
"name": "Hello",
"order": 99,
"uri": "hello-world.html"
}
}
],
"scopes": [
"vso.work"
],
"files": [
{
"path": "hello-world.html", "addressable": true
},
{
"path": "node_modules/azure-devops-extension-sdk",
"addressable": true,
"packagePath": "lib"
},
{
"path": "images/icon.png", "addressable": true
}
]
}
Important
publisherを発行元名に変更します。 パブリッシャーを作成するには、「 パッケージ化、発行、インストール」を参照してください。 開発中publicfalseに設定したままにしておきます。
主なマニフェスト プロパティ
| プロパティ | 説明 |
|---|---|
| 貢献 | ハブを定義します。
typeはms.vss-web.hubされ、追加するハブ グループtargets指定します。 対象となるすべてのハブ グループの 拡張ポイント を参照してください。 |
| contributions.properties.name | ハブの表示名。 |
| contributions.properties.order | ハブ グループ内のハブの位置。 |
| contributions.properties.uri | ハブとして表示するページのパス (拡張ベース URI に対する相対パス)。 |
| スコープ | 拡張機能に必要なアクセス許可。
vso.work は、作業項目への読み取りアクセスを許可します。
スコープを参照してください。 |
| ファイル | パッケージに含めるファイル。 URL が必要なファイルの addressable: true を設定します。 |
マニフェストの詳細については、「 拡張マニフェストリファレンス」を参照してください。
カスタム ハブ グループを追加する
Work や Code などの組み込みのハブ グループにハブを追加する代わりに、独自のハブ グループを作成してハブを追加します。
ms.vss-web.hub-group投稿とそれをターゲットとするms.vss-web.hub投稿の両方を追加します。
"contributions": [
{
"id": "sample-hub-group",
"type": "ms.vss-web.hub-group",
"description": "Adds a 'Samples' hub group at the project level.",
"targets": [
"ms.vss-web.project-hub-groups-collection"
],
"properties": {
"name": "Samples",
"order": 100
}
},
{
"id": "hello-hub",
"type": "ms.vss-web.hub",
"description": "Adds a 'Hello' hub to the Samples hub group.",
"targets": [
".sample-hub-group"
],
"properties": {
"name": "Hello",
"order": 99,
"uri": "hello-world.html"
}
}
]
組み込みグループにハブを追加する場合の主な違い:
- ハブグループのコントリビューションは、プロジェクトレベルの
ms.vss-web.project-hub-groups-collectionまたは組織レベルのms.vss-web.collection-hub-groups-collectionに向けられています。 - ハブの
targets配列は、相対参照 (.sample-hub-group) を使用して、同じ拡張機能で定義されているハブ グループを指します。 - ハブ グループの
orderプロパティは、グループがナビゲーションに表示される場所を制御します。