【iOS, Android】Googleスプレッドシートで簡単！ 多言語対応

Life is Tech !アドベントカレンダー15日目です！

# TL;DR
この記事では私がGitHubに公開している[LocalizeGen Masakaz Ozaki - Github](https://github.com/MasakazOzaki/LocalizeGen)(スターください🌟🌟🌟)を使ったアプリのローカライズの適用方法を初心者、中級者でもわかるように噛み砕いて説明しています。リポジトリのREADMEにも使い方が載っているのでそちらも合わせてご覧ください。

## なぜ多言語対応をやるのか
iOSアプリを開発していてぶち当たる壁のひとつ、多言語対応。
敷居が高い、めんどくさそう、コスパ悪そう、英語できないから無理と思われがちな多言語対応。

ただ多言語対応をすることによるメリットは大きく、アプリの市場を一気に広げることができ、プロダクトや作品を世界中の人に使ってもらうチャンスになります。インターネット社会の今、言語の壁だけでユーザーを獲得できないのはとてももったいないことです。

## LocalizeGen と GoogleSpreadSheetを使うメリット
- Google スプレッドシート管理なのでコードを書かないビジネスサイドやデザイナも使うことができる。
- 英語がわからなくてもGoogle翻訳を利用するので、ある程度翻訳できる。
- iOS / Android共通のシートを使うことができる。
- 一度設定してしまえば対応言語を増やすのが簡単。
- 他のライブラリに依存せず、Google API等の利用もないので導入が容易。

## さっそくやってみよう

記事自体は長いですが写真が多いだけなので安心してください笑
### Google スプレッドシートの設定

まずはGoogle Driveから新規のスプレッドシートを作成します。Googleアカウントを持っていない方は作成します。(無料) [Google スプレッドシート - Google](https://www.google.com/intl/ja_jp/sheets/about/)

#### このように空白のスプレッドシートを作成します。
<img width="1000" alt="Screen Shot 2020-04-08 at 11.46.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109307/cdb156dd-3425-266c-e566-e07045da96c1.png">

- 1行目は目次として使うので例に習って入力してください。わかりやすいように色をつけてあげてもいいでしょう。
    - A列: `使用領域`などとメモを入力するための欄を作成します。(必要がなくても一旦作る)
    - B列: `identifier`を入力します。(アプリのプログラムからはこの名前から呼び出す)
    - C列以降`ja`, `en`などの言語コードを入力していきます。(一旦この二言語にしておきましょう。あとでたくさん追加できます)

<img width="1000" alt="Screen Shot 2020-04-08 at 11.49.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109307/3139e956-3656-4f9d-6dd8-d652b9d3ba9b.png">

#### 2行目からは実際にアプリで使う文字列を入力していきます。
- identifier列で使う文字は小文字のアルファベット、スネークケースで入力しましょう。後々便利になります。
<img width="1119" alt="Screen Shot 2020-04-08 at 12.13.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109307/aa987d75-5086-46bc-19f0-8bf82c4d119f.png">

#### D列に英語を入力します
- 自分でできる場合は問題ないのですが、Google翻訳をスプレッドシートの関数で利用できるので今回はそれを利用します。(確認して違和感のあるものなどは自分で適宜編集しましょう)

```
=googletranslate(C2,"ja","en")
```
この関数をD2のセルに入力します。いい感じに翻訳されて表示されます。
<img width="1000" alt="Screen Shot 2020-04-08 at 12.23.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109307/db366753-204d-93d6-e43e-9f37490f54d2.png">

- 次の列からは今入力したD2のセルを選択し、右下の四角いやつを下にドラッグしてオートフィル
    - こんな感じになれば成功です
<img width="1000" alt="Screen Shot 2020-04-08 at 12.38.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109307/02b7ceac-b195-81e8-8857-912b3b0c4d50.png">

#### URL共有
次にこのスプレッドシートをURL共有します。

- ページの右上の共有ボタンをクリック
    - 名前をつけていなかった方はここで適当につける
<img width="1010" alt="Screen Shot 2020-04-08 at 17.34.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109307/0094d43d-46e8-4cc0-310c-1c4cc5ab6499.png">
- 右上の共有可能なリンクを取得をクリック
<img width="1010" alt="Screen Shot 2020-12-05 at 17.34.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109307/676f3d6d-aec1-ecba-c7a5-c9e7a20a3cf5.png">
これでURL共有されたスプレッドシートが完成しました。

#### SheetIDをURLから切り出し

先程共有が済んだURLにSheetIdが含まれているのでその部分を切り取ります。

`https://docs.google.com/spreadsheets/d/`**1y94Tt05YGEChPJFQOgGHV5AKpRGOx1bZXRCV8cYSYlc**`/edit?usp=sharing`

上のURLの太字の場所がIDになります。これはすべてのスプレッドシートで固有な値が割り当てられているので各自で自分のシートからID取り出して、コピーしてメモ帳にでも貼っておきましょう。あとで使います。

## LocalizeGenの準備

### LocalizeGenのダウンロード
[Download - LocalizeGen Masakaz Ozaki - Github](https://github.com/MasakazOzaki/LocalizeGen/archive/master.zip)

まずこちらのページにアクセスし自動化スクリプトのファイルをダウンロードします。
※クリックすると自動でダウンロードが始まります。

Androidも基本操作は同じですが今回はiOSプロジェクトへの導入を説明します。(android版の解説の編集リクエスト大歓迎)

- ダウンロードしたフォルダの中にあるLocalizeGen.pyというファイルをローカライズしたいプロジェクトのルートディレクトリにコピーします。
![スクリーンショット 2020-12-05 13.06.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109307/277794eb-77ae-312a-e82c-4577c5f0db85.png)

- このようにコピーできたらOKです
![スクリーンショット 2020-12-05 13.08.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109307/e0f9c676-9c75-570d-83a1-d6a4f6733efe.png)

## Xcode側の準備

### LocalizableStringの準備

次にXcode側からLocalizeGenから生成されたstringsファイルを受け取る準備をします !

#### stringsファイルの作成

- まずプロジェクトを開いてViewController.swiftが格納されているプロジェクトのフォルダをクリックして選択状態にします
![スクリーンショット 2020-12-05 14.01.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109307/51b12e61-09a8-b895-e154-5cfb2a229d23.png)

- `⌘ N`で新規ファイルを作成します。スクロールしていくとStrings Fileというものがあるのでそちらを選択します。
- 名前は`Localizable.strings`としてstringsファイルを生成しましょう！

![スクリーンショット 2020-12-05 14.05.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109307/4010f954-8d55-997e-6806-4f1ecd8c612f.png)
![スクリーンショット 2020-12-05 14.07.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109307/84a9a9a6-fc6a-86e7-eb94-6b0c7d600198.png)

- Xcodeのナビゲータエリア(ファイル一覧が出るところ)にLocalizable.stringsが作成されました。
- 右側のLocalizeボタンをクリックしてLocalizeします。
![スクリーンショット 2020-12-05 14.13.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109307/8c856378-632c-2e27-47c0-1d97e84aa309.png)

- ローカライズできると先程のボタンがEnglishかJapneseなどの言語に変わります![スクリーンショット 2020-12-05 14.10.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109307/c87911b9-9d85-b4c0-86d8-1bb7fa96a270.png)


#### プロジェクトファイルの設定
- 画像のようにクリックしていき言語を追加します。

![スクリーンショット 2020-12-05 13.21.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109307/e1a6a067-ca76-c4e4-f97f-f85ea75cd0d4.png)

- すでに日本語がある方はEnglishを追加、すでにJapaneseがある方はEnglishを追加します。
![スクリーンショット 2020-12-05 13.27.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109307/a09467ec-3f14-d724-1795-3ec6c0ba6898.png)
- Localizable.stringsのみにチェックを入れてFinishを押します。
![スクリーンショット 2020-12-05 14.20.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109307/df39fc26-2bb8-df4d-7434-e361533b19b9.png)
- このようにEnglishとJapaneseが追加されていれば完成です。
![スクリーンショット 2020-12-05 14.21.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109307/65d806ef-c5c7-5ce6-4101-6666e976d4fc.png)

## LocalizeGenを実行する
今作成したLocalizable.stringsは空で何も入っていません。今からLocalizeGenを使用してスプレッドシートのデータからlocalizable.stringsを書き換えます

プロジェクトのルートディレクトリで以下のコマンドを実行します。(日本語のところは自分で入れてね)

```ターミナル.terminal
% python3 LocalizeGen.py ios 自分のスプレッドシートのID 出力パス(相対パス)
```

- 今回の私のプロジェクトの場合こうなります。

```ターミナル.terminal
python3 LocalizeGen.py ios 1A_i8k20E9lMLhziQ0ZrD4k_UcSbCKgKeKJIdPEeM5XQ LocalizeGen-sample/
```

出力パスはFinderから確認します。
`Base.lproj`や`en.lproj`、`ja.lproj`があるフォルダをLocalizeGenが配置されているところから相対パスで指定します。
(説明どおりにやっていれば`プロジェクト名/`をつければ大丈夫なはず)
![スクリーンショット 2020-12-05 14.37.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109307/ed53c001-02c6-56c0-1f59-0ad2e1f8d884.png)


エラーが出ずにスクリプトが終了したら成功です。
Xcodeを開いてlocalizable.stringsにスプレッドシートの文字ができていれば完成です。

あとは下の例に倣って`NSLocalizedString`を使って使います。第一引数にスプレッドシートで指定したidentifierを入力します。

```sample.swift
label.text = NSLocalizedString("to_next", comment: "")
```

言語によって文字が切り替わっていれば完成です！お疲れ様でした！
スプレッドシートを更新したら都度スクリプトを実行してLocalizable.stringsをアップデートしていきましょう。
ビルドごとに更新できるようにRun Scriptsなどに書くのいいでしょう。
SwiftGenなどを使うとより扱いやすくなるのでとてもおすすめです。気になった方は調べてみるといいでしょう。
![スクリーンショット 2020-12-05 14.50.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109307/a3e701c3-ecb3-31b2-ade5-64d97853c5eb.png)

## 最後に
このまま英語日本語のみならず様々な言語に同じ手順で作ることができます。
ぜひここで終わることなくApp Storeの説明文などもローカライズしていきましょう！
アプリの市場を言語によって狭めてしまうのはもったいないです。世界中の人に使ってもらうためにやってみてください。

**そして本当に最後に！もしよかったら**
[LocalizeGen Masakaz Ozaki - Github](https://github.com/MasakazOzaki/LocalizeGen)　スターください🌟🌟🌟