フロントエンドでのブラウザ言語取得
Javascriptでブラウザの言語を取得する方法として以下を用いる方法がよく使われます。
// Chrome, Firefoxだと以下で取れる
window.navigator.languages;
window.navigator.languages[0];
// IE 11以上だと以下で取れる
window.navigator.language;
// IE 10以下なら以下で取れる
window.navigator.userLanguage;
window.navigator.browserLanguage;
Chrome, Firefoxだとしっかりブラウザの設定で優先度の高い言語を取得してくれますが、
IEだとブラウザのインストールされた言語で取得してしまうため、
ブラウザの設定で言語を変更しても、取得する言語が変更されません。
サーバサイドでのブラウザ言語取得
Lambdaのeventを用いることでヘッダ情報を取得してブラウザの言語を取得します。
Lambda関数は以下のようにします。
exports.handler = function(event, context, callback) {
callback(null, {
statusCode: 200,
body: JSON.stringify(event.headers)
});
};
あとは、API Gatewayで上記の関数を実行するAPIをデプロイします。
デプロイ方法が分からない方は下記を参照にすると良いでしょう。
APIを実行すると下記のようにヘッダ情報が返ってきます。
{"Accept":"text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8","Accept-Encoding":"gzip, deflate, br","Accept-Language":"ja,en;q=0.9,en-US;q=0.8,fr-FR;q=0.7,fr;q=0.6","cache-control":"max-age=0",...(省略)}
後は、受け取った側でAccept-Language
をキーにして言語を取得できます。
以下、優先順位が一番高い言語の取得例です。
結果がres
に入っているとすると、
language = res['Accept-Language'].split(',')[0];
language = language.split('-')[0];
例えば、先頭がeu-US
であればen
が取得できます。