Weblate フロントエンド

フロントエンドは、現在 Bootstrap、jQuery、および複数のサード パーティのライブラリを使用して構築されています。

対応ブラウザー

Weblate は、すべての主要なブラウザーとプラットフォームの最新の安定したリリース版に対応しています。

WebKit、Blink、または Gecko の最新版を使用する代替ブラウザーは、直接またはプラットフォームの Web ビュー API を使用しているかどうかにかかわらず、明示的に対応していません。ただし、Weblate は（多くの場合）これらのブラウザーでも正常に表示されて機能するはずです。

古いブラウザーは動作するかもしれませんが、一部の機能は制限されている場合があります。

Accessibility

Weblate targets WCAG 2.2 Level AA for new and changed user-facing functionality where practical. Use semantic HTML and Bootstrap components before adding custom interaction code.

When changing the frontend:

  • Make all interactive controls reachable and usable with a keyboard.

  • Keep focus order logical and preserve visible focus styling.

  • Prefer native buttons, links, inputs, selects, and tables over custom widgets.

  • Associate every form control with a label, help text, and validation errors where applicable.

  • Do not use color, icon shape, or position as the only way to convey state.

  • Announce dynamic status changes that are not otherwise visible to assistive technology.

  • Respect reduced-motion preferences for animation or scrolling behavior.

  • Test changed workflows with keyboard-only navigation and, when practical, a screen reader spot check.

依存関係の管理

Django プロジェクトの クライアント で サードパーティ のライブラリをインストールおよび管理することは手間がかかります。このセクションでは、Webpack を使用して Weblate の クライアント側 で使用するサードパーティのライブラリをインストールおよび管理するする手順を説明します。

前提条件

インストールを続行する前に、次の前提条件を満たしていることを確認してください。

  • A supported Node.js release.

  • yarn パッケージ マネージャーがシステムにインストール済み。

  • cd client を実行。

  • Run yarn install --check-files.

インストール

ライブラリをインストールするためのコマンド:

yarn add <lib-name>

ライブラリのインポート

次に、ライブラリをインポートする 2 つの方法:

  1. プロジェクト全体のライブラリである場合（すべてのページまたはほとんどのページで使用または必要となる場合）:

    • src/main.js ファイルにライブラリをインポートする。

    • そして、それをグローバル スコープで宣言する（必要な場合）。

  2. ページ固有のライブラリの場合（ライブラリが特定のページまたはテンプレートで使用されている場合）:

    • src/<lib-name>.js という新しいファイル名を作成する。

    • ライブラリをインポートし、window オブジェクトに登録して全体から参照可能にします。

    • webpack.config.js:<lib-name>: "src/<lib-name>.js" にエントリーを追加する。

    • webpack.config.js の mainLicenseTransform 内にある excludePrefixes 配列にライブラリ名を追加する。

    • webpack.config.js の plugins 配列にある LicensePlugin の additionalFiles にライセンス ファイル名を追加する。

    • 前の手順で追加したライセンスファイル用に <lib-name>LicenseTransform 関数を作成して使用する。

    注意: <lib-name> を実際のサードパーティ ライブラリの名前に置き換えてください。

ライブラリーのビルド

プロジェクトで使用するライブラリをビルドするための実行コマンド:

yarn build

ライブラリの組み込み

これでライブラリが構築され、使用できるようになりました。ライブラリを追加する方法:

  1. もし、ライブラリが src/main.js にインポートされている場合、追加の手順は必要ありません（すでに base.html に含まれているため）。

  2. ライブラリが特定のファイル src/<lib-name>.js にインポートされた場合は、 weblate/templates で include タグを使用して、構築された静的 JavaScript ファイルにリンクします。

{% load static %}
<script src="{% static 'js/vendor/<lib-name>.js' %}"></script>

コーディング規約

Weblate relies on Biome for formatting and linting the JavaScript and CSS code. Django templates are formatted and linted separately by djade and djlint.

現地語化

フロントエンドのコードでユーザーに表示するテキストがある場合は、現地語化できるようにすることが必要です。ほとんどの場合、テキストを gettext 関数内でラップするだけです。さらに複雑な機能を使用する方法:

document.write(gettext("this is to be translated"));

var object_count = 1 // or 0, or 2, or 3, ...
s = ngettext("literal for the singular case",
        "literal for the plural case", object_count);

fmts = ngettext("There is %s object. Remaining: %s",
        "There are %s objects. Remaining: %s", 11);
s = interpolate(fmts, [11, 20]);
// s is "There are 11 objects. Remaining: 20"

参考

Translation topic in the Django documentation

アイコン

Weblate では現在、Material Design Icons のアイコンを使用しています。新しいシンボル アイコンをお探しの方は、その中からお探しください。

また、ほとんどのアイコンはパスのスタイルを設定できるよう HTML に埋め込まれるため、SVG のサイズを小さくする scripts/optimize-svg を用意しました。