次の方法で共有

Web 拡張機能を開発する

  • [アーティクル]

Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019

拡張機能を使用して、新しい Web エクスペリエンス、ダッシュボード ウィジェット、ビルド タスクなどを使用して Azure DevOps を強化します。 HTML、JavaScript、CSS などの標準テクノロジを使用して拡張機能を開発できます。 このチュートリアルでは、Azure DevOps 用の Web 拡張機能を作成する手順について説明します。

ヒント

Azure DevOps Extension SDKを使用した拡張機能の開発に関する 拡張機能のサンプルと最新のドキュメントについて説明します。

前提 条件

カテゴリ 必要条件
アクセス許可 組織の所有者。
ツール - Node.js
- 拡張機能パッケージツール: コマンドプロンプトから npm install -g tfx-cli を実行し、その後で拡張機能 を パッケージ化するために使用します。

ディレクトリとマニフェストを作成する

拡張機能は、必要なマニフェスト ファイルを含む一連のファイルで構成されます。 これを .vsix ファイルにパッケージ化し、Visual Studio Marketplace に発行します。

  1. 拡張機能に必要なファイルを保持するディレクトリを作成します。

    mkdir my-first-extension

  2. このディレクトリから新しい npm パッケージ マニフェストを初期化します。

    npm init -y

    このファイルには、拡張機能に必要なライブラリが記述されています。

  3. Azure DevOps Extension SDK パッケージをインストールし、npm パッケージ マニフェストに保存します。

    npm install azure-devops-extension-sdk --save

この SDK には、拡張機能が埋め込まれているページとの通信に必要な API を提供する JavaScript ライブラリが含まれています。

  1. vss-extension.json という名前の拡張マニフェスト ファイルを拡張機能ディレクトリのルートに作成し、次の内容を含めます。

    {
    "manifestVersion": 1,
    "id": "my-first-extension",
    "publisher": "",
    "version": "1.0.0",
    "name": "My First Extension",
    "description": "A sample Visual Studio Services extension",
    "public": false,
    "categories": ["Azure Repos"],
    "targets": [
        {
            "id": "Microsoft.VisualStudio.Services"
        }
    ],
    "contributions": [
        {
            "id": "my-hub",
            "type": "ms.vss-web.hub",
            "targets": [
                "ms.vss-code-web.code-hub-group"
            ],
            "properties": {
                "name": "My Hub",
                "uri": "my-hub.html"
            }
        }
    ],
    "files": [
        {
            "path": "my-hub.html",
            "addressable": true
        },
        {
            "path": "node_modules/azure-devops-extension-sdk",
            "addressable": true,
            "packagePath": "lib"
        }
    ]
}

    重要

    public プロパティは、Visual Studio Marketplace のすべてのユーザーに拡張機能を表示するかどうかを制御します。 開発中は拡張機能を非公開のままにします。

  2. 拡張機能ディレクトリのルートに my-hub.html という名前のファイルを作成します。これは、Web エクスペリエンスに貢献したビュー (ハブとも呼ばれます) 用のコンテンツです。

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <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) {
            if (typeof SDK !== 'undefined') {
                console.log("SDK is defined. Trying to initialize...");
                SDK.init();
                SDK.ready().then(() => {
                    console.log("SDK is ready");
                    document.getElementById("name").innerText = SDK.getUser().displayName;
                });
            } else {
                console.log('SDK is not defined');
            }
        });
    </script>
    <style>
        body {
            background-color: rgb(0, 67, 117);
            color: white;
            margin: 10px;    
            font-family: "Segoe UI VSS (Regular)","-apple-system",BlinkMacSystemFont,"Segoe UI",sans-serif;
        }
    </style>
</head>
<body>        
    <h1>Hello, <span id="name"></span></h1>
</body>
</html>

  3. 拡張機能ディレクトリは次の例のようになります。

    |-- my-hub.html
|-- node_modules
    |-- @types
    |-- azure-devops-extension-sdk
|-- package.json
|-- vss-extension.json
    ヘルプが必要ですか? Azure DevOps Services Developer Communityに質問を投稿します。

次の手順

拡張機能のパッケージ化と発行