JavaScript関連の記事：jdash2000 site

IEの条件付きコメントが使用できない場合の対処方法（JavaScriptで置き換える）

20150530-IEの条件付きコメントをJavaScriptに置き換える-01

今回紹介するのはWeb制作の中でInternet Explorer（IE）の条件付きコメントが使用できない場合（禁止されている場合）にJavaScriptで対応する方法です。

●条件付きコメントとは？

条件付きコメントというのはIEで動作する、HTMLのコメント機能を利用した条件分岐ができる機能です。

簡単な例としてはIE６だけ読み込ませたい内容を書くには以下の様に書きます。IE6で独自に適用したいスタイルシートやJavaScriptの読み込みをすることが可能です。

<!--[if IE 6]>
　ここはIE 6だけが読み込みます
<![endif]-->

なお、この機能は、便利な機能ですがIE10で廃止されました。

●条件付きコメントをJavaScriptで置き換える

たとえば、IE8（Internet Explorer 8）以下で、HTML5の要素を有効にして、メディアクエリーを有効にしようとこんなコードを使いたいとします。

<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

しかし、諸般の事情で条件付きコメントが使用できない場合は、JavaScriptで置き換えることで対応できます。

記事の続きを読む

JavaScriptでIEのバージョンを判定する（IE 11まで）※User Agent未使用

20150406-JavaScriptでIEのバージョン判定-01

タイトルの通りですが、Internet Explorer（以下IE）のバージョンをJavaScriptで判定するコードです。（User Agentは使用しません）

それでは早速コードを紹介します。

//IEの判定 via https://w3g.jp/blog/tools/js_browser_sniffing
var _ua = (function(){
    return {
        lte_IE6:typeof window.addEventListener == "undefined" && typeof document.documentElement.style.maxHeight == "undefined",
        lte_IE7:typeof window.addEventListener == "undefined" && typeof document.querySelectorAll == "undefined",
        lte_IE8:typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined",
        lte_IE9:document.uniqueID && typeof window.matchMedia == "undefined",
        gte_IE10:document.uniqueID && window.matchMedia ,
        eq_IE8:document.uniqueID && document.documentMode === 8,
        eq_IE9:document.uniqueID && document.documentMode === 9,
        eq_IE10:document.uniqueID && document.documentMode === 10,
        eq_IE11:document.uniqueID && document.documentMode === 11,
//        eq_IE10:document.uniqueID && window.matchMedia && document.selection,
//        eq_IE11:document.uniqueID && window.matchMedia && !document.selection,
//        eq_IE11:document.uniqueID && window.matchMedia && !window.ActiveXObject,
        Trident:document.uniqueID
    }
})();

記事の続きを読む

window.jQuery || document.write('＜script src="●●"＞＜\/script＞') という書き方は何なのかをFirebugで調べてみた

2014年2月2日 21:10
JavaScript
jQuery
笹川純一(jdash2000)

以前に「【疑問】JavaScriptの window.jQuery || document.write …という条件式の書き方」ということを書いて、理由を探したのですが、ちょっとまだモヤモヤしたままでした。

モヤモヤを抱えたままだったので自分なりに考えてみました。

今回はウェブの開発・制作でよく使われるFirefoxのFirebugを使用します。（インストールはこちらから）

Firebugの機能で、コンソールという機能があって、ここにスクリプトを書いて、色々実験ができます。

画像出典：Firebug

この機能を使って「window.jQuery || document.write('<script src="●●"><\/script>') 」の動作を調べてみます。

記事の続きを読む

jQueryで簡単にクロスフェードのスライドショーを作る

2012年10月6日 19:20
JavaScript
Web制作
笹川純一(jdash2000)

jQueryで簡単・シンプルにクロスフェード型のスライドショーが作れないかな？と思って探したら「A Simple jQuery Slideshow | Jon Raasch's Blog」というスクリプトが公開されていました。

※クロスフェードというのは今表示している画像が段々薄くなっていくと同時に、次の画像が段々濃くなってくるタイプのエフェクト。

今回はこちらのスクリプトを紹介します。

実は以前書いた「jQueryで簡単な画像のスライドショー《slideswitchを勝手に解説》」でも紹介しているのですが、このスクリプトのままだと、画像にリンクを張った場合に動作しなくなるので、それを修正したものを紹介いたします。

このブログのアクセスログを見ると、検索で「jQuery 簡単スライドショー」とかで結構来ているみたいなので。

今回のスクリプトを動かしたデモは↓のようになります。（スマートフォン版ページだと動作しません）

Sea Otter preening itself in Morro Bay, CA sea-otter-morro-bay_13

記事の続きを読む

jQueryのロードのフォールバックでHTML4やXHTML1.0準拠の書き方を考えてみた

2012年7月28日 23:31
Web制作
JavaScript
笹川純一(jdash2000)

「jQueryをロードする際のナイス！と思った書き方」でコメントを頂いたので返信がてら記事を書いてみようと思います。

シマダさんからコメントを頂きました。ありがとうございます。

フォールバックの違う書き方をCSS-Tricksで見つけました。
http://css-tricks.com/snippets/jquery/fallback-for-cdn-hosted-jquery/

Initializrが書き出すやつはHTML5用であり、HTML4やXHTML1.0ではHTMLの文法エラーを招くので、HTML4やXHTML1.0に書くのであればCSS-Tricksで紹介されているやつがいいでしょう。
jQueryをロードする際のナイス！と思った書き方

なるほど。まだ皆さんがHTML5になっているわけではないですから、重要な指摘ですね。

では文法エラーは何が出るのかから見てみましょう。

記事の続きを読む

【疑問】JavaScriptの window.jQuery || document.write …という条件式の書き方

2012年5月21日 21:57
JavaScript
Web制作
笹川純一(jdash2000)

Says it all by alikins

「jQueryをロードする際のナイス！と思った書き方

」が突然週明けからブレイクしてビビっております（汗）。

その記事に書いたjQueryのフォールバック用のJavaScriptですが、以下の様に書かれています。

window.jQuery ||  document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>

疑問というか質問なのですが、これってJavaScriptで一般的に使用される条件式の書き方なのでしょうか？

記事の続きを読む

jQueryをロードする際のナイス！と思った書き方

2012年5月18日 10:00
JavaScript
Web制作
笹川純一(jdash2000)

出典：Initializr - Start an HTML5 Boilerplate project in 15 seconds!

先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。

このブログも実はPC版は形式上HTML5のページになっているんです。
見た目はほとんど変わっていませんが…。

さて、CSS Niteのセミナーの中でHTML5のベースとなるテンプレートを一瞬で作ってくれる「Initializr」が紹介されていました。

このサイトでテンプレートを作ってみて、そのテンプレートを開いたらjQueryをロードする時の書き方でこれはナイスな書き方だと思ったものがあったので紹介します。

記事の続きを読む

jQueryでWordPressのカテゴリリストの親カテゴリだけにclass属性を付ける（子カテゴリには付けない）方法

2012年4月17日 10:00
JavaScript
Web制作
笹川純一(jdash2000)

なんでもjQueryでできるのではないかと思って考えてみた。

考えのネタ元は以下のページ。

[う][WordPress]カテゴリリストの親カテゴリだけにclass属性を付ける（子カテゴリには付けない）方法

こちらのページはWordPressのタグで「親カテゴリのみにclass属性を付ける」ことをやっているわけですが、私はWordPressは全然わからないので、jQueryで何とかする方法を考えてみます。

CMSから書き出されていた元のタグはこんな感じなんでしょうかね。

<ul class="accMenu">
	<li><a href="/hoge1/">hoge1</a><ul>
		<li><a href="/hoge1/hoge1-1/">hoge1-1</a></li>
		<li><a href="/hoge1/hoge1-2/">hoge1-2</a></li>
	</ul></li>
	<li><a href="/hoge2/">hoge2</a></li>
</ul>

これをjQueryで何とかして以下の様にします。

<ul class="accMenu">
	<li class="open"><a href="/hoge1/">hoge1</a><ul>
		<li><a href="/hoge1/hoge1-1/">hoge1-1</a></li>
		<li><a href="/hoge1/hoge1-2/">hoge1-2</a></li>
	</ul></li>
	<li><a href="/hoge2/">hoge2</a></li>
</ul>

早速考えてみましょう。

記事の続きを読む

JavaScriptの変数名で最初の文字に「$」を付けるのは《本当に》アリなのか？

2012年4月10日 10:00
JavaScript
Web制作
笹川純一(jdash2000)

Rolled dollar by MoneyBlogNewz

前回の「jQueryで簡単な画像のスライドショー《slideswitchを勝手に解説》」という記事で

まずimgタグで「active」というclassが付いている要素を$activeという変数に代入します。（なんで$を頭に付けているのかは謎…）
jQueryで簡単な画像のスライドショー《slideswitchを勝手に解説》

と、変数名の頭に$を付けているのはなぜなのかと書きました。

謎のままにしていると気持ちが悪いので（笑）、調べてみました。

記事の続きを読む

jQueryで簡単な画像のスライドショー《slideswitchを勝手に解説》

出典：jquery「slideswitch」で簡単にスライドショーを実装｜衆

jQueryのスライドショーのプラグインって色々ありますね。

会社のサイトでは様々なサイトで紹介されているプラグインほど大がかりなものはなくても良いかな、と思って「jquery「slideswitch」で簡単にスライドショーを実装｜衆」に掲載されているスクリプトを使用しています。ありがとうございます。

今回はこのスクリプトを勝手に解説します。

記事の続きを読む