ITエンジニア/デザイナ向けにオープンソースを毎日紹介

多言語対応って本当に大変ですよね。GetTextなどを使って多言語ファイルを作成し、各言語向けにメンテナンスする必要があります。その殆どのキーワードは単語であって、辞書さえあれば十分なものばかりだというのに。

ということでGoogleが開発しているライブラリがqLabelです。Wikipediaの提供しているWikidataを使って単語ベースの多言語翻訳を行うライブラリです。

qLabelの使い方

例えば次のような画面があります。

サンプル。English/Deutschと書かれています。
サンプル。English/Deutschと書かれています。

HTMLコードは次のようになっています。

<p class="qlabel" its-ta-ident-ref="http://www.wikidata.org/entity/Q1860" onclick="$.qLabel.switchLanguage('en')">English</p>
<p class="qlabel" its-ta-ident-ref="http://www.wikidata.org/entity/Q188" onclick="$.qLabel.switchLanguage('de')">Deutsch</p>

そしてDeutschをクリックすると次のようになります。

EnglishがEnglischに変わりました。
EnglishがEnglischに変わりました。

Wikidataは次のようになっています。
Wikidataは次のようになっています。

つまりits-ta-ident-refで指定したURLにある単語を指定した言語で置き換えると言った具合です。

qLabelのデモ

英語版。
英語版。

言語を切り替えて日本語化。
言語を切り替えて日本語化。

英語版メニュー。
英語版メニュー。

日本語化。単語がない場合は英語がそのまま出ています。
日本語化。単語がない場合は英語がそのまま出ています。

地図。こちらはSVGで描かれています。
地図。こちらはSVGで描かれています。

日本語化。SVGでも問題ありません。
日本語化。SVGでも問題ありません。

下のHTMLのようになっています。

<svg height="600" width="600">
  <text x="220" y="50" class="qlabel" its-ta-ident-ref="http://www.wikidata.org/entity/Q46">Europe</text>
  <text x="310" y="70" class="qlabel" its-ta-ident-ref="http://www.wikidata.org/entity/Q48">Asia</text>
  <text x="210" y="100" class="qlabel" its-ta-ident-ref="http://www.wikidata.org/entity/Q15">Africa</text>
  <text x="50" y="70" class="qlabel" its-ta-ident-ref="http://www.wikidata.org/entity/Q49">North America</text>
  <text x="80" y="140" class="qlabel" its-ta-ident-ref="http://www.wikidata.org/entity/Q18">South America</text>
  <text x="300" y="160" class="qlabel" its-ta-ident-ref="http://www.wikidata.org/entity/Q3960">Australia</text>
</svg>

単語を探すのが若干面倒な気がしますが、それさえ行ってしまえば単語単位でのローカライズはとても簡単にできます。Web APIを使った面白い試みです。

qLabelはjQuery/JavaScritp製のオープンソース・ソフトウェア(Apache License 2.0)です。

qLabel

googleknowledge/qlabel

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2