webサイトの英語対応

Question

現在 Firebase の静的ホスティングでwebページを作っています。

英語の対応をしたいのですが、現在は英語版の別ページを作って English みたいなボタンから英語のページに飛ぶようになっています。

しかし、したいことはアクセスした"場所 or 人 or 設定" などから自動的に日本語か英語のどちらかを選んで飛ばしたいです。

そもそもそういうことは可能なのでしょうか? その場合はどのようにやるのかを教えていただきたいです。

特に技術に制限はありませんが、私が使っているのが Firebase と Vue.js なのでそちらで対応できるとありがたいです。もし他の技術が必要ならそれに応じて勉強してやってみます。

ご教授よろしくお願いします。

Answer 1

場所で判断するのは、ユーザーに優しくないのでやめましょう。
（日本に住んでいるが日本語が読め無いような人を無視するのならやってもいいですが、不評でしょうね）

ブラウザの設定に、「言語」があり、自分の読みたい言語を指定する事になっている（日本語OSのブラウザだと、日本語が最優先になっているのがデフォルト）ので、それがリクエストヘッダとなるAccept-Languageヘッダを見ます。
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Accept-Language

Answer 2

質問者さんの環境で可能かどうかわかりませんが・・・

したいことはアクセスした"場所 or 人 or 設定" などから自動的に日本語か英語のどちらかを選んで飛ばしたいです。

ブラウザの要求ヘッダに含まれて送られてくる Accept-Language で判断してはいかがですか。

例えばブラウザの言語設定が以下のようになっているとすると（Chrome のデフォルトの例です）、

要求ヘッダは以下のようになります。

Answer 3

場所

国ごとに割り振られているIPレンジは決まってるので、それで判別しようと思えば出来るだろうけどやってられませんね

人

HTTP_ACCEPT_LANGUAGEで運任せ判定して気持ちばかりの対応は出来ると思うけど、微妙ですね

設定

ユーザー自身に言語を選ばせて選んだ言語をクッキーに保存しておき自動判定で使う

というところから考えると設定でやるのがベストかな。どうやるのかは、書いた通りクッキーに保存して使う。

Answer 4

ブラウザの言語設定を取得して切り替える方法はいかがでしょうか

ブラウザ 言語設定 取得 などで検索すれば方法が複数出てくるかと思います。