どうも、まさとらん（@0310lan）です！
今回は、Webサイトやアプリなどを簡単に多言語対応できるJavaScriptライブリをご紹介します！
HTML要素に「属性」を追加するだけで簡単に翻訳できるので、既存のWebサイトなどに適応しやすいという特徴があります。
グローバルなサイト作りにご興味のある方は、ぜひ参考にしてみてください！
【 Glottologist 】
■「Glottologist」の使い方
それでは、まず最初に「Glottologist」を使えるようにするための準備から始めましょう！
必要になるのはライブラリの「JavaScriptファイル」1つです。
npmでインストールする場合は次のとおり！
npm i glottologist --save
また、ライブラリを「scriptタグ」で読み込む場合は次のように記述しましょう。
<script src="https://unpkg.com/glottologist"></script>
どちらか好きな方法でライブラリを読み込んだら準備は完了です！
今回は、サンプルデモとして以下のようなWebページを1枚用意しました。
このWebページを使って、「Glottologist」の翻訳ライブラリを試していきたいと思います！
今回使用したWebページのソースコードは、以下のURLから閲覧できるので参考にしてみてください。
■基本的な翻訳方法について
「Glottologist」を使った翻訳方法は、大きく分けると以下の3種類になります。
- 指定したHTML要素を1つずつ翻訳する方法
- 「JSON」ファイルを使って一気に翻訳する方法
- 「Google翻訳」を活用して自動的に翻訳する方法
まず、最も基本となるHTML要素を1つずつ指定して翻訳する方法から見ていきましょう！
「Glottologist」の基本的な仕組みですが、翻訳対象の要素に「glot-model」属性を付与してそこへ事前に翻訳した文章と置き換えるようなカタチになります。
どの国の言語を使い、どんな翻訳文章に変換するかは自分で好きなように設定できるので安心です。
例えば、次のような「h1要素」と「p要素」があるとします。
<h1>Sample Title</h1>
<p>I translate this text into various languages.</p>
この英語で書かれた文章を日本語に翻訳するには、まず最初に「glot-model属性」を付与していきます。
<h1 glot-model="title">Sample Title</h1> <p glot-model="text">I translate this text into various languages.</p>
「属性値」は自分の分かりやすいキーワードで構いません。
あとは「glot.assign()」というメソッドを使って、それぞれの属性値に対する翻訳文を当てはめるだけです！
const glot = new Glottologist(); //glot-modelの属性値が「title」の文章を翻訳 glot.assign('title', { ja: 'サンプルのタイトル' }) //glot-modelの属性値が「text」の文章を翻訳 glot.assign('text', { ja: '私はこのテキストをさまざまな言語に翻訳します。' }) //翻訳を実行 glot.render();
日本語の翻訳文の場合は、「ja: 翻訳文」というオブジェクト形式で設定していきます。
実行すると、翻訳された文章が表示されます！
もちろん多言語にも対応可能で、その場合はそれぞれの国の言語を追加していくだけなので簡単です！
glot.assign('title', { ja: 'サンプルのタイトル', //日本語 fr: 'titre de l\'échantillon',//フランス語 zh: '样本标题' //中国語 }) glot.assign('text', { ja: '私はこのテキストをさまざまな言語に翻訳します。', fr: 'Je traduis ce texte en plusieurs langues.', zh: '我将这段文字翻译成各种语言' })
ブラウザの設定言語を自動的に判断してくれるので、ユーザーの国に合わせた表示が可能になります。
また、「glot.render()」の引数に「国名コード」を指定することで、強制的に指定した国の言語を表示させることも可能です！
//日本語を強制的に表示させる glot.render('ja'); //英語を強制的に表示させる glot.render('en'); //中国語を強制的に表示させる glot.render('zh');
このように基本的な使い方としては、対象となる要素に「glot-model属性」を付与するだけなので、既存のWebサイトにも対応しやすい特徴があります。
以下のリンクから、簡単なサンプルデモを試すことが出来るのでぜひ参考にしてみてください！
※ソースコードはコチラから閲覧できます。
■「JSON」を活用した翻訳方法
次に、JSONファイルを使った翻訳方法を試してみましょう！
先ほどは「glot-assign()」メソッドを使って対象の要素を1つずつ翻訳していましたが、JSONを活用すると一気に翻訳文を設定できるので大変便利です。
使い方としては、対象の要素に「glot-model属性」を付与するのは同じですが、次のようなJSONファイルを1つ用意するだけでOKです！
{ "title": { "ja": "サンプルタイトル", "en": "Sample Title", "zh": "样本标题" }, "text": { "ja": "私はこのテキストをさまざまな言語に翻訳します", "en": "I translate this text into various languages.", "zh": "我将这段文字翻译成各种语言" } }
内容は「glot-assign()」メソッドの中身とほぼ同じで、対象のキーワードと翻訳文がペアになったものを用意します。
あとは、JavaScriptから「glot.import()」を使ってファイルを読み込めば翻訳されます！
//JSONファイルを読み込む glot.import("/lang.json").then(() => { glot.render(); })
Webサイトを丸ごと翻訳するなど、大量のHTML要素に対して文章を変換する場合はこちらの方法がいいでしょう。
また、あらかじめよく使うキーワードをJSONファイルで作成しておけば、さまざまなWebサイトで共有することもできるので効率化も期待できますね。
JSONファイルを使ったサンプルのソースコードは、以下のリンクから閲覧できるので参考にしてみてください。
【 JSONを使った翻訳のサンプルコード｜GitHubページ 】
※ソースコードはコチラから閲覧できます。
■「Google翻訳」を活用した翻訳方法
（※2023年3月時点において、この機能は終了のため利用できません）
最後に、「Google翻訳」を活用した自動変換の方法をご紹介しておきます！
この方法はGoogle翻訳のAPI（非公式）を簡単に利用できるメソッドが用意されており、あらかじめ翻訳文を用意しなくても自動的に変換できる特徴があります。
記述方法は次のとおりです！
glot.t( 翻訳する文章, 国名コード ).then( 翻訳後の処理 )
【翻訳する文章】の箇所へ、JavaScriptからテキストを取得して当てはめれば自動翻訳が完成するというお手軽なメソッドになっています。
簡単なサンプル例としては、次のような感じになるでしょう！
const h1 = document.getElementById('h1'); //h1要素を取得 const glot = new Glottologist(); //h1要素のテキストを英語に翻訳して再びh1要素に上書きする glot.t( h1.textContent, 'en' ).then( result => { h1.textContent = result; })
上記のように、「glot.t()」の引数へ翻訳したいHTML要素のテキストを設定すれば翻訳できます。
そして、翻訳された文章を再び元のHTML要素に返すことで、画面には翻訳された文章が表示されるようになります。
以下のリンクから、実際の表示を確認してみてください！
【 Google翻訳を活用したサンプルデモ｜GitHubページ 】
※ソースコードはコチラから閲覧できます。
この方法はあらかじめ翻訳文を用意しなくてもすぐに多言語対応できるというメリットがあります。
翻訳文を自分で用意した方がベストではありますが、それが難しい場合やプロトタイプなどで活躍する方法と言えるでしょう。
■JavaScript入門編は全編無料！動画で学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、JavaScript入門編はもちろんPython、Java、C言語、C#、PHP、Ruby、SQL、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「JavaScript入門編」「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
■まとめ
今回は、JavaScriptでWebサイトを多言語対応できるライブラリ「Glottologist」についてご紹介しました！
HTML要素に属性を追加するだけなので、Webサイトやアプリなどさまざまな既存プロジェクトをあとから簡単に翻訳できる柔軟性が大きな魅力となるでしょう。
ぜひ、みなさんのWebサイトにも活用してグローバルなサイト作りに役立ててみてください！
＜参考＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
