• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
メディア芸術基礎 II jQuery入門
 

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

on

  • 1,386 views

 

Statistics

Views

Total Views
1,386
Views on SlideShare
974
Embed Views
412

Actions

Likes
2
Downloads
12
Comments
0

6 Embeds 412

http://yoppa.org 384
http://cloud.feedly.com 21
http://localhost 3
http://digg.com 2
http://cloud.feedly.com&_=1381566193915 HTTP 1
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • メディア芸術基礎 II jQuery入門 2013年10月14日、10月21日 多摩美術大学情報デザイン学科メディア芸術コース 担当:田所淳
    • 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を活用した ナビゲーションメニューを作成します