ブラウザの言語に合わせて表示するhtmlを切り替えるページを実装したため、備忘録として残します。
ポイント
- 「navigator.language」でブラウザの言語情報を取得
- 「switch」で言語ごとに処理を分岐させ、「location.href」で目的のページに移動
実装例
訪問用ページである①index.htmlと、日本語、英語用のページ②ja.html、③en.htmlをそれぞれ用意します。
- index.html（①訪問用ページ）
- /ja/ja.html（②日本語用遷移ページ）
- /en/en.html（③英語用遷移ページ）
①index.htmlをブラウザで読み込むと、読み込み時のブラウザの言語設定に合わせて②③にページを移動させる、という仕様で、以下のようなコードを実装しました。
ポイントは前述の通りなので割愛します。ブラウザの言語を切り替えて検証が可能です。
※'22/7時点では、chrome、safari、edge、firefoxでの動作確認済み。
メモ）言語表記に関しては、どのブラウザも統一されているのかも…？
[index.html]
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
訪問用ページです
</body>
<script>
switch(navigator.language){
case 'ja':
location.href = "/ja/ja.html";
break;
case 'en':
case 'en-US':
location.href = "/en/en.html";
break;
default:
break;
}
</script>
</html>
[ja/ja.html]（en.htmlも同様に用意）
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
日本語ページです
</body>
</html>
まとめ
コードとしてはかなりシンプルに実装できます。
今回の例では言語のパターンは2種類しか用意していませんが、多言語仕様でも条件分岐を増やすことで対応は可能なようですね。英語の場合、「en-○○」と国によって細分化されているので、正規化も取り入れて実装したいです。