次の方法で共有

Web 拡張機能を開発する

Azure DevOps Services |Azure DevOps Server |Azure DevOps Server 2022

拡張機能を使用して、新しい Web エクスペリエンス、ダッシュボード ウィジェット、ビルド タスクなどを使用して Azure DevOps を強化します。 このチュートリアルでは、単純な Web 拡張機能の作成とパッケージ化について説明します。

ヒント

完全な作業リファレンスについては、 azure-devops-extension-sample リポジトリを参照してください。

前提 条件

カテゴリ 必要条件
アクセス許可 組織の所有者 または プロジェクト コレクション管理者グループの メンバー。
ツール - Node.js (LTS バージョンを推奨)
- 拡張機能パッケージ ツール: npm install -g tfx-cli を実行して TFX CLI をインストールします。

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

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

  1. 拡張機能のディレクトリを作成します。

    mkdir my-first-extension && cd my-first-extension

  2. npm パッケージ マニフェストを初期化します。

    npm init -y

  3. Azure DevOps 拡張機能 SDK をインストールします。

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

    この SDK は、Azure DevOps ホスト フレームと通信するための API を提供します。

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

    {
    "manifestVersion": 1,
    "id": "my-first-extension",
    "publisher": "",
    "version": "1.0.0",
    "name": "My First Extension",
    "description": "A sample Azure DevOps 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"
        }
    ]
}

    重要

    [ publisher ] フィールドを Marketplace の発行元 ID に設定します。 public プロパティは、Visual Studio Marketplace のすべてのユーザーに拡張機能を表示するかどうかを制御します。 開発中は拡張機能を非公開のままにします。

  5. 拡張機能ディレクトリのルートに my-hub.html という名前のファイルを作成し、次の内容を含めます。 この HTML ページは、Azure DevOps 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) {
            SDK.init();
            SDK.ready().then(function () {
                document.getElementById("name").innerText = SDK.getUser().displayName;
            });
        });
    </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>

    注

    この例では、RequireJS を使用して SDK を読み込みます。これはビルド 手順なしで動作します。 運用拡張機能の場合は、パフォーマンスを向上させるために、ES モジュールのインポート () で import * as SDK from "azure-devops-extension-sdk" などのバンドルを使用します。 Webpack ベースのセットアップについては、 拡張機能のサンプル を参照してください。

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

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

次の手順

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

関連コンテンツ

  • Last updated on