Page Rewriting

この例では、Edge Cloud Apps関数を使用して動的コンテンツの適応を実現する方法を示します。以下のコードスニペットは、訪問者のブラウザの種類に基づいてページコンテンツを動的に書き換える方法を示しています。ユーザーがChromeを使用してページにアクセスしている場合、コンテンツは書き換えられます。それ以外の場合は、元のコンテンツは変更されずに残ります。

コード例

async function handleRequest(request) {
    // 元のリクエストを取得し、レスポンスを取得します
    let response = await fetch(request);
    // カスタムレスポンスヘッダーを設定します
    response.headers.set("X-Version", "petshop-v1");

    // リクエストがChromeブラウザからのもので、レスポンスのコンテンツタイプがHTMLであるかどうかを確認します
    if (isFromChrome(request) && isHtml(response)) {
        console.log("ページコンテンツを書き換えています...");

        // レスポンス本文のテキストを取得し、置換を実行します
        let body = await response.text();
        body = body.replace('Make Your Pets Happy');
        body = body.replace(
            'Dolore tempor clita lorem rebum kasd eirmod dolore diam eos kasd.',
        );

        // 変更されたレスポンスを返します
        return new Response(body, response);
    } else {
        console.log("元のページコンテンツを通過しています...");
        return response;
    }
}

// リクエストがChromeブラウザから発信されたかどうかを判断します
function isFromChrome(request) {
    let userAgent = request.headers.get("User-Agent");
    return userAgent && userAgent.toLowerCase().includes("chrome");
}

// レスポンスのコンテンツタイプがHTMLかどうかを判断します
function isHtml(response) {
    let contentType = response.headers.get("Content-Type");
    return contentType && contentType.toLowerCase().includes("text/html");
}

// 着信リクエストを処理するためにFetchイベントリスナーを追加します
addEventListener("fetch", event => {
    event.respondWith(handleRequest(event.request));
});

注意点

この例では、ユーザーのブラウザの種類を検出し、それに応じてHTMLコンテンツを変更することにより、動的コンテンツの適応を実装する方法を示しています。コンテンツの書き換えには多くのアプリケーションがあり、以下は成熟したオンラインシナリオのいくつかです。

• **不適切な表現のフィルタリング：**ページコンテンツ内の不適切な表現を自動的に検出して置換します。
• **外部リンクの書き換え：**ページ上の外部リンクのアドレスを動的に変更します。
• **Webサイト全体のIPv6サポート：**訪問者のIPタイプに合わせて調整されたコンテンツを提供します。