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

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

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

この中で僕が最も注目したいのは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-Is-Mobile-Viewer
  • CloudFront-Is-Tablet-Viewer
  • CloudFront-Is-Desktop-Viewer

このヘッダには、元のUser-Agentヘッダから判定しそれぞれtruefalseがセットされます。つまりこのヘッダを見ることで表示コンテンツを振り分けが出来るようになるんです!

設定してみる

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

cfn01

 

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

cnf02

cnf03

動作を確認してみた

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

DSC_0036

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

ちなみに

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

cfn05

 

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が導入出来ないようなケースが解消されるようになりました。これは大きなアップデートだと思います!