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