Azure Data Studio ダッシュボード拡張機能を作成する

[アーティクル]
10/19/2023

このチュートリアルでは、新しい Azure Data Studio ダッシュボード拡張機能を作成する方法について説明します。この拡張機能は Azure Data Studio 接続ダッシュボードで役立つので、Azure Data Studio の機能をユーザーが見やすいように拡張することができます。

この記事では、次の方法について説明します。

拡張機能ジェネレーターをインストールする。
拡張機能を作成する。
拡張機能のダッシュボードに役立つようにする。
拡張機能をテストする。
拡張機能をパッケージ化する。
拡張機能をマーケットプレースに公開する。

前提条件

Azure Data Studio は Visual Studio Code と同じフレームワーク上に構築されるため、Azure Data Studio の拡張機能は、Visual Studio Code を使用して構築します。開始するには、次のコンポーネントが必要です。

$PATH にインストールされ、利用できる Node.js。 Node.js には、拡張機能ジェネレーターのインストールに使用される npm (Node.js パッケージマネージャー) が含まれています。
拡張機能をデバッグするための Visual Studio Code。
The Azure Data Studio Debug 拡張機能 (任意)。このデバッグ拡張機能を使用すると、拡張機能は、パッケージ化して Azure Data Studio にインストールしなくてもテストできます。
確実に azuredatastudio をパスに含めます。 Windows の場合、setup.exe で [Add to Path]$パスに追加$ オプションを選択します。 Mac または Linux の場合、Azure Data Studio のコマンドパレットから [PATH 内に 'azuredatastudio' コマンドをインストールします] を実行します。

拡張機能ジェネレーターをインストールする

拡張機能作成のプロセスを簡単にするため、Yeoman を利用して拡張機能ジェネレーターを構築しました。これをインストールするには、コマンドプロンプトから次のコマンドを実行します。

npm install -g yo generator-azuredatastudio

ダッシュボード拡張機能を作成する

ダッシュボードの概要

Azure Data Studio 接続ダッシュボードとは、ユーザーの接続を要約すると共に分析情報を提供する強力なツールです。

ダッシュボードには 2 つのバリエーションがあります。サーバー全体を要約する "サーバーダッシュボード" と、個々のデータベースを要約する "データベースダッシュボード" です。 Azure Data Studio の [接続] ビューレットでサーバーまたはデータベースを右クリックし、 [管理] を選択すると、いずれかのダッシュボードにアクセスできます。

ダッシュボードの概要を示すスクリーンショット。

ダッシュボードに機能を追加するための拡張機能には、次の 3 つの主要なコントリビューションポイントがあります。

完全なダッシュボードタブ:拡張機能のダッシュボードにある独立したタブ。サーバーまたはデータベースのダッシュボードに追加できます。ウィジェット、ツールバー、およびナビゲーションセクションでカスタマイズできます。
ホームページの操作: 接続ツールバーの上部にあるアクションボタン。
ウィジェット: ご利用の SQL Server に対して実行されるグラフ。

拡張機能ジェネレーターを実行する

拡張機能を作成するには:

次のコマンドを使用して拡張機能ジェネレーターを起動します。

yo azuredatastudio
拡張機能の種類の一覧から [新しいダッシュボード] を選択します。
プロンプトに以下のように入力して、サーバーダッシュボードにタブを提供する拡張機能を作成します。

プロンプトの数が多いため、各質問の意味についてもう少し詳しく説明します。

前の手順を完了すると、新しいフォルダーが作成されます。 Visual Studio Code でフォルダーを開きます。これで独自のダッシュボード拡張機能を作成する準備ができました。

拡張機能を実行する

拡張機能を実行して、ダッシュボードテンプレートが提供する内容を見てみましょう。実行する前に、Azure Data Studio Debug 拡張機能が確実に Visual Studio Code にインストールされているようにします。

Visual Studio Code で F5 を選択すると、Azure Data Studio がデバッグモードで起動され、拡張機能が実行されます。この既定のテンプレートがダッシュボードにどのように役立つのかを確認できます。

次に、この既定のダッシュボードを変更する方法について説明します。

ダッシュボードを開発する

拡張機能の開発を始めるうえで最も重要なファイルは、package.json です。このファイルは、ダッシュボードのコントリビューションが登録されているマニフェストファイルです。 dashboard.tabs、dashboard.insights、dashboard.containers の各セクションに注目してください。

ここで、いくつかの変更を試してみます。

bar、horizontalBar、timeSeries などの分析情報の種類を試してみます。
ご利用の SQL Server 接続に対して実行する独自のクエリを記述します。
具体的な分析情報チュートリアルについては、サンプル分析情報チュートリアルまたはこちらのチュートリアルを参照してください。

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

他者と共有するには、拡張機能を 1 つのファイルにパッケージ化する必要があります。拡張機能は、Azure Data Studio 拡張機能マーケットプレースに公開することも、チームまたはコミュニティと共有することもできます。この手順を行うには、別の npm パッケージをコマンドラインからインストールする必要があります。

npm install -g vsce

README.md ファイルを好みに合わせて編集します。次に、拡張機能のベースディレクトリに移動し、vsce package を実行します。必要に応じてリポジトリを拡張機能とリンクすることも、それなしで続行することもできます。 1 つ追加するには、package.json ファイルに同様の行を追加します。

"repository": {
    "type": "git",
    "url": "https://github.com/anjalia/my-test-extension.git"
}

これらの行が追加されると、my-test-extension-0.0.1.vsix ファイルが作成され、Azure Data Studio にインストールできるようになります。

VSIX のインストールを示すスクリーンショット。

拡張機能をマーケットプレースに公開する

Azure Data Studio 拡張機能マーケットプレースはまだ完成していません。現在のプロセスでは、拡張機能 VSIX をどこか (GitHub リリースページなど) でホストします。次に、こちらの JSON ファイルをご自分の拡張機能情報で更新するプル要求を送信します。

次のステップ

このチュートリアルでは、以下の内容を学習しました。

拡張機能ジェネレーターをインストールする。
拡張機能を作成する。
拡張機能のダッシュボードに役立つようにする。
拡張機能をテストする。
拡張機能をパッケージ化する。
拡張機能をマーケットプレースに公開する。

この記事を読むことで、Azure Data Studio の独自の拡張機能を構築するヒントが得られることを願っています。 Microsoft は Dashboard Insights (SQL Server に対して実行される魅力的なグラフ)、さまざまな SQL 固有 API、Visual Studio Code から継承された大量の既存の拡張ポイントセットをサポートしています。

アイデアをお持ちで、始める方法に迷われている場合は、チーム宛てに問題をお送りいただくかツイート (azuredatastudio) してください。

詳細については、Visual Studio Code 拡張機能ガイドに関するページをご覧ください。既存の API とパターンがすべて網羅されています。

Azure Data Studio で T-SQL を使用する方法については、T-SQL エディターのチュートリアルを完了してください。

Transact-SQL エディターを使用し、データベースオブジェクトを作成する

次の方法で共有