KurocoとNuxt.jsで、多言語サイトを構築する
Kurocoを利用したNuxt.jsプロジェクトで、多言語に対応したサイトの構築方法について説明します。
このページは、KurocoとNuxt.jsでのプロジェクトが構築済みであることを前提としています。 まだ構築していない場合は、こちらを参照してください。
1. nuxt-i18n のインストール
まずはnuxt-i18nをインストールします。
ターミナルで対象のプロジェクトのディレクトリへ移動後、下記を実行します。
npm i nuxt-i18n
2. localeファイルの作成
次にlocalesのフォルダを作成し、対応する言語毎のlocaleファイルをjson形式で保存します。
今回は英語・日本語の言語に対応させるため、locales/en.json と、locales/ja.json のファイルを作成します。
localeファイルの中身はそれぞれ下記のように記述します。(項目は必要に応じて追加してください。)
{
"links": {
"home": "Home",
"news": "News",
"en": "English",
"ja": "Japanese"
},
"home": {
"title": "front_kuroco_sample_support"
}
}
{
"links": {
"home": "ホーム",
"news": "お知らせ",
"en": "英語",
"ja": "日本語"
},
"home": {
"title": "フロントKurocoサンプル"
}
}
3. nuxt.config.js 修正
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/',
},
],
以上で多言語を利用する準備が整いました。
4. フロント部分の多言語対応
続いて、実際に表示の調整をしていきます。
ページタイトルの多言語化
実際に多言語で表示させたい箇所のテキストを$tを使った記述に変更します。
ここでは例としてトップページを表示しているpages/index.vueファイルのh1のタイトル部分を下記のように変更します。
<h1 class="title">{{ $t('home.title') }}</h1>
言語切り替えボタン設置
次に言語切り替えボタンを設置します。
layouts/default.vueファイルの<template>部分に<header>を追加して、下記の記述に変更します。
<template>
<div>
<header>
<nuxt-link :to="switchLocalePath('en')">{{ $t('links.en') }}</nuxt-link>|<nuxt-link :to="switchLocalePath('ja')">{{ $t('links.ja') }}</nuxt-link>
</header>
<Nuxt />
</div>
</template>
トップページで、次のように言語の切替えができるようになったことを確認します。
5. バックエンド部分(Kuroco)の多言語対応
次にKurocoとNuxt.jsで、コンテンツ一覧ページを作成するのチュートリアルで作成した/news/のページを多言語対応します。
多言語設定を追加
Kuroco管理画面で[環境設定] -> [ローカライズ]をクリックします。
多言語の設定が表示されるので、主言語、副言語を選択し、[利用する]にチェックを入れて[更新する]をクリックします。
副言語のコンテンツを追加
次に副言語のコンテンツの追加をします。
作成済みのコンテンツ定義「お知らせ」をクリックします。
お知らせ一覧からコンテンツの[タイトル]をクリックします。
ローカライズで多言語の設定をしているため、コンテンツ編集のページに設定した副言語のタブが表示されています。
[英語]のタブをクリックします。
英語版のコンテンツを入力し、[更新する]をクリックします。
同様に、それぞれのコンテンツで副言語の設定を追加します。
APIの言語毎でのレスポンスを確認する。
Swagger UIを使用して、副言語のレスポンスを確認します。
「お知らせ一覧」と「お知らせ詳細」のエンドポイントを作成したAPIのページに遷移します。
[Swagger UI]をクリックします。
「お知らせ詳細」のエンドポイントの[Try it out]をクリックします。
コンテンツのID(今回の場合は1016)を入力して[Execute]をクリックします。
主言語でのレスポンスが得られていることが確認できます。
次に_langの設定にenを追加して[Execute]をクリックします。
今度は副言語(en)でのレスポンスが得られていることが確認できました。
Request URLを見てもわかるように、エンドポイント末尾に?_lang=enのパラメータを追加することで英語のデータを取得できます。
「お知らせ一覧」のエンドポイントも同様に副言語(en)でのレスポンスが確認できます。
6. フロントエンドの修正
最後に、KurocoのAPIから得るレスポンスを、表示している言語に対応するよう記述を修正します。
pages/news/index.vue と pages/news/_slug.vue の記述を次のように変更します。
<template>
<div>
<div v-for="n in response.list" :key="n.slug">
<nuxt-link :to="localePath('/news/'+ n.slug)">{{n.ymd}} {{n.subject}}</nuxt-link>
</div>
</div>
</template>
<script>
export default {
async asyncData({ $axios, app }) {
if(app.i18n.locale === 'ja'){
try {
const response = await $axios.$get(
process.env.BASE_URL + '/rcms-api/1/news'
)
console.log(response)
return { response }
} catch (e) {
console.log(e.message)
}
}
else{
try {
const response = await $axios.$get(
process.env.BASE_URL + '/rcms-api/1/news?_lang=en'
)
console.log(response)
return { response }
} catch (e) {
console.log(e.message)
}
}
},
}
</script>
<template>
<div>
<h1 class="title">{{ response.details.subject }}</h1>
<div class="post" v-html="response.details.contents"></div>
</div>
</template>
<script>
export default {
async asyncData ({ $axios, params, app }) {
if(app.i18n.locale === 'ja'){
try {
const response = await $axios.$get(process.env.BASE_URL + '/rcms-api/1/newsdetail/' + `${params.slug}`)
console.log(response);
return { response }
}catch (e) {
console.log(e.message)
}
}
else{
try {
const response = await $axios.$get(process.env.BASE_URL + '/rcms-api/1/newsdetail/' + `${params.slug}` + '?_lang=en')
console.log(response);
return { response }
}catch (e) {
console.log(e.message)
}
}
},
}
</script>
Request URLの部分(process.env.BASE_URL + '/rcms-api/1/newsdetail/' + '${params.slug}')は自身のサイトのものに調整してください。
http://localhost:3000/newsを確認すると、言語切り替えによって、Kurocoのコンテンツ部分についても表示言語が変わることを確認できます。
以上で多言語サイトを構築する説明を終了します。