> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Kameleoon.API.Utils

> リスナー、タイマー、ハッシュ、URL パラメータ、HTTP リクエストのためのユーティリティメソッドを提供する Kameleoon.API.Utils のリファレンスです。

このモジュールは、一般的な操作のためのユーティリティメソッドを提供します。

## addEventListener

`addEventListener()` メソッドは、指定された要素にイベントハンドラをアタッチします。

```javascript theme={null}
var popin = document.createElement("div");
popin.id = "kameleoonPopin";
popin.innerHTML = "<img src='https://www.mywebsite.com/myImage.jpg'/>";
document.body.appendChild(popin);

Kameleoon.API.Utils.addEventListener(popin, "mousedown", function (event) {
  document.body.removeChild(popin);
});
```

> [!NOTE]
>
> Kameleoon は、エンジン再読み込み時にこの API を介して作成されたすべてのイベントリスナーをリセットします。適切なクリーンアップを確保するため、SPA でリスナーを追加する場合はこのメソッドを使用してください。

**引数**

| 名前 | 型 | 説明 |
| - | - | - |
| element | Object | リスナーの対象要素。このフィールドは必須です。 |
| eventType | String | イベント名。このフィールドは必須です。 |
| callback | Function | イベントがトリガーされたときに実行する関数。このフィールドは必須です。 |

## addUniversalClickListener

`addUniversalClickListener()` メソッドは、デスクトップでのマウスクリックと、モバイルデバイスおよびタブレットでのタッチダウンイベントをリッスンするクリックハンドラをアタッチします。モバイルデバイスでは、エンジンが `touchstart` イベントの後に `touchend` イベントを検出し、その間に `touchmove` がない場合にタッチダウンが発生します。

```javascript theme={null}
let btn = document.querySelector("#MyButton");

Kameleoon.API.Utils.addUniversalClickListener(btn, function (event) {
  let goalID = 1234;
  Kameleoon.API.Goals.processConversion(goalID);
});
```

> [!NOTE]
>
> Kameleoon は、エンジン再読み込み時にこの API を介して作成されたすべてのリスナーをリセットし、SPA でのクリーンアップを容易にします。

> [!NOTE]
>
> デスクトップデバイスでは、右クリックもこのメソッドをトリガーします (例: 新しいタブでリンクを開くとき)。

**引数**

| 名前 | 型 | 説明 |
| - | - | - |
| element | Object | リスナーの対象要素。このフィールドは必須です。 |
| callback | Function | クリックイベントがトリガーされたときに実行する関数。このフィールドは必須です。 |

## clearInterval

`clearInterval()` メソッドは、`setInterval()` を介して設定したタイマーをクリアします。

```javascript theme={null}
var myInterval = Kameleoon.API.Utils.setInterval(function () {
  if (window.dataLayer != null) {
    Kameleoon.API.Utils.clearInterval(myInterval);
  }
}, 1000);
```

**引数**

| 名前 | 型 | 説明 |
| - | - | - |
| intervalId | Number | `setInterval()` メソッドによって返されたタイマー ID。このフィールドは必須です。 |

## clearTimeout

`clearTimeout()` メソッドは、`setTimeout()` を介して設定したタイマーをクリアします。

```javascript theme={null}
var myTimeout = Kameleoon.API.Utils.setTimeout(function () {
  var popin = document.createElement("div");
  popin.id = "kameleoonPopin";
  popin.innerHTML = "<img src='https://www.mywebsite.com/myImage.jpg'/>";
  document.body.appendChild(popin);
}, 5000);

Kameleoon.API.Utils.addEventListener(document.body, "mousedown", function () {
  Kameleoon.API.Utils.clearTimeout(myTimeout);
});
```

**引数**

| 名前 | 型 | 説明 |
| - | - | - |
| timeoutId | Number | `setTimeout()` によって返されたタイマー ID。 |

## computeHash

`computeHash()` メソッドは、文字列からハッシュを計算します。機密性の高い個人情報を直接操作せずに一意のデータを処理するために使用します。

```javascript theme={null}
var emailId = Kameleoon.API.Utils.createHash("myemail@mail.com");
Kameleoon.API.Data.setCustomData("VisitorEmail", emailId);
```

**引数**

| 名前 | 型 | 説明 |
| - | - | - |
| string | String | ハッシュを計算するソース文字列。 |

**戻り値**

| 名前 | 型 | 説明 |
| - | - | - |
| hash | String | 生成されたハッシュ。使用されているアルゴリズムは、[java.lang.String の `hashCode()` の実装](https://www.w3schools.com/java/ref_string_hashcode.asp) と同じです。 |

## getURLParameters

`getURLParameters()` メソッドは、現在の URL を解析し、検出されたすべてのパラメータを返します。このメソッドは、検索 (?) およびハッシュ (#) パラメータの両方をサポートしています。

```javascript theme={null}
var parameters = Kameleoon.API.Utils.getURLParameters();

if (parameters.productID != null) {
  Kameleoon.API.Events.trigger("ProductPage");
}
```

**戻り値**

| 名前 | 型 | 説明 |
| - | - | - |
| parameters | Object | パラメータ名をキー、パラメータ値を値とするオブジェクト。 |

## performRequest

`performRequest()` メソッドは、リモート Web サーバーへの呼び出しを開始します。

```javascript theme={null}
Kameleoon.API.Utils.performRequest(
  "https://www.my_web_server_url.com",
  function () {
    if (this.readyState == 4 && this.status == 200) {
      eval(this.responseText);
    }
  },
  function() {
    console.log("Request cancelled");
  },
  2000
);
```

**引数**

| 名前 | 型 | 説明 |
| - | - | - |
| url | String | リモートサーバーの URL。このフィールドは必須です。 |
| readyStateHandler | Function | サーバーが応答を送信したときにメソッドが実行するコールバック関数です。メソッドは event 引数をこの関数に渡し([load イベント](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/load_event))、基盤となる XMLHttpRequest オブジェクトをコールバックにバインドします。そのため、コールバック内で [XMLHttpRequest のすべてのプロパティ](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#Properties)を **this** から利用できます。このフィールドは省略可能です。 |
| errorHandler | Function | エラーが発生したときにメソッドが実行するコールバック関数です。メソッドは event 引数をこの関数に渡し([error イベント](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequestEventTarget/onerror) または [timeout イベント](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/timeout))、基盤となる XMLHttpRequest オブジェクトをコールバックにバインドします。そのため、コールバック内で [XMLHttpRequest のすべてのプロパティ](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#Properties)を **this** から利用できます。このフィールドは省略可能です。 |
| timeout | Number | リクエストをキャンセルするまでの待ち時間 (ミリ秒)。デフォルトは 5000 ミリ秒です。 |

## querySelectorAll

`querySelectorAll()` メソッドは、指定された CSS セレクタにマッチするすべてのドキュメント要素を静的 `NodeList` オブジェクトとして返します。

```javascript theme={null}
var foundElements = Kameleoon.API.Utils.querySelectorAll(".kameleoonClassName");

foundElements.forEach(function (element) {
  element.style.display = "none";
});
```

> [!NOTE]
>
> このメソッドは、**:contains** および **:eq** を含むセレクタをサポートしています。

**引数**

| 名前 | 型 | 説明 |
| - | - | - |
| selector | String | 1 つ以上の CSS セレクタ。このフィールドは必須です。 |

**戻り値**

| 名前 | 型 | 説明 |
| - | - | - |
| elements | Array | クエリにマッチする要素のリスト。 |

## setInterval

`setInterval()` メソッドは、指定されたミリ秒間隔で関数または式を実行します。

Kameleoon は、エンジン再読み込み時にこの API を介して作成されたすべての間隔をリセットします。適切なクリーンアップを確保するため、SPA ではこのメソッドを使用してください。

```javascript theme={null}
var countdown = 10;
var timer = document.createElement("div");
timer.innerHTML = countdown.toString();
document.body.appendChild(timer);

var myInterval = Kameleoon.API.Utils.setInterval(function () {
  countdown--;
  timer.innerHTML = countdown.toString();

  if (countdown == 0) {
    Kameleoon.API.Utils.clearInterval(myInterval);
  }
}, 1000);
```

**引数**

| 名前 | 型 | 説明 |
| - | - | - |
| function | Function | メソッドが定期的に実行する JavaScript 関数です。このフィールドは必須です。 |
| milliseconds | Number | 間隔の継続時間 (ミリ秒)。デフォルトは 200 ミリ秒です。 |

**戻り値**

| 名前 | 型 | 説明 |
| - | - | - |
| intervalId | Number | `clearInterval()` で使用するタイマー ID。 |

## setTimeout

`setTimeout()` メソッドは、指定されたミリ秒数後に関数または式を実行します。

Kameleoon は、エンジン再読み込み時にこの API を介して作成されたすべてのタイムアウトをリセットします。適切なクリーンアップを確保するため、SPA ではこのメソッドを使用してください。

```javascript theme={null}
var myTimeout = Kameleoon.API.Utils.setTimeout(function () {
  Kameleoon.API.Events.Trigger("5 seconds elapsed");
}, 5000);
```

**引数**

| 名前 | 型 | 説明 |
| - | - | - |
| function | Function | メソッドが定期的に実行する JavaScript 関数です。このフィールドは必須です。 |
| milliseconds | Number | 関数を実行するまでの待ち時間 (ミリ秒)。デフォルトは 200 ミリ秒です。 |

**戻り値**

| 名前 | 型 | 説明 |
| - | - | - |
| timeoutId | Number | `clearTimeout()` で使用するタイマー ID。 |