JavaScriptでiPhoneを特定→CSSを変更。

ブラウザではなく「iPhone」を特定。

こんにちは、「ふ」です。

webページをコーディングする際、各種ブラウザや画面幅への対応は常についてまわる問題です。
完成したコードを各ブラウザでプレビューしたとき、


「Chromeやedgeではちゃんと動くのに、safariが....」

「というか、iPhoneのブラウザで動かない、レイアウトが崩れる！」


といった経験はないでしょうか。

iOSのブラウザの挙動は以前よりは安定してきたものの、やはり今でも「webページをアップロードするぞ！」といったときに足止めをくらってしまうことがあります。
現在、特に国内において、iPhoneのシェアを無視することはできません。そこで今回は

・userAgentを使いデバイスの情報を取得→
・iPhoneを特定→
・そのときだけ、CSSを変更させる

方法について紹介します。

userAgentでデバイス情報を検出。

navigator.userAgent

ブラウザが開かれているデバイスを判別するには、navigatorオブジェクトに含まれる、userAgentプロパティを調べます。
navigatorオブジェクトはブラウザに関する情報が入っているオブジェクトなのですが、その中のuserAgentプロパティには、使用しているOSやデバイスの文字列が含まれていることが多々あります。

<p id = "agent"></p>

試しに出力してみましょう。
iPhoneなどではconsoleを開けない(？)ので、<p id = "agent">とし、要素内のテキストとして出すようにしました。

const agent = document.getElementById("agent");
agent.innerText = navigator.userAgent;

userAgentプロパティを出力すると、デバイスやOSによって表示される内容が違ってきます。

「「１//MacのChromeで出力」」
「「３ ▶︎ Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36」」

⬆︎はMacのChromeで出力したときの、userAgentです。
「Mac」の文字列が含まれていますね。

「「１//iPhoneのsafariで出力」」
「「３ ▶︎ Mozilla/5.0 (iPhone; CPU iPhone OS 16_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.4 Mobile/15E148 Safari/604.1」」

iPhoneのsafariで出力してみました。「iPhone」の文字列が含まれています。



デバイスによってuserAgentで出力される内容が変わってくることがわかりました。
これって逆に考えれば、userAgentに特定の文字列が含まれているかを判定することでデバイスの特定が可能ということになります。

うんちゃらかんちゃら「「１iPhone」」なんたらかんたら

わかりやすいことに、iPhoneのuserAgentにはそのまま「iPhone」の文字列が含まれています。これを手掛かりに、デバイスを特定してみましょう。

macthメソッドでiPhoneを特定。

文字列.match（パターン);

JavaScriptのmatch( )メソッドは、テキストの中に指定した文字列のパターンがあればそれを返します。

let str = "りんごみかん";
console.log(str.match("りんご"));
「「３▶︎ りんご」」

⬆︎の例では"りんごみかん"という文字列に対して"りんご"というパターンがあれば、マッチしたものを返してきます。
ここではパターンが存在したので、true/falseで言えば「truthy（真っぽい）」だと言えます。

console.log(str.match("ぶどう"));
「「３▶︎ null」」

パターンがない場合には、nullが返ります。
true/falseで言うと「falsy（偽っぽい）」ですね。


macth( )メソッドは真偽値をそのまま返すわけではないものの、この性質を利用してuserAgentの判別を行うことができます。JavaScriptのif文は、純粋な「true」「false」だけでなく、該当する値が「存在する」「存在しない」ということに関しても、条件分岐をしてくれます。

if(navigator.userAgent.match("iPhone")) {
    「「３//処理」」
}

⬆︎のようにすれば、userAgentに"iPhone"の文字列パターンが含まれていれば「条件に当てはまる」、含まれなければ「当てはまらない」として処理が進められます。

navigator.userAgent.match(/iPhone/)

正規表現を使いたい方はもちろん⬆︎のようにしても構いません。

CSSをまとめて変更。

「デバイスがiPhoneだったとき」を特定することができるようになりました。
サンプルを用意して、CSSを変更してみましょう。

<div id = "soto">
<p id = "naka1">なかみ１</p>
<p id = "naka2">なかみ２</p>
</div>

親要素を「#soto」、その中に「#naka1」と「#naka2」、子要素を2つ入れています。

iPhoneが特定された場合には、CSSを変更するようにしましょう。
方法としては、変更後のCSSを用意しておき、そのclassNameを要素に追加することとしました。その場合「変更後のCSS」は以下のように記述しておくと効率的です。

「「３/* 追加するclass名を「tuika」とします */」」
.tuika #naka1 {color:forestgreeen;}
.tuika #naka2 {color:coral;}

追加するclass名を「tuika」としたとき、このようにセレクタを階層的に記述しておけば、親要素に「.tuika」を追加するだけで子要素も変更することができます。

それではJavaScript。

「「３//親要素の「.soto」を取得」」
const soto = document.getElementById("soto");

「「３//デバイスがiPhoneなら」」
if(navigator.userAgent.match(/iPhone/)) {
        「「３//class「tuika」を追加」」
        soto.classList.add("tuika");
}

コードもごく単純です。実際に、異なるデバイスで実行してみましょう。

■ Mac(Chrome)


MacのChromeで開いたもの⬆︎。
CSSは適用されていません。

■ iPhone（Safari）


一方、iPhoneのSafariで開くと、ちゃんとCSSが適用されていました。
成功です。おつかれさまでした！

奥の手として使おう。

最後までお読みくださり、ありがとうございました。

実は今回「ふ」は、サイトデザインのリニューアルに取り組んでいたのですが、ちょっと複雑なことをし過ぎたせいか、iPhoneがまったく言うことをきいてくれない、と言う状況に陥っていました。
そんなとき思いついたのが、ブラウザではなくデバイスを特定して処理をする、と言う方法です。

みなさんにも奥の手としてこの「iPhone特定処理」を知っておいてほしいと思い、記事にすることにしました。 実際の場面では、「レスポンシブ指定してもうまくいかない」ときなど、レイアウトに使用することが多いかと思います。またCSSの書き換えだけでなく、デバイスを特定して色々なことができそうですね。ではまた〜 ♪