[新機能] Amazon CloudFrontでモバイル端末を判定できるようになりました

はじめに

CloudFrontに大規模アップデートがやってきました！

• Amazon CloudFront Adds Device Detection, Geo Targeting, Host Header Forwarding, CORS Support, and more!

この中で僕が最も注目したいのはMobile Device Detectionです。この新機能によって何が出来るようになったのかをご紹介します！

これまでの課題

一般的に、Webサイトをマルチデバイス対応する際には、HTTPヘッダのUser-Agentを見て表示コンテンツを振り分けすることが多いかと思います。例えば僕の手もとにあるMacBook Air + Google Chromeであれば

• User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36

となりますし、Androidのブラウザでは

• Mozilla/5.0 (Linux; U; Android 4.1.2; ja-jp; SC-05D Build/JZO54K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

となります。しかし、CloudFrontを経由した際、一律で

• Amazon CloudFront

と書き換えられてしまうため、「CloudFrontを経由した構成ではUserAgentによる表示コンテンツ振り分けが出来ない」という課題がありました。

新機能として追加されたこと

今回の新機能では、以下の3つのカスタムヘッダが追加されました。

設定してみる

CloudFrontの「Default Cache Behavior Settings」に「Forward Headers」という項目が増えました。ここでWhitelistかAllを選択します。

 

Whitelistの場合は転送したいHTTPヘッダを指定することになります。今回使いたいCloudFront-Is-xxxの3つのヘッダを選択してAddボタンをクリックし、転送対象に追加します。

↓

動作を確認してみた

PC版Google Chrome

• CloudFront-Is-Desktop-Viewer: true
• CloudFront-Is-Mobile-Viewer: false
• CloudFront-Is-Tablet-Viewer: false

Android ブラウザ

• CloudFront-Is-Desktop-Viewer: false
• CloudFront-Is-Mobile-Viewer: true
• CloudFront-Is-Tablet-Viewer: false

iPhone Safari

• CloudFront-Is-Desktop-Viewer: false
• CloudFront-Is-Mobile-Viewer: true
• CloudFront-Is-Tablet-Viewer: false

DoCoMo P-03C (iモード)

• CloudFront-Is-Desktop-Viewer: false
• CloudFront-Is-Mobile-Viewer: true
• CloudFront-Is-Tablet-Viewer: false

( ﾟДﾟ)ﾊｯ！ ちゃんとMobileとして判定されています！スマートフォンとフィーチャーフォンが同じくMobileとして判定されますので、表示したいコンテンツを分けたい場合にはもう一工夫必要になりますね。

ちなみに

Custom欄に直接「User-Agent」と入れることで、User-Agentをスルーすることも出来ます。が、以下のような警告が出ます。

 

Some headers have a lot of possible values, and caching based on the values in these headers would cause CloudFront to forward more requests to your origin. We recommend that you do not cache based on the following headers: User-Agent

User-Agentのようなパターンが様々なHTTPヘッダをスルーしてしまうとキャッシュ効率が悪くなるとのこと。CloudFront-Is-xxxを使うほうが効率的にキャッシュを活かしつつマルチデバイス対応が出来るようです。

まとめ

今回のアップデートによって、マルチデバイス対応がネックになってCloudFrontが導入出来ないようなケースが解消されるようになりました。これは大きなアップデートだと思います！