webデザイン実践jquery 本体の有無 •plugin によっては、jquery...

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

©D.Mitsuhashi 1

jQuery Plugin

© MITSUHASHI Daisuke 2

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)• 再配布する場合にも 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

講評会について


講評会

• 次回は講評会を⾏ないます• Web サーバに作品をアップロードしておいてください• 100% 完成していることは要求しませんが、少なくとも完成形が予測

できるレベルまでには仕上げておいてください•講評を⾏う前に、以下の点について簡単に説明していただくの

で、内容を整理しておいてください• どのようなコンテンツを作成したか• どのように情報を整理したか• HTML や CSS でどのような技術的⼯夫をしたか• ユーザビリティやアクセシビリティに対する配慮はあるか

•講評は各学⽣も相互に⾏ないますので、⾃由闊達な意⾒を交わして頂きたいと思います


課題締め切り

•課題の締め切りは2⽉4⽇（⽕曜⽇）24時までとします•時間厳守

•講評会でのフィードバックを反映するように修正を施してください• 上記期限までに学内サーバにアップロードすること• アップロードがされていない、または、名簿からリンクをたどること

ができない場合には点数をつけることができません• Webサイトは年度が変更となる時に⾃動的に削除されます• 成績評価の確認が必要となった場合に必要となりますので、年度内に

Webサイトを削除しないようにしてください


webデザイン実践jquery 本体の有無 •plugin によっては、jquery...

Documents