---
title: 多言語サイトを構築する
description: Kurocoを利用したプロジェクトで、多言語に対応したサイトの構築方法について説明します。
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

Kurocoを利用したプロジェクトで、多言語に対応したサイトの構築方法について説明します。  
今回は例として[KurocoとNuxt.jsで、コンテンツ一覧ページを作成する](/ja/docs/tutorials/integrate-kuroco-with-nuxt/)で作成した/news/のページを多言語対応します。

:::info
このページはKurocoとNuxt.jsでのプロジェクトが構築済みであり、コンテンツ一覧のページが作成されていることを前提としています。
まだ構築していない場合は、下記のチュートリアルを参照してください。
[Kurocoビギナーズガイド](/ja/docs/tutorials/beginners-guide/)  
[KurocoとNuxt.jsで、コンテンツ一覧ページを作成する](/ja/docs/tutorials/integrate-kuroco-with-nuxt/)
:::

:::info
本チュートリアルでは以下のバージョンでコードを書いています。  
Nuxt2: v2.15.8  
Nuxt3: v3.8.0  
:::

## 1. パッケージのインストール
ターミナルで対象のプロジェクトのディレクトリへ移動後、下記を実行します。  

<Tabs>
<TabItem value="Nuxt2" label="Nuxt2" default>

nuxt-i18nをインストールします。 

```
npm i nuxt-i18n
```

</TabItem>
<TabItem value="Nuxt3" label="Nuxt3" default>

@nuxtjs/i18nをインストールします。 

```
npx nuxi@latest module add i18n
```

</TabItem>
</Tabs>


## 2. localeファイルの作成
次にlocalesのフォルダを作成し、対応する言語毎のlocaleファイルをjson形式で保存します。  
今回は英語・日本語の言語に対応させるため、locales/en.json と、locales/ja.json のファイルを作成します。  

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/4ab99e8a6cb85c1b9d46e6c7155a9d6b.png)
localeファイルの中身はそれぞれ下記のように記述します。(項目は必要に応じて追加してください。)

```json title="/locales/en.json"
{
  "links": {
    "home": "Home",
    "news": "News",
    "en": "English",
    "ja": "Japanese"
  },
  "news": {
    "title": "front_kuroco_sample_support"
  }
}
```

```json title="/locales/ja.json"
{
  "links": {
    "home": "ホーム",
    "news": "お知らせ",
    "en": "英語",
    "ja": "日本語"
  },
  "news": {
    "title": "フロントKurocoサンプル"
  }
}
```
## 3. nuxt.config.js 修正
nuxt.config.jsの`modules`の項目に下記の記述を追加します。

<Tabs>
<TabItem value="Nuxt2" label="Nuxt2" default>

```js title="nuxt.config.js"
modules: [
   [
      'nuxt-i18n',
      {
        strategy: 'prefix_and_default',
        // 切り替える言語を定義
        locales: [
          { code: 'ja', file: 'ja.json' },
          { code: 'en', file: 'en.json' },
        ],
        // デフォルトの言語を設定
        defaultLocale: 'ja',
        vueI18nLoader: true,
        lazy: true,
        // jsonファイルを保存したディレクトリを指定
        langDir: 'locales/',
      },
    ],
    ...
  ],
```

</TabItem>
<TabItem value="Nuxt3" label="Nuxt3" default>

```js title="nuxt.config.js"
modules: [
    [
      "@nuxtjs/i18n",
      {
        strategy: "prefix_and_default",
        // Define the language options
        locales: [
          { code: "ja", file: "ja.json" },
          { code: "en", file: "en.json" },
        ],
        // Set the default language
        defaultLocale: "ja",
        vueI18nLoader: true,
        lazy: true,
        // Specify the directory for the JSON file
        langDir: "locales/",
      },
    ],
    ...
  ],
```

</TabItem>
</Tabs>


以上で多言語を利用する準備が整いました。  

## 4. 言語切り替えボタンの作成
続いて、言語切り替えボタンを作成します。  
コードは流用できるよう流用できるよう components フォルダに LanguageSwitcher.vue のファイルを作成し、こちらに記述します。  

`/components/LanguageSwitcher.vue`を下記のように作成します。  

```markup title="/components/LanguageSwitcher.vue"
<template>
  <div>
    <nuxt-link :to="switchLocalePath('en')">{{ $t('links.en') }}</nuxt-link>
    |
    <nuxt-link :to="switchLocalePath('ja')">{{ $t('links.ja') }}</nuxt-link>
  </div>
</template>

<script>
export default {};
</script>
``` 

また、`/pages/news/index.vue` の記述を次のように変更し、ボタンの確認をします。  
localeファイルで設定した文章は`{{ $t('news.title') }}`の記述で表示が可能です。  

```diff
 <template>
   <div>
-    <p>News list</p>
+    <LanguageSwitcher />
+
+    <h1 class="title">{{ $t('news.title') }}</h1>
     <div v-for="n in response.list" :key="n.slug">
       <nuxt-link :to="`/news/${n.topics_id}`">
         {{ n.ymd }} {{ n.subject }}
```

言語切り替えボタンの表示と、言語に応じたタイトルの表示が確認できました。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/06f1d7f5e1cfe26416b8a4ad27d9faee.gif)

## 5. バックエンド部分(Kuroco)の多言語対応
次に[KurocoとNuxt.jsで、コンテンツ一覧ページを作成する](/ja/docs/tutorials/integrate-kuroco-with-nuxt/)のチュートリアルで作成した`/news/`のページを多言語対応します。  

### 多言語設定を追加
Kuroco管理画面で[環境設定] -> [ローカライズ]をクリックします。  
![fetched from Gyazo](https://t.gyazo.com/teams/diverta/a94861a2f489c1c7a528d3d5ace4af1b.png)
多言語の設定が表示されるので、主言語、副言語を選択し、[利用する]にチェックを入れて[更新する]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/4de7d307d273039830c2f377902980e5.png)

### 副言語のコンテンツを追加
次に副言語のコンテンツの追加をします。  
作成済みのコンテンツ定義「お知らせ」をクリックします。  
![fetched from Gyazo](https://t.gyazo.com/teams/diverta/2403b388d998d4dd25f7d01fafef73a0.png)
お知らせ一覧からコンテンツの[タイトル]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/27d25012588496557908eadf3f90d2ac.png)

ローカライズで多言語の設定をしているため、コンテンツ編集のページに設定した副言語のタブが表示されています。  
[英語]のタブをクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/6fd4552d008dd1d4e056f4ce8776570d.png)

英語版のコンテンツを入力し、[更新する]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/ec0ffaaaa4da6c5eb1ea677a4911e87a.jpg)

同様に、それぞれのコンテンツで副言語の設定を追加します。  

### APIの言語毎でのレスポンスを確認する。
Swagger UIを使用して、副言語のレスポンスを確認します。  

「お知らせ一覧」と「お知らせ詳細」のエンドポイントを作成したAPIのページに遷移します。    
![Image from Gyazo](https://t.gyazo.com/teams/diverta/554777007d8f8c2017dbc487e89f38cf.png)

[Swagger UI]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/3ee0d42eac81896c83337bf6be06bfe0.png)

「お知らせ詳細」のエンドポイントの[Try it out]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/9ca6e55b36a5ab45e8d54994f6682f02.png)

コンテンツのID(今回の場合は6)を入力して[Execute]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/b8dce93d3a7ed442fac44b1f2b043027.png)

主言語でのレスポンスが得られていることが確認できます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/9b6e11c5b701232e231b2c2c57072ce7.png)

次に`_lang`の設定に`en`を追加して[Execute]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/52b559e6116b9ac33fb81782df565bb0.png)

今度は副言語(en)でのレスポンスが得られていることが確認できました。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/0bd9dd5112f747df6055f73b8233afc9.png)

Request URLを見てもわかるように、エンドポイント末尾に`?_lang=en`のパラメータを追加することで英語のデータを取得できます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/4d413bba7b5cf288ac8b034a576d38e2.jpg)

「お知らせ一覧」のエンドポイントも同様に副言語(en)でのレスポンスが確認できます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/d705243c917da37ef7e3b344ff451963.png)

## 6. フロントエンドの修正
最後に、KurocoのAPIから得るレスポンスを、表示している言語に対応するよう記述を修正します。  

<Tabs>
<TabItem value="Nuxt2" label="Nuxt2" default>

```markup reference title="/pages/news/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxtjs/news_i18n_list.vue
```

</TabItem>
<TabItem value="Nuxt3" label="Nuxt3" default>

```markup reference title="/pages/news/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxt3/news_i18n_list.vue
```

</TabItem>
</Tabs>

<Tabs>
<TabItem value="Nuxt2" label="Nuxt2" default>

```markup reference title="/pages/news/_slug.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxtjs/news_i18n_details.vue
```

</TabItem>
<TabItem value="Nuxt3" label="Nuxt3" default>

```markup reference title="/pages/news/[slug].vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxt3/news_i18n_details.vue
```

</TabItem>
</Tabs>

:::caution
Request URLの部分(`/rcms-api/4/newsdetail/`)は自身のサイトのものに調整してください。  
:::

`http://localhost:3000/news`を確認すると、言語切り替えによって、Kurocoのコンテンツ部分についても表示言語が変わることを確認できます。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/236f2428cf0b6e5d5bf8086ab82625f3.gif)

以上で多言語サイトを構築する説明を終了します。
