Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordBench Nagoya 201601

541 views

Published on

WordBench Nagoya 2016年1月度スライドです。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

WordBench Nagoya 201601

  1. 1. WordBench Nagoya 201601 WordBench Nagoya 201601 jQueryで動かしてみよう WordPressに導入してみよう 熊上 隆 動カスヨー
  2. 2. WordBench Nagoya 201601 WordBench Nagoya 201601 ■自己紹介 熊上 隆 WordBench Nagoya 広報担当 WordBench Nagoya 2014年 幹事 WordPress,jQuery,PHP,Ubuntuなどなど TW:@imagamuk FB:https://www.facebook.com/takashi.kumagami
  3. 3. WordBench Nagoya 201601 WordBench Nagoya 201601 ■アジェンダ 【1.静的サイトにjQueryを入れてみよう】 ■1. 動かす前に  ・jQueryを読み込もう ■2. jQueryで動かしてみよう  ・基本的な書き方  ・fade⃝⃝、slide⃝⃝、show&hide、animate  ・バブリングや動きすぎの対処法 【2.WordPressに入れてみよう】  ・通常のjQueryとWordPressのjQueryの違い  ・WordPressでjQueryを呼び出す関数  ・高度なテクニック
  4. 4. WordBench Nagoya 201601 WordBench Nagoya 201601 ■アジェンダ 【1.静的サイトにjQueryを入れてみよう】 ■1. 動かす前に  ・jQueryを読み込もう ■2. jQueryで動かしてみよう  ・基本的な書き方  ・fade⃝⃝、slide⃝⃝、show&hide、animate  ・バブリングや動きすぎの対処法 【2.WordPressに入れてみよう】  ・通常のjQueryとWordPressのjQueryの違い  ・WordPressでjQueryを呼び出す関数  ・高度なテクニック
  5. 5. WordBench Nagoya 201601 WordBench Nagoya 201601 ■jQueryを動かす前に 「jQuery本体」は以下からダウンロードできます。 普段はこちらからダウンロードして使いましょう。 ■jQueryダウンロード http://jquery.com/download/ ■jQueryって何? JavaScriptのライブラリの一種。 ライブラリとは、いろんな機能を詰め込んでまとめたもの。 他にもprototype.jsやMooToolsなどなどたくさんの ライブラリがあります。
  6. 6. WordBench Nagoya 201601 WordBench Nagoya 201601 ■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 などなど、だいたいこんな名前のことが多いです。
  7. 7. WordBench Nagoya 201601 WordBench Nagoya 201601 ■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 >
  8. 8. WordBench Nagoya 201601 WordBench Nagoya 201601 ■アジェンダ 【1.静的サイトにjQueryを入れてみよう】 ■1. 動かす前に  ・jQueryを読み込もう ■2. jQueryで動かしてみよう  ・基本的な書き方  ・fade⃝⃝、slide⃝⃝、animate  ・バブリングや動きすぎの対処法 【2.WordPressに入れてみよう】  ・通常のjQueryとWordPressのjQueryの違い  ・WordPressでjQueryを呼び出す関数  ・高度なテクニック
  9. 9. WordBench Nagoya 201601 WordBench Nagoya 201601 ■基本的な書き方 $(function(){ // この中に命令文を書きます。 }); お約束的な書き方です。 ※高度なものではこの書き方でないものもありますが、 とりあえずこの書き方を覚えてください。
  10. 10. WordBench Nagoya 201601 WordBench Nagoya 201601 ■基本的な書き方 ■kirikae.jsの解説 $(function(){ $( button ).click(function(){ $( img ).attr( src , /images/002.jpg ); }); }); HTMLの該当する部分を指定します。 CSSと同様、#headerや.contentsなどIDやクラスの指定が できます。
  11. 11. WordBench Nagoya 201601 WordBench Nagoya 201601 ■基本的な書き方 ■kirikae.jsの解説 $(function(){ $( button ).click(function(){ $( img ).attr( src , images/002.jpg ); }); }); ∼∼をしたとき、という動作を指定します。 「イベント」と言います。 他にもマウスが乗ったとき、マウスがどいたときなどの 命令文があります。
  12. 12. WordBench Nagoya 201601 WordBench Nagoya 201601 ■基本的な書き方 ■kirikae.jsの解説 $(function(){ $( button ).click(function(){ $( img ).attr( src , images/002.jpg ); }); }); 「.attr」は前に書いているタグの指定した属性の値を書き換える 命令文です。 ※特定のHTMLタグの属性の値を取得する場合にも 利用する命令文です。
  13. 13. WordBench Nagoya 201601 WordBench Nagoya 201601 ■基本的な書き方 イベントや命令文は他にもいっぱいあります。 解説しだすとアニメーションまで間に合わないので 各自でお勉強しましょう!
  14. 14. WordBench Nagoya 201601 WordBench Nagoya 201601 ■アジェンダ 【1.静的サイトにjQueryを入れてみよう】 ■1. 動かす前に  ・jQueryを読み込もう ■2. jQueryで動かしてみよう  ・基本的な書き方  ・fade⃝⃝、slide⃝⃝、show&hide、animate  ・バブリングや動きすぎの対処法 【2.WordPressに入れてみよう】  ・通常のjQueryとWordPressのjQueryの違い  ・WordPressでjQueryを呼び出す関数  ・高度なテクニック
  15. 15. WordBench Nagoya 201601 WordBench Nagoya 201601 ■fadeIn・fadeOut $(function(){ $( button ).click(function(){ $( img ).fadeOut(1000); }); $( button ).click(function(){ $( img ).fadeIn(1000); }); }); fadeOut…ゆっくり消えていく fadeIn…ゆっくり現れる かっこの中の数字はアニメーションする秒数(ms)です。
  16. 16. WordBench Nagoya 201601 WordBench Nagoya 201601 ■slideUp・slideDown $(function(){ $( button ).click(function(){ if($( img ).css( display ) === block ) { $( img ).slideUp(); } else { $( img ).slideDown(); }; }); }); slideUp…上にスライドして消える slideDown…上からスライドして現れる
  17. 17. WordBench Nagoya 201601 WordBench Nagoya 201601 ■slideToggle $(function(){ $( button ).click(function(){ $( img ).slideToggle(); }); }); slideToggle… 対象となる要素のdisplayプロパティがnoneだった場合、 slideDown()と同様の動きをします。 対象となる要素のdisplayプロパティがblockだった場合、 slideUp()と同様の動きをします。
  18. 18. WordBench Nagoya 201601 WordBench Nagoya 201601 ■show()・hide() $(function(){ $( button.slide ).click(function(){ if($( img ).css( display ) === block ) { $( img ).hide(); } else { $( img ).show(); }; }); }); hide()…隠す。displayプロパティをnoneにします。 show()…現れる。displayプロパティをblockにします。
  19. 19. WordBench Nagoya 201601 WordBench Nagoya 201601 ■animate $(function(){ $( button ).click(function(){ $( .wapuu ).animate({ left : 700px , top : 30px }, 600, swing ); }); });
  20. 20. WordBench Nagoya 201601 WordBench Nagoya 201601 ■animate $(function(){ $( button.animate ).click(function(){ $( .wapuu ).animate({ left : 700px , top : 30px }, 600, swing ); }); }); {}の中身…動かしたいCSSを指定。 ※pxや%やemなどの単位で指定できるものに限ります。
  21. 21. WordBench Nagoya 201601 WordBench Nagoya 201601 ■animate $(function(){ $( button.animate ).click(function(){ $( .wapuu ).animate({ left : 700px , top : 30px }, 600, swing ); }); }); はやさ。同じく(ms)で指定。
  22. 22. WordBench Nagoya 201601 WordBench Nagoya 201601 ■animate $(function(){ $( button.animate ).click(function(){ $( .wapuu ).animate({ left : 700px , top : 30px }, 600, swing ); }); }); 動かし方。以下の二つから選べます。 ・swing…最初と最後、ゆっくりになる。 ・linear…常に一定のスピード。
  23. 23. WordBench Nagoya 201601 WordBench Nagoya 201601 ■アジェンダ 【1.静的サイトにjQueryを入れてみよう】 ■1. 動かす前に  ・jQueryを読み込もう ■2. jQueryで動かしてみよう  ・基本的な書き方  ・fade⃝⃝、slide⃝⃝、show&hide、animate  ・バブリングや動きすぎの対処法 【2.WordPressに入れてみよう】  ・通常のjQueryとWordPressのjQueryの違い  ・WordPressでjQueryを呼び出す関数  ・高度なテクニック
  24. 24. WordBench Nagoya 201601 WordBench Nagoya 201601 ■バブリングや動きすぎの対処 $(function(){ $( .sample05 ).click(function(){ $( .sample05 ).slideUp(); }); $( li ).click(function(){ $( li ).slideUp(); )}; });
  25. 25. WordBench Nagoya 201601 WordBench Nagoya 201601 ■バブリングや動きすぎの対処 ■バブリング JavaScriptにはDOMという概念があり、与えられた命令は 「DOMを通じて上の各要素に伝播する」性質があります。 li div.sample05 document window 俺クリックされた! 拙者もクリックされた! 某もクリックされた! ワイもクリックされた!
  26. 26. WordBench Nagoya 201601 WordBench Nagoya 201601 ■バブリングや動きすぎの対処 ■動きすぎィ! イベントで「クリック(.click)」など使用したとき、 クリックするとクリックした数だけアニメーションが動きます。 $(function(){ $( button.slide ).click(function(){ $( img ).slideToggle(); }); });
  27. 27. WordBench Nagoya 201601 WordBench Nagoya 201601 ■バブリングや動きすぎの対処 ■対処方法 1.return falseをつかう $(function(){ $( .sample05 ).click(function(){ $( .sample05 ).slideUp(); }); $( li ).click(function(){ $( li ).slideUp(); return false; )}; }); return falseには伝播やHTML上の命令を止める働きがあります。 <a>タグのリンクの働きを打ち消すときにも使用されます。
  28. 28. WordBench Nagoya 201601 WordBench Nagoya 201601 ■バブリングや動きすぎの対処 ■対処方法 2.:not(:animated)をつかう $(function(){ $( button.bubble ).click(function(){ $( img:not(:animated) ).slideToggle(); }); }); 「:not()」は()内で指定したプロパティの打ち消し、 「:animated」はアニメーションしている、の意味です。
  29. 29. WordBench Nagoya 201601 WordBench Nagoya 201601 ■アジェンダ 【1.静的サイトにjQueryを入れてみよう】 ■1. 動かす前に  ・jQueryを読み込もう ■2. jQueryで動かしてみよう  ・基本的な書き方  ・fade⃝⃝、slide⃝⃝、show&hide、animate  ・バブリングや動きすぎの対処法 【2.WordPressに入れてみよう】  ・通常のjQueryとWordPressのjQueryの違い  ・WordPressでjQueryを呼び出す関数  ・高度なテクニック
  30. 30. WordBench Nagoya 201601 WordBench Nagoya 201601 ■WordPressが用意するjQuery WordPressではあらかじめ「jQuery本体」は 用意されています。 jQueryのWebサイトからダウンロードする必要はありません。 ダウンロードして 持って来んなヨ!
  31. 31. WordBench Nagoya 201601 WordBench Nagoya 201601 ■WordPressが用意するjQuery 実はWordPressが準備してくれるjQueryはちょっとだけ 加工されています。 jQuery.noConflict();
  32. 32. WordBench Nagoya 201601 WordBench Nagoya 201601 ■WordPressが用意するjQuery ■jQuery.noConflict() ってなに? $関数はprototype.jsなどをはじめ、多くのライブラリがそれぞれ拡張している関数で ある。 jQueryでも、核となるjQueryオブジェクトのショートカットとして極めて頻繁に利用 される。 このコマンドは、そのような$関数を定義する複数のライブラリを用いた際に衝突する ことを防ぐものである。 - jQuery日本語リファレンスより抜粋 - →WordPressではprototype.jsも使用されており、 prototype.jsとの衝突を防ぐため、関数の「$」が 使えないようになっています!
  33. 33. WordBench Nagoya 201601 WordBench Nagoya 201601 ■WordPress下のjQueryはこう書く! jQuery(function(){ jQuery( button.animate ).click(function(){ jQuery( .wapuu ).animate({ left : 700px , top : 30px }, 600, swing ); }); }); 「$」を「jQuery」という文字に置き換えてください!
  34. 34. WordBench Nagoya 201601 WordBench Nagoya 201601 ■WordPress下のjQueryはこう書く! でも… 人が書いたjQueryだとどこに「$」があるかなんて 見てられないですよね(́・ω・`)
  35. 35. WordBench Nagoya 201601 WordBench Nagoya 201601 ■WordPress下のjQueryはこう書く! (function($){ $(function(){ $( button.animate ).click(function(){ $( .wapuu ).animate({ left : 700px , top : 30px }, 600, swing ); }); }); })(jQuery); この方法を「カプセル化」といいます。
  36. 36. WordBench Nagoya 201601 WordBench Nagoya 201601 ■アジェンダ 【1.静的サイトにjQueryを入れてみよう】 ■1. 動かす前に  ・jQueryを読み込もう ■2. jQueryで動かしてみよう  ・基本的な書き方  ・fade⃝⃝、slide⃝⃝、show&hide、animate  ・バブリングや動きすぎの対処法 【2.WordPressに入れてみよう】  ・通常のjQueryとWordPressのjQueryの違い  ・WordPressでjQueryを呼び出す関数  ・高度なテクニック
  37. 37. WordBench Nagoya 201601 WordBench Nagoya 201601 ■WordPressでjQueryを呼び出す方法 普通に<script type=…></script>と書いてもいいですが キチンとWordPressの関数が用意されています。 <?php wp_enqueue_script( anime , get_template_directory_uri(). /js/animate.js , array(jquery) ) ; ?> これを「wp_head()」の前に書きます。
  38. 38. WordBench Nagoya 201601 WordBench Nagoya 201601 ■WordPressでjQueryを呼び出す方法 普通に<script type=…></script>と書いてもいいですが キチンとWordPressの関数が用意されています。 <?php wp_enqueue_script( anime , get_template_directory_uri(). /js/animate.js , array(jquery) ) ; ?> スクリプトのハンドル。必須なので何かアルファベットで 名前を入れる。説明は後述。
  39. 39. WordBench Nagoya 201601 WordBench Nagoya 201601 ■WordPressでjQueryを呼び出す方法 普通に<script type=…></script>と書いてもいいですが キチンとWordPressの関数が用意されています。 <?php wp_enqueue_script( anime , get_template_directory_uri(). /js/animate.js , array(jquery) ) ; ?> 読み込みたいjQueryの場所とファイル名。
  40. 40. WordBench Nagoya 201601 WordBench Nagoya 201601 ■WordPressでjQueryを呼び出す方法 普通に<script type=…></script>と書いてもいいですが キチンとWordPressの関数が用意されています。 <?php wp_enqueue_script( anime , get_template_directory_uri(). /js/animate.js , array( jquery") ) ; ?> 読み込み順を決定する。arrayの()の中に書いてあるのは 先ほど説明したハンドル。
  41. 41. WordBench Nagoya 201601 WordBench Nagoya 201601 ■アジェンダ 【1.静的サイトにjQueryを入れてみよう】 ■1. 動かす前に  ・jQueryを読み込もう ■2. jQueryで動かしてみよう  ・基本的な書き方  ・fade⃝⃝、slide⃝⃝、show&hide、animate  ・バブリングや動きすぎの対処法 【2.WordPressに入れてみよう】  ・通常のjQueryとWordPressのjQueryの違い  ・WordPressでjQueryを呼び出す関数  ・高度なテクニック
  42. 42. WordBench Nagoya 201601 WordBench Nagoya 201601 ■高度なテクニック (function($){ $(function(){ $( button.animate ).click(function(){ $( .wapuu ).animate({ left : 700px , top : 50px }, 600, swing , function(){ $( .ugo ).fadeIn(1000); }); }); }); })(jQuery);
  43. 43. WordBench Nagoya 201601 WordBench Nagoya 201601 ■高度なテクニック 動かす時間(animate関数の場合は動き)の後に、 さらにfunction()…で命令を出すことができます。 これはコールバック関数といいます。 コールバック関数は必ず最初に書いている処理の後に 動きだすようになっているので、 連続でアニメーションを動かす時、タイミングを調整するのに 使われます。
  44. 44. WordBench Nagoya 201601 WordBench Nagoya 201601 ■高度なテクニック ■演習問題です!
  45. 45. WordBench Nagoya 201601 WordBench Nagoya 201601 jQueryで動かしてみよう WordPressに導入してみよう 熊上 隆 動カスヨー
  46. 46. WordBench Nagoya 201601 WordBench Nagoya 201601 ■高度なテクニック この動きをjQueryで実現してみましょう! ※「動カスヨー」の文字っぽい画像はugo.jpgとして用意してあ ります。

×