WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： マークアップ >マルチデバイス

iOS 13とiPad OSがリリースされ、だいぶ月日が経ちました。
そんな中、Javascriptでユーザーエージェントの情報をもとにiPad専用の処理を記述していたところ、その記述がiPad OSでは効果がないことに気づきました…！
では、どうすればユーザーエージェントの判定に対応できるのか解説していきます。

iPadの記述が判定できるのはiOS 12まで

タイトルの通り、iOS 12まではユーザーエージェントの判定式で【ua.indexOf(‘iPad’)】を使用できていましたが、iPad OSが搭載されているiPadでは判定に引っかかりません。
同じiPadなのになぜ引っかからないのか？それはiPad OSではユーザーエージェントが、【Macintosh】になっているからです。
ではでは、さらに詳細に解説していきます。

最新版ユーザーエージェント一覧

下記の中で注目してもらいたいのは、【iPad OS13(デスクトップ用Webサイトを表示:On設定時)】と【iPad OS13(デスクトップ用Webサイトを表示:Off設定時)】のユーザーエージェントです。

[Safari on iPhone + iOS 13]
Mozilla/5.0 (iPhone; CPU iPhone OS 13_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Mobile/15E148 Safari/604.1

[Safari on iPad + iOS 12]
Mozilla/5.0 (iPad; CPU OS 12_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1

[Safari on iPad + iPad OS13(デスクトップ用Webサイトを表示:On設定時)]
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Safari/605.1.15

[Safari on iPad + iPad OS13(デスクトップ用Webサイトを表示:Off設定時)]
Mozilla/5.0 (iPad; CPU OS 13_1_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.1 Mobile/15E148 Safari/604.1

これは、iOS 13以降にアップデートされたiPad(iPad OS13)において、Safariの設定に「デスクトップ用Webサイトを表示」という機能が追加になりました。
iPad OS13では、Safariの設定がデフォルトで「デスクトップ用Webサイトを表示」がオンになっているため、ユーザーエージェントの判定が【Macintosh】に引っかかるということです。
デスクトップ用Webサイトを表示:Off設定時であれば今まで通りと変わらないため、ユーザーエージェントはiPadのままです。

iPad OS対応ユーザーエージェント記述方法

			var agent = window.navigator.userAgent.toLowerCase();
			var ipad = agent.indexOf('ipad') > -1 || agent.indexOf('macintosh') > -1 && 'ontouchend' in document;
			if(ipad == true){
				alert("見てる端末はiPadです。");
			}else{
				alert("見てる端末はiPad以外です。");
			}

記述内容の解説をしていきます
■一行目
var agent = window.navigator.userAgent.toLowerCase();

まず使用しているブラウザを判定したいので、window.navigator.userAgent.toLowerCase();で取得をします。
それを変数agentに代入します。

■二行目
var ipad = agent.indexOf(‘ipad’) > -1 || agent.indexOf(‘macintosh’) > -1 && ‘ontouchend’ in document;

変数agentに「ipad」という文字列が存在する、または、変数agentに「macintosh」という文字列が存在する。かつタッチが有効なデバイス。
ontouchendはタッチスクリーンから指を離した時に発火します。
これはスマホとタブレットに加えタッチスクリーンのPCでもtrueになりますが、MacはタッチスクリーンのPCではないのでfalseになります。

■三行目
条件分岐で、アラート表示。
こちらは適宜ユーザーエージェントを取得したあとに実行したい処理を記述してください。

これで、iPad OSにも対応したユーザーエージェントの判定が可能になります。

まとめ

新しい端末や機能が増えることで今まで使えていたものが使えなくなることがあります。
よく調べて、本当に使用できるものか判断してサイト構築時に活用していきましょう。