Webデザイン実践jQuery 本体の有無 •Plugin によっては、jQuery...
Transcript of Webデザイン実践jQuery 本体の有無 •Plugin によっては、jQuery...
jQuery Plugin
• jQuery を⽤いてあらかじめプログラムされたライブラリのことを jQuery Plugin とよぶ
•Web上には多くの jQuery Plugin が公開されており、これらを利⽤することで簡単に動的なサイトを作成することができる
© MITSUHASHI Daisuke 3
ライセンス
• jQuery Plugin の多くは無償公開されているが、どのような条件で利⽤可能かライセンス表記をよく確認すること• Creative Commons License• 表⽰(BY) 作品のクレジットが必要• ⾮営利(NC) 営利⽬的での利⽤をしない• 改変禁⽌(ND) 元の作品を改変しない• 継承(SA) 元の作品と同じ組み合わせのライセンスで公開
• MIT License, BSD License• 再配布時に著作権表⽰を残す必要がある• 派⽣物にまで同じライセンスを要求しない
• GNU General Public License(GPL)• 再配布する場合にも GPL をつける必要がある
© MITSUHASHI Daisuke 4
jQuery 本体の有無
• Plugin によっては、jQuery 本体を同梱した状態で配布している•プラグインに jQuery 本体が含まれているかどうかを確認すること• 2重に読み込ませないこと• 通常、ファイル名は jquery.js または jquery.min.js のいずれか
© MITSUHASHI Daisuke 5
jQuery Plugin 読み込みの順序
• HTML 書類で jQuery Plugin を読みこませるときには、jQuery 本体を先に読み込ませ、次に Plugin を読み込ませなければ機能しない• Plugin を読みこませる場所は、通常 head 要素内だが、body 要素内
が指定される場合もある• また、必要な CSS 書類も同梱されている場合もあるので、併
せて読み込ませること• Plugin によっては画像ファイルも必要
© MITSUHASHI Daisuke 6
記述例
<script src="./dist/js/jquery.min.js"></script><script src="./dist/js/jquery.plugin.js"></script><link rel="stylesheet" href="./dist/css/plugin.css">
⽂字を 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 をダウンロード(リンク先を保存)
© MITSUHASHI Daisuke 8
jquery.text3d.jsを読み込む
• jquery.text3d.js を同じフォルダに⼊れて、head要素内で以下の記述を追加する
© MITSUHASHI Daisuke 9
<script src="./jquery-3.4.1.min.js"></script><script src="./jquery.text3d.js"></script>
jquery.text.3d.js の利⽤法
• h1要素を変化させるには、$("h1").text3d( );とし、以下のように⽤意されたプロパティと値を設定する
© MITSUHASHI Daisuke 10
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 イベントとの組み合わせ
© MITSUHASHI Daisuke 11
通常時
マウスが乗った時
マウスが離れた時
背景画像を伸張:backstretch
• backstretch• Scott Robin• MIT LICENCE• http://www.jquery-
backstretch.com/
• 背景画像を隙間なく最⼤表⽰に伸張する
© MITSUHASHI Daisuke 12
backstretch の利⽤法
• jquery.backstretch.min.js を読み込む• body 要素に対して backstretch メソッドを⽤いる• パラメータは画像ファイルのパス
© MITSUHASHI Daisuke 13
<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 をダウンロードする
© MITSUHASHI Daisuke 14
lightbox.min.js を読み込む
• 右クリックして「送る」→「ここに展開」• dist フォルダに内包されている css,img,js のフォルダをそのま
まの状態で利⽤する• 同じフォルダ内の HTML に以下の記述を追加する• lightbox-plus-jquery.min.js には既に jquery 本体が内包されているの
で、jquery を⽤意する必要はない• 既に jQuery 本体を読み込んでいる場合は、lightbox.min.js を利⽤す
る
© MITSUHASHI Daisuke 15
以下は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 属性にキャ
プションを値として⼊⼒する
© MITSUHASHI Daisuke 16
<a href="./pic1.jpg" data-lightbox="photos" data-title="廃墟"><img src="./pic1t.jpg" alt="pic1" width="100" height="100" />
</a>
⼤きめの画像 サムネイル画像
動的に背景画像を切り替える:VEGAS
• VEGAS2• Jay Salvat• MIT LICENSE• http://vegas.jaysalvat.com/
• VEGAS 2.4.4 をダウンロードする
© MITSUHASHI Daisuke 18
VEGAS を読み込む
• VEGAS には jQuery 本体は含まれていないので、jQuery 本体を読み込む• その後、VEGAS の本体にあたる vegas.min.js と、CSS ファイ
ルの vegas.min.css を読み込む
© MITSUHASHI Daisuke 19
<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 などのエフェクトも併記する
© MITSUHASHI Daisuke 20
$(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
• ポインタ操作で画像が切り替わるメニュー
© MITSUHASHI Daisuke 21
slick.min.js を読み込む
• 右クリックして「送る」→「ここに展開」• 内包されている slick フォルダをそのままの状態で利⽤する• 同じフォルダ内の HTML に以下の記述を追加する• slick には jQuery本体は含まれていないので、別途⽤意して読み込ま
せる
© MITSUHASHI Daisuke 22
<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 要素
• 指定したブロック要素に対して以下のように記述すればよい
© MITSUHASHI Daisuke 23
<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 画像が円環的に連続して表⽰される
• より詳細なオプションについては配布サイトか、以下のブログ記事を参考にするとよい
© MITSUHASHI Daisuke 24
どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い⽅(IT hat)http://ithat.me/2016/10/17/how-to-use-slick-jquery-plugin
講評会
• 次回は講評会を⾏ないます• Web サーバに作品をアップロードしておいてください• 100% 完成していることは要求しませんが、少なくとも完成形が予測
できるレベルまでには仕上げておいてください•講評を⾏う前に、以下の点について簡単に説明していただくの
で、内容を整理しておいてください• どのようなコンテンツを作成したか• どのように情報を整理したか• HTML や CSS でどのような技術的⼯夫をしたか• ユーザビリティやアクセシビリティに対する配慮はあるか
•講評は各学⽣も相互に⾏ないますので、⾃由闊達な意⾒を交わして頂きたいと思います
© MITSUHASHI Daisuke 26