%E7%BF%BB%E8%A8%B3%E3%81%97%E3%81%9F%E3%81%84%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BF%AE%E6%AD%A3 - yasuking0304/desktop GitHub Wiki

This site is only available in Japanese.

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

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

VSCode で対象ファイルを探す

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

WS000013

修正する

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

WS000014

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

WS000016

WS000017

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

WS000018

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

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

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

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

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

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

WS000019

翻訳ファイルに追加するにはNPMスクリプトからi18next-extractを実行する

WS000020

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

WS000021

こうなればOK

WS000022

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

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

WS000023

まずは公式日本語ドキュメントを見て、該当する機能はその言葉を流用、そうでなければ英語や機能の知識があれば自分で、無理であれば 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を実行して、改行位置などの自動調整を実施。

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

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

⚠️ **GitHub.com Fallback** ⚠️