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

@HissyNC

自己紹介

• 菱川拓郎 @HissyNC

• コンクリートファイブジャパンという会社をやってます。オープンソースCMSのサポートを提供する会社です。

• オープンソースCMS大好き。最近は contao, ImpressPages CMS, ExpressionEngineに興味。フロントエンドエンジニア、ウェブディレクター

今日の話題はjQuery

今日の内容

• jQuery初心者に、jQueryとは何かを解説

• よくわからないままコピペで使っているjQueryユーザーに、書き方で気をつけるポイントを伝授

• jQuery中級者におすすめのカルーセルライブラリの紹介

jQueryとは？

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

• …？

• ……？？？？？？

超訳・jQueryとは

HTMLの要素に対するオプション設定

jQueryこう考えよう

$(‘#test’).show();HTMLの要素に指示を出す

$(‘p’).attr(‘alt’,‘test’);HTMLの要素のオプション設定を変更する

Javascriptは難しい• Javascriptはプログラミング言語

• プログラミング言語は、何かにしてほしいことを人間から指示を出す

• Javascriptの場合は、ブラウザに指示を出す

• ブラウザはいっぱいあって、同じことを言っても同じように聞いてくれない

• いろんなブラウザへの調整で指示書がどんどん長くなっていきます

そこでjQueryは考えた• ブラウザに指示を出すからややこしいん

じゃね？

• HTML内の要素（DOM）に指示を出すように変えよう！

• そのためにブラウザの違いは先に調整しておこう！

• 長ったらしく書くのは大変だし重くなるから、できるだけ短く書けるようにしよう！

Javascript / jQuery 比較• [Javascript]

var element=document.getElementById("test") ;element.style.display = ‘block’;

• [jQuery]$(‘#test’).show();

• jQueryの方が短い！→ HTMLの要素（DOM）に直接指示を出せるから

DOM = Document Object Model

• HTMLとJavascriptをつなぐ仕組み

• HTMLをツリー状に解釈することで、HTMLの中の特定の部分にJavascriptからアクセスすることを可能にする

• html└body　└div#wrapper　　└p.text　　　└"HTML" ←テキストがツリーの末端になる

最低限必要なプログラミングの知識

• 上の行から下の行へ、1行ずつ処理されます。

• 行の変わり目は改行ではなく、セミコロン「 ; 」です。

• 中括弧 { } でくくられた部分は、上から下への流れとは独立した処理になります。

• jQueryを使うにはこれくらいでOK

準備・１

• jQueryを読み込みましょう。読み込んだ位置よりあとで使えるようになります。<script src="jquery.js"></script>

• Googleから読み込むのが流行りです。理由：みんながGoogleから読みこめば、ブラウザのキャッシュに残るので、使いまわせる<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

準備・１

• 注意事項：jQueryは1回読みこめばOK。

たまにサンプルのコピペで何回も読み込んでいる人がいますが、動作不良の原因です。

準備・２

• DOMが読み込まれるのを待つ

• <script>$(document).ready(function(){// この中はDOMが読み込まれた後に実行される});</script>

• ※$(document).readyは$で代用可能

準備・２• 「$」というキーワードを使う

Javascriptライブラリが他にもあるので、WordPressではコンフリクト回避のために「$」が無効になっています。

• 一番楽な回避策<script>jQuery(document).ready(function($){// この中は$が使える});</script>

準備完了

• jQueryを使う準備は、この２ステップ

• それでは、jQueryで何ができるのかを見て行きましょう。ポイントは、DOMを選択して、指示を出すの２ステップ

• ドキュメントはこちら。復習にどうぞhttp://api.jquery.com/

Selectors

• まずDOMを選択。CSSと同じ感覚でHTMLの要素を選択できる

• $(‘#id’) $(‘.class’) $(‘p’)

• $(‘.class1, .class2, .class3’)

• 選択したら、指示を出すだけ

Selectors Filter

• 条件付きで絞り込める

• $(‘ul li:first’) // 最初の要素

• $(‘ul:first-child’) // 最初の子要素↑同じ

• $(‘ul li:odd’) // 奇数要素

• $(‘ul li:not(.current_page_item))// 除外

Attributes

• 要素の属性を変更できる

• $(‘p’).addClass(‘hoge’);// classを追加

• $(‘img’).attr(‘alt’); // 属性を取得

• $(‘img’).attr(‘alt’, ‘great photo’);// 属性を変更

CSS

• CSSを直接変更できる

• $(‘p’).css(‘color’, ‘red’);// p { color: red; }

• $(‘p’).css({ 'background-color' : '#ddd', 'font-weight' : 'bold', 'color' : 'rgb(0,40,244)'}); // 一括指定

Traversing• 日本語で探索？とでも言いましょうか…

• $('li.current_menu_item') .children() .css('background-color', 'red');

• ul+ li.current_menu_item + a ←これだけに反映+ li + a

メソッドチェイン

• 先ほどのページのサンプル。

• $('li.current_menu_item') .children() .css('background-color', 'red');

• 一度DOMを選択すれば、あとは何度でも指示を出すことができます。

Traversing

• １行でいろいろできちゃう

• $('ul.menu').css('color','red') .children() .filter('.current_menu_item') .css('font-weight','bold') .parent() .find('span') .css('color','green');

こうなりました。

• DOMの操作

• $('div').append('<p>Test</p>');// divの中（末尾）に追加

• $('div').prepend('<p>Test</p>');// divの中（先頭）に追加

Manipulation

Events• // 要素をクリックしたときに処理を行う

$("#target").click(function() { $(‘p’).css(‘color’,‘red’);});

• $("#target").hover(function() { // マウスが乗ったとき $(‘p’).css(‘background-color’,‘red’);},function(){ // マウスが外れたとき $(‘p’).css(‘background-color’,‘inherit’);});

Effects• エフェクトが一番おなじみかも

• $("#target").click(function() { $(‘p’).fadeIn(); // フェードイン});

• $("#target").click(function() { $('p').animate({ 'opacity':'0.25', 'margin-left':'+=500‘ // +500px }, 500);});

• animateは色が使えないので注意

jQueryは短く書くのが流儀• Javascirptが書ける人はこうしがち

var p = $('p');if ( p.className == 'test' ) { p.addClass('add');}

• jQuery流ならエレガント！$(‘p.test’).addClass(‘add’);

• TraversingのAPIはぜひ活用しましょう。if文は書かない

他にもまだまだあります。

• jQueryでできることはたくさんあります。

• 全部覚えるのは大変だし、結局大変なので、jQueryプラグインを使いましょう。

ここで急に飛びまして…

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

カルーセルとは？

carouFredSelはここがすごい

• どんなHTML要素でもカルーセルにできる。1つのアイテムでも、複数のアイテムでもOK。

• 水平でも垂直でもOK。

• 最後まで行ったらとまるか、繰り返しかも自由

• レスポンシブ対応！

柔軟なオプション

• 設定項目が豊富。あらゆるデザインに対応http://caroufredsel.frebsite.nl/configuration.php

• 地味に嬉しいイベント充実。カルーセルの切り替わりのタイミングで別の処理を挟み込んだり、一時停止したり、思うがままhttp://caroufredsel.frebsite.nl/custom-events.php

設定ロボット君が親切

http://caroufredsel.frebsite.nl/configuration-robot.php

• 質問に答えていくだけでjQueryを書いてくれるロボット君！

• サンプルのコピペからはオサラバです

クールなサンプル集

http://coolcarousels.frebsite.nl/

実例

http://monreve-japan.com/

http://coolcarousels.frebsite.nl/c/27/

WordPressと相性がいい

• どんなHTMLの構造でもほぼ対応できる

• HTMLがある程度決まってくるCMSの場合でも安心！