Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@hfu

言語マップを用いたJS(ON)の国際化

More than 5 years have passed since last update.

ウェブ地図のようなウェブアプリケーションや GeoJSON のような JSON データを「言語マップ」の概念を使って後づけで国際化するためのアプローチの一案を整理してみた。

基本アイディア

基本アイディアはシンプルで、次のとおり。

  1. 1. 【データレイヤ】これまで string で表現されていた値を {"ja": "レイヤ", "en": ”layers"} といった object (言語マップ)に置き換える。
  2. 【アプリレイヤ】上記の値を利用するときに、適切な言語の値を取り出すようにする。

データレイヤの詳細

データレイヤでの object の書き方は、JSON-LD の言語マップ (Language Maps) と同じである。

ここに記載されているとおり、言語マップのキーはBCP 47(言語タグ) を使うということだ。日本の場合の現状では、ja と en を使うことが多いことになると思う。

適用例

navigator.language によって表示を切り替えるウェブアプリの例

Simple i18n with Leafletは、上記 Language Map を引数として渡した時に navigator.language をキーとして string を返す function である _ を使って、ブラウザの言語設定によって右下のテキストを日本語と英語の間で切り替える。→ 切り替えに成功していることを示すスクリーンショット

function _ は、上記サンプルでは下記のようなナイーブな実装になっているが、実用的には、クロスブラウザ対応や、引数に string が渡された時はそのまま返す処理等を入れるべきと考える。

var _ = function(o) {
  return o[navigator.language.substr(0, 2)];
}

適用が考えられる例

gsimaps の多言語対応

例えば、gsimaps.js のグローバル変数 CONFIG の設定 を次のように書き換えることで、gsimaps の多言語対応を進めることが可能となる可能性がある。

CONFIG.MAPMENU = {
    title : {'ja': '情報', 'en': 'Layers'}
};

この書き換えの対の処理として、CONFIG.MAPMENU が string として使われている箇所を、例えば CONFIG.MAPMENU から _(CONFIG.MAPMENU) に書き換えればよい。(もちろん、_ の実装も必要。)

GeoJSON や GeoJSON ベクトルタイルの多言語対応

これらについては、まだあまり具体的には考えてこられていなかったが、適宜 string を Language Map に書き換えていく手法により、整理された方法かつ漸進的に修正することが可能になると思う。

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
hfu

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?