WordBench Kobe jQueryどうでしょう

2,296 views

Published on

Published in: Technology
  • Be the first to comment

WordBench Kobe jQueryどうでしょう

  1. 1. jQueryの基礎∼そしてcarouFredSelがすばらしすぎて泣ける第15回WordBench神戸 jQueryどうでしょう@HissyNC
  2. 2. 自己紹介• 菱川拓郎 @HissyNC• コンクリートファイブジャパンという会社をやって ます。オープンソースCMSのサポートを提供する会 社です。• オープンソースCMS大好き。最近は contao, ImpressPages CMS, ExpressionEngineに興味。 フロントエンドエンジニア、ウェブディレクター
  3. 3. 今日の話題はjQuery
  4. 4. 今日の内容• jQuery初心者に、jQueryとは何かを解 説• よくわからないままコピペで使っている jQueryユーザーに、書き方で気をつける ポイントを伝授• jQuery中級者におすすめのカルーセルラ イブラリの紹介
  5. 5. jQueryとは?• 迅速なWeb開発のための、高速で簡単に HTMLドキュメントの解析、イベントハン ドリング、アニメーション、Ajaxインタラ クションを行うためのJavascriptライブラ リ。Javascriptの書き方を変えるためにデ ザインされた。(公式サイトより)• …?• ……??????
  6. 6. 超訳・jQueryとは HTMLの要素に対する オプション設定
  7. 7. jQueryこう考えよう $(‘#test’).show(); HTMLの要素に指示を出す $(‘p’).attr(‘alt’,‘test’); HTMLの要素のオプション設定を変更する
  8. 8. Javascriptは難しい• Javascriptはプログラミング言語• プログラミング言語は、何かにしてほしいこと を人間から指示を出す• Javascriptの場合は、ブラウザに指示を出す• ブラウザはいっぱいあって、同じことを言って も同じように聞いてくれない• いろんなブラウザへの調整で指示書がどんど ん長くなっていきます
  9. 9. そこでjQueryは考えた• ブラウザに指示を出すからややこしいん じゃね?• HTML内の要素(DOM)に指示を出すよう に変えよう!• そのためにブラウザの違いは先に調整して おこう!• 長ったらしく書くのは大変だし重くなるか ら、できるだけ短く書けるようにしよう!
  10. 10. Javascript / jQuery 比較 • [Javascript] var element=document.getElementB yId("test") ; element.style.display = block ; • [jQuery] $( #test ).show(); • jQueryの方が短い! → HTMLの要素(DOM)に直接指示を 出せるから
  11. 11. DOM = Document Object Model • HTMLとJavascriptをつなぐ仕組み • HTMLをツリー状に解釈することで、 HTMLの中の特定の部分にJavascriptか らアクセスすることを可能にする • html └body  └div#wrapper   └p.text    └"HTML" ←テキストがツリーの末端になる
  12. 12. 最低限必要なプログラミングの知識• 上の行から下の行へ、1行ずつ処理されます。• 行の変わり目は改行ではなく、セミコロン 「 ; 」です。• 中括弧 { } でくくられた部分は、上から下への 流れとは独立した処理になります。• jQueryを使うにはこれくらいでOK
  13. 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. 14. 準備・1• 注意事項: jQueryは1回読みこめばOK。 たまにサンプルのコピペで何回も読み込 んでいる人がいますが、動作不良の原因 です。
  15. 15. 準備・2• DOMが読み込まれるのを待つ• <script> $(document).ready(function(){ // この中はDOMが読み込まれた後に実行される }); </script>• ※$(document).readyは$で代用可能
  16. 16. 準備・2• 「$」というキーワードを使う Javascriptライブラリが他にもあるの で、WordPressではコンフリクト回避 のために「$」が無効になっています。• 一番楽な回避策 <script> jQuery(document).ready(function($){ // この中は$が使える }); </script>
  17. 17. 準備完了• jQueryを使う準備は、この2ステップ• それでは、jQueryで何ができるのかを見 て行きましょう。ポイントは、DOMを選 択して、指示を出すの2ステップ• ドキュメントはこちら。復習にどうぞ http://api.jquery.com/
  18. 18. Selectors • まずDOMを選択。CSSと同じ感覚で HTMLの要素を選択できる • $( #id ) $( .class ) $( p ) • $( .class1, .class2, .class3 ) • 選択したら、指示を出すだけ
  19. 19. Selectors Filter • 条件付きで絞り込める • $( ul li:first ) // 最初の要素 • $( ul:first-child ) // 最初の子要素↑同じ • $( ul li:odd ) // 奇数要素 • $( ul li:not(.current_page_item)) // 除外
  20. 20. Attributes • 要素の属性を変更できる • $( p ).addClass( hoge ); // classを追加 • $( img ).attr( alt ); // 属性を取得 • $( img ).attr( alt , great photo ); // 属性を変更
  21. 21. CSS• CSSを直接変更できる• $( p ).css( color , red ); // p { color: red; }• $( p ).css({ background-color : #ddd, font-weight : bold, color : rgb(0,40,244) }); // 一括指定
  22. 22. Traversing • 日本語で探索?とでも言いましょうか… • $(li.current_menu_item) .children() .css(background-color, red); • ul + li.current_menu_item + a ←これだけに反映 + li +a
  23. 23. メソッドチェイン• 先ほどのページのサンプル。• $(li.current_menu_item) .children() .css(background-color, red);• 一度DOMを選択すれば、あとは何度で も指示を出すことができます。
  24. 24. Traversing • 1行でいろいろできちゃう • $(ul.menu).css(color,red) .children() .filter(.current_menu_item) .css(font-weight,bold) .parent() .find(span) .css(color,green);
  25. 25. こうなりました。
  26. 26. Manipulation • DOMの操作 • $(div).append(<p>Test</p>); // divの中(末尾)に追加 • $(div).prepend(<p>Test</p>); // divの中(先頭)に追加
  27. 27. Events• // 要素をクリックしたときに処理を行う $("#target").click(function() { $( p ).css( color , red ); });• $("#target").hover(function() { // マウスが乗ったとき $( p ).css( background-color , red ); },function(){ // マウスが外れたとき $( p ).css( background-color , inherit ); });
  28. 28. Effects • エフェクトが一番おなじみかも • $("#target").click(function() { $( p ).fadeIn(); // フェードイン }); • $("#target").click(function() { $(p).animate({ opacity:0.25, margin-left:+=500 // +500px }, 500); }); • animateは色が使えないので注意
  29. 29. jQueryは短く書くのが流儀• Javascirptが書ける人はこうしがち var p = $(p); if ( p.className == test ) { p.addClass(add); }• jQuery流ならエレガント! $( p.test ).addClass( add );• TraversingのAPIはぜひ活用しましょう。if文 は書かない
  30. 30. 他にもまだまだあります。• jQueryでできることはたくさんありま す。• 全部覚えるのは大変だし、結局大変なの で、jQueryプラグインを使いましょう。
  31. 31. ここで急に飛びまして…
  32. 32. カルーセルUIの神プラグイン
  33. 33. カルーセルとは?
  34. 34. carouFredSelはここがすごい • どんなHTML要素でもカルーセルにでき る。1つのアイテムでも、複数のアイテム でもOK。 • 水平でも垂直でもOK。 • 最後まで行ったらとまるか、繰り返しか も自由 • レスポンシブ対応!
  35. 35. 柔軟なオプション• 設定項目が豊富。あらゆるデザインに対応 http://caroufredsel.frebsite.nl/ configuration.php• 地味に嬉しいイベント充実。カルーセルの切 り替わりのタイミングで別の処理を挟み込ん だり、一時停止したり、思うがまま http://caroufredsel.frebsite.nl/custom- events.php
  36. 36. 設定ロボット君が親切http://caroufredsel.frebsite.nl/configuration-robot.php • 質問に答えていくだけでjQueryを書いて くれるロボット君! • サンプルのコピペからはオサラバです
  37. 37. クールなサンプル集 http://coolcarousels.frebsite.nl/
  38. 38. 実例http://coolcarousels.frebsite.nl/c/27/ http://monreve-japan.com/
  39. 39. WordPressと相性がいい• どんなHTMLの構造でもほぼ対応できる• HTMLがある程度決まってくるCMSの場 合でも安心!

×