Webデザイン実践 #7-1 jQuery(1) ©D.Mitsuhashi 1
Webデザイン実践#7-1 jQuery(1)
©D.Mitsuhashi 1
jQuery とは?
© MITSUHASHI Daisuke 2
動的なコンテンツを作成する
• HTML と CSS だけでは動的なコンテンツを作成することはできない• 動的なコンテンツを作成するには JavaScript などのスクリプ
ト⾔語によるプログラムを導⼊する必要がある
© MITSUHASHI Daisuke 3
JavaScript の役割
• HTML や CSS だけでは表現できないような動的な処理を⾏なう• 条件によって、HTML や
CSS の記述を書き換えたり、読み込むタイミングを変更するなどの処理が可能
© MITSUHASHI Daisuke 4
視覚的表現
動的な処理
動的な処理
JavaScript の独習にはCodecademy をお薦めします
Codecademyhttp://www.codecademy.com/
HTML
CSS
JavaScript
jQueryとは?
• JavaScript のライブラリ• JavaScript を⽤いてゼロからプログラムしていくのは技術と⼿間がか
かる• よく使われる機能についてはあらかじめプログラムされた JavaScript
ライブラリを⽤いるほうが容易• 講義では最もシェアの⾼い jQuery について紹介する
• jQuery(ジェイクエリ) http://jquery.com/• 他には、JSON, dojo Toolkit, Prototype.jsなど
© MITSUHASHI Daisuke 5
jQuery の特徴
• サイズが⼩さい(100kb以下)• クロスブラウザ対策がなされている• プラグイン(あらかじめjQuery でプログラムされたライブラ
リ)が豊富• オープンソース
© MITSUHASHI Daisuke 6
jQuery 読み込みの準備
• jQuery のサイトからプログラムをダウンロードして読み込む• http://jquery.com/• 今回は jquery-3.4.1.min.js を利⽤する
© MITSUHASHI Daisuke 7
• または、CDN を利⽤することもできる
jQuery CDN https://code.jquery.com/
<script src="./jquery-3.4.1.min.js"></script>
jQueryの動作確認
© MITSUHASHI Daisuke 8
<!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要素で記述した⽂字列が徐々に消えていくはず• うまくいかない場合はコードを確認• 括弧の種類や閉じ忘れなど注意
© MITSUHASHI Daisuke 9
jQuery 基礎⽂法
© MITSUHASHI Daisuke 10
jQueryの記述法
• head要素のscript要素内で記述する• jQueryの記述を外部ファイルにすることも可能
• $(function() { ... }); という記述は、ページ読み込み時にjQuery の命令を実⾏せよという意味• 内部に jQuery コードを記述する
© MITSUHASHI Daisuke 11
$(function(){$("h1").fadeOut(5000);
});
jQuery のファイルを外部ファイルにするには• script 要素内の表記を、テキストファイルで保存する• 拡張⼦は .js• head 要素内に以下の表記を追加する• 以下は同じフォルダ内にある script.js を参照している場合の記述• jQuery 本体を先に読み込ませる
© MITSUHASHI Daisuke 12
<script src="./jquery-3.4.1.min.js"></script><script src="./script.js"></script>
$(function(){$("h1").fadeOut(5000);});
jQueryの記述法
• セレクタ部分には処理を加えたい要素名(タグ名、クラスセレクタ、IDセレクタ)• メソッドはセレクタに対する処理• パラメータは処理に関わる値• この場合は5000ミリ秒(5秒)かけてフェードアウト
© MITSUHASHI Daisuke 13
セレクタ メソッド パラメータ
セレクタの書き⽅
• セレクタはタグの要素名の他に、ID セレクタ、クラスセレクタ、擬似クラスなども⽤いることができる
© MITSUHASHI Daisuke 14
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 では以下のように定義する
© MITSUHASHI Daisuke 15
• ⼀度定義すると、関数名(パラメータ)という表記で呼び出すことができる• jQuery は関数の1つと考えるとよい• jQuery関数は jQuery( ) または $( )で呼び出す
function 関数名(パラメータ1,パラメータ2…){命令1;命令2;…
}
CSSの処理
• css メソッドを⽤いてCSS に処理をすることもできる• ただし、記述法はCSSと同じではない
© MITSUHASHI Daisuke 16
JavaScriptでは、CamelCase記法を⽤いるので注意。CamelCaseとは、単語の切れ⽬を⼤⽂字にしてスペースを除いたもの。最初の⼀⽂字は⼩⽂字。
background-color ではなくbackgroundColortext-indent ではなくtextIndent
$(function(){$("h1").css({color:"#ff0000",backgroundColor:"#ffff00"});
});
テキストの変更
• text メソッドはテキスト要素を置換する
© MITSUHASHI Daisuke 17
$(function(){$("h1").text("Hello,World!");});
メソッドチェーン
• 連続した処理は「.(ドット)」でつなぐことができる• 下の例では⼀度フェードアウトしてから、再度フェードインす
る
© MITSUHASHI Daisuke 18
$(function(){$("h1").fadeOut(5000).fadeIn(5000);
});
イベント
• イベントの設定によって、処理が開始されるタイミングを指定することができる• クリックした時 .click()• カーソルがのった時、外れた時 .hover()
• イベントは他にもあるが講義では扱わない• jQuery サイトにドキュメントあり• jQuery API Documentation
http://api.jquery.com/category/events/
© MITSUHASHI Daisuke 19
click イベント
• h1 要素をクリックしたときに、テキストが "Hi, I'm H1!" に変わる• .click(function(){
クリックされた時の処理});
© MITSUHASHI Daisuke 20
イベント対象と同じセレクタを処理するときは、this と記述する
$(function(){$("h1").click(function() {
$(this).text("Hi,I am h1 element!");});
});
$(function(){$("h1").click(function() {
$("#tbox").css({backgroundColor:"#ffff00"});
});});
click イベント
© MITSUHASHI Daisuke 21
イベント対象と異なるセレクタに影響をあたえることもできる
<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(){マウスが外れた時の処理});
© MITSUHASHI Daisuke 22
マウスが乗ると Hello,World! と表⽰される
マウスがはずれるとBye,World! と表⽰される
jQuery 実装例アコーディオン UI
© MITSUHASHI Daisuke 23
アコーディオン UI
• アコーディオン UI とは、メニューをクリックすることで内包される下位要素を表⽰する UI のこと
© MITSUHASHI Daisuke 24
HTML:メニューの作成
© MITSUHASHI Daisuke 25
<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:メニューのデザイン
© MITSUHASHI Daisuke 26
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
© MITSUHASHI Daisuke 27
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/
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" />
jQuery UI : interaction
© D.Mitsuhashi 32
<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 : widgets
© D.Mitsuhashi 39
ウィジェット
• 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