モナコエディターとアプリのKusto 照会言語サポートを統合する

[アーティクル]
12/08/2023

モナコエディターとKusto 照会言語サポート (monaco-kusto) をアプリに統合できます。 monaco-kusto をアプリに統合すると、入力候補、色付け、リファクタリング、名前変更、定義変換などの編集エクスペリエンスが提供されます。認証、クエリ実行、結果表示、およびスキーマ探索のためのソリューションを構築する必要があります。ニーズに合ったユーザーエクスペリエンスを柔軟にファッションできます。

この記事では、モナコエディターに monaco-kusto を追加し、それをアプリに統合する方法について説明します。パッケージは GitHub と npm で入手できます。

次の手順を使用して、npm を使用して monaco-kusto をアプリに統合します。

手順 1: monaco-kusto パッケージをインストールする

手順 2: monaco-kusto パッケージを使用するようにアプリを設定する

手順 3: データベーススキーマをエディターに追加する

サンプルプロジェクトとの統合をお試しください。

前提条件

Node.js (v6.10.3 以降)

monaco-kusto パッケージをインストールする

モナコエディター npm パッケージをインストールします。
```
npm i monaco-editor
```
注意

ネイティブのモナコエディターをカスタマイズするには、「 Monaco Editor GitHub リポジトリ」を参照してください。
monaco-kusto npm パッケージをインストールします。
```
npm i @kusto/monaco-kusto
```

monaco-kusto パッケージを使用するようにアプリを設定する

次のいずれかの方法を使用して 、monaco-kusto を使用するようにアプリを設定できます。

AMD モジュールシステム
ESM (webpack)

index.html ファイルなど、モナコエディターが使用されているページに次の HTML を追加します。パッケージがに対して持っている依存関係が原因で kusto-language-service必要です。

<script src="%PUBLIC_URL%/monaco-editor/min/vs/language/kusto/bridge.min.js"></script>
<script src="%PUBLIC_URL%/monaco-editor/min/vs/language/kusto/kusto.javascript.client.min.js"></script>
<script src="%PUBLIC_URL%/monaco-editor/min/vs/language/kusto/newtonsoft.json.min.js"></script>
<script src="%PUBLIC_URL%/monaco-editor/min/vs/language/kusto/Kusto.Language.Bridge.min.js"></script>

静的ファイルを モナコ および モナコ kusto パッケージから Web サーバー上 の monaco-editor フォルダーにコピーします。アプリは、これらの静的ファイルにアクセスする必要があります。
モナコを使用してそれらを読み込みます。例については、サンプルを参照してください。

次の手順では、webpack を使用して monaco-kusto を使用するようにアプリを設定する方法について説明します。プロジェクトの既定のエントリポイントは src/index.js ファイルで、既定の構成ファイルは src/webpack.config.js ファイルです。次の手順では、既定の webpack プロジェクトセットアップを使用してアプリをバンドルしていることを前提としています。

構成ファイルに、次のスニペットを追加します。

resolve.alias で、次のエイリアスを追加します。

'vs/language/kusto/kustoMode': 'kustoMode',
'bridge.min': '@kusto/monaco-kusto/release/esm/bridge.min',
'kusto.javascript.client.min': '@kusto/monaco-kusto/release/esm/kusto.javascript.client.min.js',
'Kusto.Language.Bridge.min': '@kusto/monaco-kusto/release/esm/Kusto.Language.Bridge.min.js',
'Kusto': '@kusto/monaco-kusto/release/esm/Kusto.Language.Bridge.min.js',
'monaco.contribution': '@kusto/monaco-kusto/release/esm/monaco.contribution'

module.rules で、次のローダーと依存関係を追加します。

// Loaders
{ test: /bridge\.js/, parser: { system: false } },
{ test: /kusto\.javascript\.client\.min\.js/, parser: { system: false } },
{ test: /Kusto\.Language\.Bridge\.min\.js/, parser: { system: false } },
{ test: /kustoLanguageService/, parser: { system: false } },
// Dependencies
{ test: /Kusto\.Language\.Bridge\.min/, loader: 'exports-loader?window.Kusto!imports-loader?bridge.min,kusto.javascript.client.min' },
{ test: /kustoMonarchLanguageDefinition/, loader: 'imports-loader?Kusto' },

[ エントリ] で、次のエントリポイントを追加します。返されたワーカーパスをメモしておきます。後で必要になります。
```
`@kusto/monaco-kusto/release/esm/kusto.worker.js`
```

KustoLanguageService-loader.js ファイルに、次のカスタムローダーを追加します。構成ファイルでのの importScripts 使用が置き換えられます。

module.exports = function loader(source) {
    source = `var Kusto = require("@kusto/language-service-next/Kusto.Language.Bridge.min");\n${source}`;

    return source.replace(/importScripts.*/g,'');;
}

アプリで、次のコードを追加します。

オブジェクトに 対して MonacoEnvironment 関数を window 定義します。を、前に説明したワーカーパスに置き換えます <path_and_full_name_of_kusto_worker> 。
```
window.MonacoEnvironment = { globalAPI: true, getWorkerUrl: function() { return "<path_and_full_name_of_kusto_worker>"} };
```
monaco.editor HTML 要素からオブジェクトを作成します。
```
this.editor = monaco.editor.create(editorElement, editorConfig)
```

API を monaco.contribution 呼び出して Kusto 言語を登録します。

import('monaco.contribution').then(async (contribution: any) => {
    const model = this.monaco && this.monaco.editor.createModel("", 'kusto');
    this.editor.setModel(model);
    const workerAccessor: monaco.languages.kusto.WorkerAccessor = await monaco.languages.kusto.getKustoWorker();
    const worker: monaco.languages.kusto.KustoWorker = await workerAccessor(model.uri);
})

データベーススキーマをエディターに追加する

monaco-kusto パッケージは、データベーススキーマをエディターに追加する方法を提供します。スキーマを使用すると、エディターはオートコンプリートの提案やその他の機能を提供できます。

スキーマを定義するには、次の構造を使用します。

const schema = {... <YOUR_DATABASE_SCHEMA> ...};

export function setSchema(editor) {
  window.monaco.languages.kusto.getKustoWorker().then((workerAccessor) => {
    const model = editor.getModel();
    workerAccessor(model.uri).then((worker) => {
      //EITHER: Set schema from a show schema command
      // worker.setSchemaFromShowSchema(
      //     schema,
      //     clusterURI,
      //     database
      // );
      //OR: Set schema from a manually created schema
      // worker.setSchema(schema);
    });
  });
}

データベーススキーマは、次のいずれかの方法で取得できます。

クラスターから
手動で作成する

Azure Data Explorer Web UI の左側のメニューで、[クエリ] を選択します。
スキーマを作成するデータベースを選択します。
クエリウィンドウで、次のクエリを実行します。
```
.show schema as json
```
クエリの結果をコピーし、 スキーマ 定数として貼り付けます。クエリの結果は、データベースの一覧です (schema.ts ファイルのインターフェイスResultを参照)。
メソッドを setSchemaFromShowSchema() 使用して、エディターでスキーマを設定します。また、クラスター URI と、エディターで使用するデータベースの名前も指定する必要があります。

データベーススキーマを含むスキーマオブジェクトを作成します。詳細については、src/schema.ts ファイルのインターフェイスを参照してくださいclusterType。次の例は、1 つのデータベースと 1 つのテーブルを含むスキーマオブジェクトを示しています。

{
  "clusterType":"Engine",
  "cluster":{
    "connectionString":"<CONNECTION_STRING>",
    "databases":[ {
      "database": {
        "name": "<DATABASE_NAME>",
        "majorVersion": 5,
        "minorVersion": 0,
        "tables": [ {
          "name": "<TABLE_NAME>",
          "entityType": "Table",
          "columns": [ {
            "name": "<COLUMN_NAME>",
            "type": "<COLUMN_TYPE>"
          }, ... ]
        }, ... ]
      }
    }, ... ]
  },
  // Defines schema for the required database.
  // The schema must also be defined in the cluster object.
  "database": {
    "name": "<DATABASE_NAME>",
    "majorVersion": 5,
    "minorVersion": 0,
    "tables": [ {
      "name": "<TABLE_NAME>",
      "entityType": "Table",
      "columns": [ {
        "name": "<COLUMN_NAME>",
        "type": "<COLUMN_TYPE>"
      }, ... ]
    }, ... ]
  }
}

メソッドを setSchema() 使用して、エディターでスキーマを設定します。

サンプルプロジェクト

monaco-kusto パッケージを使用するサンプルプロジェクトを見つけることができます。サンプルを使用するには、 monaco-kusto GitHub リポジトリを複製します。サンプルは samples /react フォルダーにあります。

サンプルプロジェクトを設定してテストする

複製されたリポジトリのルートから次のコマンドを実行します。

依存関係をインストールし、プロジェクトをビルドします。
```
npm install
```
プロジェクトが動作していることを確認します。成功した場合は、 index.html が開きます。
```
npm run watch
```

モナコエディターとアプリのKusto 照会言語サポートを統合する

前提条件

monaco-kusto パッケージをインストールする

monaco-kusto パッケージを使用するようにアプリを設定する

データベーススキーマをエディターに追加する

サンプルプロジェクト

サンプルプロジェクトを設定してテストする

フィードバック

フィードバック

その他のリソース

モナコ エディターとアプリのKusto 照会言語サポートを統合する

前提条件

monaco-kusto パッケージをインストールする

monaco-kusto パッケージを使用するようにアプリを設定する

データベース スキーマをエディターに追加する

サンプル プロジェクト

サンプル プロジェクトを設定してテストする

関連コンテンツ

フィードバック

フィードバック

その他のリソース

モナコエディターとアプリのKusto 照会言語サポートを統合する

データベーススキーマをエディターに追加する

サンプルプロジェクト

サンプルプロジェクトを設定してテストする