この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
グローバル対応Webサイト？
グローバル対応のWebサイトってなんでしょうか？全世界の人がアクセスし、アクセスする地域によって表示を変えたり、言語を変えたりできるWebサイトです。国ごとにバラバラのドメインではなく、1つのドメインで全ての国と地域のホームページをカバーできたら最高ですよね。
今回は、グローバル対応のWebサイトの仕組みを理解するために、各グローバル企業のホームページを確認してみたいと思います。
グローバル対応の例
ここではいくつかのグローバル対応のWebサイトを見てみましょう。
ユニクロ
uniqlo.comをブラウザで表示してみましょう。
ちょっとマニアックに動作を確認します。uniqlo.comにアクセスすると、www.uniqlo.comに302転送されるようになっています。
$ curl -D head uniqlo.com
<html>
<head><title>302 Found</title></head>
<body bgcolor="white">
<center><h1>302 Found</h1></center>
<hr><center>nginx/1.4.4</center>
</body>
</html>
$ cat head
HTTP/1.1 302 Moved Temporarily
Server: nginx/1.4.4
Date: Sun, 18 May 2014 07:39:51 GMT
Content-Type: text/html
Content-Length: 160
Connection: keep-alive
Location: http://www.uniqlo.com/日本語のページはどのように出しているのでしょうか。
日本のサーバーから読んでみましょう。/jp/に転送していますね。
$ curl -D head www.uniqlo.com
$ cat head
HTTP/1.1 302 Moved Temporarily
Server: AkamaiGHost
Content-Length: 0
Location: /jp/
Date: Sun, 18 May 2014 07:50:18 GMT
Connection: keep-alive続いてアメリカのサーバーから読んでみましょう。/us/に転送していますね。
$ curl -D head www.uniqlo.com
$ cat head
HTTP/1.1 302 Moved Temporarily
Server: AkamaiGHost
Content-Length: 0
Location: /us/
Date: Sun, 18 May 2014 07:49:32 GMT
Connection: keep-aliveこれらにより、ユニクロのグローバル対応はAkamaiのローケーションサービスにより、アクセス元地域のホームページが表示されていることが分かりました。
花王
AWSを使ってグロバールサイトを構築している花王のホームページを見てみましょう。
kao.comにアクセスするとwww.kao.comに301転送されていますね。
$ curl -D head kao.com
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>301 Moved Permanently</title>
</head><body>
<h1>Moved Permanently</h1>
<p>The document has moved <a href="http://www.kao.com/">here</a>.</p>
<hr>
<address>Apache/2.2.23 (Amazon) Server at kao.com Port 80</address>
</body></html>
$ cat head
HTTP/1.1 301 Moved Permanently
Date: Sun, 18 May 2014 08:02:47 GMT
Server: Apache/2.2.23 (Amazon)
Location: http://www.kao.com/
Content-Length: 300
Connection: close
Content-Type: text/html; charset=iso-8859-1日本のサーバーからアクセスしてみましょう。花王の場合、ロケーションサービスを使わずに共通のページにアクセスした後に、ブラウザの言語設定から使用しているを言語を取得して転送していることが分かります。
$ curl -D head www.kao.com
・・・・・・
function autoChangeLang(){
var lang = checkBrowserLanguage();
if(lang != 'en' && lang != 'ja' && lang != 'zc' && lang != 'zt')lang = 'en';
var targetURL = '/index_'+lang+ '.html';
location.href = targetURL;
}
autoChangeLang();
function checkBrowserLanguage() {
try {
var lang = navigator.browserLanguage || navigator.language || navigator.userLanguage;
if(lang.substr(0,2) != 'zh'){
return lang.substr(0,2);
}else if(lang == 'zh-TW' || lang == 'zh-HK' || lang == 'zh-tw' || lang == 'zh-hk'){
return 'zt';
}else if(lang == 'zh-CN' || lang == 'zh-cn'){
return 'zc';
}else{
return 'en';
}
}
catch(e) {
return 'en';
}
}
・・・・・・
$ cat head
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 7831
Connection: keep-alive
Accept-Ranges: bytes
Cache-Control: max-age=30, public
Date: Sun, 18 May 2014 08:04:33 GMT
Server: Apache/2.2.3 (Red Hat)
Age: 59
X-Cache: Hit from cloudfront
Via: 1.1 c9ed1b09c5e57c069d1f24fbc87c0be3.cloudfront.net (CloudFront)
X-Amz-Cf-Id: HieDk4reOaOS-RXgHV3G_yLVW6AR-y0t9QYk6yjI-VEzk28lv1FfkA==アマゾン
グローバルに展開するECサイトと言えばアマゾンですので調べてみます。
amazon.comをブラウザで表示してみましょう。
$ curl -D head amazon.com
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>301 Moved Permanently</title>
</head><body>
<h1>Moved Permanently</h1>
<p>The document has moved <a href="http://www.amazon.com/">here</a>.</p>
</body></html>
$ cat head
HTTP/1.1 301 Moved Permanently
Date: Sun, 18 May 2014 08:18:24 GMT
Server: Server
Location: http://www.amazon.com/
Content-Length: 230
Content-Type: text/html; charset=iso-8859-1日本のサーバーとアメリカのサーバー共に、どこからアクセスしてもヘッダの情報は同じでした。
$ cat head
HTTP/1.1 200 OK
Date: Sun, 18 May 2014 08:23:32 GMT
Server: Server
Set-Cookie: skin=noskin; path=/; domain=.amazon.com
pragma: no-cache
x-amz-id-1: 1JSEN7VXXXXXXXXX7XXXX
p3p: policyref="http://www.amazon.com/w3c/p3p.xml",CP="CAO DSP LAW CUR ADM IVAo IVDo CONo OTPo OUR DELi PUBi OTRi BUS PHY ONL UNI PUR FIN COM NAV INT DEM CNT STA HEA PRE LOC GOV OTC "
cache-control: no-cache
x-frame-options: SAMEORIGIN
expires: -1
x-amz-id-2: UclDghqX6sHTHg3CDZNAjT/wFZXXXXXXXXXXXXXXXXXXXXXXXuK1KrQsw4LgXf
Vary: Accept-Encoding,User-Agent
Content-Type: text/html; charset=ISO-8859-1
Transfer-Encoding: chunkedしかし、日本からアクセスすると、以下の様な画像が差し込まれている事がわかります。ということは、コンテンツを表示するサーバー側でユーザーの地理情報を元に差し込むコンテンツを切り替えているようですね。アマゾンの場合、JavaScriptで制御はしていませんでした。ブラウザの言語設定から日本語を消しても以下の画像が出てきました。
グローバルで展開しているサービスということでFacebookを見てみたいと思います。
facebook.comにアクセスすると、www.facebook.comに転送され、さらに、https://www.facebook.com/に転送されます。
$ curl -D head facebook.com
$ cat head
HTTP/1.1 301 explicit_header_response_code
Location: http://www.facebook.com/
Pragma: no-cache
Cache-Control: private, no-cache, no-store, must-revalidate
Expires: Sat, 01 Jan 2000 00:00:00 GMT
Content-Type: text/html; charset=utf-8
X-FB-Debug: ScXXXXXXXXXXXXXXXX/H6qINzTzzXXXXXXXXXXXXXXXX
Date: Sun, 18 May 2014 08:48:08 GMT
Connection: keep-alive
Content-Length: 0
$ curl -D head www.facebook.com
$ cat head
HTTP/1.1 301 Moved Permanently
Location: https://www.facebook.com/
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
P3P: CP="Facebook does not have a P3P policy. Learn why here: http://fb.me/p3p"
Pragma: no-cache
Cache-Control: private, no-cache, no-store, must-revalidate
Expires: Sat, 01 Jan 2000 00:00:00 GMT
Set-Cookie: datr=93N4U1XXXXXXXXXXq; expires=Tue, 17-May-2016 08:48:55 GMT; path=/; domain=.facebook.com; httponly
Content-Type: text/html; charset=utf-8
X-FB-Debug: i09c+YenGXXXXXXXXXXXrgyDXXXXXXXXXXXXXXXXXX
Date: Sun, 18 May 2014 08:48:55 GMT
Connection: keep-alive
Content-Length: 0アクセス元の地域を変えましたが、表示結果は変わりませんでした。次にブラウザの言語設定を変えたところ、表示が日本語から英語になりました。Facebookはサービスの特性上、地域はあまり関係ないようです。
グーグル
最後はグーグルの動作を確認します。
日本からアクセスしてみます。お、google.comにアクセスすると、www.google.co.jpに302転送されますね。
$ curl -D head google.com
<HTML><HEAD><meta http-equiv="content-type" content="text/html;charset=utf-8">
<TITLE>302 Moved</TITLE></HEAD><BODY>
<H1>302 Moved</H1>
The document has moved
<A HREF="http://www.google.co.jp/?gfe_rd=cr&ei=Ind4U53QLKWT8QeUuoDYCw">here</A>.
</BODY></HTML>
$ cat head
HTTP/1.1 302 Found
Cache-Control: private
Content-Type: text/html; charset=UTF-8
Location: http://www.google.co.jp/?gfe_rd=cr&ei=Ind4XXXXXXXXXXXXXX
Content-Length: 261
Date: Sun, 18 May 2014 09:02:26 GMT
Server: GFE/2.0
Alternate-Protocol: 80:quic次にアメリカからアクセスしてみます。google.comにアクセスすると、www.google.comに301転送されます。
$ curl -D head google.com
<HTML><HEAD><meta http-equiv="content-type" content="text/html;charset=utf-8">
<TITLE>301 Moved</TITLE></HEAD><BODY>
<H1>301 Moved</H1>
The document has moved
<A HREF="http://www.google.com/">here</A>.
</BODY></HTML>
$ cat head
HTTP/1.1 301 Moved Permanently
Location: http://www.google.com/
Content-Type: text/html; charset=UTF-8
Date: Sun, 18 May 2014 09:06:15 GMT
Expires: Tue, 17 Jun 2014 09:06:15 GMT
Cache-Control: public, max-age=2592000
Server: gws
Content-Length: 219
X-XSS-Protection: 1; mode=block
X-Frame-Options: SAMEORIGIN
Alternate-Protocol: 80:quicブラウザの言語設定を日本語から英語に変更すると、表示が英語になりました。グーグルは、アクセス元の地域と言語設定を両方見ていることが分かりましたね。
グローバル対応Webサイトの挙動まとめ
| 会社名 | ドメイン名 | ロケーション対応 | 言語切り替え対応 | 説明 | 理由（たぶん） |
|---|---|---|---|---|---|
| ユニクロ | uniqlo.com | ○ | ☓ | アクセスされた地域のローカルページを表示、言語切り替え無し | 全世界でほぼ同じ商品を売っているから、住んでいる人が買ってくれれば良い |
| 花王 | kao.com | △ | ○ | グローバルトップから使用している言語で切り替え、各地域のページを選択して表示 | 各国のサービスページで見せ方が大きく異なる |
| アマゾン | amazon.com | △ | ☓ | グローバルトップ無し、言語切り替え無し、各地域のページを選択して表示 | 自分でローカルページを巡回して商品を輸入したいとかあるよね |
| ファイスブック | facebook.com | ☓ | ○ | 全世界共通サービス、使用言語で表示切り替え | 世界はひとつ。旅行中にも使うから地域は関係ない。 |
| グーグル | google.com | ○ | ○ | グローバルトップぽく見せてローカルトップ表示、使用言語で表示切り替え | グローバルサービスだけど、広告はローカルだし。 |
まとめ
グローバル対応のWebサイトを作りたいと一言で言っても、その会社のビジネスが誰向けでどのような商品やサービスを提供したいのか/しているのかで実装の仕方が異なることがお分かり頂けたと思います。次回は、CloudFrontとRoute53を使ってグローバル対応Webサイトを構築してみたいと思います。
4
