jqueryでitunes store風スライドショーを作ってみる
DESCRIPTION
「6th Knock!」 第6回Knock! Knock!勉強会2012年7月13日(金) 開催TRANSCRIPT
![Page 1: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/1.jpg)
jQueryで
iTunes Store風スライドショーを作ってみる
⍫ㇱ㕏ੱ
2012年7月13日Knock! Knock! 勉強会
![Page 2: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/2.jpg)
1) 観察する、分解する ~仕様にまとめる
2) HTML / CSSで考える ~仕様のコード化
本日のお題
![Page 3: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/3.jpg)
⥄Ꮖ⚫
![Page 4: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/4.jpg)
4
ฬ�೨㧤߾ ߣ߭ߔ߾ߴ�
ᐕ�㦂㧤ਃච〝߫߆ߥߩ
�ᚲ㧤㐳ᴰ↸
⡯�ᬺ 㧤ᬺਥᄦ�ψ�৻ఽߩῳࠎ߾ߜ
� W ebో⥸ࠦޔ ࠖ࠺ ࠣࡦ ߌ⺧ਅߩ
� ᐢ๔ోࡦࠗࠩ࠺⥸
1/20
![Page 5: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/5.jpg)
W ebࠩ࠺ ࠗ࠽ω
W eb/DTPࠩ࠺ 㓸✬ߩࡄࡍࡈޔࠗ࠽ω
W eb࠺ ࠢࠖ ࠣࡦ࠾ࡦࡊ�࠲ ༡ᬺω
Wߩࠬࡦࡈ eb⠪S2࠽ࡦࡊ
1/20
![Page 6: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/6.jpg)
ߔ߹ߒ㗿߅ߊߒࠈࠃ
1/20
![Page 7: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/7.jpg)
1) 観察する、分解する ~仕様にまとめる
![Page 8: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/8.jpg)
その前に…
1) 観察する、分解する ~仕様にまとめる
![Page 9: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/9.jpg)
今日のセッションは、「jQueryの機能や書き方」ではなく、「仕様設計→コード化」のはなし
1) 観察する、分解する ~仕様にまとめる
![Page 10: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/10.jpg)
![Page 11: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/11.jpg)
jQueryでiTunes Store風スライドショー与件 :
1) 観察する、分解する ~仕様にまとめる
そんなプラグインはいっぱいある、というのはさておき
![Page 12: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/12.jpg)
![Page 13: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/13.jpg)
1) 観察する、分解する ~仕様にまとめる
まずは、よく見る
![Page 14: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/14.jpg)
![Page 15: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/15.jpg)
1) 観察する、分解する ~仕様にまとめる
動きのパターンごとに、分解する
![Page 16: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/16.jpg)
1) 観察する、分解する ~仕様にまとめる
①
上から下へスライド
②次の画像がフェードイン
③ 約6秒間隔で、①②が同時進行(所要時間約1秒)※ 各画像をクリックすると、商品詳細ページヘ移動
![Page 17: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/17.jpg)
1) 観察する、分解する ~仕様にまとめる
見えないところを、想像する
![Page 18: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/18.jpg)
1) 観察する、分解する ~仕様にまとめる
①②次の画像がフェードイン
上から下へスライド
③ 約6秒間隔で、①②が同時進行(所要時間約1秒)※ 各画像をクリックすると、商品詳細ページヘ移動
見えていないが画像が待機している
![Page 19: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/19.jpg)
1) 観察する、分解する ~仕様にまとめる
これを明示したものが「仕様」
![Page 20: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/20.jpg)
1) 観察する、分解する ~仕様にまとめる
ここからは、右側の小さい画像を例に説明します
![Page 21: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/21.jpg)
2) HTML / CSSで考える ~仕様のコード化
![Page 22: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/22.jpg)
2) HTML/CSSで考える ~仕様のコード化
仕様をHTML /CSSの変化で表現する
![Page 23: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/23.jpg)
2) HTML/CSSで考える ~仕様のコード化
①
上から下へスライド
1) 画像をリストでマークアップ1) 画像をリストでマークアップ
3) エリア外が見えないように処置 (overflow : hidden)4) 6秒ごとにスライドアニメーション ( 2)のmargin-topの値を変更)4) 6秒ごとにスライドアニメーション ( 2)のmargin-topの値を変更)5) 下へ消えた画像を一番上に移動 ( …。jQueryでなんとかする)5) 下へ消えた画像を一番上に移動 ( …。jQueryでなんとかする)
2) エリア外の見えない部分も含めて 全体を位置調整 (margin-top : -100px)
![Page 24: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/24.jpg)
2) HTML/CSSで考える ~仕様のコード化
<div id="keyVisual"> <ul id="subPanel"> <li><img src="keyVisual_sub01.jpg"></li> <li><img src="keyVisual_sub02.jpg"></li> <li><img src="keyVisual_sub03.jpg"></li> <li><img src="keyVisual_sub04.jpg"></li> </ul><!-- /#keyVisual --></div>
#keyVisual { height: 300px; }#keyVisual ul { height: 300px; overflow: hidden;}#keyVisual ul li:first { margin-top: -100px; }
この値を1秒かけて、段階的に0にしたい
![Page 25: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/25.jpg)
2) HTML/CSSで考える ~仕様のコード化
![Page 26: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/26.jpg)
2) HTML/CSSで考える ~仕様のコード化
このままだと、次のアニメーションができないので…
![Page 27: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/27.jpg)
移動
![Page 28: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/28.jpg)
2) HTML/CSSで考える ~仕様のコード化
<div id="keyVisual"> <ul id="subPanel"> <li><img src="keyVisual_sub01.jpg"></li> <li><img src="keyVisual_sub02.jpg"></li> <li><img src="keyVisual_sub03.jpg"></li> <li><img src="keyVisual_sub04.jpg"></li> </ul><!-- /#keyVisual --></div>
#keyVisual { height: 300px; }#keyVisual ul { height: 300px; overflow: hidden;}#keyVisual ul li:first { margin-top: 0px; }
リストの1番目に移動させたい
この値をに-100に戻したい
![Page 29: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/29.jpg)
2) HTML/CSSで考える ~仕様のコード化
![Page 30: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/30.jpg)
2) HTML/CSSで考える ~仕様のコード化
その変化を実現するjQuery / JavaScriptの機能を検討
![Page 31: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/31.jpg)
![Page 32: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/32.jpg)
2) HTML/CSSで考える ~仕様のコード化
<div id="keyVisual"> <ul id="subPanel"> <li><img src="keyVisual_sub01.jpg"></li> <li><img src="keyVisual_sub02.jpg"></li> <li><img src="keyVisual_sub03.jpg"></li> <li><img src="keyVisual_sub04.jpg"></li> </ul><!-- /#keyVisual --></div>
#keyVisual { height: 300px; }#keyVisual ul { height: 300px; overflow: hidden;}#keyVisual ul li:first { margin-top: -100px; }
この値を1秒かけて、段階的に0にしたい
![Page 33: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/33.jpg)
2) HTML/CSSで考える ~仕様のコード化
$("#subPanel li:first").animate( {marginTop : "0px"} , 1000 , function(){ $("li:last").css("margin-top","-100px"). prependTo("#subPanel"); });
アニメーション命令
アニメーション後の値所要時間(ミリ秒)
![Page 34: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/34.jpg)
2) HTML/CSSで考える ~仕様のコード化
![Page 35: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/35.jpg)
2) HTML/CSSで考える ~仕様のコード化
この値をに-100に戻したい
<div id="keyVisual"> <ul id="subPanel"> <li><img src="keyVisual_sub01.jpg"></li> <li><img src="keyVisual_sub02.jpg"></li> <li><img src="keyVisual_sub03.jpg"></li> <li><img src="keyVisual_sub04.jpg"></li> </ul><!-- /#keyVisual --></div>
#keyVisual { height: 300px; }#keyVisual ul { height: 300px; overflow: hidden;}#keyVisual ul li:first { margin-top: 0px; }
リストの1番目に移動させたい
![Page 36: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/36.jpg)
2) HTML/CSSで考える ~仕様のコード化
$("#subPanel li:first").animate( {marginTop : "0px"} , 1000 , function(){ $("li:last").css("margin-top","-100px"). prependTo("#subPanel"); });
アニメーション命令
アニメーション終了後に実行する命令
CSS設定対象(#subPanel)内の先頭に挿入
![Page 37: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/37.jpg)
![Page 38: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/38.jpg)
書いてみる → 確認 → デバック
2) HTML/CSSで考える ~仕様のコード化
![Page 39: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/39.jpg)
実現が難しそうな場合、HTML / CSSの変化を別の形で表せないか検討
2) HTML/CSSで考える ~仕様のコード化
![Page 40: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/40.jpg)
まとめ
![Page 41: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/41.jpg)
・仕様は誰にでも作れる(実装可能かはともかく…)
よく見る → 分解する → 想像する
・仕様=やりたいこと、それさえ書ければできたも同然
・「仕様化」は外注できない(ふわっと仕様は危険)
・汎用化(ライブラリ化)しなければ、意外と簡単
![Page 42: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/42.jpg)
実装に困ったらご連絡ください!
![Page 43: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/43.jpg)
参考図書
![Page 44: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/44.jpg)
参考図書
著者 : 西畑 一馬出版社 : アスキー・メディアワークス発売日 : 2010年2月12日B5変形判 / 344ページ定価 : 3,497円(税込)ISBN 978-4048684118
![Page 45: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/45.jpg)
参考図書
著者 : 高津戸 壮出版社 : 技術評論社発売日 : 2011年12月8日B5変形判 / 288ページ定価 : 3,024円(税込)ISBN 978-4-7741-4856-4
![Page 46: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/46.jpg)
参考図書
著者 : たにぐち まこと出版社 : マイナビ発売日 : 2012年03月24日B5変型判 / 288ページ定価 : 2,604円(税込)ISBN 978-4-8399-4187-1
![Page 47: jQueryでiTunes Store風スライドショーを作ってみる](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558ca4a5d8b42a21548b468e/html5/thumbnails/47.jpg)
参考図書
著者 : 西畑一馬,中村享介,徳田和規 出版社 : インプレスジャパン発売日 : 2010年12月17日424ページ定価 : 3,150円(税込)ISBN 978-4844329619