メインコンテンツへスキップ
kameleoon.jsは非推奨となり、すべてのKameleoon実装スニペットでengine.jsに置き換えられました。kameleoon.jsは2026年6月1日以降サポートされなくなります。この日付以降、kameleoon.jsを参照しているWebサイトのキャンペーンは機能しなくなります。実装スニペットを適宜更新してください。

​
Fastlyの構成​

Fastlyアカウントにログインし、以下のようにオリジンホストと2つのコンテンツヘッダーを作成します。

​
オリジンホストを作成する​

  1. Service configurationタブに移動し、左側のエントリOrigins > Hostsをクリックします。Create hostをクリックし、Kameleoonアプリケーションファイルをターゲットにする新しい条件を作成します。Kameleoon JavaScript Application Fileのような分かりやすい名前を付けてください。
  2. Apply ifボックスに、req.url ~ "^/kameleoon/engine.js"という条件を入力します。
  3. 新しい条件を保存し、新しいオリジンホストに適用します。
  4. オリジンホストに以下の構成パラメータを適用します。YOUR_SITECODEはKameleoonプロジェクト IDに置き換えます(取得手順についてはこの記事を参照してください)。
  • Name: YOUR_SITECODE.kameleoon.io
  • Address: YOUR_SITECODE.kameleoon.io
  • Certificate hostname: YOUR_SITECODE.kameleoon.io
Origin host configuration
注:Kameleoonスクリプトのドメインはプロジェクトごとに異なる場合があります。プロジェクトは作成日に応じてkameleoon.euまたはkameleoon.ioのいずれかでホストされる可能性があります。Kameleoonアプリのプロジェクトに表示されているドメインを使用してください。

​
ヘッダーを作成する​

Webサイトからユーザーにコンテンツを提供する方法を指定するためにヘッダーを作成する必要があります。
  1. 左側のエントリContent > Headersをクリックします。Create a headerをクリックします。
  2. ホスト用に作成したのと同じ条件を添付して、サイト上の新しいKameleoon JavaScript Application Fileをターゲットにします。
  3. ヘッダーに名前を付け(例:YOUR_SITECODE.direct.kameleoon.io host)、以下のように構成されていることを確認します。YOUR_SITECODEはKameleoonプロジェクト IDに置き換えます。
  • Type / Action: Request - Set
  • Destination: http.Host
  • Source: “YOUR_SITECODE.direct.kameleoon.io”
  1. Createをクリックしてヘッダーを保存します。
[Header 1 configuration
新しい構成を有効化する前に、リクエストのベースを変更する2つ目のヘッダーを作成する必要があります。
  1. Create a headerをクリックします。
  2. ホスト用に作成したのと同じ条件を添付して、サイト上の新しいKameleoon JavaScript Application Fileをターゲットにします。
  3. ヘッダーに名前を付け(例:YOUR_SITECODE.direct.kameleoon.io base)、以下のように構成されていることを確認します。YOUR_SITECODEはKameleoonプロジェクト IDに置き換えます。
  • Type / Action: Request - Regex
  • Destination: url
  • Source: req.url
  • Regex: ^/kameleoon/engine.js
  • Substitution: /engine.js?uncompressed=true
  1. Createをクリックしてヘッダーを保存します。
[Header 2 configuration

​
圧縮形式を選択する​

圧縮を有効にするには、以下の手順で圧縮形式を選択することから始めます。
  1. 左側のエントリContentをクリックします。
  2. Compressionエリアまでスクロールします。Compressionコントロールが表示されます。
  3. Use Brotli compression when availableを選択して、サポートされているブラウザではデフォルトでBrotli圧縮を使用します。
[Compression configuration
ソースコードを更新する前に、新しいFastly構成を有効化することを忘れないでください。

​
ソースコードにKameleoonスニペットを追加する​

WebサイトにKameleoonを実装する方法を理解するには、この記事を参照してください。
最後のステップは、インストールタグ内のデフォルトのKameleoon Application JavaScript URLをFastly URLに置き換えることです。たとえば、JavaScriptファイル(アンチフリッカー付き非同期ロード)の実装方法を使用している場合、Kameleoonアプリケーションファイルはデフォルトで//SITE_CODE.kameleoon.io/engine.jsにホストされます。インストールタグ内のこのURLを自身のFastly URLに置き換えるだけです。