WordBench Nagoya 201601

WordBench Nagoya 201601
jQueryで動かしてみよう
WordPressに導入してみよう
熊上隆
動カスヨー

■自己紹介
熊上隆
WordBench Nagoya 広報担当
WordBench Nagoya 2014年幹事
WordPress,jQuery,PHP,Ubuntuなどなど
TW:@imagamuk
FB:https://www.facebook.com/takashi.kumagami

■アジェンダ
【1.静的サイトにjQueryを入れてみよう】
■1. 動かす前に
・jQueryを読み込もう
■2. jQueryで動かしてみよう
・基本的な書き方
・fade⃝⃝、slide⃝⃝、show&hide、animate
・バブリングや動きすぎの対処法
【2.WordPressに入れてみよう】
・通常のjQueryとWordPressのjQueryの違い
・WordPressでjQueryを呼び出す関数
・高度なテクニック

■jQueryを動かす前に
「jQuery本体」は以下からダウンロードできます。
普段はこちらからダウンロードして使いましょう。
■jQueryダウンロード
http://jquery.com/download/
■jQueryって何？
JavaScriptのライブラリの一種。
ライブラリとは、いろんな機能を詰め込んでまとめたもの。
他にもprototype.jsやMooToolsなどなどたくさんの
ライブラリがあります。

jQueryを動かすためには、各jQueryファイルを読み込む前に
「jQuery本体」を読み込む必要があります。
<script type= text/javascript charset= utf-8
src= js/jquery.js ></script>
ファイル名は管理する人々により違いますが、だいたい
・jquery.js
・jquery.min.js
・jquery-1.12.0.min.js
などなど、だいたいこんな名前のことが多いです。

「jQuery本体」を読み込んだら、続いて動かしたいjQueryファイ
ルを読み込みます。
<script type= text/javascript charset= utf-8
src= js/jquery.js ></script>
<script type= text/javascript charset= utf-8 src= js/
hoge.js >

■アジェンダ
【1.静的サイトにjQueryを入れてみよう】
■1. 動かす前に
・jQueryを読み込もう
■2. jQueryで動かしてみよう
・基本的な書き方
・fade⃝⃝、slide⃝⃝、animate
・バブリングや動きすぎの対処法
【2.WordPressに入れてみよう】
・通常のjQueryとWordPressのjQueryの違い
・WordPressでjQueryを呼び出す関数
・高度なテクニック

■基本的な書き方
$(function(){
// この中に命令文を書きます。
});
お約束的な書き方です。
※高度なものではこの書き方でないものもありますが、
とりあえずこの書き方を覚えてください。

■kirikae.jsの解説
$(function(){
$( button ).click(function(){
$( img ).attr( src , /images/002.jpg );
});
});
HTMLの該当する部分を指定します。
CSSと同様、#headerや.contentsなどIDやクラスの指定が
できます。

$(function(){
$( img ).attr( src , images/002.jpg );
});
});
∼∼をしたとき、という動作を指定します。
「イベント」と言います。
他にもマウスが乗ったとき、マウスがどいたときなどの
命令文があります。

$(function(){
$( img ).attr( src , images/002.jpg );
});
});
「.attr」は前に書いているタグの指定した属性の値を書き換える
命令文です。
※特定のHTMLタグの属性の値を取得する場合にも
利用する命令文です。

イベントや命令文は他にもいっぱいあります。
解説しだすとアニメーションまで間に合わないので
各自でお勉強しましょう！

■fadeIn・fadeOut
$(function(){
$( img ).fadeOut(1000);
});
$( img ).fadeIn(1000);
});
});
fadeOut…ゆっくり消えていく
fadeIn…ゆっくり現れる
かっこの中の数字はアニメーションする秒数（ms）です。

■slideUp・slideDown
$(function(){
if($( img ).css( display ) === block ) {
$( img ).slideUp();
} else {
$( img ).slideDown();
};
});
});
slideUp…上にスライドして消える
slideDown…上からスライドして現れる

■slideToggle
$(function(){
$( img ).slideToggle();
});
});
slideToggle…
対象となる要素のdisplayプロパティがnoneだった場合、
slideDown()と同様の動きをします。
対象となる要素のdisplayプロパティがblockだった場合、
slideUp()と同様の動きをします。

■show()・hide()
$(function(){
$( button.slide ).click(function(){
if($( img ).css( display ) === block ) {
$( img ).hide();
} else {
$( img ).show();
};
});
});
hide()…隠す。displayプロパティをnoneにします。
show()…現れる。displayプロパティをblockにします。

■animate
$(function(){
$( .wapuu ).animate({
left : 700px ,
top : 30px
}, 600, swing );
});
});

■animate
$(function(){
$( button.animate ).click(function(){
left : 700px ,
top : 30px
}, 600, swing );
});
});
{}の中身…動かしたいCSSを指定。
※pxや％やemなどの単位で指定できるものに限ります。

■animate
$(function(){
left : 700px ,
top : 30px
}, 600, swing );
});
});
はやさ。同じく（ms）で指定。

■animate
$(function(){
left : 700px ,
top : 30px
}, 600, swing );
});
});
動かし方。以下の二つから選べます。
・swing…最初と最後、ゆっくりになる。
・linear…常に一定のスピード。

■バブリングや動きすぎの対処
$(function(){
$( .sample05 ).click(function(){
$( .sample05 ).slideUp();
});
$( li ).click(function(){
$( li ).slideUp();
)};
});

■バブリング
JavaScriptにはDOMという概念があり、与えられた命令は
「DOMを通じて上の各要素に伝播する」性質があります。
li
div.sample05
document
window
俺クリックされた！
拙者もクリックされた！
某もクリックされた！
ワイもクリックされた！

■動きすぎィ！
イベントで「クリック（.click）」など使用したとき、
クリックするとクリックした数だけアニメーションが動きます。
$(function(){
$( button.slide ).click(function(){
$( img ).slideToggle();
});
});

■対処方法
1.return falseをつかう
$(function(){
$( .sample05 ).click(function(){
$( .sample05 ).slideUp();
});
$( li ).click(function(){
$( li ).slideUp();
return false;
)};
});
return falseには伝播やHTML上の命令を止める働きがあります。
<a>タグのリンクの働きを打ち消すときにも使用されます。

■対処方法
2.:not(:animated)をつかう
$(function(){
$( button.bubble ).click(function(){
$( img:not(:animated) ).slideToggle();
});
});
「:not()」は()内で指定したプロパティの打ち消し、
「:animated」はアニメーションしている、の意味です。

■WordPressが用意するjQuery
WordPressではあらかじめ「jQuery本体」は
用意されています。
jQueryのWebサイトからダウンロードする必要はありません。
ダウンロードして
持って来んなヨ！

実はWordPressが準備してくれるjQueryはちょっとだけ
加工されています。
jQuery.noConﬂict();

■jQuery.noConﬂict() ってなに？
$関数はprototype.jsなどをはじめ、多くのライブラリがそれぞれ拡張している関数で
ある。
jQueryでも、核となるjQueryオブジェクトのショートカットとして極めて頻繁に利用
される。
このコマンドは、そのような$関数を定義する複数のライブラリを用いた際に衝突する
ことを防ぐものである。
- jQuery日本語リファレンスより抜粋 -
→WordPressではprototype.jsも使用されており、
prototype.jsとの衝突を防ぐため、関数の「$」が
使えないようになっています！

■WordPress下のjQueryはこう書く！
jQuery(function(){
jQuery( button.animate ).click(function(){
jQuery( .wapuu ).animate({
left : 700px ,
top : 30px
}, 600, swing );
});
});
「$」を「jQuery」という文字に置き換えてください！

でも…
人が書いたjQueryだとどこに「$」があるかなんて
見てられないですよね(́・ω・｀)

(function($){
$(function(){
left : 700px ,
top : 30px
}, 600, swing );
});
});
})(jQuery);
この方法を「カプセル化」といいます。

■WordPressでjQueryを呼び出す方法
普通に<script type=…></script>と書いてもいいですが
キチンとWordPressの関数が用意されています。
<?php
wp_enqueue_script(
anime ,
get_template_directory_uri(). /js/animate.js ,
array(jquery) )
; ?>
これを「wp_head()」の前に書きます。

<?php
wp_enqueue_script(
anime ,
array(jquery) )
; ?>
スクリプトのハンドル。必須なので何かアルファベットで
名前を入れる。説明は後述。

<?php
wp_enqueue_script(
anime ,
array(jquery) )
; ?>
読み込みたいjQueryの場所とファイル名。

<?php
wp_enqueue_script(
anime ,
array( jquery") )
; ?>
読み込み順を決定する。arrayの()の中に書いてあるのは
先ほど説明したハンドル。

■高度なテクニック
(function($){
$(function(){
left : 700px ,
top : 50px
}, 600, swing , function(){
$( .ugo ).fadeIn(1000);
});
});
});
})(jQuery);

動かす時間（animate関数の場合は動き）の後に、
さらにfunction()…で命令を出すことができます。
これはコールバック関数といいます。
コールバック関数は必ず最初に書いている処理の後に
動きだすようになっているので、
連続でアニメーションを動かす時、タイミングを調整するのに
使われます。

■演習問題です！

この動きをjQueryで実現してみましょう！
※「動カスヨー」の文字っぽい画像はugo.jpgとして用意してあ
ります。

WordBench Nagoya 201601

Recomendados

Recomendados

Más contenido relacionado

Similar a WordBench Nagoya 201601

Similar a WordBench Nagoya 201601 (20)

Último

Último (7)

WordBench Nagoya 201601