Mais conteúdo relacionado
Semelhante a WordBench Kobe jQueryどうでしょう (20)
Mais de Hishikawa Takuro (20)
WordBench Kobe jQueryどうでしょう
- 2. 自己紹介
• 菱川拓郎 @HissyNC
• コンクリートファイブジャパンという会社をやって
ます。オープンソースCMSのサポートを提供する会
社です。
• オープンソースCMS大好き。最近は contao,
ImpressPages CMS, ExpressionEngineに興味。
フロントエンドエンジニア、ウェブディレクター
- 4. 今日の内容
• jQuery初心者に、jQueryとは何かを解
説
• よくわからないままコピペで使っている
jQueryユーザーに、書き方で気をつける
ポイントを伝授
• jQuery中級者におすすめのカルーセルラ
イブラリの紹介
- 5. jQueryとは?
• 迅速なWeb開発のための、高速で簡単に
HTMLドキュメントの解析、イベントハン
ドリング、アニメーション、Ajaxインタラ
クションを行うためのJavascriptライブラ
リ。Javascriptの書き方を変えるためにデ
ザインされた。(公式サイトより)
• …?
• ……??????
- 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. 準備・1
• jQueryを読み込みましょう。読み込んだ位置
よりあとで使えるようになります。
<script src="jquery.js"></script>
• Googleから読み込むのが流行りです。
理由:みんながGoogleから読みこめば、ブラ
ウザのキャッシュに残るので、使いまわせる
<script src="//ajax.googleapis.com/ajax/
libs/jquery/1.8.1/jquery.min.js"></
script>
- 14. 準備・1
• 注意事項:
jQueryは1回読みこめばOK。
たまにサンプルのコピペで何回も読み込
んでいる人がいますが、動作不良の原因
です。
- 15. 準備・2
• DOMが読み込まれるのを待つ
• <script>
$(document).ready(function(){
// この中はDOMが読み込まれた後に実行される
});
</script>
• ※$(document).readyは$で代用可能
- 16. 準備・2
• 「$」というキーワードを使う
Javascriptライブラリが他にもあるの
で、WordPressではコンフリクト回避
のために「$」が無効になっています。
• 一番楽な回避策
<script>
jQuery(document).ready(function($){
// この中は$が使える
});
</script>
- 17. 準備完了
• jQueryを使う準備は、この2ステップ
• それでは、jQueryで何ができるのかを見
て行きましょう。ポイントは、DOMを選
択して、指示を出すの2ステップ
• ドキュメントはこちら。復習にどうぞ
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
• 1行でいろいろできちゃう
• $('ul.menu').css('color','red')
.children()
.filter('.current_menu_item')
.css('font-weight','bold')
.parent()
.find('span')
.css('color','green');
- 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プラグインを使いましょう。
- 34. carouFredSelはここがすごい
• どんなHTML要素でもカルーセルにでき
る。1つのアイテムでも、複数のアイテム
でもOK。
• 水平でも垂直でもOK。
• 最後まで行ったらとまるか、繰り返しか
も自由
• レスポンシブ対応!
- 35. 柔軟なオプション
• 設定項目が豊富。あらゆるデザインに対応
http://caroufredsel.frebsite.nl/
configuration.php
• 地味に嬉しいイベント充実。カルーセルの切
り替わりのタイミングで別の処理を挟み込ん
だり、一時停止したり、思うがまま
http://caroufredsel.frebsite.nl/custom-
events.php