Skip to content

翻訳したいファイルの修正

Jump to bottom
Yasuhiro, Kaneko edited this page Jun 21, 2025 · 30 revisions

This site is only available in Japanese.

このソースではまだ10ファイル前後が翻訳プラットフォーム非対応のままである。

追加したい場合、下記のような手順で翻訳プラットフォームを追加する

VSCode で対象ファイルを探す

一番手っ取り早いのは横断検索で「__DARWIN__」で翻訳非対応ファイルを探す

WS000013

修正する

例として、\app\src\main-process\show-uncaught-exception.tsを修正する

WS000014

ファイルの頭の方にimport { t } from 'i18next' を追加する

WS000016

WS000017

↑の状態から翻訳対象をtつきに変更する↓

WS000018

このままでは、言語ファイルの管理がやりにくいので、第一パラメータに名前を付ける

言語ファイルの可読性を考えると、<ファイル名>.(ドット)<機能名>がよい

機能名は考えるのも疲れるので文言をスネークケースにして半角スペースはハイフンにするのが楽。他と被らないように。

ただ、短すぎると言語ファイルの管理がしにくく、あまりに長すぎるとソースが読みづらくなるので、ほどほどで。

元が __DARWIN__ の場合、Mac側に -darwin を付けると見やすい。

改行位置はあとで機械的に行うので考えなくてよい。

WS000019

複数行のリソースは「`」を有効に使う。i18parser翻訳直後には一時的に「\n______」などのようになるが、script/i18next-extract.ts 内で修正してくれる。
【例】

            <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を実行する

WS000020

出力に「[warning] Found same keys with different values」が表示された時はキーが競合しているので、修正する

WS000021

こうなればOK

WS000022

変更ファイルから日本語ファイルを選択して開く。

言語ファイルは、ファイル名でグループ化されているので(さきほどネーミングルールを指定したのはこのため)探すのは難しくないと思う。

WS000023

まずは公式日本語ドキュメントを見て、該当する機能はその言葉を流用、そうでなければ英語や機能の知識があれば自分で、無理であれば Google翻訳なり Bing翻訳 なりを使えばよい。ただ、自分が読んで意味不明な文書を無理に機械翻訳する必要はないと思う。

日本語以外の人には従来通り英語のままで表示される（そのうち有志が頑張って翻訳してくれる）。

表記ゆれ

表記ゆれに関しては公式のGitHubの記述に合わせるのがよいと思われる。例えば以下のキーワード。

使われる表記 使われない表記
〇 ブラウザー × ブラウザ
〇 ユーザー × ユーザ
〇 ディレクトリ × ディレクトリー
〇 リポジトリ × リポジトリー
〇 上位リポジトリ × 親リポジトリ
〇 無料アカウント × 無料のアカウント

単位表示について

app\src\ui\lib\bytes.tsの中を見ると、単位に関してIEC準拠であることが言及されている。LinuxのFile Manager内でも概ねこの表記に準じている。だがWindowsやMacでは、ほぼKiB、MiB、GiBに関してはKB、MB、GBと表記するのが慣習となっている。

このため、開発者の意図は組みながらも慣習と照らし合わせて、WindowsとMacは単位を翻訳対象として、日本語、簡体字、繁体字の三言語に関しては、以下のように設定している。Linuxの場合は翻訳対象から外れ、常にKiB、MiB、GiBにように表記される。

言語 B表記 KiB表記 MiB表記 GiB表記 TiB表記
en(default) B KiB MiB GiB TiB
ja バイト KB MB GB TiB
ko B KiB MiB GiB TiB
zh B KB MB GB TiB
zh-tw B KB MB GB TiB

文中で改行したい

あまり褒められたものではないとは思いつつも、ひとつの言語リソース内で改行をしたい時もある。その場合、lang_xx.jsonに<br>を記載してもHTMLサニタイズ処理され改行はされない。実は改行したい場合は単純で\nを文中に記載すればよい。ただしCSSでwhite-spaceプロパティをpre-lineなどに設定しておく必要はある。react-i18nextであれば設定次第で、<wbr>を改行として使用できるが、本アプリでは単なるi18nextを使用しているため、この手法は使えない。

注意

「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を実行して、改行位置などの自動調整を実施。

WS000024

次にビルド。

NPMスクリプトから、build:prodを実行する(言語だけの修正ならdevを使う必要はない) WS000011

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を実行しているならその限りではないが。)

WS000012

文言修正が対応されていたら、コミットする前に test(jest)を実施してエラーがないことを確認

WS000025

問題なかったら、コミット。以上。

Clone this wiki locally