Weblate フロントエンド

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


Weblate supports the latest, stable releases of all major browsers and platforms.

Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform’s web view API, are not explicitly supported. However, Weblate should (in most cases) display and function correctly in these browsers as well.

Older browsers might work, but some features might be limited.


The yarn package manager is used to update third party libraries. The configuration lives in scripts/yarn and there is a wrapper script scripts/yarn-update to upgrade the libraries, build them and copy to correct locations in weblate/static/vendor, where all third partly frontend code is located. The Weblate specific code should be placed directly in weblate/static or feature specific subdirectories (for example weblate/static/editor).

Adding new third-party library typically consists of:

# 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
# 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 のサイズを小さくする :file:'scripts/optimize-svg' を用意しました。