Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5ビギナーズ スタッフ
Taisuke Ozaki
 この資料は、2014年5月23日に行われた勉強会「HTML5ビ
ギナーズ」のLTに使用したものを基にしています。
 イベントページ:http://atnd.org/events/50016
 HTML5ビギナーズに参加された皆様の一助と...
Taisuke Ozaki
 デジハリ卒業生
 HTML5ビギナーズ スタッフ
 文系大学生
 大学やアルバイトでの開発経験ゼロ
ozata92
 jQueryで「こんなのできるよ」という話
 プログラミングになじみの薄い方向け
 難しい・新しい技術を解説するのではなく、
「簡単!できそう!」を目指すLTです。
 UNIQLOCK(本家)
http://www.uniqlo.jp/uniqlock/
 制作時間:12時間程度
 使ったもの
 jQuery
 jQuery UI
 解説サイトにあるソースコード
 パーツ
 時計
 背景の色が変化 ←この処理を見ていきます!
 写真の表示
 jQuery UIの恩恵を受け、かなり楽に制作
 jQuery公式のライブラリ群。難しい動きを簡単に。
 2段階折りたたみ、バウンド、破片を作りながら...
$(function pAnime(){
$("#panel")
.delay(875)
.hide("slide", {direction: "up"}, 120)
.delay(875)
.show("slide", {direction:...
jQuery標準のhide/showメソッドは、
時間とコールバック関数しか設定できない。
スライド処理を書くのに手間がかかる。
$("#panel")
.hide(120)
.show(120);
オレンジ色の領域が上方向に消える
= オレンジの背景が白に変化して見える
$("#panel")
.hide("slide", {direction: "up"}, 120)
オレンジ色の領域が左方向から現れる
= 白の背景がオレンジに変化して見える
$("#panel")
.show("slide", {direction: “left"}, 120)
一定時間後に自分を実行
= 繰り返しになる
setTimeout(pAnime,5000);
$(function pAnime(){
$("#panel")
.delay(875)
.hide("slide", {direction: "up"}, 120)
.delay(875)
.show("slide", {direction:...
 jQuery UIのSlideエフェクトを使うことで
簡単に、自由にスライド処理が可能!
 チェーンメソッドでつなぐ!
 setTimeout()で繰り返し処理
 「私ならもっとうまく作れるよ!」
→ ぜひ作ってみてください!
 「よくわからないけど、面白そう!」
→ ぜひ作ってみてください!
 「けしからん!モノ申したい!」
→ Facebookまでご意見をください!
 自分がワクワクするものを作る!
 探そう、答えはある。
 試行錯誤は時間のムダではない!
 再燃焼させたい時には勉強会へ!
次はあなたの作品を!
ありがとうございました!
Upcoming SlideShare
Loading in …5
×

ビギナーがUNIQLOCKもどきを作ってみた

1,335 views

Published on

UNIQLOCKのようなものを、jQuery UIを使って簡単に再現してみました。

Published in: Internet
  • Be the first to comment

ビギナーがUNIQLOCKもどきを作ってみた

  1. 1. HTML5ビギナーズ スタッフ Taisuke Ozaki
  2. 2.  この資料は、2014年5月23日に行われた勉強会「HTML5ビ ギナーズ」のLTに使用したものを基にしています。  イベントページ:http://atnd.org/events/50016  HTML5ビギナーズに参加された皆様の一助となれば幸い です。  サンプルのURLは非公開です。ごめんなさい!  ご意見やご指摘は… https://www.facebook.com/ozata92 にお願いします!
  3. 3. Taisuke Ozaki  デジハリ卒業生  HTML5ビギナーズ スタッフ  文系大学生  大学やアルバイトでの開発経験ゼロ ozata92
  4. 4.  jQueryで「こんなのできるよ」という話  プログラミングになじみの薄い方向け  難しい・新しい技術を解説するのではなく、 「簡単!できそう!」を目指すLTです。
  5. 5.  UNIQLOCK(本家) http://www.uniqlo.jp/uniqlock/
  6. 6.  制作時間:12時間程度  使ったもの  jQuery  jQuery UI  解説サイトにあるソースコード
  7. 7.  パーツ  時計  背景の色が変化 ←この処理を見ていきます!  写真の表示  jQuery UIの恩恵を受け、かなり楽に制作  jQuery公式のライブラリ群。難しい動きを簡単に。  2段階折りたたみ、バウンド、破片を作りながら爆発
  8. 8. $(function pAnime(){ $("#panel") .delay(875) .hide("slide", {direction: "up"}, 120) .delay(875) .show("slide", {direction: "left"}, 120) .delay(875) .hide("slide", {direction: "down"}, 120) .delay(875) .show("slide", {direction: "right"}, 120); setTimeout(pAnime); });
  9. 9. jQuery標準のhide/showメソッドは、 時間とコールバック関数しか設定できない。 スライド処理を書くのに手間がかかる。 $("#panel") .hide(120) .show(120);
  10. 10. オレンジ色の領域が上方向に消える = オレンジの背景が白に変化して見える $("#panel") .hide("slide", {direction: "up"}, 120)
  11. 11. オレンジ色の領域が左方向から現れる = 白の背景がオレンジに変化して見える $("#panel") .show("slide", {direction: “left"}, 120)
  12. 12. 一定時間後に自分を実行 = 繰り返しになる setTimeout(pAnime,5000);
  13. 13. $(function pAnime(){ $("#panel") .delay(875) .hide("slide", {direction: "up"}, 120) .delay(875) .show("slide", {direction: "left"}, 120) .delay(875) .hide("slide", {direction: "down"}, 120) .delay(875) .show("slide", {direction: "right"}, 120); setTimeout(pAnime); });
  14. 14.  jQuery UIのSlideエフェクトを使うことで 簡単に、自由にスライド処理が可能!  チェーンメソッドでつなぐ!  setTimeout()で繰り返し処理
  15. 15.  「私ならもっとうまく作れるよ!」 → ぜひ作ってみてください!  「よくわからないけど、面白そう!」 → ぜひ作ってみてください!  「けしからん!モノ申したい!」 → Facebookまでご意見をください!
  16. 16.  自分がワクワクするものを作る!  探そう、答えはある。  試行錯誤は時間のムダではない!  再燃焼させたい時には勉強会へ!
  17. 17. 次はあなたの作品を! ありがとうございました!

×