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

http://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などなどたくさんのライブラリがあります。

http://jquery.com/download/



■jQueryを動かす前に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本体」を読み込んだら、続いて動かしたい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 　・バブリングや動きすぎの対処法




■基本的な書き方$(function(){ // この中に命令文を書きます。 });

お約束的な書き方です。 ※高度なものではこの書き方でないものもありますが、とりあえずこの書き方を覚えてください。



■基本的な書き方■kirikae.jsの解説 $(function(){ $(“button”).click(function(){ $(“img”).attr(“src”,”/images/002.jpg”); }); });

HTMLの該当する部分を指定します。 CSSと同様、#headerや.contentsなどIDやクラスの指定ができます。



■基本的な書き方■kirikae.jsの解説 $(function(){ $(“button”).click(function(){ $(“img”).attr(“src”,”images/002.jpg”); }); });

～～をしたとき、という動作を指定します。「イベント」と言います。他にもマウスが乗ったとき、マウスがどいたときなどの命令文があります。



■基本的な書き方■kirikae.jsの解説 $(function(){ $(“button”).click(function(){ $(“img”).attr(“src”,”images/002.jpg”); }); });

「.attr」は前に書いているタグの指定した属性の値を書き換える命令文です。 ※特定のHTMLタグの属性の値を取得する場合にも利用する命令文です。



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







■fadeIn・fadeOut$(function(){ $(“button”).click(function(){ $(“img”).fadeOut(1000); }); $(“button”).click(function(){ $(“img”).fadeIn(1000); }); });

fadeOut…ゆっくり消えていく fadeIn…ゆっくり現れるかっこの中の数字はアニメーションする秒数（ms）です。



■slideUp・slideDown$(function(){ $(“button”).click(function(){ if($(“img”).css(“display”) === “block”) { $(“img”).slideUp(); } else { $(“img”).slideDown(); }; }); });

slideUp…上にスライドして消える slideDown…上からスライドして現れる



■slideToggle$(function(){ $(“button”).click(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(){ $(“button”).click(function(){ $(“.wapuu”).animate({ “left”: “700px”, “top”: “30px” }, 600, “swing”); }); });



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

{}の中身…動かしたいCSSを指定。 ※pxや％やemなどの単位で指定できるものに限ります。




はやさ。同じく（ms）で指定。




動かし方。以下の二つから選べます。・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が用意するjQueryWordPressではあらかじめ「jQuery本体」は用意されています。 jQueryのWebサイトからダウンロードする必要はありません。

ダウンロードして持って来んなヨ！



■WordPressが用意するjQuery実はWordPressが準備してくれるjQueryはちょっとだけ加工されています。

jQuery.noConflict();



■WordPressが用意するjQuery

■jQuery.noConflict() ってなに？ $関数は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」という文字に置き換えてください！



■WordPress下のjQueryはこう書く！

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



■WordPress下のjQueryはこう書く！(function($){ $(function(){ $(“button.animate”).click(function(){ $(“.wapuu”).animate({ “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()」の前に書きます。





スクリプトのハンドル。必須なので何かアルファベットで名前を入れる。説明は後述。





読み込みたいjQueryの場所とファイル名。




<?php wp_enqueue_script( ‘anime’ , get_template_directory_uri(). ‘/js/animate.js’, array(“jquery") ) ; ?>

読み込み順を決定する。arrayの()の中に書いてあるのは先ほど説明したハンドル。







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

}); }); })(jQuery);



■高度なテクニック動かす時間（animate関数の場合は動き）の後に、さらにfunction()…で命令を出すことができます。これはコールバック関数といいます。

コールバック関数は必ず最初に書いている処理の後に動きだすようになっているので、連続でアニメーションを動かす時、タイミングを調整するのに使われます。



■高度なテクニック■演習問題です！



jQueryで動かしてみよう WordPressに導入してみよう

熊上　隆

動カスヨー



■高度なテクニックこの動きをjQueryで実現してみましょう！

※「動カスヨー」の文字っぽい画像はugo.jpgとして用意してあります。

Technology

WordBench Nagoya 201601