翻訳したいファイルの修正
This site is only available in Japanese.
このソースではまだ30ファイル位が翻訳プラットフォーム非対応のままである。
追加したい場合、下記のような手順で翻訳プラットフォームを追加する
一番手っ取り早いのは横断検索で「__DARWIN__」で翻訳非対応ファイルを探す
例として、\app\src\main-process\show-uncaught-exception.tsを修正する
ファイルの頭の方にimport { t } from 'i18next' を追加する
↑の状態から翻訳対象をtつきに変更する↓
このままでは、言語ファイルの管理がやりにくいので、第一パラメータに名前を付ける
言語ファイルの可読性を考えると、<ファイル名>.(ドット)<機能名>がよい
機能名は考えるのも疲れるので文言をスネークケースにして半角スペースはハイフンにするのが楽。他と被らないように。
ただ、短すぎると言語ファイルの管理がしにくく、あまりに長すぎるとソースが読みづらくなるので、ほどほどで。
元が __DARWIN__ の場合、Mac側に -darwin を付けると見やすい。
改行位置はあとで機械的に行うので考えなくてよい。
複数行のリソースは「`」を有効に使う。i18parser翻訳直後には一時的に「\n______」などのようになるが、後続のコンバーターが修正してくれる。
【例】
<div>
If you have a GitHub Enterprise or AE account at work, sign in to
it to get access to your repositories.
</div>適用後
<div>
{t(
'clone-repository.render-sign-in-enterprise',
`If you have a GitHub Enterprise or AE account at work,
sign in to it to get access to your repositories.`
)}
</div>翻訳ファイルに追加するにはNPMスクリプトからi18next-extractを実行する
出力に「[warning] Found same keys with different values」が表示された時はキーが競合しているので、修正する
こうなればOK
変更ファイルから日本語ファイルを選択して開く。
言語ファイルは、ファイル名でグループ化されているので(さきほどネーミングルールを指定したのはこのため)探すのは難しくないと思う。
まずは公式日本語ドキュメントを見て、該当する機能はその言葉を流用、そうでなければ英語や機能の知識があれば自分で、無理であれば Google翻訳なり Bing翻訳 なりを使えばよい。ただ、自分が読んで意味不明な文書を無理に機械翻訳する必要はないと思う。
日本語以外の人には従来通り英語のままで表示される（そのうち有志が頑張って翻訳してくれる）。
ただし表記ゆれに関しては公式のGitHubの記述に合わせるのがよいと思われる。例えば以下のキーワード。
| 使われる表記 | 使われない表記 |
|---|---|
| 〇 ブラウザー | × ブラウザ |
| 〇 ユーザー | × ユーザ |
| 〇 ディレクトリ | × ディレクトリー |
| 〇 リポジトリ | × リポジトリー |
| 〇 上位リポジトリ | × 親リポジトリ |
| 〇 無料アカウント | × 無料のアカウント |
「dangerouslySetInnerHTML」は絶対に使わないで。
このソースは遠い将来、上位リポジトリ（本家）に取り込まれることを前提に製造しているため、セキュリティリスクが伴うコードは混入させないようにしている。
それでもある程度の言語の揺れを吸収したい場合の代替策として、タグの前後でメッセージを分割してconst値をどちらでも表示できるような仕組みにしておく。
【例】 app\src\ui\banners\cherry-pick-undone.tsx
public render() {
const { countCherryPicked, targetBranchName, onDismissed } = this.props
const pluralized = countCherryPicked === 1 ? 'commit' : 'commits'
return (
<SuccessBanner timeout={5000} onDismissed={onDismissed}>
Cherry-pick undone. Successfully removed the {countCherryPicked}
{' copied '}
{pluralized} from <strong>{targetBranchName}</strong>.
</SuccessBanner>
)
}は、このように変換して、タグの前でも後ろでも表示できる仕組みにしている。
public render() {
const { countCherryPicked, targetBranchName, onDismissed } = this.props
const pluralized =
countCherryPicked === 1
? t('cherry-pick-undone.one-commit', 'commit')
: t('cherry-pick-undone.multiple-commits', 'commits')
return (
<SuccessBanner timeout={5000} onDismissed={onDismissed}>
{t(
'cherry-pick-undone.cherry-pick-undone-1',
`Cherry-pick undone. Successfully removed the {{0}}
copied {{1}} from `,
{ 0: countCherryPicked, 1: pluralized }
)}
<strong>{targetBranchName}</strong>
{t('cherry-pick-undone.cherry-pick-undone-2', `.`, {
0: countCherryPicked,
1: pluralized,
})}
</SuccessBanner>
)
}ここで、日本語は単数と複数の観念がほぼないため、const値で翻訳された「コミット」を使わずに翻訳メッセージ側に直書きして{{1}}を翻訳メッセージに記載しないのは一向に構わない。
"cherry-pick-undone": {
"cherry-pick-undone-1": "チェリーピックを元に戻します。コピーされた {{0}}個のコミットを ",
"cherry-pick-undone-2": " から削除しました。",
"multiple-commits": "コミット",
"one-commit": "コミット"
},NPMスクリプトからlint:fixを実行して、改行位置などの自動調整を実施。
次にビルド。
NPMスクリプトから、build:prodを実行する(言語だけの修正ならdevを使う必要はない)
Core i3、RAM 8M、普通の3.5インチハードディスクで 4分50秒くらい時間がかかる。
Core i5、RAM 16M、SSDでも4分20秒 かかるので、それほど環境に拘る必要はない。
NPMスクリプトから、start:prodを実行する(Macの場合、成果物を直接実行してもcliに環境変数が渡されずメニューが日本語化されない。(手動であらかじめ launchctl setenv LANG ja_JP.UTF-8を実行しているならその限りではないが。)
文言修正が対応されていたら、コミットする前に test(jest)を実施してエラーがないことを確認
問題なかったら、コミット。以上。