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

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

注釈

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

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

コンポーネントの作成

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

開始する既存のリポジトリ(例: HTML ファイルを含むファイル)がある場合、リポジトリ内に原文の言語(参照: 原文の言語 )用の空の 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));

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