HTMLとJavaScriptでブラウザの機能を検出する方法(Modernizrの使い方)
はじめに:なぜ機能検出が必要なのか
Web開発では、ユーザーが使用しているブラウザによって、利用できるHTML5やCSS3の機能が異なります。古いブラウザでは音声再生やCanvasなどの最新機能がサポートされていない場合があり、そのままコードを実行するとエラーが発生してしまう可能性があります。
そこで重要になるのが「機能検出(Feature Detection)」です。特定のブラウザ名やバージョンを判定するのではなく、「そのブラウザが目的の機能をサポートしているかどうか」を直接確認することで、すべての環境で安定した動作を実現できます。
Modernizrとは
Modernizrは、ブラウザがHTML5やCSS3の各種機能をサポートしているかどうかを簡単に検出できるJavaScriptライブラリです。HTML側でModernizrを読み込んでおくだけで、Modernizr.機能名という形式でプロパティを参照し、サポート状況を真偽値(true / false)として取得できます。
導入手順
- Modernizr公式サイトから必要な機能だけを選択してライブラリをダウンロードします。
- ダウンロードしたファイルをHTMLの
<head>内で読み込みます。 - JavaScriptから
Modernizrオブジェクトを使って機能の有無を判定します。
<script src="js/modernizr.min.js"></script>
実装例:音声(audio)機能の検出
以下は、Modernizrを使ってブラウザがaudio要素(音声再生)をサポートしているかどうかを判定する基本的なコード例です。
if (Modernizr.audio) {
/* 音声をサポートしているブラウザ向けの処理 */
} else {
/* 音声をサポートしていないブラウザ向けの代替処理 */
}
コードの解説
if (Modernizr.audio):ブラウザがaudio機能をサポートしていればtrueとなり、if文の中の処理が実行されます。ここでは<audio>タグによる音声再生などを行います。elseブロック:音声非対応のブラウザの場合に実行される処理を記述します。例えば、Flashプレイヤーへのフォールバックや、音声なしでもコンテンツが成立するようテキスト情報を表示するなどの対応が考えられます。
その他の主な検出可能な機能
Modernizrはaudio以外にも多くの機能を検出できます。代表的なものは以下の通りです。
| プロパティ | 検出対象の機能 |
|---|---|
Modernizr.canvas | Canvas描画 |
Modernizr.video | 動画(video要素)再生 |
Modernizr.geolocation | 位置情報(Geolocation API) |
Modernizr.localstorage | ローカルストレージ |
Modernizr.touch | タッチイベント対応 |
Modernizr.webgl | WebGL(3Dグラフィックス) |
まとめ
Modernizrを利用すれば、わずか数行のコードでブラウザの機能サポート状況を判定でき、環境ごとに適切な処理へ分岐させることができます。ユーザーエージェント(UA)による判定と違い、実際の機能の有無を確認するため信頼性が高く、メンテナンス性にも優れています。クロスブラウザ対応を行う際には、ぜひ機能検出の手法を取り入れてみてください。
-
JavaScriptで画面解像度を検出する方法を解説！window.screenの使い方
はじめにWebアプリケーションを開発する際、ユーザーの画面解像度（スクリーンサイズ）を検出したいケースは多くあります。例えば、レスポンシブデザインの調整や、表示領域に応じたコンテンツの出し分けなどが挙げられます。JavaScriptでは、window.screenオブジェクトを使うことで、簡単に画面の解像度情報を取得できます。この記事では、その具体的な方法をサンプルコードとともにわかりやすく解説します。window.screenオブジェクトとはwindow.screenは、ユーザーが使用しているディスプレイ（画面）に関する情報を保持しているオブジェクトです。このオブジェクトのプロパティを参照す
-
Android WebViewでJavaScriptを使ってHTMLボタンのクリックを検出する方法
この記事では、AndroidアプリのWebViewに表示したHTMLページ内のボタンがクリックされたことを、JavaScriptインターフェースを介してネイティブ側で検出する方法を解説します。 WebView上のHTMLとAndroidアプリは、addJavascriptInterface()を使うことで相互に連携できます。HTML側のボタンクリックイベントをJava側のメソッドで受け取り、Toastでメッセージを表示するまでの流れを、手順を追って見ていきましょう。 ステップ1：新しいプロジェクトを作成する Android Studioを起動し、メニューから「File」→「New Projec