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

メディア芸術基礎 II
jQuery入門
2013年10月14日、10月21日
多摩美術大学情報デザイン学科メディア芸術コース
担当：田所淳

Webブラウザで、プログラミングするには?

‣ この授業の目標
‣ 「Webブラウザで、動的な表現をしたい!!」

‣ Webブラウザで動的な表現をするには…
‣ これまでは、Adobe Flashに代表される外部のプラグインを
Webブラウザに読み込む方法が一般的だった
プラグイン
外部プログラム
Flashなど
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の環境を適用する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>
! ! <script src="http://www.google.com/jsapi"></script>
! ! <script>google.load("jquery", "1");</script>
! </head>
! <body>
! </body>
</html>

jQuery 環境設定
‣ これで、jQueryの環境設定は完了したはず
‣ さっそく、簡単なコードで動作確認

jQuery 環境設定
‣ 確認用のコードを記入
<!DOCTYPE html>
<html>
! <head>
! ! <script src="http://www.google.com/jsapi"></script>
! ! <script>google.load("jquery", "1");</script>
! ! <script>
! ! ! $(function() {
! ! ! $("h1").fadeOut(3000);
! ! ! });
! ! </script>
! </head>
! <body>
! </body>
</html>

jQuery 環境設定
‣ ブラウザで確認
‣ 見出しの文字が、徐々に消えていくはず…

jQuery 環境設定
‣ ちょっとだけコードを追加
<script>
$(function() {
$("h1").fadeOut(3000);
});
</script>
<script>
$(function() {
$("h1").fadeOut(3000).fadeIn(3000);
});
</script>

jQuery 環境設定
‣ いったんフェードアウトして…またフェードインしてくるはず

jQuery の基本文法
‣ jQueryのコードは、HTML文書の中で script 要素でマークアッ
プした中に記述する
<script>
$(function() {
$("h1").fadeOut(3000);
});
</script>

‣ 次にコード全体を、$(function() {..... }); という記述で囲むこれ
は、HTMLのロードか完了したら実行するという意味
<script>
$(function() {
$("h1").fadeOut(3000);
});
</script>

‣ どの要素に、処理を適用するかを指定する (セレクタ)
‣ この例の場合は、h1要素に命令
<script>
$(function() {
$("h1").fadeOut(3000);
});
</script>

‣ 処理の内容を記述 (メソッド)
‣ この例の場合は、3000ミリ秒 (= 3秒) かけてフェードアウト
<script>
$(function() {
$("h1").fadeOut(3000);
});
</script>

‣ 「 . 」(ドット) でつないで、メソッドを連結可能
‣ メソッドチェーン
<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>
</head>
<body>
</body>
</html>

‣ 今回はimg要素をjQueryで操作してみます。
‣ 例えば、test.jpgという画像ファイルを用意して…
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="test.jpg" alt="jQueryテスト画像" />
</body>
</html>

‣ 画像が表示される

イベント - クリックした画像を隠す
‣ 「画像をクリックしたら、画像を隠す」というプログラムを作
成してみたい
‣ jQueryでの考え方
‣ 「画像をクリックしたら」→ イベント
‣ 「画像を隠す」→ 命令

‣ ただし、実際には、HTML書類が全て読みこまれてからでない
と、「クリックしたら」を実現できない
‣ 下記のように考える
‣ 1.「書類が全て読み込まれたら、次の命令を実行」
‣ 2.「画像をクリックしたら、画像を隠す」
‣ この2つのイベントをまずはjQueryで記述してみる

‣ まずはイベントを記述 (script.jsに記述する)
‣ 書類が読みこまれたら (イベント)
$(function(){
});

‣ さらに追記
‣ img要素をクリックしたら、命令を実行 (イベント)
$(function(){
$("img").click(function(){
});
});

‣ さらに、さらに追記
‣ img要素を隠す (命令)
$(function(){
$("img").hide();
});
});

‣ クリックすると画像が消えるはず

イベント - クリックした画像をフェードアウト
‣ 単純に消えるだけでなく、エフェクトをかけることも可能
‣ 例：クリックすると1秒(1000msec)かけてフェードアウト
$(function(){
$("img").fadeOut(1000);
});
});

‣ イベントを適用した要素自身のセレクタは、$(this)と書き換え
ることもできる
$(function(){
$(this).fadeOut(1000);
});
});

‣ HTML側を変更
‣ 複数の画像ファイルを並べて貼りつけてみる
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="test1.jpg" alt="画像1" /><br />
<img src="test4.jpg" alt="画像4" />
</body>
</html>

‣ ブラウザで表示

‣ クリックした画像がフェードアウトして消えていく

イベント - 画像を入れかえる
‣ HTMLファイルを再度修正、画像を1枚だけに
‣ a要素(リンク)を、写真の枚数分用意する
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
<ul>
<li><a href="#">写真 1</a></li>
</ul>
</nav>
</body>
</html>

‣ Webブラウザで確認

‣ script.jsを編集
$(function(){
$("a:eq(0)").click(function(){
$("img").attr("src","test1.jpg");
});
});
});
});
});

‣ リンクをクリックすると、写真が入れかわるはず!!
‣ ページを再読み込みすることなく画像だけが変化している

まとめ
‣ 今日はここまで
‣ jQueryのイベントの基本を理解する
‣ 次回は、このイベントの仕組みを応用して、jQueryを活用した
ナビゲーションメニューを作成します

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

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

Similar to メディア芸術基礎 II jQuery入門 (20)

More from Atsushi Tadokoro

More from Atsushi Tadokoro (20)

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