JavaScriptで、ブラウザやIEのバージョン別で処理をする

UserAgentの文字列を元にブラウザを判定する方法になります。

今後UserAgentの値が変更される可能性もありますので絶対安心できる方法ではありません。

	//UserAgentで判定をする
    var ua = window.navigator.userAgent.toLowerCase();
    var av = window.navigator.appVersion.toLowerCase();

    if (ua.indexOf('msie') != -1) {
        if (av.indexOf("msie 6.") != -1) {
            //IE6の処理
        }else if (av.indexOf("msie 7.") != -1) {
            //IE7の処理
        }else if (av.indexOf("msie 8.") != -1) {
            //IE8の処理
        }else if (av.indexOf("msie 9.") != -1) {
            //IE9の処理
        }
    }else if (ua.indexOf('chrome') != -1) {
        //Chrome/Operaの処理
    }else if (ua.indexOf('safari') != -1) {
        //Safariの処理
    }else if (ua.indexOf('firefox') != -1) {
        //Firefoxの処理
    }

Chrome、Firefox、SafariのCSSハック

IEの古いバージョンのみのハックの利用は多いですが、稀にChromeのみ、Firefoxのみ、Safariのみ等でCSSを適用させないといけないパターンもあります。

そういった場合のハックをご紹介します。

Firefoxのみの場合

@-moz-document url-prefix() {
	.Selector {
		margin: 0;
	}
}

Chromeのみの場合

@media screen and (-webkit-min-device-pixel-ratio:0) {
	.Selector {
		margin-top: 0;
	}
}

Safariのみの場合

@media screen and (-webkit-min-device-pixel-ratio:0) {
  ::i-block-chrome, .Selector {
   		margin-top: 0;
  }
}

IEのCSSハック

IEのバージョンによって個別のCSSの処理がが必要になることがあります。

そこで各バージョンごとのCSSのハックをまとめました。

また、同時に各IEハックを利用する場合は記述する順番に注意しないと正しく機能しません。

IEハックは以下になります(記述順に書いております)。

IE8CSSハック

html>/**/body {
margin/***/: 0¥9;
}

IE7CSSハック

*+html body {
margin: 0;
}

IE6CSSハック

body {
_margin: 0;
}

IE9CSSハック

body:not(:target) {
margin: 0¥9;
}

IE10CSSハック

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
body {
margin: 0 !important; /*同時に利用する場合はimportantを追加する*/
}
}

JavaScriptを活用してurlの文字列を取得

各ページの文字列を取得し、あらゆる処理に利用したい場合があります。

その場合は以下のように取得します。

$(function(){
	var pageURL = window.location.pathname;
    var pathArr = pageURL.split("/");
    for (var i = 1; i < pathArr.length; i++){
        path1 = pathArr[1];
        path2 = pathArr[2];
        path3 = pathArr[3];
        path3 = pathArr[4];
    };
});

これでスラッシュごとに区切って文字列が取得できます。

もしページのurlが、

http://frontendegg.com/aaa/bbb/ccc/index.html

であった場合は。

  • path1にはaaa
  • path2にはbbb
  • path3にはccc
  • path4にはindex.html

が格納されます。

jquery.cookie.jsを活用してcookieを扱ってみよう

JavaScriptでcookieを使用するのは意外と面倒ですが、jquery.cookie.jsを利用することで、cookieを簡単に扱えます。

jquery.cookie.jsこちらからダウンロードできます。

以下がhtmlの記述例です。JQueryのプラグインになりますので、jQueryとセットで利用します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>

cookieの保存に関しては以下のように記述します。

$.cookie("KEY", "VALUE", { expires: 7 });

KEYには保存したいcookieの名前、VALUEには値を入れます。

{}の中は、optionが指定できます。

※有効期限の指定もできます。これが設定されていない場合は、ブラウザを閉じたタイミングで削除されます。

optionのパラメータ内容は以下になります。

  • expires → 有効期限(日数)
  • path → 有効なパス(ドメイン全体で利用したい場合は’/’を設定)
  • domain → 有効なドメイン
  • secure → HTTPS接続の場合のみにcookieを送信(デフォルトはfalse)

cookieの取得は下記になります。

※保存時に設定したKEYを元に取り出す。

$.cookie("KEY");

cookieの削除は下記になります。

※保存時に設定したKEYを元に取り出す。

$.removeCookie("KEY");

※パスを指定する場合は下記になります。

$.removeCookie("KEY", { path: "/" });

Youtube動画を埋め込んでレスポンシブに対応

レスポンシブサイトにYoutube動画を埋め込んだ際の実装方法をご紹介します。

まずHTMLですが、前回記述したようにこのような埋め込みをします。

<div class="youtube">
  <iframe width="幅" height="高さ" src="https://www.youtube.com/embed/動画のID"></iframe>
</div>

そしてCSSは以下のように記述します。

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

これで解決です。

スマホサイト必須のviewport設定

スマホで見るサイトを実装する場合にviewportを設定することは必須となってきます。

そこで通常よく利用される記述をご紹介します。

<meta name="viewport" content="width=device-width,initial-scale=1">

これでほとんどのスマホサイトは画面サイズに合わせて適切に表示されます。また、拡大縮小されない設定にするには以下の記述をしましょう。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

スマホでリンクタップしたときの色の変更

スマホだと、マウスを乗せるという動作がありません。ですがタップしたときに色が変わるという特性があります。

通常黒系の半透明に変化しますが、もし背景が黒かった場合は変化に気づきにくいです。

その場合は以下のCSSをリンク部分に追加しましょう。

-webkit-tap-highlight-color: rgba(255,255,255,.2);

この時に半透明のRGBaカラーで指定しないと元の内容が見えなくなってしまうのでご注意を。

スマホで数字を電話番号と認識させない方法

スマホは数字を電話番号と勘違いしてしまうことが多いです。自動的にリンクになってタップすると発信してしまいます。

この機能を無効にするために、以下の記述を追加しましょう。

<meta name="format-detection" content="telephone=no">

本当に番号の箇所は以下のように記述すればいいです。

<address>電話番号:<a href="tel:090xxxxxxx">090-xxx-xxxx</a></address>