ピックアップ2019.11.07「Modernizr」とは、ブラウザ機能のサポート状況に合わせたコードを書く時に便利なJavaScriptライブラリです。Webサイト制作では、IEをはじめとした各ブラウザにおいて、閲覧時に意図した表示がなされているように作る必要があります。確認することができますが、幅広いブラウザに対応しようと思うと調べるだけで時間がかかります。「Modernizr」はそんな手間のかかるブラウザ対応を簡単にすることができます。作業時間の短縮のためにModernizrとはhttps://modernizr.com/「Modernizr」とはJavaScriptライブラリの1つです。閲覧に使用しているブラウザで使用可能なCSSプロパティなどを確認することができ、その結果をHTMLタグにクラスとして追加してくれます。JavaScript側ではModernizrオブジェクトを生成してくれるので、JavaScriptでコントロールすることも可能です。会員限定の特別コンテンツ記事を最後まで読むことができます!その他、更新情報・イベント情報をお届けいたします。無料会員登録するTwitterで確認するFacebookで確認するModernizrをダウンロードhttps://modernizr.com/「Modernizr」は上記サイトよりライブラリがダウンロードできます。build」のいずれかをクリックするか、メニューの「DOWNLOAD」をクリックでライブラリのダウンロードページへ移動できます。build」を選択するとほぼ全てのチェックが入った状態になるので楽に入手できます。detects」やメニューの「DOWNLOAD」からの場合には、チェックが何もついていない状態です。自分でチェック項目を選択して設定するので、公開時には関係のない機能、チェック不要な機能についてのコードを減らしてサイトを高速化したい時に活用できます。チェック項目を選択後は、右上の「BUILD」をクリックするとダウンロードリンクが表示されるので、そこからライブラリをダウンロードしましょう。ライブラリの読み込みライブラリをダウンロードしたら、「modernizr-custom.js」のようなファイルを入手できるので、上記のようにライブラリを読み込みます。HTMLタグを確認する読み込みのコードを追加したら、ブラウザでHTMLを表示して開発者ツールで確認すると上の画像のようにHTMLへクラスが追加されているのが確認できます。画像のクラスを確認すると下記のようなクラスが多数追加されているのが確認できます。applicationcachesvgaudiocanvasvideowebglmultiplebgsopacityrgbacsscalcsrcsetobject-fitborderradiuscsstransforms3dboxsizingcssgridflexboxこれらHTML5やCSS3で追加された機能は、現在では大部分がブラウザ側でサポートされていますが完全ではありません。IE11を例にあげると、srcsetは未対応状態であり、flexboxについてもspace-evenlyという一部のCSSでの指定が未対応といった状態です。HTML5についてはこちら、CSS3についてはこちらの記事で取り扱っています。「Modernizr」はこのように、閲覧環境に応じてクラスを追加し、使用できない機能やプロパティに関しては「no-(プロパティ名)」といった命名でクラスを追加してくれます。Chrome環境では「srcset」だったクラスがIE11環境では「no-srcset」のように追加されます。CSSでの使用方法CSSで使用する時には追加されたクラスを利用して通常通りコードを書いていきます。今回は画像の表示に便利なobject-fitを例にしてみます。object-fitは、imgタグなどで表示させた画像を、CSSのbackgroundのように比を維持させつつ、pxを指定しトリミングして扱うことができるのでとても便利なプロパティです。IE11では対応しておらず、対応させるために「object-fit-images」のようなjsを必要とします。Chromeで閲覧時のHTMLです。Chromeではobject-fitが使用できることが確認できます。use...で「object-fit」を確認するとChromeでサポートされているのが確認できるかと思います。逆にIE11はサポートされていません。上の画像はIE11で確認した時のHTMLです。use...でサポートされていないと表示のあった通り、object-fitが使用できず、Modernizrによってクラス名「no-object-fit」が追加されているのが確認できるかと思います。Chromeでは「object-fit」の文字が緑、IE11では赤になっています。このように、ブラウザの対応状況に合わせて、HTMLのクラス名で対応できるようになります。JavaScriptでの使用方法JavaScriptでは生成されたModernizrオブジェクトを利用して対応することが可能です。else文で書くことで、対応している場合、対応していない場合の処理を記述することができます。「object-fit」はここでは「objectfit」とハイフン無しになっていますが、プロパティ毎の書き方に関してはModernizrダウンロードページの画面で確認することができます。examples」とあるのでクリックします。するとCSSとJavSscriptでの記述例が表示されるので参考にすることができます。作業時間の短縮のためにITやWebの環境は常に変化していくため、環境毎の対応を考えると大変です。「Modernizr」を使うことで、「ブラウザ」毎にメディアクエリを細かく書くような対応ではなく、「機能」毎にまとめて対応という手段を取ることができます。幅広い閲覧環境へ対応する場合に、使用してみてはいかがでしょうか。マーケティングでお悩みでしたら、Bigmacにお任せください。最新記事ykykプラモデル中心に基本何か作ることを好み、その為の手段や工具を求めて動くのが基本方針のインドア趣味マン。クラウドファンディングのガジェット関連プロジェクトを調べるのが楽しみ。