html 多言語化対応方法 〜多言語化方法あれこれ〜
今回はHTMLの多言語化方法を調査してみようと思います。
事の発端
最近、BootStrapとAngularJSに触れる機会があり、と言うか仕事で使う事になり。。。
じゃ学ぶか。。。と言う事で。。。やる事になったのですが、これに合わせて「国際化も必要だな。。。」と思ったのでここに至る次第です。
多言語化方法
- HTMLを２つ用意して、アクセスしてきたロケールによりHTMLを切り替える
- ウェブページにGoogle翻訳ボタンを追加する方法(W3Schooles)
- CSSとJSで切り替える(このページを見ました)
- 自分で切り替え方法を考える
以上のようにまとまりました。と言うか調べているうちに「自分で考えた方が早くね？」と思ってしまった次第です。
自前多言語化
シンプルに、文字を表示する場所を決めておき、そこに値を入れるようにします。
- 画面の表示項目にプロパティをつける(<div id="firstMessage">など)
- それぞれの表示項目に(Locale)を見てから値を入れるようにする、下のようなイメージです。
「もしロケールが日本であれば日本語の値を各表示項目に代入する」
この実装をAngularJSで行います、画面のテンプレートと言うかガワにはBootStrapのテンプレートを使用します。下のようなイメージです。
そして、このHTMLにAngularJSで使用できる変数をバインド(関連付け)していきます。
BootStrapカスタム
上記のリンクからテンプレートをコピーしてきます。そして、このコピーに必要な参照を追加します。
AngularJS
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
自分のJS
<script src="./自分の書いた.js"></script>
※ src="パス"
パスの種類
相対パス: 在開いているファイルから〜とパス指定するときは「./」で始めるように記載します。
絶対パス: ドキュメントルート。レンタルサーバーであれば自分が参照できるフォルダのいちからのパスを示す。「/ファイル名」のように指定すると参照できるフォルダの一番上にあるファイルを参照します。
AngularJSを埋め込む
AngularJSの内容に関してはこちらのサイトを参考にしてください。わかりやすく書いたつもりです。
そして、HTMLにAngularJSを組み込むには
- AngularJSを読み込む
- モジュールを指定する
- コントローラーを指定する
こんな感じです。
＜日本語版＞
＜英語版＞
Angularを使用して、表示メッセージに値を設定して表示しています。
＜HTML部分＞
<div ng-controller="topController" class="container-fluid text-center">
<div class="row content">
<div class="col-sm-2 sidenav">
<p><a href="#">Link</a></p>
<p><a href="#">Link</a></p>
<p><a href="#">Link</a></p>
</div>
<div class="col-sm-8 text-left">
<h1>{{welcomeMessage}}</h1>
<p>{{firstMessage}}</p>
<p></p>
<hr>
<h3>{{secondMessage}}</h3>
<p>{{thirdMessage}}</p>
</div>
<div class="col-sm-2 sidenav">
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
＜JS部分＞
/*
* PGボックス用APP
*/
// 言語取得
var docLang = navigator.language;
// モジュール
var app = angular.module('pgBoxAG', );
// コントローラー
app.controller('topController', function($scope) {
// 初期表示設定
$scope.userLang = docLang;
var messArray = ;
// メッセージテキスト設定する
if (docLang == 'ja') {
messArray = JAPANESE_MESSAGE;
} else {
messArray = ENGLISH_MESSAGE;
}
// メッセージの設定
$scope.welcomeMessage = messArray['welcomeMessage'];
$scope.firstMessage = messArray['firstMessage'];
$scope.secondMessage = messArray['secondMessage'];
$scope.thirdMessage = messArray['thirdMessage'];
});
/** 表示メッセージJSON */
var ENGLISH_MESSAGE = {
welcomeMessage: "Welcome to PG Box that is 'Programing play ground'.",
firstMessage: "~programing play gound. Let's play wuth programing.~",
secondMessage: "Testing English",
thirdMessage: "aaa"
};
var JAPANESE_MESSAGE = {
welcomeMessage: "PGボックスへようこそ",
firstMessage: "さぁプログラミングして遊びましょう",
secondMessage: "日本語です",
thirdMessage: "あああ"
};
とりあえずではありますが、こんな感じで多言語化してみようと思います。
でわでわ。。。
