https://www.facebook.com/TonosamaLabo

1. HTML5入門＆jQuery 勉強会
⑱HTML5とかjQueryを
おぼえよう！その４

2. はじめに
• HTML5とかjQueryをざっくり覚えよう！
• もう少し実践的なことをしよう！

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. かいせつ
context.strokeStyle = $(this).css('background-color');
↑バックグラウンドの色を設定
$('.color').removeClass('select');
↑.colorのselectクラスを全部消す！（セレクタじゃなくてクラス名指
定なので、.selectじゃなくてselectなのに注意！）
$(this).addClass('select');
↑自分にだけ、selectクラスを追加！

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>
<div class="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. できた
• ぼたんがふえたー
• CLEARおしたら、ぬりつぶし！

22. かいせつ
context.fillStyle = context.strokeStyle;
↑塗りつぶし用の色をペンの色にする
context.fillRect(0, 0, canvas.width, canvas.height);
↑塗りつぶす（canvasサイズの四角を書いて塗りつぶす）

23. データのほぞん
• データのセーブ・ロード機能をつくろう！
• データは、localStrageにほぞんしてみよ
う！

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. めも
• データ消したい時は、以下で消せる
• localStorage.clear();

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. まとめ
• jQueryは便利！

40. おわり
主催（共同開催）：
株式会社 gooya
http://www.gooya.co.jp/
メドレー株式会社
http://www.medley.co.jp/
講師：西田 寛輔 (Tonosamart)
http://www.facebook.com/tonosamart