webデザイン実践 - waseda universityjqueryの記述法 •...

Webデザイン実践#7-1 jQuery（1）

©D.Mitsuhashi 1

jQuery とは？

© MITSUHASHI Daisuke 2

動的なコンテンツを作成する

• HTML と CSS だけでは動的なコンテンツを作成することはできない• 動的なコンテンツを作成するには JavaScript などのスクリプ

ト⾔語によるプログラムを導⼊する必要がある


JavaScript の役割

• HTML や CSS だけでは表現できないような動的な処理を⾏なう• 条件によって、HTML や

CSS の記述を書き換えたり、読み込むタイミングを変更するなどの処理が可能


視覚的表現

動的な処理

動的な処理

JavaScript の独習にはCodecademy をお薦めします

Codecademyhttp://www.codecademy.com/

HTML

CSS

JavaScript

http://www.codecademy.com/

jQueryとは？

• JavaScript のライブラリ• JavaScript を⽤いてゼロからプログラムしていくのは技術と⼿間がか

かる• よく使われる機能についてはあらかじめプログラムされた JavaScript

ライブラリを⽤いるほうが容易• 講義では最もシェアの⾼い jQuery について紹介する

• jQuery(ジェイクエリ） http://jquery.com/• 他には、JSON, dojo Toolkit, Prototype.jsなど


http://jquery.com/

jQuery の特徴

• サイズが⼩さい（100kb以下）• クロスブラウザ対策がなされている• プラグイン（あらかじめjQuery でプログラムされたライブラ

リ）が豊富• オープンソース


jQuery 読み込みの準備

• jQuery のサイトからプログラムをダウンロードして読み込む• http://jquery.com/• 今回は jquery-3.4.1.min.js を利⽤する


• または、CDN を利⽤することもできる

jQuery CDN https://code.jquery.com/

<script src="./jquery-3.4.1.min.js"></script>

http://jquery.com/

https://code.jquery.com/

jQueryの動作確認


<!DOCTYPE html><html lang="ja"><head>

<meta charset="UTF-8" /><script src="./jquery-3.4.1.min.js"></script><title>jQuery の練習</title>

<script>$(function(){

$("h1").fadeOut(5000);});

</script>

</head>

jQuery の記述

jQueryの動作確認

• 正しく記述されていれば、h1要素で記述した⽂字列が徐々に消えていくはず• うまくいかない場合はコードを確認• 括弧の種類や閉じ忘れなど注意


jQuery 基礎⽂法


jQueryの記述法

• head要素のscript要素内で記述する• jQueryの記述を外部ファイルにすることも可能

• $(function() { ... }); という記述は、ページ読み込み時にjQuery の命令を実⾏せよという意味• 内部に jQuery コードを記述する


$(function(){$("h1").fadeOut(5000);

});

jQuery のファイルを外部ファイルにするには• script 要素内の表記を、テキストファイルで保存する• 拡張⼦は .js• head 要素内に以下の表記を追加する• 以下は同じフォルダ内にある script.js を参照している場合の記述• jQuery 本体を先に読み込ませる


<script src="./jquery-3.4.1.min.js"></script><script src="./script.js"></script>

$(function(){$("h1").fadeOut(5000);});

jQueryの記述法

• セレクタ部分には処理を加えたい要素名（タグ名、クラスセレクタ、IDセレクタ）• メソッドはセレクタに対する処理• パラメータは処理に関わる値• この場合は5000ミリ秒（5秒）かけてフェードアウト


セレクタメソッドパラメータ

セレクタの書き⽅

• セレクタはタグの要素名の他に、ID セレクタ、クラスセレクタ、擬似クラスなども⽤いることができる


h1要素のクラス名 class1

ID名が id1

nav 要素の中の a 要素

li 要素の最初の⼦要素

$("h1.class1").method(parameter);

$("#id1").method(parameter);

$("nav a").method(parameter);

$("li:first-child").method(parameter);

javascript の関数

• 関数とは、命令のセットのこと• javascript では以下のように定義する


• ⼀度定義すると、関数名（パラメータ）という表記で呼び出すことができる• jQuery は関数の1つと考えるとよい• jQuery関数は jQuery( ) または $( )で呼び出す

function 関数名(パラメータ1,パラメータ2…){命令1;命令2;…

}

CSSの処理

• css メソッドを⽤いてCSS に処理をすることもできる• ただし、記述法はCSSと同じではない


JavaScriptでは、CamelCase記法を⽤いるので注意。CamelCaseとは、単語の切れ⽬を⼤⽂字にしてスペースを除いたもの。最初の⼀⽂字は⼩⽂字。

background-color ではなくbackgroundColortext-indent ではなくtextIndent

$(function(){$("h1").css({color:"#ff0000",backgroundColor:"#ffff00"});

});

テキストの変更

• text メソッドはテキスト要素を置換する


$(function(){$("h1").text("Hello,World!");});

メソッドチェーン

• 連続した処理は「.（ドット）」でつなぐことができる• 下の例では⼀度フェードアウトしてから、再度フェードインす

る


$(function(){$("h1").fadeOut(5000).fadeIn(5000);

});

イベント

• イベントの設定によって、処理が開始されるタイミングを指定することができる• クリックした時 .click()• カーソルがのった時、外れた時 .hover()

• イベントは他にもあるが講義では扱わない• jQuery サイトにドキュメントあり• jQuery API Documentation

http://api.jquery.com/category/events/


http://api.jquery.com/category/events/

click イベント

• h1 要素をクリックしたときに、テキストが "Hi, I'm H1!" に変わる• .click(function(){

クリックされた時の処理});


イベント対象と同じセレクタを処理するときは、this と記述する

$(function(){$("h1").click(function() {

$(this).text("Hi,I am h1 element!");});

});

$(function(){$("h1").click(function() {

$("#tbox").css({backgroundColor:"#ffff00"});

});});

click イベント


イベント対象と異なるセレクタに影響をあたえることもできる

<h1>jQueryの練習</h1><div id="tbox">Target box</div>

$(function(){$("h1").hover(

function() {$(this).text("Hello,World!");},function() {$(this).text("Bye,World!");}

);});

hoverイベント

• hoverイベントでマウスを感知した処理を⾏う• .hover(

function(){マウスが乗った時の処理},function(){マウスが外れた時の処理});


マウスが乗ると Hello,World! と表⽰される

マウスがはずれるとBye,World! と表⽰される

jQuery 実装例アコーディオン UI


アコーディオン UI

• アコーディオン UI とは、メニューをクリックすることで内包される下位要素を表⽰する UI のこと


HTML：メニューの作成


<dl><dt>情報デザイン</dt><dd>

<ul><li>発想法</li><li>ユーザビリティデザイン</li><li>アクセシビリティデザイン</li>

</ul></dd><dt>HTML5</dt><dd>

<ul><li>HTMLの概要</li><li>タグの書き方</li>

</ul></dd>

</dl>

CSS：メニューのデザイン


500px

dl{width:500px;

}dt{

text-indent:1em;background-color:#e54c10;color:#ffffff;

}dd{

text-indent:3em;background-color:#ffdea1;

}dd ul li{

border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#403f33;

}

$(function(){$("dd:not(:first)").css("display"."none");$("dl dt").click(function(){

if($("+dd",this).css("display")=="none"){$("dd").slideUp("slow");$("+dd",this).slideDown("slow");}

});});

アコーディオンUI


dd 要素の中で、1番最初のもの以外の display プロパティを none （⾮表⽰）に設定する

dl 要素内の dt 要素をクリックした時に…

隣接する dd 要素の display プロパティが none ならば…

いま開いている dd 要素をゆっくり閉じて…

隣接する dd 要素をゆっくり開ける

jQuery UI

© D.Mitsuhashi 28

jQuery UI

• jQuery の公式プラグイン• jQuery にインタラクティブなユーザーインターフェースを追加する•予め⽤意された GUI コンポーネントであるウィジェットを利⽤することで簡単にリッチなインターフェースを追加可能•テーマを⽤いて、ウィジェットの外観を変更可能

© D.Mitsuhashi 29

jQuery UI のセットアップ

• jQuery UI を利⽤するには、jQuery の JavaScriptファイルの他に、jQuery UI の JavaScript ファイル、およびテーマに利⽤する CSS ファイルが必要• CSS は ThemeRoller でカスタマイズ可能

© D.Mitsuhashi 30

jQuery UI http://jqueryui.com/

http://jqueryui.com/

jQuery UI のセットアップ

• jQuery UIページよりStable 版をダウンロードする• ダウンロードしたファイルを展開する• jQuery 本体（external フォルダに⼊っている）と、jquery-

ui.jsおよび jquery-ui.css は最低限必要• HTML 書類と同じディレクトリに配置する• HTML 書類の<head> 内に以下のように必要書類を読み込む記

述を追記する

© D.Mitsuhashi 31

<script src="./external/jquery/jquery.js"></script><script src="./jquery-ui.min.js"></script><link rel="stylesheet" href="./jquery-ui.min.css" />

<div id="draggableBox">ドラッグ可能</div>

$(function(){$("#draggableBox").draggable();

});

#draggableBox{width:200px;height:200px;background-color:#ffcccc;

}

draggable

• 要素をドラッグ可能にする

© D.Mitsuhashi 33

HTML

jQuery

CSS

draggable のオプション

• opacity はドラッグ時の透明度を指定するオプション• 0〜1の間で透明度を指定する

© D.Mitsuhashi 34

$(function(){$("#draggableBox").draggable({opacity:0.5});

});

複数のオプション

• オプションが複数ある場合はカンマ" , " で区切る• grid はドラッグ中の吸着をピクセル単位で指定するオプション

（値はX軸、Y軸の順）

© D.Mitsuhashi 35

$(function(){$("#draggableBox").draggable({opacity:0.5,grid:[100,100]});

});

resizable

• 要素のサイズを変更可能にする

© D.Mitsuhashi 36

<div id="resizableBox">リサイズ可能</div> HTML

$(function(){$("#resizableBox").resizable();

});jQuery

#resizableBox{width:200px;height:200px;background-color:#ccffcc;

}

CSS

resizable のオプション

•幅の最⼤値 maxWidth（値は整数値）•幅の最⼩値 minWidth（値は整数値）•⾼さの最⼤値 maxHeight（値は整数値）•⾼さの最⼩値 minHeight（値は整数値）• サイズ変更時の残像 ghost（値は true か false）• サイズ変更時のアニメーション animate（値は true か

false）

© D.Mitsuhashi 37

<ul class="sortableList"><li>ITEM1</li><li>ITEM2</li><li>ITEM3</li><li>ITEM4</li><li>ITEM5</li>

</ul>

sortable

• 要素を並べ替え可能にする

© D.Mitsuhashi 38

HTML $(function(){$(".sortableList").sortable();

});

jQuery

ul.sortableList li:nth-child(2n){background-color:#ffffcc;

}ul.sortableList li:nth-child(2n+1){

background-color:#ffccff;}

CSS

ウィジェット

• jQuery UI では、あらかじめよく利⽤するインターフェースが⽤意されており、これをウィジェットとよぶ• ウィジェットのデザインは

ThemeRoller で設定することができる

© D.Mitsuhashi 40

datepicker

•カレンダーを表⽰する

© D.Mitsuhashi 41

<div id="cal">Datepicker</div>

HTML

$(function(){$("#cal").datepicker();

});

jQuery

tabs

• タブによる表⽰の切替

© D.Mitsuhashi 42

<div id="tabs"><ul>

<li><a href="#tab1">tab1</a></li><li><a href="#tab2">tab2</a></li><li><a href="#tab3">tab3</a></li>

</ul><div id="tab1">tab1のテキスト</div><div id="tab2">tab2のテキスト</div><div id="tab3">tab3のテキスト</div>

</div>

$(function(){$("#tabs").tabs();

});

HTML

jQuery

accordion

• アコーディオン UI

© D.Mitsuhashi 43

$(function(){$("#accordion").accordion();

});

<div id="accordion"><h1>menu1</h1>

<div>menu1 panel</div><h1>menu2</h1>

<div>menu2 panel</div><h1>menu3</h1>

<div>menu3 panel</div></div>

HTML

jQuery

webデザイン実践 - waseda universityjqueryの記述法 •...

Documents