システム全体

index.html、index.jsを下記に変更しましょう

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div data-obj="bind1"></div>
    <div data-obj="bind2"></div>
    <div><button data-name="sample">sample</button></div>
</body>
</html>

index.js

export class Index {

    constructor() {
    }

    sample_click(event) {
        this.bind1.textContent = $f.msg('key1', {'replace1': 'val1', 'replace2': 'val2', 'replace3': 'val3'});
        this.bind2.textContent = $f.msg('key2', {'replace1': 'val1', 'replace2': 'val2', 'replace3': 'val3'});
    }

}

src/js/msg/msg.json、src/js/msg/msg.ja.json、src/js/msg/msg.ja-JP.json、src/js/msg/msg.en.json、src/js/msg/msg.en-US.jsonを作成しましょう

msg.json

{
     "key1" : "key1 => ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

msg.ja.json

{
     "key1" : "key1 => ja ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => ja ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

msg.ja-JP.json

{
     "key1" : "key1 => ja-JP ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => ja-JP ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

msg.en.json

{
     "key1" : "key1 => en ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => en ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

msg.en-US.json

{
     "key1" : "key1 => en-US ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => en-US ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

実行してsampleボタンをクリックしてみましょう
sampleボタンの上にsrc/js/msg配下に作成したjsonファイル内の値が出力されます
index.js内で実行している$f.msg('key1', {'replace1': 'val1', 'replace2': 'val2', 'replace3': 'val3'});は
$fがこのフレームワークのオブジェクトです
msgメソッドはsrc/js/msg配下に作成したjsonファイル内の値を返すメソッドです
msgメソッドの第2引数はjson内の${}で囲われた箇所を置換する値です。置換したくない場合は\を付けてください
メッセージを定義したい場合は、msg.jsonに定義し、msgメソッドで取得します
msg.jsonはjsonなのでキー、値はダブルクォートで囲います。シングルクォートではありません
msg.jsonはsrc/js/msg配下に作成します。これはフレームワークの規則です
また、msg.jsonだけでなく、msg.{使用する言語}.jsonを用意できます
使用する言語はクエリパラメーターlangの値、navigator.languageの値の優先順で適用されます
したがって、URLに?lang=enを付けてアクセスするとmsg.en.jsonに定義した値が出力されます
msg.{使用する言語}.jsonが存在しない場合、msg.jsonが適用されます
したがって、msg.ja.json、msg.ja-JP.json、msg.en.json、msg.en-US.jsonを削除してアクセスするとmsg.jsonに定義した値が出力されます

ページ固有

src/page/sub/index.html、src/js/modules/sub/index.jsを作成しましょう

src/page/sub/index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div data-obj="bind1"></div>
    <div data-obj="bind2"></div>
    <div data-obj="bind3"></div>
    <div data-obj="bind4"></div>
    <div><button data-name="sample">sample</button></div>
</body>
</html>

src/js/modules/sub/index.js

export class Index {

    constructor() {
    }

    sample_click(event) {
        this.bind1.textContent = $f.msg('key1', {'replace1': 'val1', 'replace2': 'val2', 'replace3': 'val3'});
        this.bind2.textContent = $f.msg('key2', {'replace1': 'val1', 'replace2': 'val2', 'replace3': 'val3'});
        this.bind3.textContent = $f.msg('key_sub', {'replace1': 'val1', 'replace2': 'val2', 'replace3': 'val3'});
        this.bind4.textContent = $f.msg('key_sub_index', {'replace1': 'val1', 'replace2': 'val2', 'replace3': 'val3'});
    }

}

src/js/msg/sub/msg.en.json、src/js/msg/sub/index/msg.en.jsonを作成しましょう

src/js/msg/sub/msg.en.json

{
     "key_sub" : "key_sub => en ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

src/js/msg/sub/index/msg.en.json

{
     "key_sub_index" : "key_sub_index => en ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

sub/index.htmlに?lang=enを付けてアクセスしてみましょう
sampleボタンをクリックすると、sampleボタンの上に定義したメッセージが出力されます
src/js/msg/sub配下に作成したmsg.jsonは、webページに対応するjsファイルがsrc/js/modules/sub配下または、src/js/modules/sub.jsである場合にのみ使用できます
src/js/msg/sub/index配下に作成したmsg.jsonは、webページに対応するjsファイルがsrc/js/modules/sub/index配下または、src/js/modules/sub/index.jsである場合にのみ使用できます

次ページテンプレート

目次