[小ネタ] iPhoneのデスクトップ用サイト表示機能はAmazon CloudFrontでどのように判定されるのか確認してみた

iPhoneの各ブラウザではデスクトップ用サイトを表示する機能がありますが、この機能を有効化したときにAmazon CloudFrontでデスクトップデバイスと判定されるのか、それともモバイルデバイスのままなのか、実際に確認してみました。

#Amazon CloudFront

#AWS

清水俊也

2018.11.02

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

はじめに

清水です。Amazon CloudFrontにはデバイス判定機能があり、デバイスごとに異なるレスポンスを返すために使用できます。（正確にはデバイスタイプに基づいてオブジェクトをキャッシュすることができます。）今回このデバイス判定機能がスマートフォン（iPhone）のデスクトップ用サイト表示機能を有効化したときにどのようにデバイスを判別するのか、確認する機会がありましたのでまとめてみたいと思います。

なお、結果だけ先にまとめると、iPhoneのデスクトップ用サイト表示機能を有効化するとAmazon CloudFrontのデバイス判定としてはDesktopと判定される、という結果になりました。

Amazon CloudFrontのデバイス判定

Amazon CloudFrontでは、User-Agentヘッダの値に基づいて以下のカスタムヘッダにtrueまたはfalseの文字列が設定されます。CloudFront側で該当ヘッダをオリジンに転送するよう設定し、オリジン側でこのカスタムヘッダを参照することでアクセス元のデバイスを判定することができます。

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

User-Agentヘッダをオリジンに転送、オリジン側でUser-Agentヘッダの値からデバイス判定することも可能ではありますが、様々なUser-Agentがあるためキャッシュヒット率の低下につながります。

スマートフォンのデスクトップ用サイト表示機能

スマートフォンにはデスクトップ用サイト表示用の機能が備わっており、表示サイズが小さくなりながらもスマートフォン用の表示ではなくPC用の表示を見ることができます。（もちろんサイト側が対応している必要はありますが。）例えばiPhoneのSafariではアドレスバー右側の再読込ボタンを長押しすると「デスクトップ用サイトを表示」ボタンが現れ、デスクトップ用サイト表示を確認できます。以下はYahoo!のサイトで確認してみた例です。

通常のスマートフォン用表示でアドレスバー右側の再読込ボタンを長押し、「デスクトップ用サイトを表示」ボタンが現れます	デスクトップ用サイト表示機能を有効化させたところ。表示サイズは小さいながらもPC用の表示で閲覧ができています

確認する環境の構築

CloudFrontのデバイス判定、そしてスマートフォンのデスクトップ用サイト表示機能を抑えたところで、本題となるこのデスクトップ用サイト表示機能を有効化したときにCloudFrontがどのようにデバイスを判定するのか、確認をしていきます。と、まずは確認の前に動作させる環境を構築します。今回はCloudFront-ELB-EC2の以下のイメージの環境を準備しました。

CloudFrontではBehaviorの設定で以下のように、すべてのヘッダを転送するように設定しておきます。（今回は確認のためすべてのヘッダを転送するよう設定しましたが、デバイス判定だけならCloudFront-Is-*-Viewerの必要なヘッダのみオリジンに転送すれば実現できます。）

またオリジン側ではEC2にApache+PHPをインストールし、以下のコードでオリジン側で受け取ったヘッダをすべて出力するようにしました。（``

``タグの出力は整形用です。）

<?php

foreach (getallheaders() as $name => $value) {
    echo "<p>";
    echo "$name: $value\n";
    echo "</p>";
}

?>

実際に確認してみた

では実際に確認してみたいと思います。環境はiPhone XS/iOS 12.0で行い、Safari、Chrome、Firefoxのそれぞれでデスクトップ用サイト表示機能の有無を確認してみました。以下にそれぞれのブラウザでの画面キャプチャをまとめますが、結果としては今回確認してみたいずれのブラウザでも、以下のように判定されました。

スマホのブラウザで表示した場合（通常の場合）
CloudFront-Is-Mobile-Viewer: true
CloudFront-Is-Desktop-Viewer: false
デスクトップ用サイト表示機能を有効にした場合
CloudFront-Is-Mobile-Viewer: false
CloudFront-Is-Desktop-Viewer: true

また興味深い点としては、デスクトップ用サイト表示機能を有効にし場合はUser-Agentが「Macintosh; Intel Mac OS X 10_1?_?」とmacOS扱いとなる点ですね。CloudFrontではこのUser−Agentヘッダを見てmacOSと判定しMobileではなくDesktopデバイスとして扱っているかと推測できます。

Safari

Safariでは先に述べた通り、アドレスバー右側の再読込ボタンを長押しすると「デスクトップ用サイトを表示」ボタンが現れ、このボタンからデスクトップ用サイトを表示することができます。

Safariで通常表示させた状態	Safariでデスクトップ用サイトを表示させた場合

Chrome

Chromeでは右下のメニュー（…）から「PC版サイトをリクエスト」を選択することで、デスクトップ用表示に切り替えることができます。

Chromeで通常表示させた状態	ChromeでPC版サイトをリクエストした状態

Firefox

Firefoxではアドレスバー右側のメニュー（…）から「PCサイトモード」を選択することで、デスクトップ用表示に切り替えることができます。

Firefoxで通常表示させた状態	FirefoxでPCサイトモードで表示させた状態

まとめ

iPhoneのデスクトップ用サイト表示機能を有効化した場合、Amazon CloudFrontのデバイス判定機能はどのデバイスとして判定するのかを確認してみました。iPhone XS/iOS 12.0上のSafari、Chrome、Firefoxの3種のブラウザで確認したところ、いずれのブラウザでもモバイル端末ではなくデスクトップ端末と判定されていることがわかりました。スマートフォン用には専用のページを表示したいけど、ユーザがデスクトップ用サイト表示機能を使用した場合にはデスクトップ用のページを表示させたい、という場合にも、Amazon CloudFrontのデバイス判定用ヘッダが活用できそうですね。