LoginSignup
11

More than 5 years have passed since last update.

CloudFrontでモバイル端末を判別する

Posted at

サーバー側で User-Agent を見て端末を判別するとキャッシュ効率が落ちるので、代わりに下記の4つのHTTPヘッダをWhitelistに入れると、判別済みの情報が送られてきます。

  • CloudFront-Is-Desktop-Viewer
  • CloudFront-Is-Mobile-Viewer
  • CloudFront-Is-SmartTV-Viewer
  • CloudFront-Is-Tablet-Viewer

これらの動作を調べてみました。

iOSスマートフォン (iPhone)

User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 9_3_2 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13F69 Safari/601.1

Desktop Mobile SmartTV Tablet
false true false false

iOSタブレット (iPad)

User-Agent: Mozilla/5.0 (iPad; CPU OS 9_3_2 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13F69 Safari/601.1

Desktop Mobile SmartTV Tablet
false true false true

MobileとTablet両方trueになる

Mac (Firefox)

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:54.0) Gecko/20100101 Firefox/54.0

Desktop Mobile SmartTV Tablet
true false false false

Androidスマートフォン (Nexus 5X)

User-Agent: Mozilla/5.0 (Linux; Android 7.1.1; Nexus 5X Build/N4F26I) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.91 Mobile Safari/537.36

Desktop Mobile SmartTV Tablet
false true false false

Androidタブレット (Nexus 7)

User-Agent: Mozilla/5.0 (Linux; Android 6.0.1; Nexus 7 Build/MMB29O) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.91 Safari/537.36

Desktop Mobile SmartTV Tablet
false true false true

ちゃんとスマートフォンとタブレット判別できてる!

Fire TV

User-Agent: Mozilla/5.0 (Linux; U; Android 4.2.2; en-us; AFTB Build/JDQ39) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

Desktop Mobile SmartTV Tablet
false false true false

検証に用いたソースコード

PHPで殴り書きしました。

<?php
echo($_SERVER['HTTP_CLOUDFRONT_IS_DESKTOP_VIEWER']);
echo($_SERVER['HTTP_CLOUDFRONT_IS_MOBILE_VIEWER']);
echo($_SERVER['HTTP_CLOUDFRONT_IS_SMARTTV_VIEWER']);
echo($_SERVER['HTTP_CLOUDFRONT_IS_TABLET_VIEWER']);

参考文献

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11