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.

⑱jQueryをおぼえよう!その4

1,892 views

Published on

https://www.facebook.com/TonosamaLabo

Published in: Technology
  • Be the first to comment

⑱jQueryをおぼえよう!その4

  1. 1. HTML5入門&jQuery 勉強会 ⑱HTML5とかjQueryを おぼえよう!その4
  2. 2. はじめに•  HTML5とかjQueryをざっくり覚えよう!•  もう少し実践的なことをしよう!
  3. 3. 注意事項•  この資料の中には、2012/05時点での事実が書いてあるつもりです が、時代とともに移り変わる情報もあるので最新情報のチェックも 忘れずに!•  主観に基づく事柄もあります。そんな場合は、この色でコメントす るようにしています!信じるか信じないかはあなた次第!•  ざっくり説明するために、簡単に説明しています。厳密にいうと ちょっと違う部分もあるかと思います。でもまあ、だいたいあって る(はず)。•  過去の環境(IE6とかIE7とか、PHP4とか)には採用されていない 話もあるので、その辺をターゲットにする場合は注意(無視してい いと思うけど)•  リンクは日本語訳がある場合はそっちにリンクしています。公式情 報ではないので、仕事で使う場合は原文を確認しましょう。
  4. 4. つづき•  前の資料の続き!
  5. 5. おしたら色を変えよう•  .colorが押されたら、線を引く時の色を変 えよう。•  色は、background-colorから取得しよう•  どの色が選ばれてるかわからないから、選 んだ奴のクラスにselectを追加しよう
  6. 6. こんなかんじ① .select{ border-color:#66F !important;}
  7. 7. こんなかんじ②$(.color).click(function() { context.strokeStyle = $(this).css(background-color); $(.color).removeClass(select); $(this).addClass(select); });
  8. 8. できた•  いろがかえられるー test2_06.zip
  9. 9. かいせつcontext.strokeStyle = $(this).css(background-color);↑バックグラウンドの色を設定$(.color).removeClass(select);↑.colorのselectクラスを全部消す!(セレクタじゃなくてクラス名指定なので、.selectじゃなくてselectなのに注意!)$(this).addClass(select);↑自分にだけ、selectクラスを追加!
  10. 10. ぺんのふとさを変えよう•  おなじかんじで、ぺんの太さを変えよう!
  11. 11. やってみよう①.pen{ -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px;}#normal{ background-color:#555;}#bold{ background-color:#555;}
  12. 12. やってみよう②<div class="color" id="color9"></div><div class="pen" id="normal">・</div><div class="pen" id="bold">●</div>
  13. 13. やってみよう③ $(.pen).click(function() { if($(this).attr(id) == normal){ context.lineWidth = 2; }else{ context.lineWidth = 6; } $(.pen).removeClass(select); $(this).addClass(select);});
  14. 14. できた•  ふとさがかえられるー test2_07.zip
  15. 15. かいせつif($(this).attr(id) == normal){ context.lineWidth = 2;}else{ context.lineWidth = 6;}idをみて、normalだったら2px、ちがったら6pxの大きさにする!
  16. 16. クリアをつくろう•  ボタンを押したら、クリアされる!•  ついでに、LOADとSAVEのボタンも作っ ておこう•  あと、ボタンのならびも整理しよう
  17. 17. やってみよう①.clear{ -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px;}.file{ -moz-border-radius:0 0 0 0; -webkit-border-radius:0 0 0 0; border-radius:0 0 0 0;}
  18. 18. やってみよう②#clear{ background-color:#555; font-size:10px !important;}#load{ background-color:#555; font-size:10px !important;}#save{ background-color:#555; font-size:10px !important;}
  19. 19. やってみよう③<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="pen" id="normal">・</div><div class="pen" id="bold">●</div><div class="clear" id="clear">CLEAR</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 class="file" id="load">LOAD</div><div class="file" id="save">SAVE</div></div>
  20. 20. やってみよう④$(#clear).click(function(){ context.fillStyle = context.strokeStyle; context.fillRect(0, 0, canvas.width, canvas.height); });
  21. 21. できた•  ぼたんがふえたー•  CLEARおしたら、ぬりつぶし!
  22. 22. かいせつcontext.fillStyle = context.strokeStyle;↑塗りつぶし用の色をペンの色にするcontext.fillRect(0, 0, canvas.width, canvas.height);↑塗りつぶす(canvasサイズの四角を書いて塗りつぶす)
  23. 23. データのほぞん•  データのセーブ・ロード機能をつくろう!•  データは、localStrageにほぞんしてみよ う!
  24. 24. やってみよう $(#load).click(function(){ var dataURL = localStorage.getItem(dataURL); if(dataURL){ var img = new Image(); img.onload = function(){ context.drawImage(img, 0, 0); } img.src = dataURL; } }); $(#save).click(function(){ localStorage.setItem(dataURL, canvas.toDataURL(image/png)); });
  25. 25. できた•  セーブ、ロードができる!•  ブラウザ閉じて開いてもロードできる!
  26. 26. かいせつ① $(#save).click(function(){ localStorage.setItem(dataURL, canvas.toDataURL(image/png)); });•  canvas.toDataURL( image/png )で、canvasの内容をDataURL と言われる文字列に変換できる!•  localStorage.setItem(key, value)で、ローカルストレージに保存 ができる!
  27. 27. ローカルストレージとは?•  HTML5で、データをローカルに保存できる技術 の一つ。•  オフラインでも使えて、ブラウザにデータを保 存できる•  「プロトコル+ドメイン+ポート」ごとにデー タが保存される•  W3C - 『Web Storage』日本語訳 –  http://www.html5.jp/trans/ w3c_webstorage.html
  28. 28. DataURLとは?•  画像などのデータを、文字列にしてHTML に埋め込む方式•  大きなデータにはあまり向いてないが、小 さなデータを外部から取得してこなくても、 直接HTMLに含めることができる•  RFC2397 data URL スキームの翻訳 –  http://d.hatena.ne.jp/tily/20071103/p1
  29. 29. かいせつ②var dataURL = localStorage.getItem(dataURL);↑ローカルストレージからデータ取得if(dataURL){↑データが存在したら var img = new Image(); ↑画像を作成 img.onload = function(){ ↑画像がロードされた時のイベント context.drawImage(img, 0, 0); ↑canvasに画像を書く } img.src = dataURL; ↑画像のURLを設定}参考:画像を使うhttps://developer.mozilla.org/ja/Canvas_tutorial%3AUsing_images
  30. 30. めも•  データ消したい時は、以下で消せる•  localStorage.clear();
  31. 31. こまかいとこ•  最初に色とかペンが選択されてない!•  ボタンにカーソルおいたらわかるようにし たい
  32. 32. やってみよう①context.strokeStyle = $(#color1).css(background-color);$(#color1).addClass(select);context.lineWidth = 2;$(#normal).addClass(select);
  33. 33. やってみよう②.hover{ border-color:#F6F !important;}
  34. 34. やってみよう③$(.tools div).hover(function(){ $(this).addClass(hover);},function(){ $(this).removeClass(hover);});
  35. 35. できた•  おえかきたのしい! test2_07.zip
  36. 36. さんこう•  tonomemo –  http://www.apple.com/webapps/utilities/tonomemo.html
  37. 37. おまけ•  firefoxの場合は、canvasの上で、右ク リックすると画像に保存できる!•  上手に絵がかけたらほぞんしよう!
  38. 38. まとめ•  おえかきたのしい!•  canvasすごい!•  とはいえ普通にホームページつくるとした ら、あんまり使わない気がする。
  39. 39. まとめ•  jQueryは便利!
  40. 40. おわり主催(共同開催):株式会社 gooyahttp://www.gooya.co.jp/メドレー株式会社http://www.medley.co.jp/講師:西田 寛輔 (Tonosamart)http://www.facebook.com/tonosamart

×