グーグル翻訳のウィジェットの導入手順とjavascriptをasyncで動かしてみた。
このブログは、日本だけでなく色んな国々からアクセスが増えてきたのでグーグル翻訳のウィジェットを導入してみました。
追加したところ、GoogleのPageSpeed Insightsでページの速度を確認してみたら、今回追加したJavascriptが読み込まれないことを理由に少し速度が遅くなっていると指摘されました。
今回はウィジェットの導入手順とスクリプトを非同期にして動作検証をしてみました。
📄 MOST VIEWED
導入手順
- 無料のウェブサイト翻訳ツールプラグインが入手できるサイトにアクセスし「今すぐウェブサイトに追加」
- 自分のサイトのURLを入力し、現在の主要言語を選択
- 翻訳する言語を「すべての言語」または「言語を指定」
- 表示モードはインラインで「縦」、「横」、「プルダウン リストのみ」を選択
- 詳細設定はお好みで
- 最後に取得したコードをページに追加します
因みに私は特定の言語をいくつか指定しました。選択基準はGoogle Analyticsでアクセス数が高い国の言語順に追加しました。
すべての言語にしてしまうと、表示言語が多すぎる為、選ぶ時煩わしいです。 表示はプルダウンリストが見やすいかなと思いました。
✅ PICK UP
HTMLに追加
まずjavascriptファイル（以下例ではgoogletranslate.jsという名前にしました）を用意し、その中に取得したコードをコピペします。
googletranslate.jsの中身は以下の通りです。下記のはサンプルなので、翻訳ツールが出力されたスクリプトを使用します。
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'ja', includedLanguages: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-XXXXXXXX-X'}, 'google_translate_element');
}
asyncを追加
次に、サイトのページに先ほど作成したスクリプトファイルをheadタグ内に入れ、element.jsのスクリプト呼び出し部分も追加します。
下記の例ではgoogletranslate.jsとelement.jsを追加して、両方にasync="async"という文字列を加えています。 こうすることでスクリプトが非同期に読み込まれます。
<html>
<head>
<script type="text/javascript" src="googletranslate.js" async="async"></script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" async="async"></script>
</head>
<body>
<div id="google_translate_element"></div>
</body>
</html>
非同期による不具合
非同期にしたことで特に不具合を感じていませんが、スクリプトが完全に読み込まれないと翻訳機能が正しく動作しない可能性も考えられるので、もし心配な方はasyncを追加しない方が良いかもしれません。
Google PageSpeed Insightsの結果でこのサイトのページを確認したところ、問題となっていたスクリプトの速度が改善されたというレポートを確認できたので、個人的には満足してます。
google翻訳ツールバーを消す方法はCSSで
グーグル翻訳ウィジェットを追加するとページ上部にツールバーが自動的に表示されます。 調べたらこれをCSSで消す方法があったので、その方法を下記に紹介します。
具体的な方法はこちらに書いてあります。
方法はとても簡単で、以下の文をCSSファイルに追加するだけ。これでツールバーが消えます。
.goog-te-banner-frame.skiptranslate {display: none !important;}
body { top: 0px !important; }
📄 関連記事
📑 ありがとう
📑 HTML
📑 アドセンス
TRAVEL JAPAN
国内旅行 記事一覧
TRAVEL ABROAD
海外旅行 記事一覧
CATEGORY
カテゴリ
📂外資系企業へ転職・働き方：外資系企業の転職,英語,面接,働き方
📂国内旅行150ヵ所を紹介：北海道,屋久島
- 富士山周辺：山梨,静岡,山中湖,河口湖,朝霧高原
- 長野・岐阜：穂高岳,乗鞍岳,車山高原,上高地
- 箱根：箱根ロープウェイ,芦ノ湖海賊船,箱根神社,箱根の展望台
- 伊豆：伊東,下田,中伊豆
- 東京・神奈川お台場,高尾山,奥多摩,江ノ島,横浜
📂海外出張10カ国,50ヵ所以上観光：スペイン,インド,台湾.飛行機対策
📂健康：胃痛,風邪予防,食,メンタル
📂子育て：英語,育て方,旅行
📂PC関連：エンジニアの苦悩,効率化,Windowsのトラブル対応
- ブログ作成：アクセス数,アドセンス,HTML・CSS
- ASP.NET C#：サンプルコード等々
- SQL：SQL Server, Oracle関連
- モバイル：Android,iPhone,ポケモンGO
📂海外ドラマ：海外ドラマ・映画のレビューと感想
📂車関連：海外のレンタカー,試乗レポート,軽自動車,等々
📂物件：新築一戸建て 申し込みから購入・引渡しまで色々あったこと
PROFILE
プロフィール
KoReKuRaiです。東京都在住。外資系IT業界でSEやWebService開発,DB設計,面接官,会議通訳,プリセールス等色々とお仕事続けて約15年。現在、5歳児の子育てに奮闘中です。外資系企業での働き方や転職時に役に立った実体験や失敗談、会議通訳に役立った英会話のあれこれ、国内150ヵ所以上の旅行先の紹介、海外出張で行った10カ国のついでで観光した50ヵ所の旅行記や、子育て、サイト作成やコーディングに色々役立つと思うブログを書き足していきます。拙い文章ですがよろしくお願いします。メールはこちらまでお願いします。