Javascriptだけでコンテンツの言語を切り替えするスクリプト

Photo by keepps

　前回のブラウザの言語をJavascriptから調べるを元に、ページのメッセージを言語切り替えするスクリプトを作ってみました。

　実際のページは、これです。

　一つのHTMLの中に複数の言語のメッセージを書き、それぞれの言語をCSSのクラスで指定することで、ブラウザに合わせた言語のみが表示されるようになります。

　日本語版のブラウザで見ると「こんにちは世界」、英語版やポルトガル語版のブラウザで見ると、それぞれの言語でメッセージが表示されます。
　デフォルトの言語は英語に設定しているので、日本語やポルトガル語以外のブラウザで見た場合は、英語のメッセージが表示されます。

　このスクリプトでは、JSでブラウザの言語を取得したあと、表示するCSSを切り替えることで、メッセージ切り替えを実現しています。使い方などはページのソースを参考にしてください。
　設置する前には、CSSとこのスクリプトはなるべく先頭で実行するようにしてください。あまり下の方で読み込むと画面がちらつく可能性があります。

　言語の切り替えするなら、Apacheのcontent negotiationでいいじゃん！ってご意見を複数から頂いたのですが、Railsのpage cacheで使いたい、複数言語のHTMLを作ると修正が面倒なので、1つのHTMLで全部の言語を記述したい、Google翻訳APIとも組み合わせたいなぁ、などの理由で作ってみました。

　なお、動作確認は、FF3 (3.0.1), FF2 (2.0.16), IE6 (SP2 6.0.2900), IE7 (7.0.5730), Safari3 (3.1.2), iPhone Safari (OS 2.1), Opera9 (9.27), Google Chrome (0.2.149.30)、Wii ブラウザで取れていますが、Windows MobileのIEやOperaでは動かない事を確認しています。

　Window MobileのIEやOperaでJavascriptのデバグの方法をご存じの方は教えていただけますか？

　圧縮前のソースです。

function browserLanguage() {
  try {
    return (navigator.browserLanguage || navigator.language || navigator.userLanguage).substr(0,2)
  }
  catch(e) {
    return undefined;
  }
}

function setLanguage(default_language, languages) {
  var addCSSRule = (document.createStyleSheet)
    ? (function(sheet) {
      return function(selector, declaration) {
        sheet.addRule(selector, declaration);
      };
    })(document.createStyleSheet())
    :
    (function(sheet){
      return function(selector, declaration) {
        sheet.insertRule(selector + '{' + declaration + '}', sheet.cssRules.length);
      };
    })((function(e){
      e.appendChild(document.createTextNode(''));
      (document.getElementsByTagName('head')[0] || (function(h) {
        document.documentElement.insertBefore(h, this.firstChild);
        return h;
      })(document.createElement("head"))).appendChild(e);
      return e.sheet;
    })(document.createElement("style")));

  var removeCSSRule = function(ruleName) {
    for(var i = 0; i < document.styleSheets.length; i++) { 
      var styleSheet = document.styleSheets[i];
      var ii = cssRule = 0;                              
      do {
        cssRule = (styleSheet.cssRules ? styleSheet.cssRules : styleSheet.rules)[ii];
        if(cssRule && cssRule.selectorText.toLowerCase() == ruleName) { 
            styleSheet.cssRules ? styleSheet.deleteRule(ii) : styleSheet.removeRule(ii);
            return true;
        }
        ii++;                                 
      } while(cssRule);
    }
    return false;
  }

  var array_include = function(ary, v) {
    for (var i in ary) {
      if (ary[i] == v) return true;
    }
    return false;
  };

  var lang = browserLanguage();
  if(lang==default_language || !array_include(languages, lang)) return false;

  addCSSRule("." + default_language, "display: none;");
  removeCSSRule("." + lang);
  return true;
}