JavaScriptでIEのバージョン判定を行う方法

なにかと手間のかかるIE先輩。
IEのバージョンごとに処理を分けたい場合とかもありますよね。

そんな時に大活躍するコードの紹介です。
使い方は簡単で、以下のコードを用意するだけです。

▼用意するJavaScriptコード

var ie = (function(){
var undef, v = 3, div = document.createElement('div');

while (
    div.innerHTML = '',
    div.getElementsByTagName('i')[0]
);
	 
return v> 4 ? v : undef;
}());

これだけで準備はオッケーです。
使い方は以下です。

▼ブラウザがIEか判別

if(ie) {
    // 処理・・・
}

▼ブラウザがIEじゃないか判別

if(ie === undefined) {
    // 処理・・・
}

▼IE6か判別

if(ie === 6) {
    // 処理・・・
}

▼IE6以上か判別

if(ie > 6) {
    // 処理・・・
}

▼IE8以下か判別

if(ie < 9) {
    // 処理・・・
}

JavaScriptでIEと他のブラウザを判別する方法

JavaScriptを書いているとき、IEと他のブラウザで処理を分けたい場合ってありますよね。
UserAgentを調べたりする手もありますが、たった1行でお手軽に判別できる方法を紹介したいと思います。

▼1行でIEなのか判別

var isMSIE = /*@cc_on!@*/false;

if(isMSIE) {
    // IE用の処理を書く
}

『/*@cc_on!@*/false;』の結果がtureだとIEということになります。

『Google +1 ボタン』とか『いいね!』ボタンとかをつけてみた

せっかくブログを書いているので、気になったことは色々試したいと思います。

というわけで、『Google +1 』ボタンをつけてみます。
ついでに、『いいね!』ボタン(facebook)・『ツイートする』ボタン(twitter)・『B!』ボタン(はてなブックマーク)もつけちゃいます。

では、WordPressを例に説明していきます。


1・『Google +1』ボタン

まずは、『Google +1』ボタンから。

以下のリンクから簡単にソースコードを取得できます。

「Google +1 をウェブサイトに表示」

基本的には、ボタンのサイズや使用する言語を選択するとソースコードが変更されていきますので、指示にしたがって張り付けるだけです。
詳細オプションをクリックすると、コールバック関数や『+1』をつけるサイトのURLを指定したりすることができます。

▼『Google +1 』ボタンを記事一覧に設置

記事ごとに『Google +1』ボタンを設置したい時は、『+1』をつけるURLを変更します。
私の場合、記事一覧で記事ごとに『+1』をつけれるようにしたかったので、『content.php』に以下のコードを追加しました。

<!--▼Google+1 ここから-->
<g:plusone href="<?php the_permalink(); ?>" size="medium"></g:plusone>
<!--▲Google+1 ここまで-->

『the_permalink』テンプレートタグで記事のURLを取得しているだけです。
私は、『content-single.php(記事詳細)』にも同じコードを追加しました。

あとは、『header.php』に以下のコードを追加するだけです。
『head』要素の最後に貼り付ければオッケーです。

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang: 'ja'}</script>

これで、『Google +1』ボタンの設置は終了です。


2・『ツイートする』ボタン

次は、有名な『ツイートする』ボタンです。

これも以下のリンクから簡単にソースコードを取得できます。

「Twitter/ツイートボタン」

指示にしたがって、色々選択するとソースコードが変更されますのでコピペするだけです。

▼『ツイートする』ボタンを記事一覧に設置

記事ごとに『ツイートする』ボタンを設置したい時は、『a』要素の『data-url』の値を変更します。

ツイート内テキストを変更したい場合は、『a』要素の『data-text』の値を変更します。

私は、以下のようにしました。

<!--▼twitter ここから-->
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="『あなたのブログ名に変更』 <?php the_title(); ?>" data-count="none" data-lang="ja">Tweet</a>
<!--▲twitter ここまで-->

上記のコードを、『Google +1』ボタンのソースコードと同じ場所に追加します。

あとは、以下のコードを『header.php』に追加します。
これまた『head』要素の最後に貼り付ければオッケーです。

<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

これで、『ツイートする』ボタンの設置は終了です。


3・『B!』ボタン

次は、『B!』ボタンです。

『B!』ボタンのソースコードは、以下のリンクから取得できます。

「はてなブックマークボタンの作成・設置について」

しつこいようですが、指示にしたがって色々選択するとソースコードが変更されますのでコピペするだけです。

▼『B!』ボタンを記事一覧に設置

記事ごとに『B!』ボタンを設置したい時は、『a』要素の『href』の値の『http://b.hatena.ne.jp/entry/』の後を変更します。

タイトルを変更したい場合は、『a』要素の『data-hatena-bookmark-title』の値を変更します。

私は、以下のようにしました。

<!--▼はてブ ここから-->
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="『あなたのブログ名に変更』 <?php the_title(); ?>" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
<!--▲はてブ ここまで-->

上記のコードを、『Google +1』ボタン、『ツイートする』ボタンのソースコードと同じ場所に追加します。

あとは、以下のコードを『header.php』に追加します。
これも『head』要素の最後に貼り付ければオッケーです。

<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

これで、『B!』ボタンの設置は終了です。


4・『いいね!』ボタン

最後は、『いいね!』ボタンです。

『いいね!』ボタンのソースコードは、以下のリンクから取得できます。

「Like Buttom」

英語ですが、指示にしたがって色々選択していき、『Get Code』ボタンをクリックするとソースコードが表示されます。
ソースコードが表示されているウインドウの『実装』を変更すると、選択した実装方法のソースに変更されます。
私は、『iFrame』を選択しました。

▼『いいね!』ボタンを記事一覧に設置

私は、『iframe』を選択したので『iframe』にあわせて説明します。
記事ごとに『いいね!』ボタンを設置したい時は、『iframe』要素の『src』の『?href=』の値を変更します。
私は、以下のようにしました。

<!--▼facebook ここから-->
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>" scrolling="no" frameborder="0" style="border:none; overflow: hidden; width: 80px; height: 25px;" allowTransparency="true"></iframe>
<!--▲facebook ここまで-->

上記のコードを、『Google +1』ボタン、『ツイートする』ボタン、『B!』ボタンのソースコードと同じ場所に追加します。

『いいね!』ボタンはこれで終了です。


ほとんどコピペで、簡単に実装できるのがいいですよね><

私は、はてブの数やツイート数は表示しないアイコンを選択しましたが(数が増えなかったら寂しいから・・・)、色々なアイコンが用意されているので、ご自分にあったアイコンを選択して実装してください^^

JavaScript ページトップへスクロールしながら戻る

色々なサイトでよく見る『スクロールしながらページトップに戻る方法』を2つ紹介したいと思います。

▼『jQuery』を使用したページトップへ戻る

『jQuery』を使用すると、簡単に『スクロールしながらページトップ』を実現することができます。
以下がソースコードです。

▼HTML

<a href="#top" id="jPageUp">ページトップへ戻る</a>

▼JavaScript

$(function(){
    // jQueryアニメーションでページトップに戻る
    $("#jPageUp").click(function(){
        jPageTop();

        return false;
    });
})

// jQueryアニメーションでページトップ
function jPageTop() {
    $('html,body').animate({
        scrollTop: 0,
        scrollLeft: 0
    }, 'normal');
}

jQueryのアニメーション効果を作成する『animate』関数を使用し、スクロール位置を0に戻す感じですね。
クリックイベントハンドラの最後にある『return false』は、アンカー名がつかないようにするだけなので、好みで削除してもかまいません。


▼『jQuery』を使用しないでページトップへ戻る

『jQuery』を使用しない場合、当たり前の事ですが、自前で計算してスクロール位置を0に戻すことになります。
以下がソースコードです。

▼HTML

<a href="#top" id="pageUp">ページトップへ戻る</a>

▼JavaScript

window.onload = function(){
    document.getElementById('pageUp').onclick = function(){
        pageTop();

        return false;
    };
};

// 計算でページスクロールを0に戻す
function pageTop() {
    var top  = Math.floor(document.documentElement.scrollTop || document.body.scrollTop);
    var left = Math.floor(document.documentElement.scrollLeft || document.body.scrollLeft);

    if(top > 0 || left > 0) {
        document.documentElement.scrollTop  = top / 1.25;
        document.documentElement.scrollLeft = left / 1.25;

        setTimeout("pageTop()", 20);
    }
}

スクロール位置を取得して、0になるまで『setTimeout』で割り算を続ける感じです。
重要なのは、『return false』をクリックイベントハンドラの最後に書くことで、<a>要素のリンクとしての処理を停止させることです。
『jQuery』を使用しないで『return false』をクリックイベントハンドラに書かないと、リンクとしての処理も同時に開始することになり、思い通りの動きになりません。


以上が、『スクロールしながらページトップに戻る方法』です。

機会があれば、『jQuery』の『easing』関数を使った色々な『ページトップへスクロールしながら戻る』を紹介したいな~。

JavaScript 例えば小数点第2位以下を切り捨てる

JavaScriptは、小数点第N位以下切り捨てという関数は用意されていません。
というわけで、『JavaScriptで小数点第N位以下切り捨てる方法』をメモも兼ねてブログに残しておきます。

最初にも書いたように、小数点第N位以下切り捨てる関数は用意されていませんが、小数点以下を切り捨てる関数や四捨五入する関数はあります。
これらの関数を利用し、ちょっとした計算をすることで、小数点第N位以下切り捨てなどを実現します。


Math.floor()  小数点以下を切り捨てる。

Math.seil()  小数点以下を切り上げる。

Math.round()  四捨五入する


『9.87654321』という数があったとします。
この数を小数点第2以下切り捨てる場合、まずは、『9.87654321』を10倍にしてしまいます。

var val = 9.87654321;
val *= 10;

結果  val == 987.654321

次に、小数点以下を切り捨てます。

val = Math.floor(val);

結果  val == 98

最後に10で割っちゃいます。

val /= 10;

結果  val == 9.8

これをまとめると・・・

var _val = 9.11654321;
var val  = Math.floor(_val * 10) / 10;

みたいな感じです。

これで、『9.87654321』という数を小数点第2以下切り捨てることができました。
小数点第N位以下を切り捨てる関数がないのなら、小数点がないとこまで数を増やしてしまうってことですね。
あとは、目的に合わせてMath.floor関数の代わりにMath.ceil関数を使ったりMath.round関数を使ったりするだけです。