Javascritpで多言語対応

こんにちは、今日は『Javascriptでの多言語対応方法』についてまとめておきます。

一般的には下記の方法が使用されると思います。

<h2>サーバ再度でメッセージを管理</h2>

<h5>日本語の場合</h5>

<pre>&lt;script> 

  var messages = {};  

message.loading = ‘ロード中’;  

message.error = ‘エラーが発生しました。

‘; &lt;/script>

</pre>

<h5>英語の場合</h5>

<pre>&lt;script>  

var messages = {};  

message.loading = ‘now loading’;  

message.error = ‘error was occuerd’;

&lt;/script>

</pre>

上記の用に記述して、サーバ再度で保持しているユーザの言語設定やGETパラメタを利用したりします。 また、管理上下記のように利用したほうが便利です。

<h5>フォルダで管理</h5>

<pre>&lt;script type=”text/javascript” src=”/messages/ja/message.js” /> </pre>

<h5>ファイルで管理</h5>

<pre>&lt;script type=”text/javascript” src=”/messages/ja.js” /> </pre>

<h2>Javascriptでメッセージを管理</h2>

メッセージオブジェクトに階層を持たせて

<pre> var messages = {}; messages.ja = {}; messages.en = {}; </pre>

で使用するときに <pre> var useMessages = messages[‘ja’]; </pre>

こんな風に使ってみたり。 if分岐やscriptタグのsrcタグ属性で振り分けたり

下記の用にしたりする方法もあるようです。

<pre>

var LANGUAGE = ‘en’;//デフォルト設定

var s = document.getElementsByTagName(‘script’); for(var i =0,len = s.length;i<len;i++){   if(s[i].src.indexOf(‘hoge.js?’) > 0){

    var tmp = s[i].src.splite(?)[1].splite(‘&’);

    for(var j = 0,leng = tmp.length;j<leng;j++){

      var tmp2 = tmp[j].splite(‘=’);

      if(tmp2.length == 2 && tmp2[0] == ‘lang’) LANGUAGE = tmp2[1];

    }

  } } var useMessages = messages[LANGUAGE];

</pre>

<h2>(<a href=”http://ja.wikipedia.org/wiki/%E5%9B%BD%E9%9A%9B%E5%8C%96%E3%81%A8%E5%9C%B0%E5%9F%9F%E5%8C%96” title=”国際化と地域化” target=”_blank”>i18n</a>のための)jqueryを利用する</h2>

<strong>個人的には管理上この方法を利用することが最も良いと思います。 </strong>

<h5>利用方法</h5>

<ul>  

<li>下記のリンクから”jQuery.i18n.properties” をダウンロードします。</li>

<a href=”http://codingwithcoffee.com/?p=272” title=”codeing with coffee” target=”_blank”>jQuery.i18n.properties</a>

 <li>Messages.propertiesを用意します。</li>

Messages.propertiesを言語に応じて用意します。(ここでは一般的なものと日本語を用意します) <strong>Messages.properties(一般的に利用される)</strong>

 <pre># This line is ignored by the plugin MSG_HELLO = Hello MSG_COMPLEX = Hey, {0} </pre>

<strong>Messages_ja.properties(日本語に利用される)</strong>

 <pre> # This line is ignored by the plugin MSG_HELLO = こんにちわ MSG_COMPLEX = やあ、{0} </pre>  

<li>リソースファイルを任意のフォルダに保存します(ここでは /i18n/におきます。)</li>

 <li>ヘッダに”scriptタグ” を追加する</li>

<pre>

&lt;script src=”/js/jquery-1.5.1.min.js” type=”text/javascript”>

&lt;/script> &lt;script src=”/js/jquery.i18n.properties.js” type=”text/javascript”

>&lt;/script>

 </pre>

 <li>Javascriptを記述する</li>

<pre>

jQuery.i18n.properties({

   name: ‘Messages’,

   path:’/i18n/’,

   mode:’both’

          callback: function() {

               alert(MSG_HELLO);

               alert(MSG_COMPLEX(‘John’));

          } });

 </pre>

以上で『jQuery.i18n.properties』の使い方は終わりです。

by Saito

<h2>引用</h2>

<ul>

<li>

<a href=”http://dev.chrisryu.com/2007/12/multi_language_by_javascript.html” title=”JavaScriptの多言語対応の方法についてぼんやり考えてみた” target=”_blank”>JavaScriptの多言語対応の方法についてぼんやり考えてみた</a>

</li>

<li>

<a href=”http://d.hatena.ne.jp/shinobu_siv/20110326/1301164497” title=”しのぶの日記 (技術編)” target=”_blank”>javascriptで国際化(多言語対応)</a>

</li>

</ul>

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中