ナニコレ？
自分が作ったJavaScriptライブラリもどき。ライブラリではないです（笑）
本編
多言語サイトを実装しようと思ったのですが、多言語となるとファイル数がいっぱいで管理しにくいところが不便ですね。
それを解決するのが、名付けて...
タイトル：私のキラキラ・ダイナミック json & js 多言語変換ライブラリ
別名：`LD-lang.js`
対応言語：英語・日本語
*初期設定あり
ネーミングセンスがバグってますね。
一応、コードを見せるとこんな感じ。
LD-lang.js
function change_lang() {
var lang = localStorage.getItem('lang');
var head = $('head');
var headChildren = head.children();
var childrenLength = headChildren.length;
for (var i = 0; i < childrenLength; i++) {
var metaName = headChildren.eq(i).attr('name');
if (metaName === 'index_data') {
var dis = headChildren.eq(i).attr('content');
}
}
if (localStorage.getItem("lang") == null) {
lang = window.navigator.language;
}
if (lang == 'ja') {
localStorage.setItem('lang', lang);
document.getElementById('langchange_cl').options[1].selected = true;
} else {
lang = 'en';
localStorage.setItem('lang', lang);
document.getElementById('langchange_cl').options[0].selected = true;
}
$.getJSON(dis, function (data) {
var
ulObj = $("#demo"),
len = data;
$.each(len,
function (index, val) {
if (document.getElementById(val.id) != null) {
try {
if (lang == 'ja') {
if (val.type == 'docs') {
document.getElementById(val.id).innerHTML = val.ja;
}
else if (val.type == 'placeholder') {
document.getElementById(val.id).placeholder = val.ja;
}
} else if (lang == 'en') {
if (val.type == 'docs') {
document.getElementById(val.id).innerHTML = val.en;
}
else if (val.type == 'placeholder') {
document.getElementById(val.id).placeholder = val.en;
}
} else {
if (val.type == 'docs') {
document.getElementById(val.id).innerHTML = val.en;
}
else if (val.type == 'placeholder') {
document.getElementById(val.id).placeholder = val.en;
}
}
} catch (exceptionVar) {
if (val.type == 'docs') {
document.getElementById(val.id).innerHTML = val.en;
}
else if (val.type == 'placeholder') {
document.getElementById(val.id).placeholder = val.en;
}
console.warn('Sorry, I have a bug...');
}
}
}
);
});
//Need other json
}
見ただけでは分からないですが、使用しているのはJquery最新バージョン。
簡単にこの関数の処理を説明すると、
-
localStorageにlangというキーの有無を確認 - なかった場合はブラウザの言語設定にセットする
- もう一度、
localStrageのlangの値を取得し日本語かそうでないかを確かめる - 取得したメタデータを参考にjsonを取得
- 日本語だった場合は、
jaというキーの値を取得・HTMLに反映する - 英語またはそれ以外の言語の場合は、
enというキーの値を取得・HTMLに反映する
という流れです。
他の必要なファイルを取得する場合は、//Need other jsonの下に挿入してください。
これは、あくまでも関数です。ページ読み込み時の行われるものではありません。
ページ読み込み時にイベントを発火したい場合は、
document.addEventListener('DOMContentLoaded', function () {
change_lang();
}
という感じにおいてください。
初期設定
言語を変更したりするので、<select>は必要です。
HTMLのどこかに、このようなコードを置いてください。
<select id="langchange_cl" aria-labelledby="language" onchange="localStorage.setItem('lang',document.getElementById('langchange_cl').value); change_lang();">
<option value="en">English</option>
<option value="ja">日本語</option>
</select>
あと、metaデータとしてjsonのあるURLを指定しなければいけません。
このようなmetaタグをhead内に書いてください。content内にお好きなURLを入れましょう。
<meta name="index_data" content="https://example.com/index.json">
Jsonの書き方
コードだけ書いとけば誰でもわかるような気がします。
jsonの中にあるtypeというキーは、
- docs（HTMLのテキストの変換）
- placeholder（inputタグのplaceholder部分の変換）
のどちらかを入れられます。
index.json
[
{
"id": "hello",
"type": "docs",
"en": "Hello, world!",
"ja": "こんにちは、世界！"
},
{
"id": "hello2",
"type": "placeholder",
"en": "Hello, Qiita!",
"ja": "こんにちは、Qiita！"
}
]
index.html
<!DOCTYPE html>
<html>
<head>
<title>Many language</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="index_data" content="https://example.com/index.json">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
crossorigin="anonymous"></script>
<script src="https://example.com/LD-lang.js"></script>
</head>
<body>
<p id="hello">Hello, world!</p>
<input type="text" placeholder="Hello, Qiita!">
</body>
</html>
一応、読み込めなかった場合に備えてHTMLにも書きましょう。
まとめ
多言語サイトに変更することができました。いろいろカスタマイズすると、たくさんの言語で作成が可能になってきます。膨大になってしまうデメリットもありますが...