# 国際化 i18n と地域化 L10N
i18n は internationalization の略で国際化の意味します。読み方は「アイ エイティーン エヌ」「あいいちはちえぬ」「あいじゅうはちえぬ」と読んだりしますが、いずれも国際化の意味で変わりがありません。
internationalization はなぜ i18n なのか？
internationalization の先頭の i と語尾の n の間に 18 文字があることは i18n の起因です。
DEC 用法使ってますが、大文字の I は数字の 1 と間違いやすいので一般的には小文字の i に、小文字の l は数字の 1 と間違いやすいので一般的には大文字の L が使用されます。
開発以外で国際化の略として一般的に使われている globalization (G11N) もあります。
国際化と地域化の手法も、母国語対応、現地語対応と呼ばれ、native language support (NLS) と略されます。
# 国際化の対象項目
一般的に国際化する際に対応する必要な項目
- 文字コード
- 文字の方向（左から右へ、右から左へ、左に向かって上から下へ）
- 文言
- フォント
- 書式
- 数値（小数点の文字、桁区切りの文字、区切る桁数など）
- 日時（年月日の表記の仕方、イスラム暦/グレゴリオ暦/ユダヤ暦/和暦など使用する暦の違いなど）
- 日時情報の時差
- 通貨情報
既存の文字コードが UTF-8 などグローバル対応したものならやりやすいが、shift-js EUC などの場合は変換する必要があります。
日時情報の時差と通貨情報を解消するために、現地をつけるか変換をするかになります。
# クライアント側でユーザー言語取得
navigator.language でユーザーのブラウザー UI の言語取得することができます。
const lang = navigator.language;
console.log(lang);
// en
lang は、BCP 47 で定義された言語バージョンを表す文字列が格納されます。例えば、en en-US fr fr-FR es-ES などが含まれます。
iOS 10.2 以前の Safari では、国コードは en-us fr-fr のように小文字で返されます。
言語コードは統一基準がなく、同じ日本語でも ja-JP ja が存在します。
# バックエンド側でユーザー言語取得
HTTP の Accept-Language リクエストヘッダーからクライアントユーザー言語推測できます。
accept-language: en,ja;q=0.9,en-US;q=0.8,zh-CN;q=0.7,zh-TW;q=0.6,zh;q=0.5
# nuxtjs の i18n 対応
yarn add nuxt-i18n
フォント対応
.lang-ja {
font-family: "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Hoefler Text",
"Linux Libertine O", "Yu Mincho", sans-serif;
}
.lang-zh {
font-family: "Noto Sans TC", "PingFang TC", "Hiragino Sans CNS",
"Microsoft JhengHei", sans-serif;
}
<template>
<div :class="['lang-' + $i18n.locale]">
<transition-group name="page">
<Header v-show="show" key="0" />
<nuxt v-show="show" key="1" />
<Footer v-show="show" key="2" />
</transition-group>
</div>
</template>
<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
export default {
head() {
return {
htmlAttrs: {
lang: this.$i18n.locale,
},
};
},
components: {
Header,
Footer,
},
};
</script>
nuxt.config.js 設定
require("dotenv").config();
import ja from "./locales/ja.json";
import zh from "./locales/zh.json";
export default {
i18n: {
locales: ["ja", "zh"],
defaultLocale: "ja",
vueI18n: {
fallbackLocale: "ja",
messages: {
ja: ja,
zh: zh,
},
},
},
};