情報処理技法（マルチメディアと表現）imhashi/web13.pdfjquery のファイルを...

情報処理技法（マルチメディアと表現）I

第13回 jQuery

©D.Mitsuhashi 1

jQuery とは？

© MITSUHASHI Daisuke 2

講義スライド

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

• HTML と CSS だけでは動的なコンテンツを作成することはできない• 動的なコンテンツを作成するには• FLASH や Silverlight などのプラグインを導⼊する• HTML5 の canvas 要素を⽤いる

• JavaScript と組み合わせる• 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 に処理をすることもできる。• ただし、記述法は同じではない


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⽇本語リファレンス


jQuery⽇本語リファレンスhttp://semooh.jp/jquery/

http://semooh.jp/jquery/

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 29

jQuery UI

• jQuery の公式プラグイン• jQuery にインタラクティブなユーザーインターフェースを追加する• 予め⽤意された GUI コンポーネントであるウィジェットを利⽤するこ

とで簡単にリッチなインターフェースを追加可能• テーマを⽤いて、ウィジェットの外観を変更可能

© D.Mitsuhashi 30

jQuery UI のセットアップ

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

© D.Mitsuhashi 31

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 32

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

jQuery UI : interaction

© D.Mitsuhashi 33

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

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

});

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

}

draggable

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

© D.Mitsuhashi 34

HTML

jQuery

CSS

draggable のオプション

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

© D.Mitsuhashi 35

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

});

複数のオプション

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

（値はX軸、Y軸の順）

© D.Mitsuhashi 36

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

});

resizable

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

© D.Mitsuhashi 37

<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 38

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

</ul>

sortable

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

© D.Mitsuhashi 39

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

});

jQuery

.sortableList(2n){background-color:#ffffcc;

}.sortableList(2n+1){

background-color:#ffccff;}

CSS

jQuery UI : widgets

© D.Mitsuhashi 40

ウィジェット

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

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

© D.Mitsuhashi 41

datepicker

• カレンダーを表⽰する

© D.Mitsuhashi 42

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

HTML

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

});

jQuery

tabs

• タブによる表⽰の切替

© D.Mitsuhashi 43

<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 44

$(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

jQuery Plugin


講義スライド

jQuery Plugin

• jQuery を⽤いてあらかじめプログラムされたライブラリのことを jQuery Plugin とよぶ

•Web上には多くの jQuery Plugin が公開されており、これらを利⽤することで簡単に動的なサイトを作成することができる


講義スライド

ライセンス

• jQuery Plugin の多くは無償公開されているが、どのような条件で利⽤可能かライセンス表記をよく確認すること

• Creative Commons License• 表⽰（BY) 作品のクレジットが必要• ⾮営利(NC) 営利⽬的での利⽤をしない• 改変禁⽌(ND) 元の作品を改変しない• 継承(SA) 元の作品と同じ組み合わせのライセンスで公開

• MIT License, BSD License• 再配布時に著作権表⽰を残す必要がある• 無保証

• GNU General Public License(GPL)• 上記の MIT, BSD の内容に付け加えて、再配布する場合にも GPL をつける必要がある


講義スライド

jQuery 本体の有無

• Plugin によっては、jQuery 本体を同梱した状態で配布している• プラグインに jQuery 本体が含まれているかどうかを確認する

こと• 2重に読み込ませないこと• 通常、ファイル名は jquery.js または jquery.min.js のいずれか


講義スライド

jQuery Plugin 読み込みの順序

• HTML 書類で jQuery Plugin を読みこませるときには、jQuery 本体を先に読み込ませ、次に Plugin を読み込ませなければ機能しない• Plugin を読みこませる場所は、通常 <head> 内だが、<body> 内の場

合もある• また、必要な CSS 書類も同梱されている場合もあるので、併

せて読み込ませること• Plugin によっては画像ファイルも必要


記述例

<script src="./dist/js/jquery.min.js"></script><script src="./dist/js/jquery.plugin.js"></script><link rel="stylesheet" href="./dist/css/plugin.css" />

講義スライド

jQuery Plugin 導⼊例


講義スライド

⽂字を 3Dで表現する: CSS 3D Text Plugin

• CSS 3D Text Plugin • Craig Buckler• ライセンス表記はないが、制

限なしに利⽤可能と記述がある• http://blogs.sitepointstatic.co

m/examples/tech/css3-3d-text/text3d.html

• 上記のサイトより、jquery.text3d.js をダウンロード(リンク先を保存）


http://blogs.sitepointstatic.com/examples/tech/css3-3d-text/text3d.html

jquery.text3d.jsを読み込む

• jquery.text3d.js を同じフォルダに⼊れて、<head>タグ内で以下の記述を追加する


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

jquery.text.3d.js の利⽤法

• <h1> 要素を変化させるには、$("h1").text3d( );とし、以下のように⽤意されたプロパティと値を設定する


depth ⽂字のでっぱり具合angle でっぱりの⾓度color でっぱり部の⾊lighten でっぱりのグラデーション（-0.3 の場合は始めから終りまでに3割暗くなる）shadowDepth 影の広がり具合shadowAngle 影の⾓度shadowOpacity 影の透明度（0から1まで）

$(function(){$("h1").text3d({depth:10,angle:45,color:"#ccccff",lighten:-0.3,shadowDepth:30,shadowAngle:45,shadowOpacity:0.2,});

});

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

depth:10,angle:45});

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

depth:3});

},function() {$(this).text3d({

depth:8});

});});

hover イベントとの組み合わせ


通常時

マウスが乗った時

マウスが離れた時

背景画像を伸張：backstretch

• backstretch• Scott Robin• MIT LICENCE• http://www.jquery-

backstretch.com/

• 背景画像を隙間なく最⼤表⽰に伸張する


講義スライド

http://www.jquery-backstretch.com/

backstretch の利⽤法

• jquery.backstretch.min.js を読み込む• body 要素に対して backstretch メソッドを⽤いる• パラメータは画像ファイルのパス


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

$(function(){$("body").backstretch("./images/background.jpg");

});

講義スライド

ギャラリーを作成する: Lightbox

• Lightbox• Lokesh Dhakar• MIT LICENSE• http://www.lokeshdhakar.co

m/projects/lightbox2/

• 上記のサイトよりLightbox plugin をダウンロードする


講義スライド

http://www.lokeshdhakar.com/projects/lightbox2/

lightbox.min.js を読み込む

• 右クリックして「送る」→「ここに展開」• dist フォルダに内包されている css,img,js のフォルダをそのま

まの状態で利⽤する• 同じフォルダ内の HTML に以下の記述を追加する• lightbox-plus-jquery.min.js には既に jquery 本体が内包されているの

で、jquery を⽤意する必要はない• 既に jQuery 本体を読み込んでいる場合は、lightbox.min.js を利⽤す

る


以下はbody 要素の末尾に記述する

<link rel="stylesheet" href="./dist/css/lightbox.css" />

<script src="./dist/js/lightbox-plus-jquery.min.js"></script>

講義スライド

Lightbox の利⽤法

• ⼩さめの画像（サムネイル画像）に⼤きめの画像のリンクをはる• a要素の属性として data-lightbox を⽤意する• 値は画像の名前、複数ある場合には同じ名前を⽤いる（アルファベッ

トで）• 画像にキャプションを付けたい場合には data-title 属性にキャ

プションを値として⼊⼒する


<a href="./pic1.jpg" data-lightbox="photos" data-title="廃墟"><img src="./pic1t.jpg" alt="pic1" width="100" height="100" />

</a>

⼤きめの画像サムネイル画像

講義スライド

jQuery lightbox 設置例

• クリックすると拡⼤する


講義スライド

動的に背景画像を切り替える：VEGAS

• VEGAS2• Jay Salvat• MIT LICENSE• http://vegas.jaysalvat.com/

• VEGAS 2.4.4 をダウンロードする


講義スライド

http://vegas.jaysalvat.com/

VEGAS を読み込む

• VEGAS には jQuery 本体は含まれていないので、jQuery 本体を読み込む• その後、VEGAS の本体にあたる vegas.min.js と、CSS ファイ

ルの vegas.min.css を読み込む


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

講義スライド

画像ファイルの読み込み

• body 要素に対して vegas メソッドを⽤いる• あらかじめ⽤意していた背景画像の参照先を slides 内で表記

する• animation や transition などのエフェクトも併記する


$(function(){$("body").vegas({

slides:[{src:"./images/tanuki.jpg"},{src:"./images/sakura.jpg"},{src:"./images/torii.jpg"},{src:"./images/kabocha.jpg"},

],animation:"kenburns"});

});

講義スライド

カルーセルメニュー:Slick

• Slick• Ken Wheeler• MITライセンス• http://kenwheeler.github.io/slick

• ポインタ操作で画像が切り替わるメニュー


http://kenwheeler.github.io/slick

slick.min.js を読み込む

• 右クリックして「送る」→「ここに展開」• 内包されている slick フォルダをそのままの状態で利⽤する• 同じフォルダ内の HTML に以下の記述を追加する• slick には jQuery本体は含まれていないので、別途⽤意して読み込ま

せる


<link rel="stylesheet" href="./slick/slick.css" /><link rel="stylesheet" href="./slick/slick-theme.css" /><script src="./jquery-3.4.1.min.js"></script><script src="./slick/slick.min.js"></script>

Slick の利⽤法

• ブロック要素に内包された連続するブロックを⽤意する• この例では ul 要素に内包された li 要素

• 指定したブロック要素に対して以下のように記述すればよい


<ul class="carousel"><li><a><img src="./sampleImage1.jpg" alt="1"></a></li><li><a><img src="./sampleImage2.jpg" alt="2"></a></li><li><a><img src="./sampleImage3.jpg" alt="3"></a></li><li><a><img src="./sampleImage4.jpg" alt="4"></a></li>

</ul>

$(function(){$(”carousel").slick();

});

slickのオプション

• 有効にしたい機能について true とすれば有効に、false とすれば無効になる

• autoplay ⾃動再⽣• dots 画⾯下の点ナビゲーションの表⽰• accessibility 画像の⾼さが違う時に⾃動調節する• infinite 画像が円環的に連続して表⽰される

• より詳細なオプションについては配布サイトか、以下のブログ記事を参考にするとよい


どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い⽅（IT hat）http://ithat.me/2016/10/17/how-to-use-slick-jquery-plugin

http://ithat.me/2016/10/17/how-to-use-slick-jquery-plugin

情報処理技法 （マルチメディアと表現）imhashi/web13.pdfjquery のファイルを...

Documents

情報処理技法（マルチメディアと表現）imhashi/web13.pdfjquery のファイルを...