こんにちは、ライターのマサトです！
今回は、JavaScriptからスマホの判定・有効化を行うための手法について学習をしていきます！
この記事では、
・JavaScript(スマホ)の基本
という初歩的な内容から、
・スマホの「判定」について
・スマホの「有効化」について
などの応用的な使い方に関しても解説していきます。
この記事で、スマホの判定・有効化についてしっかり学習して自分のスキルアップを目指しましょう！
JavaScript(スマホ)の基本
この章では、まず最初にスマホにおけるJavaScriptの基本的な知識を学習しましょう！
JavaScriptの役割や注意点について詳しく学びます。
スマホにおけるJavaScriptの役割について
まずは、JavaScriptがスマホにおいてどのような役割を果たしているのかを見ていきましょう。
基本的なHTMLのDOM操作などに関しては、PCとほぼ同じ役割を担っています。
しかし、スマホ独自の仕様でもっとも大きな特徴は、クリックではなくタッチ操作であるという点です。
そのため、タッチ処理に特化したイベント処理をJavaScriptで記述するようになります。
また、マルチメディアやアニメーションなどに関してもFlashなどが使えないという制約があります。
これは、CanvasやCSSなどをJavaScriptで制御することで、リッチなWebコンテンツを構築する役割を担っているわけです。
さらに、画面サイズに関してもスマホの機種によって千差万別なので、時にはコードで制御する必要も出てきます。
JavaScriptプログラミングの注意点
次に、スマホ向けを意識したプログラミングの注意点を見ていきましょう！
考える必要があるのは「スマホの機種によって環境が違う」という点です。
例えば、メモリの搭載量が極端に小さい機種、高速通信ができない機種、描画速度が遅い機種などがあります。
そのため、特定のスマホだけにフォーカスするか、幅広い機種に対応するのかで実装方法が変わるのです。
また、これらの差異を吸収し最適化された「jQuery」「Angular」「React」などの利用も検討が必要になるでしょう。
スマホの「判定」について
この章では、JavaScriptを使ってスマホでWebを利用しているかを判定する方法について見ていきましょう！
スマホからのアクセスなのかを判定する仕組み・手法について学びます。
スマホかどうかを判定する仕組みについて
まずは、判定方法の仕組みから見ていきましょう！
ブラウザは「ユーザーエージェント」というデータを保持しており、この中にユーザー固有の情報が格納されています。
この情報を利用することで、アクセスしてきたユーザーのブラウザ種類やスマホデバイスを判定できるのです。
JavaScriptからユーザーエージェントにアクセスするには、「Navigator」オブジェクトを使います。
var ua = navigator.userAgent; console.log( ua );
Mozilla/5.0 (Linux; Android 8.0.0・・・・・
「navigator.userAgent」と記述することで、ユーザーエージェントの情報をすべて文字列で取得できます。
実行結果のようにデバイス情報やブラウザの種別などが明記された文字列が表示されます。
つまり、この情報を活用することでスマホからのアクセスなのかを判定できるというわけです。
JavaScriptでスマホを判定する方法
それでは、実際にJavaScriptから判定する処理を作っていきましょう！
まず最初に、取得したユーザーエージェントが文字列のままだと扱いづらいので種類別に整理します。
例えば、iPhoneユーザーかどうかを確認するには次のようにします。
var iphone = ua.indexOf('iPhone') > 0;
この例では、「indexOf()」を使って文字列のなかに「iPhone」という文字があれば「true」を返します。
同じ要領で、判定したいデバイスをそれぞれチェックします。
var ua = navigator.userAgent;
var iphone = ua.indexOf('iPhone') > 0;
var androidSp = ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0;
var ipad = ua.indexOf('iPad');
var androidT = ua.indexOf('Android');
注意点として、Androidスマホの場合は「Mobile」という文字列が一緒記述されているかを確認する必要があります。
もし無ければ、Androidタブレットという意味になるので注意しておきましょう！
あとは、IF文でデバイスを振り分ければ完成です！
if( iphone || androidSp ){
console.log('スマホです！');
}else if( ipad || androidT ) {
console.log('タブレットです！');
}
今回は「console.log()」を利用していますが、例えばスマホのみ別のページに画面遷移させる処理も簡単ですね。
スマホの「有効化」について
この章では、スマホからJavaScriptを有効化するための方法について見ていきましょう！
iOS / Androidそれぞれのブラウザにおける有効化手順について学びます。
iOSブラウザでJavaScriptを有効化する方法
まずは、iOS標準ブラウザの「Safari」について見ていきましょう！
JavaScriptを有効化するためには、最初に「設定」アプリを起動してから以下の手順を実行します。
１、「設定」アプリを起動する
２、「Safari」の項目をタップ
３、「詳細」をタップ
４、「JavaScript」をONにする
この操作により、「Safari」ブラウザのJavaScriptは有効化されます。
「Safari」アプリ自体には有効化のオプションが無いという点に注意しておきいましょう。
また、画像付きで詳しい手順を以下の記事でまとめているので、こちらも合わせて参考にしてみてください！
AndroidブラウザでJavaScriptを有効化する方法
次に、Android標準ブラウザについて見ていきましょう。
Androidの場合は、アプリ自体に有効化の手順が可能なオプションが用意されているのが特徴です。
手順としては次の通りです！
１、「標準ブラウザ」を起動する
２、「詳細設定」をタップする
３、「JavaScript」の項目をONにする
この操作により、「標準ブラウザ」のJavaScriptは有効化されます。
注意点としては、Androidデバイスの種類により若干オプションの名称が異なるという点です。
次の記事では詳細な画像を付けて設定手順を紹介しているので、こちらも合わせてご覧ください！
まとめ
今回は、JavaScriptによるスマホの判定・有効化について学習をしました！
最後に、もう一度ポイントをおさらいしておきましょう！
・スマホの種類によってJavaScriptの実装が変化することがある
・「ユーザーエージェント」の情報を活用することでスマホの判定が可能
・オプションの設定によりJavaScriptの有効化ができる
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
