Weblate フロントエンド¶
フロントエンドは、現在 Bootstrap、jQuery、およびいくつかのサード パーティのライブラリを使用して構築されています。
対応ブラウザー¶
Weblate は、すべての主要なブラウザーとプラットフォームの最新の安定したリリース版に対応しています。
WebKit、Blink、または Gecko の最新版を使用する代替ブラウザーは、直接またはプラットフォームの Web ビュー API を使用しているかどうかにかかわらず、明示的に対応していません。ただし、Weblate は（多くの場合）これらのブラウザーでも正常に表示されて機能するはずです。
古いブラウザーは動作するかもしれませんが、一部の機能は制限されている場合があります。
依存関係の管理¶
Django プロジェクトの クライアント で サードパーティ のライブラリをインストールおよび管理することは手間がかかります。このセクションでは、Webpack を使用して Weblate の クライアント側 で使用するサードパーティのライブラリをインストールおよび管理する方法を提供しています。
前提条件¶
インストールを続行する前に、次の前提条件を満たしていることを確認してください。
Nodejsバージョン 14 以上。yarnパッケージ マネージャーがシステムにインストール済み。cd clientを実行。yarn installを実行。
インストール¶
ライブラリをインストールするためのコマンド:
yarn add <lib-name>
Importing the Library¶
次に、ライブラリをインポートする 2 つの方法:
- プロジェクト全体のライブラリである場合（すべてのページまたはほとんどのページで使用または必要となる場合）:
src/main.jsファイルにライブラリをインポートする。そして、それをグローバル スコープで宣言します（必要な場合）。
- ページ固有のライブラリの場合（ライブラリが特定のページまたはテンプレートで使用されている場合）:
src/<lib-name>.jsという新しいファイル名を作成する。その中にライブラリをインポートする。
webpack.config.js:<lib-name>: "src/<lib-name>.js"にエントリーを追加する。
注意:
<lib-name>を実際のサードパーティ ライブラリの名前に置き換えてください。
Building the Library¶
プロジェクトで使用するライブラリをビルドするための実行コマンド:
yarn build
Including the Library¶
これでライブラリが構築され、使用できるようになりました。ライブラリを追加する方法:
もし、ライブラリが
src/main.jsにインポートされている場合、追加の手順は必要ありません（すでにbase.htmlに含まれているため）。ライブラリが特定のファイル
src/<lib-name>.jsにインポートされた場合は、weblate/templatesで include タグを使用して、構築された静的 JavaScript ファイルにリンクします。
{% load static %}
<script src="{% static 'js/vendor/<lib-name>.js' %}"></script>
コーディング規約¶
Weblate は、JavaScript および CSS コードのフォーマットと lint に Biome を使用します。
現地語化¶
フロントエンドのコードでユーザーに表示するテキストが必要な場合は、ローカライズ可能にする必要があります。ほとんどの場合、テキストを 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'
アイコン¶
Weblate では現在、マテリアル デザインのアイコンを使用しています。新しいシンボル アイコンをお探しの方は Material Design Icons もしくは Material Design Resources を確認してください。
また、ほとんどのアイコンはパスのスタイルを設定できるよう HTML に埋め込まれるため、SVG のサイズを小さくする scripts/optimize-svg を用意しました。