プラグイン不要！「Google ウェブサイト翻訳ツール」でサイト丸ごと多言語化！
春の気配が近づいてまいりましたね。山田です。
３連休いかがお過ごしでしょうか？ 僕はこの記事がアップされる頃にはセブで休暇を満喫しているかと思います。
さて、今日はグローバリゼーションのすすむ現代社会で今後対応が迫られること間違いなしの多言語化対応についてです。
もくじ
多言語化対応しなきゃいけないとは分かっているけど
WordPressにはWPMLやBogoをはじめ、多言語化できるプラグインが豊富にありますが、なんだかんだ結局自分で翻訳しなければいけないため、その労力を想像するだけで二の足を踏んでしまう方がほとんどではないでしょうか？
しかし！ そんな悩みとは今日でオサラバなのです！
そう！ 我々には正義のGoogle先生が付いているのです！！
日本人なら全員使ったことがあるであろうGoogle 翻訳がなんとこっそり「Google ウェブサイト翻訳ツール」なるとんでもないツールをリリースしていたのです！！！
Google ウェブサイト翻訳ツールとは
どこまで控えめなのかわかりませんが、公式の説明らしい説明は
こちらくらいしか見つからず、、、
いわく、
動作が軽く、操作が簡単な翻訳方法として、ウェブサイト翻訳ツールがおすすめです。利用は無料で、設定も簡単です。
だそうです。
とにもかくにも、このツールのポテンシャルをご覧いただきましょう。
必要なのはたったの３ステップ！
ステップ１．ウェブサイト情報を入力する
Google ウェブサイト翻訳ツールへアクセスするとこんな画面が出てきますので、
「今すぐウェブサイトに追加」をクリックします。
すると、ウェブサイト情報を入力する画面に移動します。
ここからは１ステップずつ、落ち着いて進めていきましょう。
ウェブサイトのURLを入力する
慎重に翻訳ツールを導入したいウェブサイトのURLをテキストボックスに入力します。
ウェブサイトの言語を選択する
すこし悩んでしまうかもしれませんが、ウェブサイトの元の言語をセレクトボックスから選択します。
当ブログをご覧のみなさまは概ね「日本語」を選択することになるかと思います。
次へボタンをクリックする
おつかれさまでした。
これにてステップ１は完了です。
キャンセルボタンと間違えないように、「次へ」ボタンをクリックしましょう。
ステップ２．プラグインの設定をする
次に、こんな画面に切り替わります。
選択する部分がたくさんあって尻込みしてしまうかもしれませんが、１ステップずつ順を追っていきましょう。
翻訳する言語を選択する
ウェブサイトを翻訳したい言語を選択します。
「すべての言語」でもいいのですが、選択肢が増えてユーザーが迷ってしまうことも考えられるので、今回は「言語を指定」してみます。
すると、選択できる言語がすべて出てきますので、ここから翻訳したい言語を好きに選択していくわけです。
今回は主要そうな言語10個とニャンジャ語を選択してみました。
表示モードを選択する
ウェブサイトに表示させたいモードを選択します。
こればっかりは好みですので、プレビューを眺めながら好きな表示モードを選択しましょう。
今回は「インライン・横」を選択してみました。
詳細設定をする
最後に、こんな具合に詳細設定ができる部分がありますが、無視してOKです。
ドキュメントもとくになさそうだったので、設定するとどうなるのかは実際よくわからないです。
コードを取得する
おつかれさまでした。
これにてステップ２は完了です。
キャンセルボタンや前へボタンと間違えないように、「コードを取得する」ボタンをクリックしましょう。
ステップ３．プラグインを追加する
いよいよ最後のステップです！！
こんな画面になりますので、コードをまるっとコピー＆ペーストして、WordPressであればfooter.phpやsidebar.phpなどの共通部品に埋め込んでやりましょう。
いかがでしょうか？ おそらくコードを貼り付けた部分にGoogle ウェブサイト翻訳ツールが表示されるはずです！
言語を選択してみると、、、 しっかり翻訳されてますね！ 成功です！！
一方で、このままだとすこし寂しいので、Webサイトのトンマナに合わせて微調整してみましょう。
番外編．レイアウトを調整する
Google ウェブサイト翻訳ツールのコードを貼り付けた部分に#google_translate_elementなdivが差し込まれているはずなので、調整したい部分のクラスなりIDを探してCSSで上書きしましょう。
なあ、おそらく<head>内の最後にGoogle ウェブサイト翻訳ツール用のCSSとJavaScriptが挿入されているはずなので、場合によっては!importantで上書きする必要があります。
ご参考までに弊社Webサイトでのレイアウト調整例をあげておきます。
.l_footer {
&__translate {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: 0;
left: 0;
z-index: 99;
width: 100%;
height: $FooterHeight;
background: $BackgroundColor;
@include is-mobile {
display: none;
}
.goog-te-combo {
padding: .1rem .5rem;
padding-right: 1rem;
border: 2px solid #ccc;
border-radius: 2px;
background: $BackgroundColor;
font-family: $BaseFontFamily;
}
.goog-te-gadget > div {
position: relative;
&:after {
display: flex;
align-items: center;
position: absolute;
top: 0;
right: .5rem;
bottom: 0;
content: '\e900';
color: $BaseColor;
font-family: 'icomoon';
pointer-events: none;
}
}
}
}
まとめ
いかがでしたでしょうか。 今回はGoogle ウェブサイト翻訳ツールをWebサイトに導入するまでの一連の流れを３ステップで解説してみました。
グローバリゼーションがすすむ現代社会でこんなにかんたんに多言語化対応ができるとは驚きですね！
さぁ、さっそく今からあなたのWebサイトにもGoogle ウェブサイト翻訳ツールを導入してみましょう！
かしこ。
