簡単!グーグル翻訳で自社サイトを多言語化

簡単!グーグル翻訳で自社サイトを多言語化

  • 2016-11-26  最終更新日:2016-11-26

今回は簡単にサイトを多言語化する方法をご紹介します。 当サイトにも実装しておりますが、5分で出来ます。翻訳ツールにはグーグル翻訳を使います。翻訳精度はご存じだと想いますがたまに変な翻訳しますのでご理解の上ご使用ください。最近はだいぶ翻訳精度も上がっております。当然ですがグーグルアカウントが必要になります。

ビジネス向けツールのグーグル翻訳を使います。下記公式サイトです。 ⇒ウェブサイト翻訳ツール


導入方法

上記のサイトのウェブサイト翻訳ツール(無料)の使ってみるをクリックします。

ウェブサイト翻訳ツール

今すぐウェブサイトに追加をクリックします。ここでグーグルアカウントを聞かれるのでログインします。

ウェブサイト翻訳ツール

ウェブサイトのURLをウェブサイトの言語を日本語します。

ウェブサイト翻訳ツール

翻訳する言語をチェックボックスにチェックを入れて言語指定します。今回は英語と中国語を選択しました。その他あればチェック入れます。

ウェブサイト翻訳ツール

これで完了です。コードが記述されていますのでこれを表示させたい場所に記述します。

<div id="google_translate_element"></div>

こちらのタグは表示させたい場所に記述します。

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'ja', includedLanguages: 'en,ja,zh-CN,zh-TW', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

jsスクリプトは</body>直前に入れるときれいに表示されます。

参考になれば幸いです。


∞Tadashi Suyama∞

google translate web グーグル 翻訳
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

アイキャッチ
追い風CSS(tailwindcss)が結局楽かも

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...

29 Apr 2021

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

アイキャッチ
Webpack5にアップデートしてエラーの対処方法2つ

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

google translate web グーグル 翻訳
フッターイメージ