Weblate フロントエンド

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

対応ブラウザー

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

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

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

依存関係の管理

yarn パッケージ マネージャーは、サード パーティのライブラリを更新するために使用します。設定は scripts/yarn にあり、これはライブラリを更新するラッパ スクリプト scripts/yarn-update であり、ビルドして正しい場所 weblate/static/vendor にコピーするためのものです。この場所には、すべてサードパーティーのフロントエンドのコードが配置されています。Weblate 固有のコードは、weblate/static または機能固有のサブディレクトリ(例: weblate/static/editor)に直接配置することが必要です。

通常の新しいサード パーティ ライブラリの追加設定方法:

# Add a yarn package
yarn --cwd scripts/yarn add PACKAGE
# Edit the script to copy package to the static folder
edit scripts/yarn-update
# Run the update script
./scripts/yarn-update
# Add files to git
git add .

コーディング規約

Weblate は、JavaScript ファイルと CSS ファイルの両方のコード フォーマットに Prettier を使用しています。

また ESLint を使用して JavaScript コードを検査します。

現地語化

フロントエンドのコードでユーザーに表示するテキストが必要な場合は、現地語化が可能な文字列であることが必要です。ほとんどの場合、テキストを 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 を用意しました。