【JavaScript入門】スマホの判定・有効化を行う方法まとめ!

こんにちは、ライターのマサトです!

今回は、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を有効化するためには、最初に「設定」アプリを起動してから以下の手順を実行します。

1、「設定」アプリを起動する
2、「Safari」の項目をタップ
3、「詳細」をタップ
4、「JavaScript」をONにする

この操作により、「Safari」ブラウザのJavaScriptは有効化されます。

「Safari」アプリ自体には有効化のオプションが無いという点に注意しておきいましょう。

また、画像付きで詳しい手順を以下の記事でまとめているので、こちらも合わせて参考にしてみてください!

JavaScriptを有効にするには?主要ブラウザでの手順を徹底解説!
更新日 : 2020年6月9日

AndroidブラウザでJavaScriptを有効化する方法

次に、Android標準ブラウザについて見ていきましょう。

Androidの場合は、アプリ自体に有効化の手順が可能なオプションが用意されているのが特徴です。

手順としては次の通りです!

1、「標準ブラウザ」を起動する
2、「詳細設定」をタップする
3、「JavaScript」の項目をONにする

この操作により、「標準ブラウザ」のJavaScriptは有効化されます。

注意点としては、Androidデバイスの種類により若干オプションの名称が異なるという点です。

次の記事では詳細な画像を付けて設定手順を紹介しているので、こちらも合わせてご覧ください!

JavaScriptを有効にするには?主要ブラウザでの手順を徹底解説!
更新日 : 2020年6月9日

まとめ

今回は、JavaScriptによるスマホの判定・有効化について学習をしました!

最後に、もう一度ポイントをおさらいしておきましょう!

・スマホの種類によってJavaScriptの実装が変化することがある
・「ユーザーエージェント」の情報を活用することでスマホの判定が可能
・オプションの設定によりJavaScriptの有効化ができる

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

マサト

フリーランスのIT系ライターを10年従事する兵庫県出身の40歳。侍ブログ編集部としては、これまで270記事以上を執筆。
30歳を過ぎてから独学でJavaScript, Node.js, Linuxを習得した経験を活かし、初心者が迷わない記事作成を意識しながらプログラミングの楽しさを知ってもらうために活動しています。趣味はキャンプと登山です。

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー