表示する言語を判別する方法について
世の中には様々なWebサービスがあり、その中でも海外の企業のサービスを利用することも多いと思います。その中でどう表示する言語を判別しているのかを疑問に思ったことはないでしょうか。
Twitter、Google、Amazonなどのサービスがありますが、これらのサイトはログインした状態のまま保っている方も多いため、あまり意識しないかもしれませんが、どれも普通に使おうとすると設定しなくとも日本語で利用できていると思います。
今回は、そのユーザーが利用したい言語の判別方法についての説明をしていきます。
表示する言語を判別する方法は以下の3つだと思います。
- ドメインでのサイト振り分け
- セッション、Cookie
- HTTPリクエスト
この３つの方法について説明していきますが、今回はHTTPリクエストの話がメインです。
ドメインでのサイト振り分け
この方法が一番イメージしやすいと思います。サイト内で表示する言語を判別するのではなく、サイトごとに言語を別にするというものです。
日本語を利用したいなら日本語用のドメイン、英語を利用したいなら英語用のドメインにアクセスしてもらうという方法で、例としてはAmazonやStack Overflowなどのサイトが挙げられます。
Amazonの場合
日本でAmazonを利用する場合、一般的に https://www.amazon.co.jp にアクセスするかと思います。
対して英語版のサイトは https://www.amazon.com というURLです。
このように、ドメインが、日本版はwww.amazon.co.jp、英語版はwww.amazon.comというようにドメインで振り分けることによって、表示するサイトを別にします。
一つのサイトで言語を切り替えるのではなく、サイトごとに言語を別にするといったシンプルな方法です。
またこのようにドメインで振り分ける場合は、言語だけでなくサービスが異なる場合が多いです。
Amazonだと購入できる商品が違ったりアカウントも日本で利用しているアカウントはアメリカ版のサイトだと利用できなかったり、Stack Overflowだと日本語版のサイトと英語版のサイトでは質問が全く別です。
そもそもなぜ日本のユーザーがこの日本語用のドメインのサイトに自然と辿り着くかというと、Googleの検索エンジンで日本語の検索を利用しているからです。
検索エンジンの設定を英語に切り替えると、日本語用のサイトを検索から探すのは難しくなります。
セッション、Cookie
次に、セッションやCookieを利用した方法についてです。
セッション
セッションでログイン情報などを管理できるため、ユーザーが会員設定などで言語設定をすると設定することで表示する言語を切り替えられるようにできます。
例としてはTwitterなどが挙げられ、アカウントごとに言語の設定を切り替えることができるのが特徴です。
Cookie
Cookieでは、一度言語を選択すると一定期間その情報が保持され、Cookieが破棄されない限りはそのCookieの情報から設定している言語を読み取り表示する言語を切り替えます。
例としては質問箱のPeingが挙げられます。
このサイトにアクセスすると、HTTPのステータスコード301が返され、 https://peing.net/ja にリダイレクトされるかと思います。
これはCookieにデータがない場合、HTTPリクエストを見て判定して日本語のページに飛ばしていて、この詳細は次の項目で説明しますが、ここにアクセスするとこのサイトのcookieの情報として言語設定として日本語と記録されます。
cookieの情報はChromeのデベロッパーツールなどで確認ができます。
実際に http://peing.net/ja でCookieを確認します。
サイトにアクセスした後、デベロッパーツールを開き、Applicationタブを選択します。
StorageのCookies下にある https://peing.net をクリックするとNameやValueやDomainといったCookieの様々な情報が表示されます。
その下の方にNameに_peing_localeという欄があるので、それに対応するValueを見るとjaという値が入っています。
ここをダブルクリックすると入力欄になり、値を変更することができます。
ここでは、enという値に変更します。
こうすることでCookieの情報が変更されました。
ここで http://peing.net に再度アクセスします。
すると http://peing.net で、Cookieの_peing_localeがチェックされ http://peing.net/en にリダイレクトされ英語の表示になります。
また、ここではパスが/jaや/enとなっているように、Cookieで判別する方法ではSEOなどの観点から言語ごとにURLを別にして、表示するリソースに対してURLが別になるようにするのが一般的です。複数のリソースが同じURLになっている場合、Googleが一つの言語しかページを認識できず、認識されていない言語での検索された場合に見つかりにくくなってしまうからです。
このようにCookieでユーザーのブラウザに設定情報を格納するのがこの方法です。
Peingの質問箱は楽しいので是非利用してみてください。
セッションやCookieを利用して判別する方法は、次の項目で説明するHTTPリクエストで判別する方法と併用して利用されることが多いです。
HTTPリクエスト
最後にHTTPリクエストから判別する方法についてです。
Webサイトはhttp通信によって、Webブラウザからリクエストを送り、Webサーバーからレスポンスを受け取ってブラウザで表示させていますが、このリクエストの部分で欲しいコンテンツの言語を指定ができるため、それを読み取って表示する言語を切り替える方法です。
HTTPについての説明は以下のサイトが分かりやすいです。
とほほのWWW入門 – HTTP入門
このHTTPプロトコルで、サーバーにリクエストに送る際のHTTPリクエストヘッダにAccept-Languageというフィールドがあります。
このフィールドで取得したいコンテンツの言語を指定することができ、この指定から表示する言語を判別する方法です。
今回は、Twitterでログインしていない状態を例に説明していきます。(先ほど挙げたようにtwitterではユーザーごとに言語の設定ができるため)
Chromeのデベロッパーツールを開いてNetworkタブを開いた状態で、 https://twitter.com にアクセスするとNameの上の方にtwitter.comがあるのでそれをクリックすると、様々なhttp通信の情報を見ることができます。
Headersタブの下の方にRequest Headersという項目があります。
この項目にaccept-languageというフィールドがあります。
accept-language: ja,en-US;q=0.9,en;q=0.8
使っているパソコンが日本で購入したもので、ブラウザで特殊な設定をしていない限り、他の環境でも同じ値が入っているかと思います。
この詳細に関しては、Accept-Language – HTTP | MDNに書かれていますが簡単に説明します。
jaのように言語名と;q=0.9というようにq(quality value)が指定されて、,で区切られて並べられています。qは優先度で、qの値が大きい方が優先されます。
qはデフォルトで1であるため、この場合ja;q=1となり、サーバーに日本語のコンテンツを要求して、存在しなければアメリカ英語(en-US)、…というようなリクエストを送ります。
この値はphpであればサーバー変数を用いて取得できます。
$_SERVER['HTTP_ACCEPT_LANGUAGE']
他の言語の場合も、言語の標準パッケージやフレームワークの機能などでHTTPリクエストの情報を取得する機能があるかと思います。
実際に、このリクエストヘッダの値を変えてどう表示されるかを見ていきますが、ブラウザの設定を変えるのは少々面倒なのでcurlコマンドを用います。
-Hオプションでリクエストヘッダを指定できるので、先ほどの値で実行します。
curl 'https://twitter.com/' -H 'accept-language: ja,en-US;q=0.9,en;q=0.8'
そうすると以下のように日本語のhtmlが出力されます。
次に、jaの部分をesに変えて実行します。
curl 'https://twitter.com/' -H 'accept-language: es,en-US;q=0.9,en;q=0.8'
するとスペイン語(es)で表示されます。
以上のようにHTTPリクエストヘッダから欲しいコンテンツを指定できることを見てきましたが、ユーザーが明示的に変更して使うことは少ないため簡単な手がかりのようなもので、他で見てきたセッションやCookieなどの判別などと併用した場合、accept-languageの値は無視されることが多いです。
まとめ
今回は、多言語に対応する際の言語の判別方法を見ていきましたが、セッション、Cookie、HTTPというクライアントとWebサーバーとの通信で基礎となる技術の説明が多くなり少々長くなってしまいました。
HTTPリクエストヘッダをそれほどじっくり見たことはなかったですが、どういうデータの通信を行なっているかを見るだけでも色々知れて面白いのでChromeのデベロッパーツールをもっと有効活用したいと思いました。
参考サイト
