KoReKuRai
HOMEブログ作成HTML    ☰ MENU

グーグル翻訳のウィジェットの導入手順とjavascriptをasyncで動かしてみた。

blogsite

このブログは、日本だけでなく色んな国々からアクセスが増えてきたのでグーグル翻訳のウィジェットを導入してみました。

追加したところ、GoogleのPageSpeed Insightsでページの速度を確認してみたら、今回追加したJavascriptが読み込まれないことを理由に少し速度が遅くなっていると指摘されました。

今回はウィジェットの導入手順とスクリプトを非同期にして動作検証をしてみました。

 

スポンサーリンク

📄 MOST VIEWED

導入手順

  1. 無料のウェブサイト翻訳ツールプラグインが入手できるサイトにアクセスし「今すぐウェブサイトに追加」
  2. 自分のサイトのURLを入力し、現在の主要言語を選択
  3. 翻訳する言語を「すべての言語」または「言語を指定」
  4. 表示モードはインラインで「縦」、「横」、「プルダウン リストのみ」を選択
  5. 詳細設定はお好みで
  6. 最後に取得したコードをページに追加します

因みに私は特定の言語をいくつか指定しました。選択基準は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
海外旅行 記事一覧

インド出張 タクシーで牛と遭遇スペインで風車を見たナイアガラの滝の虹が凄い深夜のNYタイムズスクエア香港の夜景は船からアメリカのレンタカー代でいくら?グランドキャニオンまでドライブシドニーの世界遺産
🔝上へ

CATEGORY
カテゴリ

📂:外資系企業の転職,英語,面接,働き方

📂:北海道,屋久島

📂:スペイン,インド,台湾.飛行機対策

📂:胃痛,風邪予防,食,メンタル

📂:英語,育て方,旅行

📂:エンジニアの苦悩,効率化,Windowsのトラブル対応

📂:海外ドラマ・映画のレビューと感想

📂:海外のレンタカー,試乗レポート,軽自動車,等々

📂:新築一戸建て 申し込みから購入・引渡しまで色々あったこと

PROFILE
プロフィール

これくらいブログKoReKuRaiです。東京都在住。外資系IT業界でSEやWebService開発,DB設計,面接官,会議通訳,プリセールス等色々とお仕事続けて約15年。現在、5歳児の子育てに奮闘中です。外資系企業での働き方や転職時に役に立った実体験や失敗談、会議通訳に役立った英会話のあれこれ、国内150ヵ所以上の旅行先の紹介、海外出張で行った10カ国のついでで観光した50ヵ所の旅行記や、子育て、サイト作成やコーディングに色々役立つと思うブログを書き足していきます。拙い文章ですがよろしくお願いします。メールはこちらまでお願いします。

Copyright 2016-2019 KoReKuRai All Rights Reserved.