• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
⑰jQueryをおぼえよう!その3
 

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

on

  • 1,862 views

https://www.facebook.com/TonosamaLabo

https://www.facebook.com/TonosamaLabo

Statistics

Views

Total Views
1,862
Views on SlideShare
1,170
Embed Views
692

Actions

Likes
4
Downloads
0
Comments
0

2 Embeds 692

http://tonosamart.com 691
http://s.deeeki.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • HTML5入門&jQuery 勉強会 ⑰HTML5とかjQueryを おぼえよう!その3
    • はじめに•  HTML5とかjQueryをざっくり覚えよう!•  もう少し実践的なことをしよう!
    • 注意事項•  この資料の中には、2012/05時点での事実が書いてあるつもりです が、時代とともに移り変わる情報もあるので最新情報のチェックも 忘れずに!•  主観に基づく事柄もあります。そんな場合は、この色でコメントす るようにしています!信じるか信じないかはあなた次第!•  ざっくり説明するために、簡単に説明しています。厳密にいうと ちょっと違う部分もあるかと思います。でもまあ、だいたいあって る(はず)。•  過去の環境(IE6とかIE7とか、PHP4とか)には採用されていない 話もあるので、その辺をターゲットにする場合は注意(無視してい いと思うけど)•  リンクは日本語訳がある場合はそっちにリンクしています。公式情 報ではないので、仕事で使う場合は原文を確認しましょう。
    • もくじ•  とりあえずおさらい•  canvasを使ってみよう
    • とりあえずおさらい•  XAMPPをたちあげよう•  ホームディレクトリに、test2というフォルダを 作ろう•  test2.htmlを作ろう•  firefoxでアクセスしよう –  http://localhost/test2/
    • 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>
    • できた•  じゅんびかんりょう! test2_01.zip
    • canvasを使ってみよう•  canvasってなに?•  canvasを作ってみよう•  jQueryからアクセスしよう•  コンテキストって何?•  線を引いてみよう•  パスって何?•  おえかきくんをつくってみよう•  まとめ
    • canvasってなに?•  Web上で画像を描画する技術•  HTML5に採用予定•  canvasタグで指定した範囲内に自由に描画 することができる•  クライアントで描画できるため、動的な画像 (グラフ、カウンタ、時計など)やゲームな どに採用するといいと思う。•  Canvas チュートリアル –  https://developer.mozilla.org/ja/ Canvas_tutorial
    • canvasを作ってみよう<body> <canvas id="canvas" width="480px" height="320px"></canvas></body>
    • できた•  白い・・・。
    • 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>
    • できた•  なんか、ちゃんと枠ができてる!。
    • 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>
    • できた•  それっぽい!。
    • かいせつ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)の矩形を塗りつぶし
    • コンテキストって何?•  なんか、描画の設定とか命令とかがあつ まったやつ。•  コンテキストに何かすると、canvasに反 映されるイメージ•  2dのコンテキスト(2d)と、3dのコンテ キスト(webgl)がある。
    • 線を引いてみようcontext.strokeStyle = "#f00";context.lineWidth = 2;context.beginPath();context.moveTo(10, 10);context.lineTo(100, 100);context.stroke();
    • できた•  線が出た!
    • かいせつcontext.strokeStyle = "#f00";↑線の色を決めるcontext.lineWidth = 2;↑線の太さを決めるcontext.beginPath();↑パスを初期化context.moveTo(10, 10);↑(10,10)に移動context.lineTo(100, 100);↑線を引きながら(100,100)に移動context.stroke();↑パスを描画
    • パスってなに?•  図形を表す線のあつまりみたいなやつ•  線だけのパスと、塗りつぶされたパスが つかえる
    • やってみよう①context.strokeStyle = "#f00";context.lineWidth = 2;context.beginPath();context.moveTo(110, 10);context.lineTo(200, 100);context.lineTo(150, 200);context.closePath();context.stroke();
    • やってみよう②context.fillStyle = "#f0f";context.lineWidth = 2;context.beginPath();context.moveTo(210, 10);context.lineTo(300, 100);context.lineTo(250, 200);context.closePath();context.fill();
    • やってみよう③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();
    • できた•  なるほど! test2_02.zip
    • おえかきくんをつくってみよう•  じゅんび•  せんをひくかんすう•  せんをひくには・・・•  せんをひこう!•  はみでたら•  いろえらびきのう•  おしたら色を変えよう•  ぺんのふとさを変えよう•  クリアをつくろう•  データのほぞん•  こまかいとこ
    • じゅんび<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>
    • できた•  この状態からスタート!
    • せんをひくかんすう•  線を引く関数を作っておこう•  開始位置から終了位置まで線を引く!
    • こんなかんじfunction drawLine(x1, y1, x2, y2){context.beginPath();context.moveTo(x1, y1);context.lineTo(x2, y2);context.stroke();}
    • せんをひくには・・・•  線を引くには、開始位置と終了位置が必 要!•  マウスが押されたら、開始位置を変数に とっておこう!•  ついでに、「いまボタン押しっぱなし」て いう情報もとっておこう
    • こんなかんじ①$(function(){ var sx = 0; var sy = 0; var isDraw = false;
    • こんなかんじ$(#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;});
    • できた•  マウスのボタンを押すとログが出る!
    • かいせつ①•  sx = e.pageX - $(this).offset().left;マウスカーソルのページ上の座標(pageX)から、canvasのページ上の座標を引くことで、canvas上の座標を計算!
    • かいせつ②•  e.preventDefault();ブラウザのデフォルトのイベント(クリック処理)を行わなくする!chromで変になるのを防止できます。
    • せんをひこう!•  マウスが動いたら、その場所まで線を引 こう!
    • やってみよう$(#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; } });
    • できた•  せんがひける! test2_03.zip
    • はみでたら•  ボタン押しっぱなしでcanvasから、はみ でたら、うごきがへん!•  はみ出た状態でボタンはなしてもへん!•  はみでたら、線を引いてボタンをはなした 状態にしよう。•  あとついでに、mousedownのログも消そ う。かくかくするから。
    • こんなかんじ$(#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; });
    • できた•  いいかんじー test2_04.zip
    • いろえらびきのう•  いろえらびきのうをつくろう!
    • がめん①.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;}
    • がめん②.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);}
    • がめん③#color1{ background-color:#F00;}#color2{ background-color:#F9C;}#color3{ background-color:#FF0;}#color4{ background-color:#FFF;}#color5{ background-color:#00F;}
    • がめん④#color6{ background-color:#0F0;}#color7{ background-color:#060;}#color8{ background-color:#000;}#color9{ background-color:#8D4B15;}
    • がめん⑤<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>
    • できた•  いいかんじー test2_05.zip
    • かいせつ•  .tools div{}で、基本的な大きさとかを定 義しています。•  .color{}で、形を定義しています。 border-radius:0 50px 50px 50px; 左上は四角で、のこりの角は丸にしてます。•  色は、#color1{}のように、idを指定して決めて います。
    • つづく•  次の資料に続きます!
    • おわり主催(共同開催):株式会社 gooyahttp://www.gooya.co.jp/メドレー株式会社http://www.medley.co.jp/講師:西田 寛輔 (Tonosamart)http://www.facebook.com/tonosamart