Download - jQueryでつくる、動きのあるWebページ - 多摩美 メディアリテラシー
メディアリテラシー メディア芸術基礎 IIjQueryで作る動きのあるWebページ2011年10月31日 (Aクラス)、11月14日(Bクラス)多摩美術大学 情報デザイン学科 情報芸術コース担当：田所淳
Webブラウザで、プログラミングするには?
Webブラウザで、プログラミングするには?
‣ この授業の目標‣ 「Webブラウザで、動的な表現をしたい!!」
Webブラウザで、プログラミングするには?‣ Webブラウザで動的な表現をするには…‣ これまでは、Adobe Flashに代表される外部のプラグインをWebブラウザに読み込む方法が一般的だった
プラグイン
外部プログラムFlashなど
Webブラウザ
Webブラウザで、プログラミングするには?‣ しかし、この授業では、Webブラウザ自身の機能で、動的な表現をしていきたい
‣ Webブラウザ本体でプログラムを実行する‣ JavaScript - Webブラウザ自体をプログラミングする言語
JavaScript
Webブラウザ
JavaScriptについて‣ JavaScriptとは…‣ プロトタイプベースのオブジェクト指向プログラミング言語‣ 1995年に、Netscape Navigator 2.0用に開発
‣ 注意!!：サン・マイクロシステムズ(現在はオラクル)が開発したプログラミング言語「Java」とは全く関係がない!!
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";}
jQueryとは‣ もっと簡単な方法でプログラミングしたい!!‣ jQueryを使うと便利!!‣ jQuery：JavaScriptを簡単に使用するフレームワーク‣ 「wriite less, do more. (短かい記述で、沢山のことを)」
jQueryとは‣ jQuery‣ 2006年、John Resigが発表‣ わずかな記述で、アニメーションなどの高度な表現が可能‣ 現在、JavaScriptフレームワークの中では、圧倒的なシェア
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");
jQueryとは‣ jQueryを使用するメリット
‣ ブラウザ依存を気にしなくてよい。jQuery側でブラウザによる差異を吸収してくれる
‣ 軽くて速い!!‣ オープンソース (MITライセンス + GPLライセンス)‣ 情報が豊富：試しにGoogleで「jQuery」で検索してみる
jQuery ≠ HTML5‣ jQuery は HTML5 ではない‣ しかし、jQueryでHTML5の要素(Canvasなどの画像データも含めて)操作することも可能
‣ jQueryは、HTML5も含んだより広範な環境
HTML5 jQuery
jQueryとは‣ jQuery日本語リファレンス‣ http://semooh.jp/jquery/
jQuery入門環境設定
jQuery 環境設定‣ jQueryを使用するには、まずjQueryの環境を適用するHTMLファイルに読み込まなくてはならない
‣ 方法は2種類‣ 1. jQueryのファイルをダウンロードし、リンクする‣ 2. CDN（Content Delivery Network）を利用する
‣ 今回は、手軽に利用可能な2番目のCDNを利用する方法を解説します
‣ CDNとは、CDNとは「Content Delivery Network」の略で、ネットワーク経由でコンテンツを提供するサービス
jQuery 環境設定‣ まずは、ベースとなるHTML書類を用意する‣ 今回はHTML5形式のテンプレートをベースにします
<!DOCTYPE html><html>! <head>! ! <meta charset="utf-8" />! ! <title>jQueryのテスト</title>! </head>! <body>! ! <h1>jQueryのテスト</h1>! </body></html>
jQuery 環境設定‣ ブラウザで確認
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>
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>
jQuery 環境設定‣ これで、jQueryの環境設定は完了したはず‣ さっそく、簡単なコードで動作確認
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>
jQuery 環境設定‣ ブラウザで確認‣ 見出しの文字が、徐々に消えていくはず…
jQuery 環境設定‣ ちょっとだけコードを追加<script> $(function() { $("h1").fadeOut(3000); });</script>
<script> $(function() { $("h1").fadeOut(3000).fadeIn(3000); });</script>
jQuery 環境設定‣ いったんフェードアウトして…またフェードインしてくるはず
jQuery入門基本文法
jQuery の基本文法‣ jQueryのコードは、HTML文書の中で script 要素でマークアップした中に記述する
<script> $(function() {
$("h1").fadeOut(3000);
});
</script>
jQuery の基本文法‣ 次にコード全体を、$(function() {..... }); という記述で囲むこれは、HTMLのロードか完了したら実行するという意味
<script> $(function() {
$("h1").fadeOut(3000);
});</script>
jQuery の基本文法‣ どの要素に、処理を適用するかを指定する (セレクタ)‣ この例の場合は、h1要素に命令
<script> $(function() {
$("h1").fadeOut(3000);
});</script>
jQuery の基本文法‣ 処理の内容を記述 (メソッド)‣ この例の場合は、3000ミリ秒 (= 3秒) かけてフェードアウト
<script> $(function() {
$("h1").fadeOut(3000);
});</script>
jQuery の基本文法‣ 「 . 」(ドット) でつないで、メソッドを連結可能‣ メソッドチェーン
<script> $(function() {
$("h1").fadeOut(3000) .fadeIn(3000);
});</script>
いろいろなメソッド(命令)‣ テキストの設定‣ HTMLの要素のテキストを置換することができる
$(function() { //h1のテキストを「こんにちは」に $("h1").text("こんにちは");});
いろいろなメソッド(命令)‣ CSSスタイルの設定‣ 選択した要素のCSSの値を変更することが可能
$(function() { //h1の背景色を変更 $("h1").css("backgroundColor","#336699");});
いろいろなメソッド(命令)‣ CSSスタイルの設定‣ 複数の属性と値を変更することも可能
$(function() { //h1のCSSの値を複数変更 $("h1").css({ backgroundColor:"#336699", color:"white", size:"40px", padding:"20px" })});
いろいろなメソッド(命令)‣ アニメーション‣ CSSの数値化できる属性であればアニメーションできる‣ たとえば、marginを操作して、位置を動かしてみる
//上の余白を500pxに → つまり下に500px移動$("h1").animate({marginTop:"500px"}, 500);
//下に500px移動して、1000ms静止して、また上に戻る$("h1").animate({marginTop:"500px"}, 500).delay(1000).animate({marginTop:"0px"}, 200);
いろいろなメソッド(命令)‣ アニメーション‣ テキストのサイズや透明度など複数の属性を一度にアニメーションさせてみる
$(function() { //半透明になりながら拡大し、また元に戻る $("h1").animate({ fontSize:"150px", opacity:0.2 }, 500) .delay(1000) .animate({ fontSize:"40px", opacity:1.0 }, 500);});
いろいろなメソッド(命令)‣ アニメーション‣ 注意!! 数値化できない値(色など)はアニメーションできない
$(function() { //このコードはNG、色をアニメーションできない $("h1").animate({ color:"white", backgroundColor:"blue" }, 500));});
いろいろなメソッド(命令)‣ 実習：とりあえずjQueryに慣れる
‣ テキストの置換、CSSの変更、アニメーションなどを駆使して、いろいろな動きを試してみる
‣ まずは、いろいろ楽しみながら遊んでみましょう
いろいろなメソッド(命令)‣ 例：四隅に順番に移動する$(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" });});
いろいろなメソッド(命令)‣ 例：四隅に順番に移動する
イベント
「イベント」とは何か?‣ 今日のテーマ‣ jQueryの「イベント」を理解する
‣ イベントとは?‣ 命令が実行されるタイミングを決める
「イベント」とは何か?‣ イベントの例
‣ HTMLのページの読込が完了したら、○○を実行‣ ユーザがマウスをクリックしたら、○○を実行‣ キーボードからキーを入力したら、○○を実行‣ 特定の要素にマウスポインタが重なったら、○○を実行
‣ 命令を実行するための、様々な「きっかけ」がイベント
「イベント」とは何か?‣ 実は、既に一つイベントを使用している
‣ $(function(){ ... })；‣ Webページ全体の読込が終了したら、命令を実行‣ 読込完了を「きっかけ」にしたイベントの一つ
$(function() {
...
});
「イベント」とは何か?‣ $(function(){ ... })； は省略した記述‣ 省略せずに書くと以下のようになる
‣ 「書類の読込みがおわったら」という意味
$(function() { ...});
$(document).ready(function() { ...});
「イベント」とは何か?‣ 今日の最重要ポイント!!‣ jQueryのイベントは全て以下の書式で記述する
‣ 実際に試していきましょう!
$(セレクター).イベント(function() { $(セレクター).命令；});
jQueryのスクリプトを別ファイルで‣ 先週のやりかた‣ jQueryのスクリプトを、HTMLファイルの head 要素の中で、script要素を使用して内包していた
‣ 今回は、jQueryを別ファイルで記述したい
jQueryのスクリプトを別ファイルで‣ jQueryを別ファイルにして読みこむには‣ script要素のsrc属性でファイル名を指定する
‣ 例えば、jQueryのプログラムが「script.js」だったら
<script src="ファイル名"></script>
<script src="script.js"></script>
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>
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>
HTMLファイルを用意する‣ 画像が表示される
イベント - クリックした画像を隠す‣ 「画像をクリックしたら、画像を隠す」というプログラムを作成してみたい
‣ jQueryでの考え方‣ 「画像をクリックしたら」→ イベント‣ 「画像を隠す」→ 命令
イベント - クリックした画像を隠す‣ ただし、実際には、HTML書類が全て読みこまれてからでないと、「クリックしたら」を実現できない
‣ 下記のように考える
‣ 1.「書類が全て読み込まれたら、次の命令を実行」‣ 2.「 画像をクリックしたら、画像を隠す」
‣ この2つのイベントをまずはjQueryで記述してみる
イベント - クリックした画像を隠す‣ まずはイベントを記述 (script.jsに記述する)
‣ 書類が読みこまれたら (イベント)
$(function(){
});
イベント - クリックした画像を隠す‣ さらに追記
‣ img要素をクリックしたら、命令を実行 (イベント)
$(function(){ $("img").click(function(){
});});
イベント - クリックした画像を隠す‣ さらに、さらに追記
‣ img要素を隠す (命令)
$(function(){ $("img").click(function(){ $("img").hide(); });});
イベント - クリックした画像を隠す‣ クリックすると画像が消えるはず
イベント - クリックした画像をフェードアウト‣ 単純に消えるだけでなく、エフェクトをかけることも可能
‣ 例：クリックすると1秒(1000msec)かけてフェードアウト$(function(){ $("img").click(function(){ $("img").fadeOut(1000); });});
イベント - クリックした画像をフェードアウト‣ イベントを適用した要素自身のセレクタは、$(this)と書き換えることもできる
$(function(){ $("img").click(function(){ $(this).fadeOut(1000); });});
イベント - クリックした画像をフェードアウト‣ 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>
イベント - クリックした画像をフェードアウト‣ ブラウザで表示
イベント - クリックした画像をフェードアウト‣ クリックした画像がフェードアウトして消えていく
イベント - 画像を入れかえる‣ 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>
イベント - 画像を入れかえる‣ Webブラウザで確認
イベント - 画像を入れかえる‣ 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"); }); });
イベント - 画像を入れかえる‣ リンクをクリックすると、写真が入れかわるはず!!‣ ページを再読み込みすることなく画像だけが変化している
まとめ‣ 今日はここまで‣ jQueryのイベントの基本を理解する‣ 次回は、このイベントの仕組みを応用して、jQueryを活用したナビゲーションメニューを作成します
