Azure Data Studio のウィザード拡張機能を作成する

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

このチュートリアルでは、新しい 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

ウィザード拡張機能を作成する

ウィザードの概要

ウィザードはユーザーインターフェイスの一種であり、タスクを完了するために、ユーザーが入力するページを手順ごとに表示するものです。一般的な例として、ソフトウェアのセットアップウィザードやトラブルシューティングウィザードなどがあります。次に例を示します。

Dacpac wizard

ウィザードは、データを操作して Azure Data Studio の機能を拡張するときに役立つことが多いため、Azure Data Studio には、ユーザー独自のカスタムウィザードを作成する API が用意されています。ここでは、ウィザードテンプレートを生成し、それを変更して独自のカスタムウィザードを作成する方法について説明します。

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

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

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

yo azuredatastudio
拡張機能の種類一覧から [New Wizard or Dialog](新しいウィザードまたはダイアログ) を選択します。次に、 [ウィザード] 、 [Getting Started Template](テンプレートの開始) の順に選択します。
次の手順に従って拡張機能名を入力し (このチュートリアルでは My Test Extension を使用)、説明を追加します。

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

拡張機能を実行する

拡張機能を実行して、ウィザードテンプレートが提供する内容を見てみましょう。実行する前に、Azure Data Studio Debug 拡張機能を、確実に Visual Studio Code にインストールします。

VS Code で F5 を選択します。すると、Azure Data Studio がデバッグモードで起動し、拡張機能が実行されます。次に、Azure Data Studio で、新しいウィンドウのコマンドパレット (Ctr + Shift + P キー) から [Launch Wizard](ウィザードの起動) コマンドを実行します。その結果、この拡張機能によって提供される既定のウィザードが起動します。

Wizard template

次に、この既定のウィザードを変更する方法を見ていきます。

ウィザードを開発する

拡張機能の開発を始める上で最も重要なファイルは、package.json、src/main.ts、および vsc-extension-quickstart.md です。

package.json:これはマニフェストファイルです。ここに [Launch Wizard](ウィザードの起動) コマンドが登録されます。これは、main.ts がメインプログラムのエントリポイントとして宣言されている場所でもあります。
main.ts:ページ、テキスト、ボタンなどの UI 要素をウィザードに追加するコードが含まれています
vsc-extension-quickstart.md:開発時に参考になる可能性のある技術ドキュメントが含まれています

ウィザードを変更してみましょう。4 ページ目として空白のページを追加します。以下に示すように src/main.ts を変更すると、ウィザードを起動したときに追加のページが表示されます。

Wizard main テンプレートについて理解したら、その他のアイデアを試してみてください。

新しいページに 300 の幅のボタンを追加します
可変コンポーネントを追加してボタンを配置します
ボタンにアクションを追加します。たとえば、ボタンがクリックされたとき、ファイルを開くダイアログを起動したり、クエリエディターを開いたりします。

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

他者と共有するには、拡張機能を 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 にインストールできるようになります。

Install VSIX

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

Azure Data Studio 拡張機能マーケットプレースはまだ完全には実装されておらず、現行のプロセスは、拡張機能 VSIX をどこか (GitHub リリースページなど) でホストし、その後、PR を送信し、この JSON ファイルを自分の拡張機能情報で更新するというものです。

次のステップ

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

拡張機能ジェネレーターをインストールする
拡張機能を作成する
拡張機能にカスタムウィザードを追加する
拡張機能をテストする
拡張機能をパッケージ化する
拡張機能をマーケットプレースに公開する

読了後、Azure Data Studio の拡張機能を自分でも作るべく奮起していただけたら幸いです。 Dashboard Insights (SQL Server に対して実行される美麗なグラフ)、さまざまな SQL 固有 API、Visual Studio Code から継承された大量の既存の拡張ポイントセットをサポートしています。

アイデアはあるが、どこから始めたらいいのかわからない場合、チーム宛に問題提起またはツイートしてください (azuredatastudio)。

Visual Studio Code 拡張ガイドでは、既存の API やパターンがすべて取り上げられているので、いつでも参考にできます。

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

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