jQueryでiTunes Store風スライドショーを作ってみる

Post on 26-Jun-2015

2.578 views 0 download

description

「6th Knock!」 第6回Knock! Knock!勉強会2012年7月13日(金) 開催

Transcript of jQueryでiTunes Store風スライドショーを作ってみる

jQueryで

iTunes Store風スライドショーを作ってみる

⍫ㇱ㕏ੱ

2012年7月13日Knock! Knock! 勉強会

1) 観察する、分解する ~仕様にまとめる

2) HTML / CSSで考える ~仕様のコード化

本日のお題

⥄Ꮖ⚫

4

ฬ�೨㧤߾ ߣ߭ߔ߾ߴ�

ᐕ�㦂㧤ਃච〝߫߆ߥߩ

�ᚲ㧤㐳ᴰ↸

⡯�ᬺ 㧤ᬺਥᄦ�ψ�৻ఽߩῳࠎ߾ߜ

� W ebో⥸ࠦޔ ࠖ࠺ ࠣࡦ ߌ⺧ਅߩ

� ᐢ๔ోࡦࠗࠩ࠺⥸

1/20

W ebࠩ࠺ ࠗ࠽ω

W eb/DTPࠩ࠺ 㓸✬ߩࡄࡍࡈޔࠗ࠽ω

W eb࠺ ࠢࠖ ࠣࡦ࠾ࡦࡊ�࠲ ༡ᬺω

Wߩࠬࡦࡈ eb⠪S2࠽ࡦࡊ

1/20

ߔ߹ߒ㗿߅ߊߒࠈࠃ

1/20

1) 観察する、分解する ~仕様にまとめる

その前に…

1) 観察する、分解する ~仕様にまとめる

今日のセッションは、「jQueryの機能や書き方」ではなく、「仕様設計→コード化」のはなし

1) 観察する、分解する ~仕様にまとめる

jQueryでiTunes Store風スライドショー与件 :

1) 観察する、分解する ~仕様にまとめる

そんなプラグインはいっぱいある、というのはさておき

1) 観察する、分解する ~仕様にまとめる

まずは、よく見る

1) 観察する、分解する ~仕様にまとめる

動きのパターンごとに、分解する

1) 観察する、分解する ~仕様にまとめる

上から下へスライド

②次の画像がフェードイン

③ 約6秒間隔で、①②が同時進行(所要時間約1秒)※ 各画像をクリックすると、商品詳細ページヘ移動

1) 観察する、分解する ~仕様にまとめる

見えないところを、想像する

1) 観察する、分解する ~仕様にまとめる

①②次の画像がフェードイン

上から下へスライド

③ 約6秒間隔で、①②が同時進行(所要時間約1秒)※ 各画像をクリックすると、商品詳細ページヘ移動

見えていないが画像が待機している

1) 観察する、分解する ~仕様にまとめる

これを明示したものが「仕様」

1) 観察する、分解する ~仕様にまとめる

ここからは、右側の小さい画像を例に説明します

2) HTML / CSSで考える ~仕様のコード化

2) HTML/CSSで考える ~仕様のコード化

仕様をHTML /CSSの変化で表現する

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)

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にしたい

2) HTML/CSSで考える ~仕様のコード化

2) HTML/CSSで考える ~仕様のコード化

このままだと、次のアニメーションができないので…

移動

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に戻したい

2) HTML/CSSで考える ~仕様のコード化

2) HTML/CSSで考える ~仕様のコード化

その変化を実現するjQuery / JavaScriptの機能を検討

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にしたい

2) HTML/CSSで考える ~仕様のコード化

$("#subPanel li:first").animate( {marginTop : "0px"} , 1000 , function(){ $("li:last").css("margin-top","-100px"). prependTo("#subPanel"); });

アニメーション命令

アニメーション後の値所要時間(ミリ秒)

2) HTML/CSSで考える ~仕様のコード化

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番目に移動させたい

2) HTML/CSSで考える ~仕様のコード化

$("#subPanel li:first").animate( {marginTop : "0px"} , 1000 , function(){ $("li:last").css("margin-top","-100px"). prependTo("#subPanel"); });

アニメーション命令

アニメーション終了後に実行する命令

CSS設定対象(#subPanel)内の先頭に挿入

書いてみる → 確認 → デバック

2) HTML/CSSで考える ~仕様のコード化

実現が難しそうな場合、HTML / CSSの変化を別の形で表せないか検討

2) HTML/CSSで考える ~仕様のコード化

まとめ

・仕様は誰にでも作れる(実装可能かはともかく…)

よく見る → 分解する → 想像する

・仕様=やりたいこと、それさえ書ければできたも同然

・「仕様化」は外注できない(ふわっと仕様は危険)

・汎用化(ライブラリ化)しなければ、意外と簡単

実装に困ったらご連絡ください!

参考図書

参考図書

著者 : 西畑 一馬出版社 : アスキー・メディアワークス発売日 : 2010年2月12日B5変形判 / 344ページ定価 : 3,497円(税込)ISBN 978-4048684118

参考図書

著者 : 高津戸 壮出版社 : 技術評論社発売日 : 2011年12月8日B5変形判 / 288ページ定価 : 3,024円(税込)ISBN 978-4-7741-4856-4

参考図書

著者 : たにぐち まこと出版社 : マイナビ発売日 : 2012年03月24日B5変型判 / 288ページ定価 : 2,604円(税込)ISBN 978-4-8399-4187-1

参考図書

著者 : 西畑一馬,中村享介,徳田和規 出版社 : インプレスジャパン発売日 : 2010年12月17日424ページ定価 : 3,150円(税込)ISBN 978-4844329619

本日はありがとうございました

ご連絡・ご質問など下記までお願いしますE-mail : info@hamnaly.comFacebook / Twitter : yabecchy