# 任意のWebサイトからTalend Cloud API Testerを開く

Talend Cloud API Testerを使用すると、Talend Cloud API Testerで直接リクエストを開くボタンをWebサイトに挿入できます。

## 手順

1. HTMLページで次のmetaタグを追加し、Talend Cloud API Testerにリンクさせます。
   ```
   <meta   name="dhc-aware-page"   data-indicator-element-id="<id_element>"   data-console-debug="<allow-debug-logs>" >
   ```

   パラメーター情報パラメーター情報
   | パラメーター | タイプ | 必須 | 説明 |
   | --- | --- | --- | --- |
   | name | 文字列 | はい | 値はdhc-aware-pageであることが必要です。 |
   | data-indicator-element-id | 文字列 | いいえ | エレメントTalend Cloud API TesterのIDを指定するとページに挿入され、使用できることを知らせます。デフォルト値はdhcInfoです。 |
   | data-console-debug | ブール値 | いいえ | 値がtrueの場合、デバッグ情報が(お使いのページの)ブラウザーのJavaScriptコンソールで形式化されます。デフォルト値はfalseです。 |

   挿入されたエレメントは次のようになります。
   ```
   <script id="my-id" client-indicator="my-id" type="dhc/info">
      {"dhcVersion":"23.0.1","extensionId":"aejoelaoggembcahagimdiliamlcdmfm"}
   </script>
   ```
2. 開くようTalend Cloud API Testerに指示するには、以下のメッセージオブジェクトを使ってwindow.postMessageスクリプトを呼び出します。
   ```
   {
         target : "<extension_id>",
         type : "<type>",
         payloadType: "<type_of_payload>",
         payload : "<payload>",
         shouldReplaceOriginTab: <shouldReplaceOriginTab>
   }             
   ```

   パラメーター情報パラメーター情報
   | パラメーター | タイプ | 必須 | 説明 |
   | --- | --- | --- | --- |
   | target | 文字列 | はい | Talend Cloud API Tester拡張機能のIDです。Talend Cloud API Testerインジケーターエレメントから取得できます。例: JSON.parse(document.querySelector('script[type="dhc/info"]').innerText).extensionId<br><br>自分のmetaタグでdata-indicator-element-idをmy-idに設定した場合は: JSON.parse(document.getElementById('my-id').innerText).extensionId |
   | type | 文字列 | はい | メッセージのタイプで、実行すべきアクションをTalend Cloud API Testerに伝えます。可能な値はopenRequestまたはopenExtension (リクエストをロードせずに開く)です。 |
   | payloadType | 文字列 | はい | Talend Cloud API Testerにロードするペイロードのタイプ。可能な値: typeパラメーターがopenRequestに設定されている場合はapiTester、openExtensionである場合はnone。 |
   | payload | 文字列 | typeがopenRequestの場合のみ | typeがopenRequestに設定されていればロードをリクエストします。次の例を参照してください。 |
   | shouldReplaceOriginTab | ブール値 | いいえ | Talend Cloud API Testerがwindow.postMessageを送信するタブと新しいタブのどちらにロードされる必要があるかを示します。デフォルト値はfalseです。 |
   ### 例
   ```
   {
      "name": "Post example on HTTP Bin",
      "headers": [
          {
              "enabled": true,
              "name": "Content-Type",
              "value": "application/json"
          }
      ],
      "type": "Request",
      "method": {
          "requestBody": true,
          "link": "",
          "name": "POST"
      },
      "body": {
          "autoSetLength": true,
          "textBody": "{\n  \"lastname\": \"Eastwood\",\n  \"firstname\": \"Clint\"\n}",
          "bodyType": "Text"
      },
      "headersType": "Form",
      "uri": {
          "path": "httpbin.org/post",
          "query": {
              "delimiter": "&",
              "items": [
                  {
                      "enabled": true,
                      "name": "details",
                      "value": "full"
                  }
              ]
          },
          "scheme": {
              "secure": true,
              "name": "https",
              "version": "V11"
          }
      }
   }
   ```