Terminal-Based Content Adaptation

この例では、Edge Cloud Apps関数を使用して動的コンテンツのローカリゼーションを実現する方法を示します。たとえば、オリジンサーバーが英語のコンテンツのみを提供している場合、この関数を使用して、ユーザーのブラウザの言語設定に基づいて、Webページのコンテンツを中国語、ドイツ語、日本語に自動的に翻訳できます。

コード例

async function handleRequest(request) {
    const url = new URL(request.url)
    const language = clientLanguage(request)
    const countryStrings = strings[language] || {}
    const response = await fetch(request.url)

    // HTMLRewriterを使用して、ストリームコンテンツの書き換えを実行します
    return new HTMLRewriter()
        .on('[data-i18n-key]', new ElementHandler(countryStrings)) // 'data-i18n-key'属性を持つタグを見つけます
        .transform(response) // レスポンスコンテンツを変換します
}

// 優先されるブラウザの言語を取得します
function clientLanguage(request) {
    // Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7
    try {
        const languageHeader = request.headers.get('Accept-Language')
        // Accept-Languageヘッダーを解析して、優先される言語を取得します
        return languageHeader.split(';')[0].split(',')[0].split('-')[0] 
    } catch (e) {
        // 言語設定を取得できない場合は、デフォルトで中国語に設定します
        return 'zh' 
    }
}

// 要素コンテンツの置換を処理します
class ElementHandler {
    constructor(countryStrings) {
      this.countryStrings = countryStrings
    }
  
    element(element) {
      const i18nKey = element.getAttribute('data-i18n-key')
      if (i18nKey) {
        const translation = this.countryStrings[i18nKey]
        if (translation) {
          element.setInnerContent(translation) // タグコンテンツを置き換えます
        }
      }
    }
  }

// 翻訳テキストの構成
const strings = {
    de: {
      title: 'Beispielseite',
      headline: 'Beispielseite',
      subtitle:
        'Dies ist meine Beispielseite. Abhängig davon, wo auf der Welt Sie diese Site besuchen, wird dieser Text in die entsprechende Sprache übersetzt.',
      disclaimer:
        'Haftungsausschluss: Die anfänglichen Übersetzungen stammen von Google Translate, daher sind sie möglicherweise nicht perfekt!',
      tutorial:
        'Das Tutorial für dieses Projekt finden Sie in der CDNetworks ECA-Dokumentation.',
      copyright: 'Design von HTML5 UP.',
    },
    ja: {
      title: 'サンプルサイト',
      headline: 'サンプルサイト',
      subtitle:
        'これは私の例のサイトです。 このサイトにアクセスする世界の場所に応じて、このテキストは対応する言語に翻訳されます。',
      disclaimer:
        '免責事項：最初の翻訳はGoogle翻訳からのものですので、完璧ではないかもしれません！',
      tutorial:
        'CDNetworks ECAのドキュメントでこのプロジェクトのチュートリアルを見つけてください。',
      copyright: 'HTML5 UPによる設計。',
    },
    zh: {
        title: '示例站点',
        headline: '示例站点',
        subtitle:
          '这是我的示例站点。根据您访问本网站的地点，本文将被翻译成相应的语言。',
        disclaimer:
          '免责声明:最初的翻译来自谷歌翻译，所以他们可能不完美！',
        tutorial:
          '在CDNetworks ECA文档中找到这个项目的教程。',
        copyright: '由HTML5 UP设计。',
      },
  }
                    
addEventListener("fetch", event => {
    return event.respondWith(handleRequest(event.request))
}) 

注意

• オリジンサーバーは、翻訳が必要なHTMLタグにdata-i18n-keyカスタム属性を事前に追加する必要があります。例：<title data-i18n-key="title">...</title>。
• Edge Cloud Apps関数は、HTMLRewriter APIを使用して、この属性を持つタグコンテンツのストリーム書き換えを実行します。ストリーム書き換えとは、関数がWebページのコンテンツを受信し、翻訳の書き換えを実行し、同時にユーザーにコンテンツを出力できることを意味します。これにより、全体的な応答時間が効果的に短縮され、ユーザーエクスペリエンスが向上します。