Web 拡張機能の開発Develop a web extension

Azure DevOps Services |Azure DevOps Server 2020 |Azure DevOps Server 2019 |TFS 2018 |TFS 2017Azure DevOps Services | Azure DevOps Server 2020 | Azure DevOps Server 2019 | TFS 2018 | TFS 2017

拡張機能を使用して、新しい web エクスペリエンス、ダッシュボードウィジェット、ビルドタスクなどを使用して Azure DevOps を強化します。Use extensions to enhance Azure DevOps with new web experiences, dashboard widgets, build tasks, and more. HTML、JavaScript、CSS などの標準テクノロジを使用して拡張機能を開発できます。You can develop extensions using standard technologies like HTML, JavaScript, and CSS. パッケージ化されて Visual Studio Marketplace に発行され、その後組織にインストールできます。They're packaged and published to the Visual Studio Marketplace, and can then be installed into an organization.

ヒント

拡張機能の開発に関する最新のドキュメントについては、 Azure DevOps EXTENSION SDKをご覧ください。Check out our newest documentation on extension development using the Azure DevOps Extension SDK.

このチュートリアルでは、最初の web 拡張機能を作成する手順について説明します。これには次のタスクが含まれます。This tutorial guides you through creating your first web extension, which includes the following tasks.

  • 必要なツールをインストールするInstall the required tools
  • 拡張機能のローカルディレクトリを読み取ります。Read a local directory for your extension
  • 拡張機能マニフェストファイルとハブの投稿を作成するCreate an extension manifest file and hub contribution
  • 拡張機能をパッケージ化して Marketplace に発行するPackage and publish your extension to the Marketplace
  • 組織で拡張機能をテストするTest your extension in an organization
ヘルプが必要ですか? Need help? Azure DevOps Services 開発者コミュニティに質問を投稿します。Post questions to the Azure DevOps Services Developer Community.

前提条件Prerequisites

次のアクセス許可とインストールが必要です。You must have the following permission and installations.

  • あなたは組織の所有者です。You're an organization Owner. 組織がない場合は、 組織を無料で作成できます。If you don't have an organization, you can create an organization for free.

  • Node.js をインストールします。Install Node.js.

  • コマンドプロンプトからを実行して、拡張機能パッケージツール (TFX) をインストールし npm install -g tfx-cli ます。Install the extension packaging tool (TFX) by running npm install -g tfx-cli from a command prompt.

ディレクトリとマニフェストを作成するCreate a directory and manifest

拡張機能は、必要なマニフェストファイルを含む一連のファイルで構成されます。An extension is composed of a set of files that includes a required manifest file. これを .vsix ファイルにパッケージ化し、Visual Studio Marketplace に発行します。You package it into a .vsix file and publish to the Visual Studio Marketplace.

  1. 拡張機能に必要なファイルを格納するディレクトリを作成します。Create a directory to hold the files needed for your extension:

    md my-first-extension
    
  2. このディレクトリから、新しい NPM パッケージマニフェストを初期化します。From this directory, initialize a new NPM package manifest:

    npm init -y
    

    このファイルには、拡張機能に必要なライブラリが記述されています。This file describes the libraries required by your extension.

  3. Microsoft VSS Web Extension SDK パッケージをインストールし、NPM パッケージマニフェストに保存します。Install the Microsoft VSS Web Extension SDK package and save it to your NPM package manifest:

    npm install vss-web-extension-sdk --save
    

    この SDK には、拡張機能が埋め込まれているページとの通信に必要な Api を提供する JavaScript ライブラリが含まれています。This SDK includes a JavaScript library that provides APIs required for communicating with the page your extension is embedded in.

  4. 拡張機能ディレクトリのルートにという名前の拡張マニフェストファイルを作成 vss-extension.json し、次の内容を指定します。Create an extension manifest file named vss-extension.json at the root of your extension directory with the following content:

    {
        "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/vss-web-extension-sdk/lib",
                "addressable": true,
                "packagePath": "lib"
            }
        ]
    }
    

    注意

    プロパティは、 public Visual Studio Marketplace のすべてのユーザーに対して拡張機能を表示するかどうかを制御します。The public property controls whether the extension is visible to everyone on the Visual Studio Marketplace. 開発中に拡張機能をプライベートに保持します。Keep your extensions private during development.

  5. 拡張機能ディレクトリのルートにという名前のファイルを作成し my-hub.html ます。この内容は、web エクスペリエンスの対象となるビュー (ハブとも呼ばれます) 用です。Create a file named my-hub.html at the root of your extension directory with the following content, which is for the view (also known as a hub) contributed into the web experience.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="lib/VSS.SDK.min.js"></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>
        <script type="text/javascript">
            VSS.init();
            VSS.ready(function() {
                document.getElementById("name").innerText = VSS.getWebContext().user.name;
            });
        </script>
    </head>
    <body>        
        <h1>Hello, <span id="name"></span></h1>
    </body>
    </html>
    
  6. 拡張機能ディレクトリは、次の例のようになります。Your extension directory should look like the following example.

    |-- my-hub.html
    |-- node_modules
        |-- @types
        |-- vss-web-extension-sdk
    |-- package.json
    |-- vss-extension.json
    

これで、拡張機能をパッケージ化、発行、およびテストする準備ができました。You're now ready to package, publish, and test your extension.

拡張機能のパッケージ化と発行Package and publish your extension

パブリッシャーの作成Create a publisher

Microsoft の拡張機能を含むすべての拡張機能は、パブリッシャーの下にあります。All extensions, including extensions from Microsoft, are under a publisher. 発行者はだれでも作成し、その下に拡張機能を公開できます。Anyone can create a publisher and publish extensions under it. チームが拡張機能を開発している場合は、他のユーザーにパブリッシャーへのアクセスを許可することもできます。You can also give other people access to your publisher if a team is developing the extension.

  1. Visual Studio Marketplace 管理ポータルにサインインします。Sign in to the Visual Studio Marketplace management portal

  2. まだパブリッシャーを所有していない場合は、作成するように求められます。If you don't already have a publisher, you'll be prompted to create one.

  3. [パブリッシャーの作成] フォームで、[発行元の名前] フィールドに名前を入力します。In the Create Publisher form, enter your name in the publisher name field. ID フィールドは、自分の名前に基づいて自動的に設定されます。The ID field should get set automatically based on your name:

    Creat publisher

    注意

    ID をメモしておきます。Make note of the ID. 拡張機能のマニフェストファイルで設定する必要があります。You need to set it in the manifest file of your extension.

拡張機能をパッケージ化し、Marketplace に発行 (アップロード) する準備ができました。You're now ready to package your extension and publish (upload) it to the Marketplace. このブラウザーウィンドウは開いたままにしておきます。拡張機能をパッケージ化した後にここに戻ります。Keep this browser window open as you'll return here after you package your extension.

拡張機能をパッケージ化するPackage your extension

  1. 拡張機能マニフェストファイル () を開き、 vss-extension.json フィールドの値 publisher をパブリッシャーの ID に設定します。Open your extension manifest file (vss-extension.json) and set the value of the publisher field to the ID of your publisher. 次に例を示します。For example:

    {
        ...
        "id": "my-first-extension",
        "publisher": "AnnetteNielsen",
        ...
    }
    
  2. VSS Web 拡張 SDK には TFX が必要です。VSS Web Extensions SDK requires TFX. まだインストールしていない場合は、コマンドプロンプトを開き、次のコマンドを実行します。If you haven't already installed it, open a command prompt and run the following command.

    npm install -g tfx-cli
    
  3. コマンドプロンプトで、拡張機能ディレクトリから TFX ツールのパッケージ化コマンドを実行します。From a command prompt, run the TFX tool's packaging command from your extension directory.

    npx tfx-cli extension create
    

    完了すると、拡張機能が正常にパッケージ化されたことを示すメッセージが表示されます。When it's completed, you see a message indicating your extension has been successfully packaged:

    === Completed operation: create extension ===
    - VSIX: C:\my-first-extension\AnnetteNielsen.my-first-extension-1.0.0.vsix
    - Extension ID: my-first-extension
    - Extension Version: 1.0.0
    - Publisher: AnnetteNielsen
    

拡張機能をアップロードするUpload your extension

  1. 管理ポータルで、ページの上部にあるドロップダウンからパブリッシャーを選択します。From the management portal, select your publisher from the drop-down at the top of the page.

  2. [ 新しい拡張機能] を選択し、[ Azure DevOps] を選択します。Select New extension, and then select Azure DevOps.

    Visual Studio Marketplace new extension development
  3. ファイルをドラッグアンドドロップするか、ファイルを選択して、前のパッケージング手順で作成した VSIX ファイルを見つけ、[ アップロード] を選択します。Drag and drop your file or select it to find your VSIX file, which you created in the previous packaging step, and then choose Upload.

    Azure DevOps の新しい拡張機能をアップロードする

    数秒後に、公開されている拡張機能の一覧に拡張機能が表示されます。After a few seconds, your extension appears in the list of published extensions. 拡張機能はユーザーにのみ表示されます。Don't worry, the extension is only visible to you.

    Extension appears in the list of published extensions.

拡張機能をインストールするInstall your extension

拡張機能をテストするには、Azure DevOps の組織にインストールする必要があります。To test an extension, it must be installed to an organization in Azure DevOps. をインストールするには、組織の所有者である必要があります (または必要なアクセス許可を持っている必要があります)。Installing requires being the owner of the organization (or having the necessary permissions). 拡張機能はプライベートであるため、最初にインストール先の組織と共有する必要があります。Because your extension is private, it must first be shared with the organization you want to install it to.

  1. 管理ポータルで、一覧から拡張機能を選択し、右クリックします。拡張機能に応じて、[ 共有/ 共有解除] または [ 発行/ 発行解除] を選択します。共有 = 発行と共有解除 = 非公開。From the management portal, select your extension from the list, right-click, and choose Share/Unshare or Publish/Unpublish, depending on the extension; Share = Publish and Unshare = Unpublish.

    Select extension and choose Share.
  2. [ 組織] を選択し、組織の名前を入力します。Select Organization, and then enter the name of your organization. [Enter] を選択します。Select Enter.

    Share with organization
  3. パネルを閉じます。Close the panel.

    この組織に拡張機能をインストールできるようになりました。Your extension can now be installed into this organization.

  4. Marketplace で、拡張機能を選択して [概要] ページを開きます。In the Marketplace, select your extension to open its overview page.

Overview page
Overview page

注意

拡張機能はプライベートなので、お客様とそれが共有されている組織のメンバーだけが、このページを参照できます。Because your extension is private, only you and any member of the organization it is shared with can see this page.

  1. [ 無料で入手 する] を選択して、インストールプロセスを開始します。Select Get it free to start the installation process. ドロップダウンメニューから、拡張機能を共有した組織を選択します。Select the organization you shared the extension with from the dropdown menu.

    Instal extension panel
  2. [インストール] を選択します。Select Install.

おめでとうございます。Congratulations! これで、拡張機能が組織にインストールされ、テストする準備が整いました。Your extension is now installed into an organization and is ready to be tested.

拡張機能を試すTry your extension

拡張機能によって、"My Hub" という名前のビューがプロジェクトレベルのコード領域に提供されています。Your extension contributed a view named "My Hub" to the project-level Code area. そこに移動してみましょう。Let's navigate to it.

  1. インストールウィザードの最後に [ 組織に進む ] を選択して、拡張機能がインストールされた組織のホームページ () に移動し https://dev.azure.com/{organization} ます。Select Proceed to organization at the end of the installation wizard to navigate to the home page of the organization the extension was installed to (https://dev.azure.com/{organization}).
  1. 表示されているプロジェクトのいずれかを選択して、そこに移動します。Select any of the projects listed to navigate into it:

    select project

    組織内にプロジェクトが存在しない場合は、プロジェクトを作成するように求めるメッセージが表示されます。If there aren't any projects in your organization, you're prompted to create one.

  2. コード領域に移動し、拡張機能 (My hub) によって提供されるハブに移動します。Navigate to the Code area and then to the hub contributed by your extension (My Hub):

    マイハブ

  1. [ 組織の設定] を選択し、[ 拡張機能 ] を選択して、新しくインストールされた拡張機能を表示します。Select Organization settings, and then select Extensions to see your newly installed extension.

    Organization settings, extensions page

拡張機能のデバッグDebugging your extension

Visual Studio またはブラウザー開発者ツールを使用して拡張機能をデバッグし、ソースコードを変更するたびに拡張を再配置しなくても開発を高速化するには、[マニフェストの追加] プロパティを変更する必要があり baseUri ます。To debug the extension using Visual Studio or Browser Developer Tools and speed up the development without redeploying extension each time you change source code, you need change manifest adding baseUri property:

{
    ...
    "baseUri": "https://localhost:44300",
    ...
}

マニフェストを変更すると、ローカルの web サーバーインスタンスから拡張機能が読み込まれます。Changing the manifest loads the extension from your local web server instance. たとえば、Visual Studio での IISExpress のようになります。For example, IISExpress in Visual Studio. マニフェストを変更した後、このデバッグ拡張機能を展開してインストールするのは1回だけです。After you change the manifest, deploy and install this debugging extension only once.

注意

Azure DevOps は web ページがセキュリティで保護されたソースから提供されることを要求するので、ローカル web サーバーを SSL モードで実行します。そうしないと、拡張機能の IFRAME の読み込み中にブラウザーコンソールでエラーが発生します。Run your local web server in SSL mode, because Azure DevOps demands that the web page is served from a secure source otherwise you obtain an error in browser console during the extension IFRAME loading.

次のステップNext steps