Weblate フロントエンド

The frontend is currently built using Bootstrap, jQuery and few third-party libraries.

対応ブラウザー

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

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

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

依存関係の管理

Installing and managing 3rd party libraries in the client of a Django project can be a bit tricky. This section provides a step-by-step guide on how to install and manage 3rd party libraries used by the client side of Weblate using Webpack.

前提条件

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

  • Nodejs バージョン 14 以上。

  • The yarn package manager is installed on your system.

  • cd client を実行。

  • yarn install を実行。

インストール

To install a library, first run the following command:

yarn add <lib-name>

Importing the Library

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

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

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

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

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

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

    • Import the library in it. Then inject it into the window object to be globally accessible.

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

    • Add library name in excludePrefixes array in mainLicenseTransform in webpack.config.js.

    • Add license file name in additionalFiles in LicensePlugin in plugins array in webpack.config.js.

    • Create a <lib-name>LicenseTransfrom function for the license file introduced in the previous steps and use it.

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

Building the Library

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

yarn build

Including the Library

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

  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 は、JavaScript および CSS コードのフォーマットと lint に Biome を使用します。

現地語化

Should you need any user visible text in the frontend code, it should be localizable. In most cases, all you need is to wrap your text inside gettext function, but there are more complex features available:

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 もしくは Material Design Resources を確認してください。

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