ツール拡張機能は、ユーザーが Windows Admin Center と対話して、サーバーやクラスターなどの接続を管理するための主な方法です。 Windows Admin Center のホーム画面で接続をクリックして接続すると、左側のナビゲーション ウィンドウにツールの一覧が表示されます。 ツールをクリックすると、ツール拡張機能が読み込まれ、右側のウィンドウに表示されます。
ツール拡張機能が読み込まれると、ターゲット サーバーまたはクラスターで WMI 呼び出しまたは PowerShell スクリプトを実行して、UI に情報を表示したりユーザー入力に基づいてコマンドを実行したりすることができます。 ツール拡張機能では、表示するソリューションが定義されるため、ソリューションごとに異なるツール セットが使用されます。
Note
さまざまな拡張機能の種類に慣れていない場合 拡張機能のアーキテクチャと拡張機能の種類の詳細について説明します。
環境を準備する
まだインストールしていない場合は、すべてのプロジェクトに必要な依存関係とグローバルな前提条件をインストールして環境を準備します。
Windows Admin Center SDK を使用して新しいツール拡張機能を作成する
すべての依存関係をインストールしたら、新しいツール拡張機能を作成できます。 プロジェクト ファイルを格納するフォルダーを作成または参照し、コマンド プロンプトを開き、そのフォルダーを作業ディレクトリとして設定します。 以前にインストールされた Windows Admin Center SDK を使用して、次の構文を使用して新しい拡張機能を作成します:
wac create --company "{!Company Name}" --tool "{!Tool Name}" --version latest
| Value | Explanation | Example |
|---|---|---|
{!Company Name} |
会社名 (スペースを含む) | Contoso Inc |
{!Tool Name} |
ツール名 (スペースを含む) | Manage Foo Works |
次に使用方法の例を示します。
wac create --company "Contoso Inc" --tool "Manage Foo Works" --version latest
Windows Admin Center SDK バージョン6.0.0以降を使えば、Reactベースのツール拡張も作成できます。 以下の構文を使って新しいReactベースのツール拡張機能を作成できます:
wac create-react --company "{!Company Name}" --tool "{!Tool Name}" --version latest
| Value | Explanation | Example |
|---|---|---|
{!Company Name} |
会社名 (スペースを含む) | Contoso Inc |
{!Tool Name} |
ツール名 (スペースを含む) | Manage Foo Works |
次に例を示します。
wac create-react --company "Contoso Inc" --tool "Manage Foo Works" --version latest
これにより、ツールに指定した名前を使用して、現在の作業ディレクトリ内に新しいフォルダーが作成され、必要なすべてのテンプレート ファイルがプロジェクトにコピーされ、会社名とツール名でファイルが構成されます。
Note
このコマンドの --version フラグは、対象とする Windows Admin Center SDK のバージョンを指定します。 最新の SDK とプラットフォームの変更に合わせて拡張機能を最新の状態に保つために、Windows Admin Center SDK の 別のバージョン をターゲットにする 方法について説明します。
次に、作成したフォルダーにディレクトリを変更し、次のコマンドを実行して必要なローカルの依存関係をインストールします:
npm install
これが完了すると、新しい拡張機能を Windows Admin Center に読み込むために必要なすべての設定が完了します。
拡張機能にコンテンツを追加する
Windows Admin Center SDK を使用して拡張機能を作成したので、コンテンツをカスタマイズする準備ができました。 実行できる操作の例については、次のガイドを参照してください:
その他の例については、開発者ガイドを参照してください。 開発者ガイドは、完全に機能するソリューションの拡張機能であり、Windows Admin Center にサイドロードすることができます。また、独自の拡張機能で参照して使用できる、サンプル機能とツール例の豊富なコレクションが含まれています。
Windows Admin Center の設定の [詳細設定 ] ページで開発者ガイド拡張機能を有効にします。
拡張機能のアイコンをカスタマイズする
ツールの一覧で拡張機能に対して表示されるアイコンをカスタマイズできます。 これを行うには、拡張機能についての icon のすべての manifest.json エントリを変更します。
"icon": "{!icon-uri}",
| Value | Explanation | URI の例 |
|---|---|---|
{!icon-uri} |
アイコン リソースの場所 | assets/foo-icon.svg |
注: 現時点では、開発者モードで拡張機能をサイド ローディングする場合、カスタム アイコンは表示されません。 回避策として、target の内容を次のように削除します。
"target": "",
この構成は、開発者モードでのサイド ローディングでのみ有効なため、target に含まれる値を保持してから、拡張機能を発行する前に復元することが重要です。
拡張機能をビルドしてサイド ローディングする
次に、拡張機能をWindows Admin Centerにビルドしてサイドロードします。 コマンドウィンドウを開き、ディレクトリを元のディレクトリに変更します。
拡張を構築・提供するには、以下のコマンドを実行します。
npm run build npm start
この端末を稼働させ続けろ。
デフォルトでは、拡張はポート 4200でサイドロードされます。 ポートを変更するには、拡張機能の package.json と appsettings.json ファイルを修正してください。 Windows Admin Centerが動作しているポートを使わないようにしてください。
テストのためにプロジェクトをWindows Admin Centerのローカルインスタンスにサイドロードするには、ローカルで提供されたプロジェクトを添付してください。
Web ブラウザーで Windows Admin Center を起動します
デバッガーを起動します (F12)
コンソールを開き、localhostとのサイドロード用の以下のコマンドを入力します:
MsftSme.sideLoad("http://localhost:4200")FQDNを使ってサイドロードする手順に従っていた場合は、コンソールを開き、次のコマンドを入力してください:
MsftSme.sideLoad("http://<FQDN>:4200")ウェブブラウザを更新してください。
あなたのプロジェクトが、名前の横に「（サイドロード済み）」が付いた状態で Tools リストに表示されるようになりました。