JSONファイルとPHPで多言語対応するの続きです。今回は
JSONファイルをPHPとJavaScriptで共有する
です。
まずサンプルサイトをご覧ください。
JSONファイルをPHPとJavaScriptで共有する
http://ma-bank.com/media/json/i...
The JSON file is shared with PHP and JavaScript
http://ma-bank.com/media/json/i...
ソース
http://ma-bank.com/media/json/j...
JSON: 日本語ファイル
http://ma-bank.com/media/json/j...
JSON: 英語ファイル
http://ma-bank.com/media/json/e...
なお、
JSONファイルとPHPで多言語対応するをベースにしているので、併読することをお勧めします。
JavaScriptの中心ソースは以下のようになります。
var W = new Array();
function loadCode(code) {
var hObj = createXMLHttpRequest();
code = (code) ? code : "jp";
var fUrl = "./" + code + ".json";
if(hObj) {
hObj.open("GET", fUrl, true);
hObj.onreadystatechange = function() {
switch(hObj.readyState) {
case 4 :
t = hObj.responseText;
if(!t) {
return;
}
t = t.replace(/\r\n|\n|\r|\t/g, "");
W = eval("(" + t + ")");
document.getElementById("jsecho").innerHTML = W["TITLE_02"];
return;
}
}
hObj.send(null);
}
}
まず、グローバルな配列Wを宣言します（
var W = new Array();）。こうすることで、Wに一度値を代入すれば、後々使い回しがきくので便利になります。
次に function loadCode() で日本語又は英語のJSONファイルを呼び出します。JSONを受信後、PHPと同様にデータから不要物を除去します（
t = t.replace(/\r\n|\n|\r|\t/g, "");）。そしてevalしたデータを配列Wに格納後、 id=jsecho に W["TITLE_02"] を書き込みます。
ちなみにPHPでは、前回説明したようにJSONファイルを読み込んだ後に、define() でグローバルに定義しています。
JavaScriptでのJSONファイルの読み込みは、HTMLで onload を使って最初に行っていますが（
<body onload="loadCode(\''.$nat.'\');">）、もちろんクリック時やマウスオーバー時でも構いません。
本当は、W["TITLE_02"] のような形ではなく、TITLE_02 のように記述できれば楽なのですが、JavaScriptに精通していないこともあってやり方が分りませんでした。（誰か教えてください）
また、JSONを設置するディレクトリを .htaccessファイルで保護することも検討した方がいいかもしれません。例えば、以下のような感じでしょうか。
Options -Indexes
SetEnvIf REFERER "自サイトのドメイン" Ref1
Order Deny,Allow
Deny from all
Allow from env=Ref1
"自サイトのドメイン"には、本サイトだったら「ma-bank.com」が入ります。JSONファイルへのアクセス権を、リファーで判定しようということです。
現在
EDIUNETでは、転送量を減らすために様々なことをやっていますが、その一環としてポップアップヘルプ（ツールチップ）の改良があります。HTMLにヘルプの内容をベタ書きしているのですが、これをJavaScript側に任せようとしています。
仕組み自体は出来上がっているのですが、ソースを変更しなければいけませんし、何より英語版のヘルプを新たに作成する必要が生じるので、どうしようかなって考えているところです。おそらくポップアップヘルプは従来どおり日本語版だけ提供することになると思いますが。（ちなみに
英語版EDIUNETではトップページのみ、ごくわずかだけですが改良型ポップアップヘルプを使っています）
2010-03-04
開発者blog
HOME
会社案内
冤罪を創る人々
経済事件ノート
山根治blog
