Weblate CDN を使用した HTML と JavaScript の翻訳¶

Starting with Weblate 4.2 it is possible to export JavaScript and HTML localization to a CDN using JavaScript 現地語化 CDN add-on. To publish translation files without the JavaScript loader, use Translation files CDN.

注釈

This feature is configured on Hosted Weblate. It requires additional configuration on your installation, see LOCALIZE_CDN_URL and LOCALIZE_CDN_PATH. See also CDN の現地化.

Upon installation into your component the JavaScript localization add-on will push committed translations (see 遅延コミット) to the CDN and these can be used in your web pages to localize them.

コンポーネントの作成¶

まず、文字列を保持するモノリンガルのコンポーネントを作成してください。一般的な作成方法については、翻訳プロジェクトとコンポーネントの追加を確認してください。

既存のリポジトリ（例: HTML ファイルのみを含んだもの）を使って開始する場合、リポジトリ内に原文の言語（参照: 原文の言語）用の空の JSON ファイルを、例えば locales/en.json のように作成します。内容は空のオブジェクトを示す {} であることが必要です。それができたら、リポジトリを Weblate にインポートして、アドオン設定から開始できます。

ヒント

既存の翻訳がある場合は、翻訳を言語の JSON ファイルに配置すると、Weblate で使用されます。

既存のリポジトリを使用しない（または存在しない）場合は、コンポーネントの作成時にゼロから始めるを選択し、ファイル形式として JSON ファイルを選択します（この時点では、どのモノリンガル形式を選択しても問題ありません）。

Weblate CDN アドオンの設定¶

JavaScript 現地語化 CDN アドオンには、設定オプションがあります。

翻訳率のしきい値: このしきい値を超えて翻訳した翻訳は、CDN に含まれます。
CSS セレクタ: HTML 文書内のどの文字列を翻訳可能にするかを設定します。参照: Weblate CDN の文字列抽出および Weblate CDN を使用した HTML の現地語化。
言語 Cookie 名: ユーザーが選択した言語を含むクッキーの名前。JavaScript スニペットの Weblate CDN を使用した HTML の現地語化で使用します。
HTMLファイルから文字列を抽出: Weblate が、翻訳可能な文字列を検索して翻訳用に提供するリポジトリまたは URL 内のファイルの一覧。参照: Weblate CDN の文字列抽出。

Weblate CDN の文字列抽出¶

The translation strings have to be present in Weblate. You can either manage these manually, use API to create them or list files or URLs using Extract strings from HTML files and Weblate will extract them automatically. The files have to present in the repository or contain remote URLs which will be download and parsed regularly by Weblate. Remote URLs are restricted by ALLOWED_ASSET_DOMAINS, including any redirect targets.

CSS セレクタのデフォルト設定では、CSS クラス l10n の要素を抽出します。次のスニペットから 2 つの文字列を抽出する例:

<section class="content">
    <div class="row">
        <div class="wrap">
            <h1 class="section-title min-m l10n">Maintenance in progress</h1>
            <div class="page-desc">
                <p class="l10n">We're sorry, but this site is currently down for maintenance.</p>
            </div>
        </div>
    </div>
</section>

既存のコードを変更したくない場合は、* をセレクタにして全ての要素を処理の対象にできます。

注釈

現時点では、要素のテキストのみ抽出します。このアドオンは、要素属性または子を持つ要素の現地語化に対応していません。

Weblate CDN を使用した HTML の現地語化¶

To localize an HTML document, you need to load the weblate.js script:

<script src="https://weblate-cdn.com/a5ba5dc29f39498aa734528a54b50d0a/weblate.js" async></script>

読み込み時に、（CSS セレクタ設定に基づき）翻訳可能な要素に一致するものがすべて自動的に検索され、一致したテキストが翻訳に置き換えられます。

ユーザー言語は、設定した Cookie から検出され、ブラウザーで設定したユーザーの言語設定にフォールバックします。

言語 Cookie 名は、他のアプリケーションとの連携に役立ちます（たとえば、Django を使用する場合は django_language を選択する）。

JavaScript の現地語化¶

個々の翻訳は、CDN の下でバイリンガル JSON ファイルとして公開されます。1 つを取得するためのコード例:

fetch(("https://weblate-cdn.com/a5ba5dc29f39498aa734528a54b50d0a/cs.json")
  .then(response => response.json())
  .then(data => console.log(data));

この場合、実際の現地語化のプログラムの実装が必要です。

Publishing translation files¶

The Translation files CDN add-on publishes translation files directly to the CDN. It does not generate a JavaScript loader or convert translations into bilingual JSON.

Single-file translations are named using the language code and original file extension, for example cs.json or de.po. Multi-file translations are served below the language code using paths relative to the translation directory. Monolingual components include the source language file, while bilingual components publish only target-language files. See CDN の現地化 for secure server setup.