jqueryでitunes store風スライドショーを作ってみる

jQueryで

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

⍫ㇱ㕏ੱ

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

１）観察する、分解する～仕様にまとめる

２） HTML / CSSで考える～仕様のコード化

本日のお題

⥄Ꮖ⚫

4

ฬ�೨㧤߾ ߣ߭ߔ߾ߴ�

ᐕ�㦂㧤ਃච〝߫߆ߥߩ

�ᚲ㧤㐳ᴰ↸

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

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

� ᐢ๔ోࡦࠗࠩ࠺⥸

1/20

W ebࠩ࠺ ࠗ࠽ω

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

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

Wߩࠬࡦࡈ eb⠪S2࠽ࡦࡊ

1/20

ߔ߹ߒ㗿߅ߊߒࠈࠃ

1/20

その前に…


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


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


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


まずは、よく見る


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


①

上から下へスライド

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

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


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


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


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

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


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


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

２） HTML / CSSで考える～仕様のコード化

２） HTML/CSSで考える～仕様のコード化

仕様を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）

<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></div>

#keyVisual { height: 300px; }#keyVisual ul { height: 300px; overflow: hidden;}#keyVisual ul li:first { margin-top: -100px; }

この値を1秒かけて、段階的に0にしたい


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

移動



#keyVisual { height: 300px; }#keyVisual ul { height: 300px; overflow: hidden;}#keyVisual ul li:first { margin-top: 0px; }

リストの１番目に移動させたい

この値をに－１０0に戻したい


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



#keyVisual { height: 300px; }#keyVisual ul { height: 300px; overflow: hidden;}#keyVisual ul li:first { margin-top: -100px; }

この値を1秒かけて、段階的に0にしたい


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

アニメーション命令

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


この値をに－１０0に戻したい


#keyVisual { height: 300px; }#keyVisual ul { height: 300px; overflow: hidden;}#keyVisual ul li:first { margin-top: 0px; }

リストの１番目に移動させたい


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

アニメーション命令

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

CSS設定対象（#subPanel）内の先頭に挿入

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


実現が難しそうな場合、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 : [email protected] / Twitter : yabecchy

jqueryでitunes store風スライドショーを作ってみる

Technology