ブラウザの言語設定に応じたコンテンツの表示方法

ウェブサイトやアプリケーションで、多言語対応を求められることは増えています。
ユーザーのブラウザ言語に応じて、表示するコンテンツを自動的に切り替えられれば、
ユーザー体験を向上させることができます。
この記事では、JavaScriptを使用して、ブラウザの言語設定に基づいて、
コンテンツを英語と中国語に切り替える方法をご紹介します。

ブラウザの言語設定とは？

まず、ブラウザの言語設定とは、ユーザーが使用しているブラウザで優先される言語のことです。
これにより、ユーザーはインターネット上のさまざまなコンテンツを、
自分の好みの言語で閲覧することができます。

JavaScriptでは、navigator.languageやnavigator.languagesを使って、ユーザーのブラウザの言語を取得できます。この情報を元に、表示するコンテンツを動的に変更できます。

言語に応じた表示の切り替え方法

ここでは、英語と中国語のユーザーに対して、それぞれ異なるコンテンツを表示するコード例を紹介します。

JavaScriptのコード例

// ブラウザの言語を取得
var userLang = navigator.language || navigator.userLanguage;

// 言語が英語の場合の処理
if (userLang.includes("en")) {
    document.getElementById("englishContent").style.display = "block";
    document.getElementById("chineseContent").style.display = "none";
} 
// 言語が中国語の場合の処理
else if (userLang.includes("zh")) {
    document.getElementById("chineseContent").style.display = "block";
    document.getElementById("englishContent").style.display = "none";
} 
// その他の言語の場合の処理
else {
    document.getElementById("defaultContent").style.display = "block";
    document.getElementById("englishContent").style.display = "none";
    document.getElementById("chineseContent").style.display = "none";
}

HTMLのコード例

<div id="englishContent" style="display: none;">
    This is content for English users.
</div>

<div id="chineseContent" style="display: none;">
    这是给中文用户的内容。
</div>

<div id="defaultContent" style="display: none;">
    このコンテンツは他の言語用です。
</div>

詳細解説

上記のコードでは、以下のように処理が行われています。

• navigator.language または navigator.userLanguage を使って、ブラウザの言語情報を取得します。例えば、ブラウザが英語に設定されている場合は「en-US」、中国語に設定されている場合は「zh-CN」などが返されます。
• if文 を使って、言語が英語か中国語かを判定し、それに応じたHTML要素の表示を切り替えます。英語の場合は「englishContent」というIDを持つ要素を表示し、中国語の場合は「chineseContent」を表示します。その他の言語のユーザーにはデフォルトのコンテンツが表示されます。

応用例

この方法は英語と中国語だけでなく、他の言語にも対応できます。例えば、日本語のコンテンツを追加したい場合は、以下のように条件を追加することができます。

else if (userLang.includes("ja")) {
    document.getElementById("japaneseContent").style.display = "block";
    document.getElementById("englishContent").style.display = "none";
    document.getElementById("chineseContent").style.display = "none";
}

このようにして、対象言語が増えた場合でも、簡単に対応することができます。

言語設定を活用したウェブサイトのメリット

言語に応じたコンテンツの表示は、ユーザーが母国語でコンテンツを閲覧できるため、より親しみやすく、ユーザー体験の向上につながります。特に、多言語対応が求められるグローバルなウェブサイトや、外国語を話すユーザーが多数いるサービスにおいては、このような機能は非常に役立ちます。

6. まとめ

ブラウザの言語設定に応じてコンテンツを切り替える方法は、ユーザーの体験を改善するための効果的な手段です。JavaScriptを活用することで、シンプルかつ柔軟に実装することができます。英語や中国語、その他の言語に対応するウェブサイトを構築する際には、ぜひこの方法を参考にしてください。