1. jQueryの基礎∼
そしてcarouFredSelが
すばらしすぎて泣ける
第15回WordBench神戸 jQueryどうでしょう
@HissyNC

2. 自己紹介
• 菱川拓郎 @HissyNC
• コンクリートファイブジャパンという会社をやって
ます。オープンソースCMSのサポートを提供する会
社です。
• オープンソースCMS大好き。最近は contao,
ImpressPages CMS, ExpressionEngineに興味。
フロントエンドエンジニア、ウェブディレクター

3. 今日の話題はjQuery

4. 今日の内容
• jQuery初心者に、jQueryとは何かを解
説
• よくわからないままコピペで使っている
jQueryユーザーに、書き方で気をつける
ポイントを伝授
• jQuery中級者におすすめのカルーセルラ
イブラリの紹介

5. jQueryとは？
• 迅速なWeb開発のための、高速で簡単に
HTMLドキュメントの解析、イベントハン
ドリング、アニメーション、Ajaxインタラ
クションを行うためのJavascriptライブラ
リ。Javascriptの書き方を変えるためにデ
ザインされた。（公式サイトより）
• …？
• ……？？？？？？

6. 超訳・jQueryとは
HTMLの要素に対する
オプション設定

7. jQueryこう考えよう
$(‘#test’).show();
HTMLの要素に指示を出す
$(‘p’).attr(‘alt’,‘test’);
HTMLの要素のオプション設定を変更する

8. Javascriptは難しい
• Javascriptはプログラミング言語
• プログラミング言語は、何かにしてほしいこと
を人間から指示を出す
• Javascriptの場合は、ブラウザに指示を出す
• ブラウザはいっぱいあって、同じことを言って
も同じように聞いてくれない
• いろんなブラウザへの調整で指示書がどんど
ん長くなっていきます

9. そこでjQueryは考えた
• ブラウザに指示を出すからややこしいん
じゃね？
• HTML内の要素（DOM）に指示を出すよう
に変えよう！
• そのためにブラウザの違いは先に調整して
おこう！
• 長ったらしく書くのは大変だし重くなるか
ら、できるだけ短く書けるようにしよう！

10. Javascript / jQuery 比較
• [Javascript]
var element=document.getElementB
yId("test") ;
element.style.display = block ;
• [jQuery]
$( #test ).show();
• jQueryの方が短い！
→ HTMLの要素（DOM）に直接指示を
出せるから

11. DOM = Document Object Model
• HTMLとJavascriptをつなぐ仕組み
• HTMLをツリー状に解釈することで、
HTMLの中の特定の部分にJavascriptか
らアクセスすることを可能にする
• html
└body
└div#wrapper
└p.text
└"HTML" ←テキストがツリーの末端になる

12. 最低限必要なプログラミング
の知識
• 上の行から下の行へ、1行ずつ処理されます。
• 行の変わり目は改行ではなく、セミコロン
「 ; 」です。
• 中括弧 { } でくくられた部分は、上から下への
流れとは独立した処理になります。
• jQueryを使うにはこれくらいでOK

13. 準備・１
• jQueryを読み込みましょう。読み込んだ位置
よりあとで使えるようになります。
<script src="jquery.js"></script>
• Googleから読み込むのが流行りです。
理由：みんながGoogleから読みこめば、ブラ
ウザのキャッシュに残るので、使いまわせる
<script src="//ajax.googleapis.com/ajax/
libs/jquery/1.8.1/jquery.min.js"></
script>

14. 準備・１
• 注意事項：
jQueryは1回読みこめばOK。
たまにサンプルのコピペで何回も読み込
んでいる人がいますが、動作不良の原因
です。

15. 準備・２
• DOMが読み込まれるのを待つ
• <script>
$(document).ready(function(){
// この中はDOMが読み込まれた後に実行される
});
</script>
• ※$(document).readyは$で代用可能

16. 準備・２
• 「$」というキーワードを使う
Javascriptライブラリが他にもあるの
で、WordPressではコンフリクト回避
のために「$」が無効になっています。
• 一番楽な回避策
<script>
jQuery(document).ready(function($){
// この中は$が使える
});
</script>

17. 準備完了
• jQueryを使う準備は、この２ステップ
• それでは、jQueryで何ができるのかを見
て行きましょう。ポイントは、DOMを選
択して、指示を出すの２ステップ
• ドキュメントはこちら。復習にどうぞ
http://api.jquery.com/

18. Selectors
• まずDOMを選択。CSSと同じ感覚で
HTMLの要素を選択できる
• $( #id ) $( .class ) $( p )
• $( .class1, .class2, .class3 )
• 選択したら、指示を出すだけ

19. Selectors Filter
• 条件付きで絞り込める
• $( ul li:first ) // 最初の要素
• $( ul:first-child ) // 最初の子要素↑同じ
• $( ul li:odd ) // 奇数要素
• $( ul li:not(.current_page_item))
// 除外

20. Attributes
• 要素の属性を変更できる
• $( p ).addClass( hoge );
// classを追加
• $( img ).attr( alt ); // 属性を取得
• $( img ).attr( alt , great photo );
// 属性を変更

21. CSS
• CSSを直接変更できる
• $( p ).css( color , red );
// p { color: red; }
• $( p ).css({
'background-color' : '#ddd',
'font-weight' : 'bold',
'color' : 'rgb(0,40,244)'
}); // 一括指定

22. Traversing
• 日本語で探索？とでも言いましょうか…
• $('li.current_menu_item')
.children()
.css('background-color', 'red');
• ul
+ li.current_menu_item
+ a ←これだけに反映
+ li
+a

23. メソッドチェイン
• 先ほどのページのサンプル。
• $('li.current_menu_item')
.children()
.css('background-color', 'red');
• 一度DOMを選択すれば、あとは何度で
も指示を出すことができます。

24. Traversing
• １行でいろいろできちゃう
• $('ul.menu').css('color','red')
.children()
.filter('.current_menu_item')
.css('font-weight','bold')
.parent()
.find('span')
.css('color','green');

25. こうなりました。

26. Manipulation
• DOMの操作
• $('div').append('<p>Test</p>');
// divの中（末尾）に追加
• $('div').prepend('<p>Test</p>');
// divの中（先頭）に追加

27. Events
• // 要素をクリックしたときに処理を行う
$("#target").click(function() {
$( p ).css( color , red );
});
• $("#target").hover(function() {
// マウスが乗ったとき
$( p ).css( background-color , red );
},function(){
// マウスが外れたとき
$( p ).css( background-color , inherit );
});

28. Effects
• エフェクトが一番おなじみかも
• $("#target").click(function() {
$( p ).fadeIn(); // フェードイン
});
• $("#target").click(function() {
$('p').animate({
'opacity':'0.25',
'margin-left':'+=500 // +500px
}, 500);
});
• animateは色が使えないので注意

29. jQueryは短く書くのが流儀
• Javascirptが書ける人はこうしがち
var p = $('p');
if ( p.className == 'test' ) {
p.addClass('add');
}
• jQuery流ならエレガント！
$( p.test ).addClass( add );
• TraversingのAPIはぜひ活用しましょう。if文
は書かない

30. 他にもまだまだあります。
• jQueryでできることはたくさんありま
す。
• 全部覚えるのは大変だし、結局大変なの
で、jQueryプラグインを使いましょう。

31. ここで急に飛びまして…

32. カルーセルUIの神プラグイン

33. カルーセルとは？

34. carouFredSelはここがすごい
• どんなHTML要素でもカルーセルにでき
る。1つのアイテムでも、複数のアイテム
でもOK。
• 水平でも垂直でもOK。
• 最後まで行ったらとまるか、繰り返しか
も自由
• レスポンシブ対応！

35. 柔軟なオプション
• 設定項目が豊富。あらゆるデザインに対応
http://caroufredsel.frebsite.nl/
configuration.php
• 地味に嬉しいイベント充実。カルーセルの切
り替わりのタイミングで別の処理を挟み込ん
だり、一時停止したり、思うがまま
http://caroufredsel.frebsite.nl/custom-
events.php

36. 設定ロボット君が親切
http://caroufredsel.frebsite.nl/configuration-robot.php
• 質問に答えていくだけでjQueryを書いて
くれるロボット君！
• サンプルのコピペからはオサラバです

37. クールなサンプル集
http://coolcarousels.frebsite.nl/

38. 実例
http://coolcarousels.frebsite.nl/c/27/
http://monreve-japan.com/

39. WordPressと相性がいい
• どんなHTMLの構造でもほぼ対応できる
• HTMLがある程度決まってくるCMSの場
合でも安心！