⑰jQueryをおぼえよう!その3

1,948 views
1,841 views

Published on

https://www.facebook.com/TonosamaLabo

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,948
On SlideShare
0
From Embeds
0
Number of Embeds
713
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

⑰jQueryをおぼえよう!その3

  1. 1. HTML5入門&jQuery 勉強会 ⑰HTML5とかjQueryを おぼえよう!その3
  2. 2. はじめに•  HTML5とかjQueryをざっくり覚えよう!•  もう少し実践的なことをしよう!
  3. 3. 注意事項•  この資料の中には、2012/05時点での事実が書いてあるつもりです が、時代とともに移り変わる情報もあるので最新情報のチェックも 忘れずに!•  主観に基づく事柄もあります。そんな場合は、この色でコメントす るようにしています!信じるか信じないかはあなた次第!•  ざっくり説明するために、簡単に説明しています。厳密にいうと ちょっと違う部分もあるかと思います。でもまあ、だいたいあって る(はず)。•  過去の環境(IE6とかIE7とか、PHP4とか)には採用されていない 話もあるので、その辺をターゲットにする場合は注意(無視してい いと思うけど)•  リンクは日本語訳がある場合はそっちにリンクしています。公式情 報ではないので、仕事で使う場合は原文を確認しましょう。
  4. 4. もくじ•  とりあえずおさらい•  canvasを使ってみよう
  5. 5. とりあえずおさらい•  XAMPPをたちあげよう•  ホームディレクトリに、test2というフォルダを 作ろう•  test2.htmlを作ろう•  firefoxでアクセスしよう –  http://localhost/test2/
  6. 6. test2.html<!DOCTYPE HTML><html lang="ja"><head><meta charset="utf-8" /><title>HTML5</title><style></style><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script>$(function(){});</script></head><body></body></html>
  7. 7. できた•  じゅんびかんりょう! test2_01.zip
  8. 8. canvasを使ってみよう•  canvasってなに?•  canvasを作ってみよう•  jQueryからアクセスしよう•  コンテキストって何?•  線を引いてみよう•  パスって何?•  おえかきくんをつくってみよう•  まとめ
  9. 9. canvasってなに?•  Web上で画像を描画する技術•  HTML5に採用予定•  canvasタグで指定した範囲内に自由に描画 することができる•  クライアントで描画できるため、動的な画像 (グラフ、カウンタ、時計など)やゲームな どに採用するといいと思う。•  Canvas チュートリアル –  https://developer.mozilla.org/ja/ Canvas_tutorial
  10. 10. canvasを作ってみよう<body> <canvas id="canvas" width="480px" height="320px"></canvas></body>
  11. 11. できた•  白い・・・。
  12. 12. canvasを作ってみよう②<style>body{ background-color:#BECBAD;}canvas{ margin:20px 20px 20px 30px; box-shadow:3px 3px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow:3px 3px 3px rgba(0, 0, 0, 0.3); -webkit-box-shadow:3px 3px 3px rgba(0, 0, 0, 0.3);}</style>
  13. 13. できた•  なんか、ちゃんと枠ができてる!。
  14. 14. jQueryからアクセスしよう<script>$(function(){ var canvas = $(#canvas).get(0); var context = canvas.getContext(2d); context.fillStyle = "rgb(255, 255, 255)"; context.fillRect(0, 0, canvas.width, canvas.height);});</script>
  15. 15. できた•  それっぽい!。
  16. 16. かいせつvar canvas = $(#canvas).get(0);↑canvasのDOM elementを取得var context = canvas.getContext(2d);↑canvasのcontextを取得context.fillStyle = "rgb(255, 255, 255)";↑塗りつぶしの色を決めてcontext.fillRect(0, 0, canvas.width, canvas.height);↑(0,0)-(canvas.width, canvas.height)の矩形を塗りつぶし
  17. 17. コンテキストって何?•  なんか、描画の設定とか命令とかがあつ まったやつ。•  コンテキストに何かすると、canvasに反 映されるイメージ•  2dのコンテキスト(2d)と、3dのコンテ キスト(webgl)がある。
  18. 18. 線を引いてみようcontext.strokeStyle = "#f00";context.lineWidth = 2;context.beginPath();context.moveTo(10, 10);context.lineTo(100, 100);context.stroke();
  19. 19. できた•  線が出た!
  20. 20. かいせつcontext.strokeStyle = "#f00";↑線の色を決めるcontext.lineWidth = 2;↑線の太さを決めるcontext.beginPath();↑パスを初期化context.moveTo(10, 10);↑(10,10)に移動context.lineTo(100, 100);↑線を引きながら(100,100)に移動context.stroke();↑パスを描画
  21. 21. パスってなに?•  図形を表す線のあつまりみたいなやつ•  線だけのパスと、塗りつぶされたパスが つかえる
  22. 22. やってみよう①context.strokeStyle = "#f00";context.lineWidth = 2;context.beginPath();context.moveTo(110, 10);context.lineTo(200, 100);context.lineTo(150, 200);context.closePath();context.stroke();
  23. 23. やってみよう②context.fillStyle = "#f0f";context.lineWidth = 2;context.beginPath();context.moveTo(210, 10);context.lineTo(300, 100);context.lineTo(250, 200);context.closePath();context.fill();
  24. 24. やってみよう③context.strokeStyle = "#f00";context.fillStyle = "#f0f";context.lineWidth = 2;context.beginPath();context.moveTo(310, 10);context.lineTo(400, 100);context.lineTo(350, 200);context.closePath();context.fill();context.stroke();
  25. 25. できた•  なるほど! test2_02.zip
  26. 26. おえかきくんをつくってみよう•  じゅんび•  せんをひくかんすう•  せんをひくには・・・•  せんをひこう!•  はみでたら•  いろえらびきのう•  おしたら色を変えよう•  ぺんのふとさを変えよう•  クリアをつくろう•  データのほぞん•  こまかいとこ
  27. 27. じゅんび<script>$(function(){ var canvas = $(#canvas).get(0); var context = canvas.getContext(2d); context.fillStyle = "rgb(255, 255, 255)"; context.fillRect(0, 0, canvas.width,canvas.height);});</script>
  28. 28. できた•  この状態からスタート!
  29. 29. せんをひくかんすう•  線を引く関数を作っておこう•  開始位置から終了位置まで線を引く!
  30. 30. こんなかんじfunction drawLine(x1, y1, x2, y2){context.beginPath();context.moveTo(x1, y1);context.lineTo(x2, y2);context.stroke();}
  31. 31. せんをひくには・・・•  線を引くには、開始位置と終了位置が必 要!•  マウスが押されたら、開始位置を変数に とっておこう!•  ついでに、「いまボタン押しっぱなし」て いう情報もとっておこう
  32. 32. こんなかんじ①$(function(){ var sx = 0; var sy = 0; var isDraw = false;
  33. 33. こんなかんじ$(#canvas).mousedown(function(e){ isDraw = true; sx = e.pageX - $(this).offset().left; sy = e.pageY - $(this).offset().top; console.log(sx, sy); e.preventDefault();});$(#canvas).mouseup(function() { isDraw = false;});
  34. 34. できた•  マウスのボタンを押すとログが出る!
  35. 35. かいせつ①•  sx = e.pageX - $(this).offset().left;マウスカーソルのページ上の座標(pageX)から、canvasのページ上の座標を引くことで、canvas上の座標を計算!
  36. 36. かいせつ②•  e.preventDefault();ブラウザのデフォルトのイベント(クリック処理)を行わなくする!chromで変になるのを防止できます。
  37. 37. せんをひこう!•  マウスが動いたら、その場所まで線を引 こう!
  38. 38. やってみよう$(#canvas).mousemove(function(e){ if(isDraw){ var ex = e.pageX - $(canvas).offset().left; var ey = e.pageY - $(canvas).offset().top; drawLine(sx, sy, ex, ey); sx = ex; sy = ey; } });
  39. 39. できた•  せんがひける! test2_03.zip
  40. 40. はみでたら•  ボタン押しっぱなしでcanvasから、はみ でたら、うごきがへん!•  はみ出た状態でボタンはなしてもへん!•  はみでたら、線を引いてボタンをはなした 状態にしよう。•  あとついでに、mousedownのログも消そ う。かくかくするから。
  41. 41. こんなかんじ$(#canvas).mouseleave(function(e){ if(isDraw){ var ex = e.pageX - $(canvas).offset().left; var ey = e.pageY - $(canvas).offset().top; drawLine(sx, sy, ex, ey); sx = ex; sy = ey; } isDraw = false; });
  42. 42. できた•  いいかんじー test2_04.zip
  43. 43. いろえらびきのう•  いろえらびきのうをつくろう!
  44. 44. がめん①.tools{ clear:both; width:600px;}.color{ -moz-border-radius:0 50px 50px 50px; -webkit-border-radius:0 50px 50px 50px; border-radius:0 50px 50px 50px;}
  45. 45. がめん②.tools div{ float:left; font-size:40px; font-weight:bolder; color:#fff; margin:10px; width:50px; height:50px; text-align:center; line-height:50px; border:5px solid #fff; box-shadow:3px 3px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow:3px 3px 3px rgba(0, 0, 0, 0.3); -webkit-box-shadow:3px 3px 3px rgba(0, 0, 0, 0.3);}
  46. 46. がめん③#color1{ background-color:#F00;}#color2{ background-color:#F9C;}#color3{ background-color:#FF0;}#color4{ background-color:#FFF;}#color5{ background-color:#00F;}
  47. 47. がめん④#color6{ background-color:#0F0;}#color7{ background-color:#060;}#color8{ background-color:#000;}#color9{ background-color:#8D4B15;}
  48. 48. がめん⑤<div class="tools"><div class="color" id="color1"></div><div class="color" id="color2"></div><div class="color" id="color3"></div><div class="color" id="color4"></div><div class="color" id="color5"></div><div class="color" id="color6"></div><div class="color" id="color7"></div><div class="color" id="color8"></div><div class="color" id="color9"></div></div>
  49. 49. できた•  いいかんじー test2_05.zip
  50. 50. かいせつ•  .tools div{}で、基本的な大きさとかを定 義しています。•  .color{}で、形を定義しています。 border-radius:0 50px 50px 50px; 左上は四角で、のこりの角は丸にしてます。•  色は、#color1{}のように、idを指定して決めて います。
  51. 51. つづく•  次の資料に続きます!
  52. 52. おわり主催(共同開催):株式会社 gooyahttp://www.gooya.co.jp/メドレー株式会社http://www.medley.co.jp/講師:西田 寛輔 (Tonosamart)http://www.facebook.com/tonosamart

×