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