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 を使用した拡張機能の開発に関する拡張機能のサンプル と最新の ドキュメントを確認します。

前提条件

次のアクセス許可とインストールが必要です。

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

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

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

    mkdir my-first-extension

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

    npm init -y

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

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

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

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

  4. 次の内容を含む拡張ディレクトリのルートに名前が付けられた 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"
        }
    ]
}

    Note

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

  5. Web エクスペリエンスに貢献したビュー (ハブとも呼ばれます) 用の次の内容を含む、拡張機能ディレクトリのルートに名前 my-hub.html を付けたファイルを作成します。

    <!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>

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

    |-- my-hub.html
|-- node_modules
    |-- @types
    |-- azure-devops-extension-sdk
|-- package.json
|-- vss-extension.json
お困りの際は、 Azure DevOps Services 開発者コミュニティに 質問を投稿します。

次のステップ

拡張機能をパッケージ化して発行する