スプレッドシートを使ってFlutterの多言語対応を楽に行う方法

Flutter

こんにちは。趣味グラマのNobu(@nm_aru)です。

個人開発でコツコツ作っているFlutterアプリが遂に完成に近付いてきました。

今回は日本語、英語、中国語、韓国語に対応したアプリを作っていて、日本語以外はGoogle翻訳のお世話になりながら多言語対応をしています。

Flutterの多言語対応は非常に簡単で、かつVSCodeを使っていると便利なプラグインもあります。

今回は、各言語に対応したARBファイルを作る時に、Googleスプレッドシートを使う事で少しでも楽する方法をお伝えします。

翻訳にはGoogleスプレッドシートを使う

まずは、翻訳を管理するためのスプレッドシートを用意します。

ARB作成用シート
シート1 ja,en,ko,zh JSON appName,アプリの名前,The name of the app,앱 이름,该应用程序的名称 done,完了,Completion,완료,完成 title,タイトル,title,제목,标题

このサンプルシートのセルを確認して貰うと分かりますが、翻訳には「GOOGLETRANSLATE」と言う関数を使っています。

GOOGLETRANSLATE - ドキュメント エディタ ヘルプ
テキストをある言語から別の言語に翻訳します/ 使用例 GOOGLETRANSLATE("Hello World","en","es") GOOGLETRANSLATE(A2,B2,C2) GOOGLETRANSLATE(A2)

サンプルシートを簡単に解説しますと、A列はJSONのキーになる名前、1行目はB:1が翻訳元になる言語、C:1以降は翻訳したいターゲット言語になります。

B列のB:3から実際に翻訳したい言葉を書いていくと、C列以降に翻訳された結果が出力されます。

JSONを出力するためのGoogle Apps Scriptを書く

スプレッドシートの準備が完了したら、今度はJSONを出力する準備をします。

そういった便利な関数があれば良いのですが、無いと思うので(探してない)、Google Apps Scriptで書く事にします。

スプレッドシートのスクリプトエディタから書いても良いのですが、ブラウザ上のエディタだと使い難いので、今回はclaspを使ってローカルで書きました。

google/clasp
🔗 Command Line Apps Script Projects. Contribute to google/clasp development by creating an account on GitHub.

大まかな流れは以下の通りです。

  1. claspにスプレッドシートのスクリプトIDを渡してcloneする
  2. 普段使っているエディタ(私の場合はVSCode)でJSON作成のコードを書く
  3. clasp pushする

GASのエディタが変わったせいなのか(?)、1のスクリプトIDを見つけるのに少し手間取りました。

スクリプトIDは、一旦スクリプトエディタを開き、左側メニューの「プロジェクトの設定」から確認することができます。

claspは非常に便利で、ローカルでTypeScriptで開発を行い、pushすると勝手にJavaScriptに変換してくれます。

今回書いたコードは50行程度で、非常に簡単でした。
趣味グラマが書いたコードなので、突っ込みどころは沢山あるかもですが、そこはご容赦を…。

onOpen()を使うことで、スプレッドシートにメニューを追加しています。

スクリプトを実行する

claspでpush後にスプレッドシートをリロードすると、メニューの一番右に「ARB」が追加されているはずなので、そこからJSONの作成を行います。

初めて実行する場合、画像のようにGoogleから警告が出ますが、左下の詳細を開き、更に一番左下に表示される「○○に移動」をクリックして承認します。
「○○」の部分は、プロジェクトの設定によって名前が変わりますので、違う文言が出ている場合もあります。

無事に実行が完了すると、各言語の2行目のセルにJSONが出力されます。

出力されたJSONは改行が一切入っていないので、.arbに貼り付けたあと、エディタの機能を使ってフォーマットしてあげましょう。

まとめ

実は世の中には、翻訳を管理するための便利なソフトウェアがあります。

BabelEdit - Editor for JSON translation files for Angular & React
Edit your translation files in parallel. Supports Angular (ngx-translate), React (react-intl) and other frameworks that use JSON to store translations.

しかし、5,000円という金額に躊躇してしまい、スプレッドシートで翻訳管理を行う事にしていました。

ただ、最終的にJSONにする時は、正規表現を使ってJSONに加工していたのですが、単語を1個増やすたびにその作業をするのが苦痛になったため、今回のやり方を考えた次第です。

便利なツールを無料で使わせてくれるGoogleには本当に感謝です。

コメント

タイトルとURLをコピーしました