<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多言語対応</title>
<script>
// 言語を保存する
function setLanguage(languageCode) {
// ローカルストレージに選択した言語を保存
localStorage.setItem('selectedLanguage', languageCode);
// 選択した言語でコンテンツを更新
loadLanguage(languageCode);
}
// 保存された言語を取得して読み込む
function loadSavedLanguage() {
const savedLanguage = localStorage.getItem('selectedLanguage');
if (savedLanguage) {
loadLanguage(savedLanguage);
} else {
// デフォルトの言語を設定（例: 日本語）
loadLanguage('ja');
}
}
// 言語データを動的に読み込む
async function loadLanguage(languageCode) {
try {
const response = await fetch(`lang_${languageCode}.json`); // 言語データファイルを指定
if (!response.ok) throw new Error('言語ファイルの読み込みに失敗しました。');
const langData = await response.json();
document.getElementById('mainTitle').textContent = langData.mainTitle;
document.getElementById('description').textContent = langData.description;
document.getElementById('footerText').textContent = langData.footerText;
} catch (error) {
console.error(error);
}
}
// ページが読み込まれたときに保存された言語を適用
document.addEventListener('DOMContentLoaded', loadSavedLanguage);
</script>
</head>
<body>
<header>
<h1 id="mainTitle">タイトル</h1>
<p id="description">ここに説明文が表示されます。</p>
</header>
<main>
<p>言語を選択してください:</p>
<button onclick="setLanguage('ja')">日本語</button>
<button onclick="setLanguage('en')">English</button>
<button onclick="setLanguage('zh')">中文</button>
</main>
<footer>
<p id="footerText">© 2024 サンプルサイト</p>
</footer>
</body>
</html>
0 件のコメント:
コメントを投稿