OctoberCMSで多言語化対応する (Translateプラグイン) - その１

## 概要
OctoberCMSはバックエンド（管理画面）の多言語化はLaravelの機能で実現されている。

しかし、フロントエンドに関してはプラグインを使用する必要があり、ここではオフィシャルの[Translateプラグイン](https://octobercms.com/plugin/rainlab-translate)について説明する。

Translateプラグインは下記３つの翻訳方法がある。

1. Twigテンプレートで`|_`フィルタで文字列を変換する  
  例: `{{ "Hello World!"|_ }}`
2. 各言語毎にテンプレートファイルを用意して切り替える  
  例: hello.htm, hello.fr.htm, hello.ja.htm
3. モデルデータの文字列を変換する  
  例: `{{ user.lang('ja').name }}`

そして、下記２つの言語切替方法がある。

1. URLに言語コードを入れる  
   例: `http://example.com/ja/hello`  
   　  `http://example.com/en/hello`
2. コンポーネントでアクティブな言語を切り替える


今回は1の`|_`フィルタでの翻訳方法と２つの言語切替方法を説明する。

## インストール
管理画面からインストール。

あるいはcomposerなら下記コマンドで。

```
composer require rainlab/translate-plugin
php artisan october:up
```

## 設定
まず、使用する言語を登録する必要がある。
２つ以上登録していないと正常に動作しないようだ。

管理画面の**Settings -> Manage languages**を開いて、
とりあえず、デフォルトで入っているEnglishに加えてJapaneseを登録する。

下での説明の都合上、日本語をdefaultに設定しておく。
<img width="1217" alt="Screen Shot 2018-10-09 at 22.51.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/138322/f1f24dea-bc88-1083-b43e-aea4f8e5b650.png">

## 使い方１：翻訳フィルタ
例えば下記のようなテンプレートファイルがあるとする。

```twig
<body>
    <p>こんにちは世界</p>
</body>
```

下記のように`|_`フィルタを適用すると「こんにちは世界」が言語切替の対象になる。

```twig
<body>
    <p>{{ "こんにちは世界"|_ }}</p>
</body>
```

このページをサイトで開いた後に管理画面の**Settings -> Translate messages**を開くと下記の様に「こんにちは世界」の文字列が翻訳対象として登録されているのがわかる。
<img width="1218" alt="Screen Shot 2018-10-09 at 22.45.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/138322/e83857ff-41bb-9374-7a9f-df6ca353298c.png">

他の翻訳したい文字列についても`|_`フィルタをつけたら、この画面の「Scan for messages」をクリックすると、わざわざ全てのページを開かなくても、テーマ内の翻訳対象となった文字列をすべて登録してくれる。
<img width="1218" alt="Screen_Shot_2018-10-09_at_23_07_08.png" src="https://qiita-image-store.s3.amazonaws.com/0/138322/fef5ea26-49c7-527a-da76-7d48ce058451.png">

そして、翻訳を実際に登録するには右側カラムで言語を選択して入力する。
<img width="1219" alt="Screen_Shot_2018-10-09_at_23_10_21.png" src="https://qiita-image-store.s3.amazonaws.com/0/138322/ed83a6fb-6c75-f054-324f-9335c356c74b.png">

## 言語切替え
### URLによる切替え
URLでのドメインと続くパスの間に下記のように、バックエンドで登録した言語コードを挟むことで切り替えることが可能。

* `http://example.com/ja/hello` -> 日本語の翻訳が適用
* `http://example.com/en/hello` -> 英語の翻訳が適用
* `http://example.com/hello` -> デフォルト言語の翻訳が適用

### コンポーネントによる切替えUIの実装
URLを変えなくても、アクティブな言語を選択する機能を実装する。

#### デフォルトUIの使用
手っ取り早く実装するには、下記のようにコンポーネントをページあるいはレイアウトに入れてしまう。これだけで、登録した言語から選択するドロップダウンが実装される。

```twig
[localePicker]
==
{% component 'localePicker' %}
```

注意：これで挿入されるpartialはOctoberCMSの[Ajaxフレームワーク](https://octobercms.com/docs/ajax/introduction#framework-script)を使用しているので、`{% framework %}`をレイアウトかページのどこかに記述して**framework.js**が読み込まれるようにしておく必要がある。

#### カスタムUIの使用
上記の`{% component 'localePicker' %}`を使用せずに、独自にUIを実装する場合は、DOMに下記の様に`data-request`属性と`data-request-data`属性を入れてやれば良い。

```html
<p>
    Language:
    <a href="#" data-request="onSwitchLocale" data-request-data="locale: 'ja'">日本語</a>,
    <a href="#" data-request="onSwitchLocale" data-request-data="locale: 'en'">English</a>
</p>
```

これにより、同様にAjaxで言語が切り替えられるので、この場合も`{% framework %}`は必要になる。

## 翻訳フィルタの翻訳データ保存場所について
翻訳フィルタで置換される翻訳データはDBに保存されるが、テーマのソースに含めることも可能だ。

theme.yamlに下記のように追加することで、各言語のデフォルト値を設定することができる。

```yaml
translate:
    ja:
        menu.home: "ホーム"
        menu.clients: "クライアント"
        menu.portfolio: "ポートフォリオ"
        menu.contact: "コンタクト"
    en:
        menu.home: "Home"
        menu.clients: "Clients"
        menu.portfolio: "Portfolio"
        menu.contact: "Contact"
```

また、translateの部分を別ファイルに保存し、theme.yamlの`translate`にはその相対ファイルパスを記述して使用することもできる。

下記はテーマのルートディレクトリに config/lang.yaml としてファイルを作成した例。

```yaml
translate: config/lang.yaml
```

これらは、管理画面の**Settings -> Translate messages**で**Scan for messages**をクリックするか、他のテーマからこのテーマに切り替えたタイミングでDBにロードされ、翻訳に反映される。（yamlファイルから直接使用されるわけではないので、配置しただけでは反映されない。）

また、既存のキー（文言）の翻訳を変更したら、**Clear cache**をしないと反映されない場合がある。