Embed Size (px)
Citation preview
Web動画表現第2回：jQuery入門
千葉商科大学政策情報学部2011年10月5日担当：田所 淳
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" });});
いろいろなメソッド(命令)‣ 例：四隅に順番に移動する
