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

Weblate 4.2 以降では、JavaScript 現地語化 CDN アドオンを使用して現地語化したものを CDN にエクスポートできるようになりました。

注釈

この機能は、Hosted Weblate で設定します。インストール時に追加の設定が必要です。参照: LOCALIZE_CDN_URL および LOCALIZE_CDN_PATH。

コンポーネントにインストールすると、コミットされた翻訳（参照: 遅延コミット）が CDN にプッシュされ、Web ページの表示に使われます。

コンポーネントの作成¶

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

既存のリポジトリ（例: 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 の文字列抽出¶

翻訳文字列は、Weblate に存在することが必要です。これを手動で管理するか、API を使用して作成するか、HTMLファイルから文字列を抽出を使用してファイルまたは URL のリストを用意すると、Weblate は翻訳文字列を自動的に抽出します。ファイルはリポジトリに存在するか、Weblate が定期的にダウンロードして解析するリモート URL が含まれていることが必要です。

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 の現地語化¶

HTML ドキュメントを現地語化するには、weblate.js スクリプトの読み込みが必要です。読み込み方法:

<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));

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