任意のコンテンツを他言語に対応するための軽量なスクリプト・「Translater.JS」

Translater.JS

Translater.JSはWebページ内の任意のコンテンツを他言語対応にするためのライブラリです。基本的にはAPIを使った自動翻訳等ではなく、他言語も自身で書くタイプのものとなりますのでCMSなどで生成された大量ページの翻訳には向きませんが、ペラサイト等には最適かもしれません。仕様上、非依存且つ軽量なスクリプトとなっています。上動作サンプルのように画像とそのaltやtitle属性も対応可能です。使い方もシンプルで

var tran = new Translater();
  if (tran.getLang() === "default") tran.setLang('jp');

デフォルトの言語を設定すれば後はマークアップするだけです。

<a href="javascript:tran.setLang('default');">日本語</a>
<a href="javascript:tran.setLang('en');">English</a>
<a href="javascript:tran.setLang('cn');">中文</a>

言語の切り替えボタンです。

<div class="txt">
  こんにちは、世界！
<!--{cn}你好 世界!（任意のテキストを表示できます）-->
<!--{en}Hello World（任意のテキストを表示できます）-->
</div>

切り替えられる言語はデフォルトではコメントアウトをし、冒頭に{cn}といったように国コードを入れて翻訳テキストを含めるだけで、切り替えボタンで切り替わるようになります。

<img 
  alt="画像です" 
  alt-cn="图片" 
  alt-en="image" 

  title="画像なんだよ" 
  title-cn="图片!" 
  title-en="I's image." 

  src="https://picsum.photos/300/200" 
  data-lang-cn="https://picsum.photos/301/200" 
  data-lang-en="https://picsum.photos/302/200"
/>

画像の切り替えも可能です。個人的には使いやすい印象でした。ライセンスはApache 2.0となっています。

Translater.JS