# 多言語対応（i18n）

Eagleプラグインにはi18nextモジュールが内蔵されており、開発者が簡単に多言語対応プラグインを作成できます。i18nextはJavaScriptの多言語対応ライブラリで、翻訳やローカリゼーションが容易であり、カスタム翻訳、ローカリゼーション、多言語サポートの機能も提供しています。

以下では、プラグインを多言語対応させる方法を手順ごとに説明します：

## 手順1：`_locales`フォルダを作成する

<figure><img src="https://1611209449-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMvbOurypjZWfptd5H280%2Fuploads%2Fgit-blob-569807c86a1c45f8575718fb2d6ba12d5de015c9%2Fimage%20(20).png?alt=media" alt=""><figcaption></figcaption></figure>

## 手順2：言語 `.json` ファイルを作成する

<figure><img src="https://1611209449-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMvbOurypjZWfptd5H280%2Fuploads%2Fgit-blob-ff22bb8bd808bf0854be7f81ba06002bb9fcf3af%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="\_locales/en.json" %}

```json
{
    "manifest": {
        "app": {
            "name": "i18n example"
        }
    },
    "contextMenu": {
        "copy": "Copy",
        "paste": "Paste"
    }
}
```

{% endtab %}

{% tab title="\_locales/zh\_CN.json" %}

```json
{
    "manifest": {
        "app": {
            "name": "多国语言范例"
        }
    },
    "contextMenu": {
        "copy": "复制",
        "paste": "粘贴"
    }
}
```

{% endtab %}

{% tab title="\_locales/zh\_TW\.json" %}

```json
{
    "manifest": {
        "app": {
            "name": "多國語言範例"
        }
    },
    "contextMenu": {
        "copy": "複製",
        "paste": "貼上"
    }
}
```

{% endtab %}

{% tab title="\_locales/ja\_JP.json" %}

```json
{
    "manifest": {
        "app": {
            "name": "i18n の例"
        }
    },
    "contextMenu": {
        "copy": "コピー",
        "paste": "ペースト"
    }
}
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
現在サポートされている言語は `en`、`ja_JP`、`es_ES`、`de_DE`、`zh_TW`、`zh_CN`、`ko_KR`、`ru_RU` です。
{% endhint %}

## 手順3：`manifest.json`を調整する

Eagle Plugin の `i18next` 機能を使用すると、簡単な JSON ファイルで多言語アプリの翻訳を定義できます。

```json
{
    "id": "LE564883T24ZR",
    "version": "1.0.0",
    
    // 1. 名前を調整する
    "name": "{{manifest.app.name}}",
    "logo": "/logo.png",
    "keywords": [],
    
    // 2. サポートされている言語とデフォルト言語を設定する
    "fallbackLanguage": "zh_CN",
    "languages": ["en", "zh_TW", "zh_CN", "ja_JP"],
    
    "main": {
        "url": "index.html",
        "width": 640,
        "height": 480
    }
}
```

## 手順4：使用された文字列の変更

plugin.js を調整して、i18next メソッドで文字列を取得し、アラートします。

{% code title="plugin.js" %}

```javascript
eagle.onPluginCreate((plugin) => {

    // 多言語フィールドを取得
    let copyText = i18next.t('contextMenu.copy');
    let pasteText = i18next.t('contextMenu.paste');

    document.querySelector('#message').innerHTML = `
    <ul>
        <li>言語: ${eagle.app.locale}</li>
        <li>コピー: ${copyText}</li>
        <li>貼り付け: ${pasteText}</li>
    </ul>
    `;
});
```

{% endcode %}

## 手順5：アプリ言語を変更し、変更結果を確認

Eagleソフトウェアの言語設定を変更するには、次の手順に従ってください：画面で「Eagle」ボタンを見つけてクリックし、「環境設定」を選択、「一般」オプションをクリックし、「言語」セクションで必要な変更を行います。

<figure><img src="https://1611209449-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMvbOurypjZWfptd5H280%2Fuploads%2F7WAdNYfktiQJXrqzmKvt%2Fimage.png?alt=media&#x26;token=add11829-dfc6-48d2-a5b6-b55e99e01f2f" alt=""><figcaption><p>Switch application language</p></figcaption></figure>

<figure><img src="https://1611209449-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMvbOurypjZWfptd5H280%2Fuploads%2FuTJdsVxaHoFWNCJPdN9n%2Fimage.png?alt=media&#x26;token=a6bcc2db-582f-4799-8735-d0932bf22da0" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1611209449-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMvbOurypjZWfptd5H280%2Fuploads%2FUsALOOlKnbzRNy6fVvf4%2Fimage.png?alt=media&#x26;token=634a20a0-2d4d-4c9e-8e58-58e31680518b" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**完全なサンプルコード：**

<https://github.com/eagle-app/eagle-plugin-examples/tree/main/i18n>
{% endhint %}

## 詳細な使い方を学ぶ

i18next には多くの便利な方法があり、さまざまな翻訳シナリオに簡単に対応できます。篇幅の都合上、ここでは主要な使用方法についてのみ説明しています。i18next の使い方や詳細な使い方を知りたい場合は、以下のリンクを参照してください：

* i18next 公式ドキュメント：<https://www.i18next.com/overview/getting-started>
* i18next の GitHub リポジトリ：<https://github.com/i18next/i18next>

公式ドキュメントを読むことで、i18next の基本的な概念と使い方を理解し、使用を開始するためのいくつかのサンプルコードを見つけることができます。GitHub リポジトリには、i18next のソースコードやその他のドキュメントが含まれており、実装の詳細をさらに理解したい場合は、そこで参照することができます。