OpenAPI Explorer:VS Code で Alibaba Cloud API Toolkit を使用する

前提条件

VS Code がインストールされていること。

方法 1：拡張機能ビューからのインストール

1. VS Code のアクティビティバーで アイコンをクリックします。

2. Alibaba Cloud API Toolkit を検索し、[インストール] をクリックします。

方法 2：VS Code Marketplaceからのインストール

1. VS Code Marketplace で Alibaba Cloud API Toolkit ページにアクセスし、[インストール] をクリックします。VS Code で拡張機能ページが開きます。

2. VS Code の拡張機能ページで[インストール]をクリックします。

インストールの確認

インストール後、アクティビティバーに Alibaba Cloud アイコンが表示されます。

VS Code サイドバーの 拡張機能ビュー で Alibaba Cloud API Toolkit を検索します。メインパネルには拡張機能名、バージョン (v0.0.9)、発行元 (Alibaba Cloud OpenAPI)、および青い [Uninstall] ボタンが表示されます。これは、拡張機能がインストールされていることを示しています。

サービスへのサブスクライブ

Alibaba Cloud サービスをサブスクライブし、API バージョンを選択します。拡張機能はバージョンを推奨し、設定ファイルは不要です。Ctrl+Cmd+K (Windows では Ctrl+Win+K) を押して検索してサブスクライブします。

API サービスのドロップダウンリストで、検索ボックスを使用して対象サービスをフィルタリングして選択します。たとえば、[Certificate Management Service] (サービスコード cas、推奨バージョン 2020-04-07) を選択します。

API 検索

サブスクライブした API を検索し、そのリファレンスを表示します。Ctrl+Cmd+L (Windows では Ctrl+Win+L) を押して API を検索するか、コードスニペットを挿入します。

検索ボックスに describe などのキーワードを入力すると、一致する API がボックスの下に表示されます。各エントリには、リクエストメソッド、API 名、簡単な説明、バージョンパスが表示されます。

API リファレンスのプレビュー

API をクリックすると、新しいタブでそのリファレンスが表示されます。使用上の注意、リクエストパラメーター、レスポンスパラメーター、エラーコードが含まれます。

API Toolkit では、左側のペインに API ナビゲーションツリーが表示され、サービスやカテゴリ別に API を参照できます。[RebootInstances — Restarts one or more instances] などの API を選択すると、右側のメインペインにその API のリファレンスが表示されます。このリファレンスには、説明とリクエストパラメーターが含まれています。上部のタブを使用して [Document]、[Debug]、[Code Sample] を切り替えます。

API デバッグ

• 認証情報の検証後に API をデバッグします。

• パラメーターを設定し、デバッグ結果を表示します。

• VS Code 内で直接 API レスポンスを表示します。

たとえば、[DescribeRegions] API を選択します。パラメーターフォームで、[Endpoint] を China (Hangzhou) に、[InstanceChargeType] を PrePaid に、[ResourceType] を instance に、[AcceptLanguage] を zh-CN に設定します。[Debug] をクリックすると、右側のペインに HTTP ステータスコード 200 の成功したレスポンスが JSON 形式で表示され、利用可能なリージョンのリストが含まれます。

サンプルコードの使用

コードの完成と実行

• コードを完成させます。

  • エンドポイントを変更します。

    OpenAPI Explorer にログインし、[クラウド製品] にカーソルを合わせてサービスを選択し、リージョンタブでサポートされているエンドポイントを表示します。

  • リクエストパラメーターを指定します。詳細については、このトピックの「API リファレンスのプレビュー」セクションをご参照ください。

  • オプション：ログを追加します。

  • コードを保存します。

    import OpenApi, * as $OpenApi from '@alicloud/openapi-client';
    import Ecs20140526, * as $Ecs20140526 from '@alicloud/ecs20140526';
    export default class DescribeRegion {
        static async main(args: string[]): Promise<void> {
            let config = new $OpenApi.Config({
                // コード実行環境で ALIBABA_CLOUD_ACCESS_KEY_ID および ALIBABA_CLOUD_ACCESS_KEY_SECRET 環境変数が設定されていることを確認してください。
                accessKeyId: process.env['ALIBABA_CLOUD_ACCESS_KEY_ID'],
                accessKeySecret: process.env['ALIBABA_CLOUD_ACCESS_KEY_SECRET'],
                // エンドポイントを指定します。詳細については、https://api.alibabacloud.com/product/Ecs のエンドポイントをご参照ください。
                endpoint: `ecs.cn-hangzhou.aliyuncs.com`,
            });
            let client = new Ecs20140526(config);
            let describeRegionsRequest = new $Ecs20140526.DescribeRegionsRequest({});
            let response = await client.describeRegions(describeRegionsRequest);
            console.log(response.body?.regions?.region);
        }
    }

• コードを実行します。

  1. TypeScript ファイルを JavaScript にコンパイルします。

     tsc describeregion.ts # describeregion.ts はファイル名です。

  2. 次のコードを使用して main.js ファイルを作成します。

     const { default: DescribeRegion } = require("./describeregion");
     
     DescribeRegion.main();
     

  3. サンプルコードを実行します。

     node .\main.js

  4. 次の結果が返された場合、呼び出しは成功です。

     PS D:\ide\tooldemo> tsc describeregion.ts
     PS D:\ide\tooldemo> node .\main.js
     [
       DescribeRegionsResponseBodyRegionsRegion {
         localName: 'China (Qingdao)',
         regionEndpoint: 'ecs.cn-qingdao.aliyuncs.com',
         regionId: 'cn-qingdao'
       },
       DescribeRegionsResponseBodyRegionsRegion {
         localName: 'China (Beijing)',
         regionEndpoint: 'ecs.cn-beijing.aliyuncs.com',
         regionId: 'cn-beijing'
       },
       DescribeRegionsResponseBodyRegionsRegion {
         localName: 'China (Zhangjiakou)',
         regionEndpoint: 'ecs.cn-zhangjiakou.aliyuncs.com',
         regionId: 'cn-zhangjiakou'
       },
       DescribeRegionsResponseBodyRegionsRegion {
         localName: 'China (Hohhot)',
         regionEndpoint: 'ecs.cn-huhehaote.aliyuncs.com',
         regionId: 'cn-huhehaote'
       },
       DescribeRegionsResponseBodyRegionsRegion {
         localName: 'China (Ulanqab)',
         regionEndpoint: 'ecs.cn-wulanchabu.aliyuncs.com',
         regionId: 'cn-wulanchabu'
       },
       DescribeRegionsResponseBodyRegionsRegion {
         localName: 'China (Hangzhou)',
         ...
       }
     ]