Your SlideShare is downloading. ×
メディア芸術基礎 II jQuery入門
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

メディア芸術基礎 II jQuery入門

1,519
views

Published on


0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,519
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
15
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. メディア芸術基礎 II jQuery入門 2013年10月14日、10月21日 多摩美術大学情報デザイン学科メディア芸術コース 担当:田所淳
  • 2. Webブラウザで、プログラミングするには?
  • 3. Webブラウザで、プログラミングするには? ‣ この授業の目標 ‣ 「Webブラウザで、動的な表現をしたい!!」
  • 4. Webブラウザで、プログラミングするには? ‣ Webブラウザで動的な表現をするには… ‣ これまでは、Adobe Flashに代表される外部のプラグインを Webブラウザに読み込む方法が一般的だった プラグイン 外部プログラム Flashなど Webブラウザ
  • 5. Webブラウザで、プログラミングするには? ‣ しかし、この授業では、Webブラウザ自身の機能で、動的な表 現をしていきたい ‣ Webブラウザ本体でプログラムを実行する ‣ JavaScript - Webブラウザ自体をプログラミングする言語 JavaScript Webブラウザ
  • 6. JavaScriptについて ‣ JavaScriptとは… ‣ プロトタイプベースのオブジェクト指向プログラミング言語 ‣ 1995年に、Netscape Navigator 2.0用に開発 ‣ 注意!!:サン・マイクロシステムズ(現在はオラクル)が開発した プログラミング言語「Java」とは全く関係がない!!
  • 7. JavaScriptについて ‣ JavaScriptを使用することで、WebページのHTML要素を直接 操作することが可能となる ‣ 例えば「Webページの中のh1要素を探しだして、全てのh1要 素の文字の色を赤くする」 ‣ それなりに、プログラミングの知識は必要… var divs = document.getElementsByTagName("h1"); for(var i = 0; i < divs.length; i++) { ! divs[i].style.color = "red"; }
  • 8. jQueryとは ‣ もっと簡単な方法でプログラミングしたい!! ‣ jQueryを使うと便利!! ‣ jQuery:JavaScriptを簡単に使用するフレームワーク ‣ 「wriite less, do more. (短かい記述で、沢山のことを)」
  • 9. jQueryとは ‣ jQuery ‣ 2006年、John Resigが発表 ‣ わずかな記述で、アニメーションなどの高度な表現が可能 ‣ 現在、JavaScriptフレームワークの中では、圧倒的なシェア
  • 10. jQueryとは ‣ さっきのJavaScriptのコードを、jQueryで書き換えてみる ‣ たった、これだけ。とてもシンプル。 var divs = document.getElementsByTagName("h1"); for(var i = 0; i < divs.length; i++) { ! divs[i].style.color = "red"; } $("h1").css("color", "red");
  • 11. jQueryとは ‣ jQueryを使用するメリット ‣ ブラウザ依存を気にしなくてよい。jQuery側でブラウザによる 差異を吸収してくれる ‣ 軽くて速い!! ‣ オープンソース (MITライセンス + GPLライセンス) ‣ 情報が豊富:試しにGoogleで「jQuery」で検索してみる
  • 12. jQuery ≠ HTML5 ‣ jQuery は HTML5 ではない ‣ しかし、jQueryでHTML5の要素(Canvasなどの画像データも含 めて)操作することも可能 ‣ jQueryは、HTML5も含んだより広範な環境 HTML5 jQuery
  • 13. jQueryとは ‣ jQuery日本語リファレンス ‣ http://semooh.jp/jquery/
  • 14. jQuery入門 環境設定
  • 15. jQuery 環境設定 ‣ jQueryを使用するには、まずjQueryの環境を適用するHTML ファイルに読み込まなくてはならない ‣ 方法は2種類 ‣ 1. jQueryのファイルをダウンロードし、リンクする ‣ 2. CDN(Content Delivery Network)を利用する ‣ 今回は、手軽に利用可能な2番目のCDNを利用する方法を解説 します ‣ CDNとは、CDNとは「Content Delivery Network」の略で、 ネットワーク経由でコンテンツを提供するサービス
  • 16. jQuery 環境設定 ‣ まずは、ベースとなるHTML書類を用意する ‣ 今回はHTML5形式のテンプレートをベースにします <!DOCTYPE html> <html> ! <head> ! ! <meta charset="utf-8" /> ! ! <title>jQueryのテスト</title> ! </head> ! <body> ! ! <h1>jQueryのテスト</h1> ! </body> </html>
  • 17. jQuery 環境設定 ‣ ブラウザで確認
  • 18. jQuery 環境設定 ‣ jQueryの環境を読み込む ‣ jQueryのCDNとして、Google Library API を使用 ‣ http://code.google.com/intl/ja/apis/libraries/ ‣ バージョンとロードするライブラリの種類を指定すると、自動 的に最適なファイルにリンクしてくれる ‣ Version 1の中の最新のjQueryをロードする場合 ‣ HTMLファイルの、head要素内に書きこむ <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script>
  • 19. jQuery 環境設定 ‣ head要素内に、jQueryをGoogleのCDNから読み込む <!DOCTYPE html> <html> ! <head> ! ! <meta charset="utf-8" /> ! ! <title>jQueryのテスト</title> ! ! <script src="http://www.google.com/jsapi"></script> ! ! <script>google.load("jquery", "1");</script> ! </head> ! <body> ! ! <h1>jQueryのテスト</h1> ! </body> </html>
  • 20. jQuery 環境設定 ‣ これで、jQueryの環境設定は完了したはず ‣ さっそく、簡単なコードで動作確認
  • 21. jQuery 環境設定 ‣ 確認用のコードを記入 <!DOCTYPE html> <html> ! <head> ! ! <meta charset="utf-8" /> ! ! <title>jQueryのテスト</title> ! ! <script src="http://www.google.com/jsapi"></script> ! ! <script>google.load("jquery", "1");</script> ! ! <script> ! ! ! $(function() { ! ! ! $("h1").fadeOut(3000); ! ! ! }); ! ! </script> ! </head> ! <body> ! ! <h1>jQueryのテスト</h1> ! </body> </html>
  • 22. jQuery 環境設定 ‣ ブラウザで確認 ‣ 見出しの文字が、徐々に消えていくはず…
  • 23. jQuery 環境設定 ‣ ちょっとだけコードを追加 <script> $(function() { $("h1").fadeOut(3000); }); </script> <script> $(function() { $("h1").fadeOut(3000).fadeIn(3000); }); </script>
  • 24. jQuery 環境設定 ‣ いったんフェードアウトして…またフェードインしてくるはず
  • 25. jQuery入門 基本文法
  • 26. jQuery の基本文法 ‣ jQueryのコードは、HTML文書の中で script 要素でマークアッ プした中に記述する <script> $(function() { $("h1").fadeOut(3000); }); </script>
  • 27. jQuery の基本文法 ‣ 次にコード全体を、$(function() {..... }); という記述で囲むこれ は、HTMLのロードか完了したら実行するという意味 <script> $(function() { $("h1").fadeOut(3000); }); </script>
  • 28. jQuery の基本文法 ‣ どの要素に、処理を適用するかを指定する (セレクタ) ‣ この例の場合は、h1要素に命令 <script> $(function() { $("h1").fadeOut(3000); }); </script>
  • 29. jQuery の基本文法 ‣ 処理の内容を記述 (メソッド) ‣ この例の場合は、3000ミリ秒 (= 3秒) かけてフェードアウト <script> $(function() { $("h1").fadeOut(3000); }); </script>
  • 30. jQuery の基本文法 ‣ 「 . 」(ドット) でつないで、メソッドを連結可能 ‣ メソッドチェーン <script> $(function() { $("h1").fadeOut(3000) .fadeIn(3000); }); </script>
  • 31. いろいろなメソッド(命令) ‣ テキストの設定 ‣ HTMLの要素のテキストを置換することができる $(function() { //h1のテキストを「こんにちは」に $("h1").text("こんにちは"); });
  • 32. いろいろなメソッド(命令) ‣ CSSスタイルの設定 ‣ 選択した要素のCSSの値を変更することが可能 $(function() { //h1の背景色を変更 $("h1").css("backgroundColor","#336699"); });
  • 33. いろいろなメソッド(命令) ‣ CSSスタイルの設定 ‣ 複数の属性と値を変更することも可能 $(function() { //h1のCSSの値を複数変更 $("h1").css({ backgroundColor:"#336699", color:"white", size:"40px", padding:"20px" }) });
  • 34. いろいろなメソッド(命令) ‣ アニメーション ‣ CSSの数値化できる属性であればアニメーションできる ‣ たとえば、marginを操作して、位置を動かしてみる //上の余白を500pxに → つまり下に500px移動 $("h1").animate({marginTop:"500px"}, 500); //下に500px移動して、1000ms静止して、また上に戻る $("h1").animate({marginTop:"500px"}, 500) .delay(1000) .animate({marginTop:"0px"}, 200);
  • 35. いろいろなメソッド(命令) ‣ アニメーション ‣ テキストのサイズや透明度など複数の属性を一度にアニメー ションさせてみる $(function() { //半透明になりながら拡大し、また元に戻る $("h1").animate({ fontSize:"150px", opacity:0.2 }, 500) .delay(1000) .animate({ fontSize:"40px", opacity:1.0 }, 500); });
  • 36. いろいろなメソッド(命令) ‣ アニメーション ‣ 注意!! 数値化できない値(色など)はアニメーションできない $(function() { //このコードはNG、色をアニメーションできない $("h1").animate({ color:"white", backgroundColor:"blue" }, 500)); });
  • 37. いろいろなメソッド(命令) ‣ 実習:とりあえずjQueryに慣れる ‣ テキストの置換、CSSの変更、アニメーションなどを駆使し て、いろいろな動きを試してみる ‣ まずは、いろいろ楽しみながら遊んでみましょう
  • 38. いろいろなメソッド(命令) ‣ 例:四隅に順番に移動する $(function() { //h1のCSSの値を複数変更 $("h1").css({ backgroundColor:"#6699cc", color:"white", size:"40px", padding:"20px", }) .animate({ paddingLeft:"640px", }).delay(200) .animate({ paddingLeft:"20px", marginLeft:"640px" }).delay(200) .animate({ paddingTop:"60%" }).delay(200) .animate({ marginLeft:"0" }).delay(200) .animate({ paddingTop:"20px" }); });
  • 39. いろいろなメソッド(命令) ‣ 例:四隅に順番に移動する
  • 40. イベント
  • 41. 「イベント」とは何か? ‣ 今日のテーマ ‣ jQueryの「イベント」を理解する ‣ イベントとは? ‣ 命令が実行されるタイミングを決める
  • 42. 「イベント」とは何か? ‣ イベントの例 ‣ HTMLのページの読込が完了したら、○○を実行 ‣ ユーザがマウスをクリックしたら、○○を実行 ‣ キーボードからキーを入力したら、○○を実行 ‣ 特定の要素にマウスポインタが重なったら、○○を実行 ‣ 命令を実行するための、様々な「きっかけ」がイベント
  • 43. 「イベント」とは何か? ‣ 実は、既に一つイベントを使用している ‣ $(function(){ ... }); ‣ Webページ全体の読込が終了したら、命令を実行 ‣ 読込完了を「きっかけ」にしたイベントの一つ $(function() { ... });
  • 44. 「イベント」とは何か? ‣ $(function(){ ... }); は省略した記述 ‣ 省略せずに書くと以下のようになる ‣ 「書類の読込みがおわったら」という意味 $(function() { ... }); $(document).ready(function() { ... });
  • 45. 「イベント」とは何か? ‣ 今日の最重要ポイント!! ‣ jQueryのイベントは全て以下の書式で記述する ‣ 実際に試していきましょう! $(セレクター).イベント(function() { $(セレクター).命令; });
  • 46. jQueryのスクリプトを別ファイルで ‣ 先週のやりかた ‣ jQueryのスクリプトを、HTMLファイルの head 要素の中で、 script要素を使用して内包していた ‣ 今回は、jQueryを別ファイルで記述したい
  • 47. jQueryのスクリプトを別ファイルで ‣ jQueryを別ファイルにして読みこむには ‣ script要素のsrc属性でファイル名を指定する ‣ 例えば、jQueryのプログラムが「script.js」だったら <script src="ファイル名"></script> <script src="script.js"></script>
  • 48. HTMLファイルを用意する ‣ 外部スクリプト「script.js」を読みこむ設定でHTMLファイル の雛形を作成 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQueryのテスト</title> <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script> <script src="script.js"></script> </head> <body> </body> </html>
  • 49. HTMLファイルを用意する ‣ 今回はimg要素をjQueryで操作してみます。 ‣ 例えば、test.jpgという画像ファイルを用意して… <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQueryのテスト</title> <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script> <script src="script.js"></script> </head> <body> <img src="test.jpg" alt="jQueryテスト画像" /> </body> </html>
  • 50. HTMLファイルを用意する ‣ 画像が表示される
  • 51. イベント - クリックした画像を隠す ‣ 「画像をクリックしたら、画像を隠す」というプログラムを作 成してみたい ‣ jQueryでの考え方 ‣ 「画像をクリックしたら」→ イベント ‣ 「画像を隠す」→ 命令
  • 52. イベント - クリックした画像を隠す ‣ ただし、実際には、HTML書類が全て読みこまれてからでない と、「クリックしたら」を実現できない ‣ 下記のように考える ‣ 1.「書類が全て読み込まれたら、次の命令を実行」 ‣ 2.「 画像をクリックしたら、画像を隠す」 ‣ この2つのイベントをまずはjQueryで記述してみる
  • 53. イベント - クリックした画像を隠す ‣ まずはイベントを記述 (script.jsに記述する) ‣ 書類が読みこまれたら (イベント) $(function(){ });
  • 54. イベント - クリックした画像を隠す ‣ さらに追記 ‣ img要素をクリックしたら、命令を実行 (イベント) $(function(){ $("img").click(function(){ }); });
  • 55. イベント - クリックした画像を隠す ‣ さらに、さらに追記 ‣ img要素を隠す (命令) $(function(){ $("img").click(function(){ $("img").hide(); }); });
  • 56. イベント - クリックした画像を隠す ‣ クリックすると画像が消えるはず
  • 57. イベント - クリックした画像をフェードアウト ‣ 単純に消えるだけでなく、エフェクトをかけることも可能 ‣ 例:クリックすると1秒(1000msec)かけてフェードアウト $(function(){ $("img").click(function(){ $("img").fadeOut(1000); }); });
  • 58. イベント - クリックした画像をフェードアウト ‣ イベントを適用した要素自身のセレクタは、$(this)と書き換え ることもできる $(function(){ $("img").click(function(){ $(this).fadeOut(1000); }); });
  • 59. イベント - クリックした画像をフェードアウト ‣ HTML側を変更 ‣ 複数の画像ファイルを並べて貼りつけてみる <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQueryのテスト</title> <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script> <script src="script.js"></script> </head> <body> <img src="test1.jpg" alt="画像1" /><br /> <img src="test2.jpg" alt="画像2" /><br /> <img src="test3.jpg" alt="画像3" /><br /> <img src="test4.jpg" alt="画像4" /> </body> </html>
  • 60. イベント - クリックした画像をフェードアウト ‣ ブラウザで表示
  • 61. イベント - クリックした画像をフェードアウト ‣ クリックした画像がフェードアウトして消えていく
  • 62. イベント - 画像を入れかえる ‣ HTMLファイルを再度修正、画像を1枚だけに ‣ a要素(リンク)を、写真の枚数分用意する <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQueryのテスト</title> <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script> <script src="script.js"></script> </head> <body> <nav> <ul> <li><a href="#">写真 1</a></li> <li><a href="#">写真 2</a></li> <li><a href="#">写真 3</a></li> <li><a href="#">写真 4</a></li> </ul> </nav> <img src="test1.jpg" alt="画像1" /><br /> </body> </html>
  • 63. イベント - 画像を入れかえる ‣ Webブラウザで確認
  • 64. イベント - 画像を入れかえる ‣ script.jsを編集 $(function(){ $("a:eq(0)").click(function(){ $("img").attr("src","test1.jpg"); }); $("a:eq(1)").click(function(){ $("img").attr("src","test2.jpg"); }); $("a:eq(2)").click(function(){ $("img").attr("src","test3.jpg"); }); $("a:eq(3)").click(function(){ $("img").attr("src","test4.jpg"); }); });
  • 65. イベント - 画像を入れかえる ‣ リンクをクリックすると、写真が入れかわるはず!! ‣ ページを再読み込みすることなく画像だけが変化している
  • 66. まとめ ‣ 今日はここまで ‣ jQueryのイベントの基本を理解する ‣ 次回は、このイベントの仕組みを応用して、jQueryを活用した ナビゲーションメニューを作成します