無料のGoogle translateウィジェットは、100以上の言語をプルダウンで選択して、サイトを自動翻訳してくれます。
Google translateの導入はこちらを参照ください。https://translate.google.com/manager/website/?hl=ja
また、サイトのURLの末尾にhttp://XXXXXX.com/#googtrans(en) のように記述するとアクセス時に任意の言語を選択済にできます。
一度選択済の状態になると、cookieに保存され、同一セッション中は選択済の言語が引き継がれます。
よい使い方とは言えないかもしれないですが、Googleなどの検索エンジンから訪れたユーザーのPCやスマホの言語設定が外国語の場合、自動で母国語の言語に選択済の状態にすることもできます。
ただ、本人が任意に選択したい言語を尊重することも必要なので、URLに#googtrans(en)が含まれなく、cookieにもGoogle translateの値がないことをチェックすることも必要です。
▼Cookie有無をチェックして同サイト既にGoogle Translateの設定が保存されていない場合に、言語を強制的に英語
var st=""; var thisurl = location.href ; //URLに#googtransが含まれない場合 if( thisurl.indexOf('#googtrans')== -1){ //Cookieに何かしら情報がある場合 if(document.cookie.length>0){ st=document.cookie.indexOf("googtrans" + "="); //Cookieにgoogtrans=がない場合 if(st== -1){ //強制的に#googtrans(en)を付加して英語適用済ページへ location.href=thisurl+"#googtrans(en)"; } } }
▼ユーザーの利用端末の言語設定を取得して、それぞれの言語にGoogle translateで選択済の状態で再読込する
//Google transrate の言語切替用URLのベース var transurlpass = "/#googtrans"; //最優先の言語だけ取得 var language = (window.navigator.languages && window.navigator.languages[0]) || window.navigator.language || window.navigator.userLanguage || window.navigator.browserLanguage; // クライアント側で受け付けている言語リストを取得 var languages = window.navigator.languages || [ window.navigator.language || window.navigator.userLanguage || window.navigator.browserLanguage ]; // alert("最優先"+language+" 言語リスト"+languages); //IEで取得した言語の値の文字列が完全一致しないケースを想定し indexOf("ko") が含まれていたらで対応 //※中国2種は完全一致が必要なうえiphoneは”zh-cn”のように小文字で応答するためor条件分岐で対応 if(language.toLowerCase().indexOf("en") !== -1){location.href=transurlpass+"(en)";} else if(language.toLowerCase().indexOf("ko") !== -1){location.href=transurlpass+"(ko)";} else if(language=="zh-CN"|| language=="zh-cn"){location.href=transurlpass+"(zh-CN)";} else if(language=="zh-TW"|| language=="zh-tw"){location.href=transurlpass+"(zh-TW)";} else{location.href=transurlpass+"(en)";}
ブラウザの言語設定をチェックしますが、ブラウザによって言語コードが若干違うものがあります。主にIE系とEdge、あとsafari も中国系の言語が違った。。
取得した言語コードをそのまま、#googtrans(言語コード)に自動で割り振ることで、1行で全言語に対応できそうですが、ブラウザによって取得できるコードが違うとうまく動かない場合もありそうです。今回は主要な言語をいくつかチョイスして、それ以外は英語(en)へとなるようにしました。