WEBVTT

1
00:00:00.000 --> 00:00:00.790
こんにちは。

2
00:00:00.790 --> 00:00:03.553
エイチティーエムエルリファレンス解説です。

3
00:00:03.553 --> 00:00:07.633
エイチティーエムエルタグ編の九十八本目は、キャンバスタグです。

4
00:00:07.633 --> 00:00:13.423
キャンバスは、ジャバスクリプトなどを使って、図形やグラフを描くための領域を作る要素です。

5
00:00:13.423 --> 00:00:20.003
タグを置いただけでは白いキャンバスのような空の場所ができるだけで、絵そのものはプログラムが描きます。

6
00:00:20.003 --> 00:00:25.990
今回は、キャンバスの意味、幅と高さを決める属性、描画を始める合図となるゲットコンテキストの基本、

7
00:00:25.990 --> 00:00:31.978
代替コンテンツ、コード例、ブラウザー互換性、そしてよくある間違いまで順番に確認します。

8
00:00:31.978 --> 00:00:34.939
グラフが画面に現れるまでの流れを、自分の手で再現できるようになることが、

9
00:00:34.939 --> 00:00:37.900
今回のゴールです。

10
00:00:37.900 --> 00:00:40.723
まず、キャンバスの役割を整理します。

11
00:00:40.723 --> 00:00:45.663
普通の画像要素が、すでに用意された写真やイラストを表示するのに対して、キャンバスは、

12
00:00:45.663 --> 00:00:50.604
これから描くための場所を用意する要素です。

13
00:00:50.604 --> 00:00:55.465
たとえば、利用者の操作やデータの変化に合わせて棒グラフを伸ばしたり、図形を動かしたり、

14
00:00:55.465 --> 00:01:00.327
簡単なゲームの画面を作ったりできます。

15
00:01:00.327 --> 00:01:07.071
数字が変わるたびに画像ファイルを作り直す必要はなく、プログラムがその場で描き直せます。

16
00:01:07.071 --> 00:01:11.776
逆に、内容が決まっている写真なら画像要素の方が向いています。

17
00:01:11.776 --> 00:01:17.422
描く場所と、描かれる内容を分けて考えるのが、キャンバス理解の出発点です。

18
00:01:17.422 --> 00:01:26.048
マウスで描くお絵描きツールや、地図のように操作で表示が変わる画面も、キャンバスの応用としてよく知られています。

19
00:01:26.048 --> 00:01:28.323
基本の書き方を見ていきます。

20
00:01:28.323 --> 00:01:34.012
キャンバスは空要素ではないので、開始タグと終了タグをセットで書きます。

21
00:01:34.012 --> 00:01:39.863
その間に書く内容については、あとで代替コンテンツとして改めて説明します。

22
00:01:39.863 --> 00:01:46.039
配置する場所は、本文を表示するボディの中の、グラフや図を表示したい位置です。

23
00:01:46.039 --> 00:01:53.516
さらに、アイディーを付けておくと、ジャバスクリプトから、そのキャンバスを正確に探し出せます。

24
00:01:53.516 --> 00:02:01.805
まずはタグで場所を作り、次にプログラムがその場所を受け取って描く、という二段階の流れを覚えてください。

25
00:02:01.805 --> 00:02:05.868
この順番が分かると、コード例も読みやすくなります。

26
00:02:05.868 --> 00:02:12.178
キャンバス専用といえる大切な属性が、幅を表すウィドスと、高さを表すハイトです。

27
00:02:12.178 --> 00:02:17.194
何も指定しない場合、幅は三百、高さは百五十が既定値になります。

28
00:02:17.194 --> 00:02:22.614
ここで注意したいのは、この二つの属性が決めるのは、見た目の表示サイズだけではなく、

29
00:02:22.614 --> 00:02:28.035
内部で描画できる細かさ、つまり解像度だという点です。

30
00:02:28.035 --> 00:02:36.610
シーエスエスだけで表示を大きく引き伸ばすと、内部の絵が拡大されて、線や文字がぼやけて見えることがあります。

31
00:02:36.610 --> 00:02:41.545
描きたい大きさに合わせて、属性で土台の解像度を決め、表示サイズは必要に応じてシーエスエスで調整する、

32
00:02:41.545 --> 00:02:46.480
と分けて考えましょう。

33
00:02:46.480 --> 00:02:49.033
描画を始める基本の流れを紹介します。

34
00:02:49.033 --> 00:02:54.067
ジャバスクリプトでは、まずクエリーセレクターなどでキャンバス要素を取り出し、

35
00:02:54.067 --> 00:02:59.101
次にゲットコンテキストという命令で、描画に使う道具を受け取ります。

36
00:02:59.101 --> 00:03:03.781
引数にトゥーディーと渡すと、平面の図形を描くための道具が返ります。

37
00:03:03.781 --> 00:03:07.751
その道具に対して、フィルスタイルで塗る色を指定し、フィルレクトで四角形を描く、

38
00:03:07.751 --> 00:03:11.722
といった命令を順に書いていきます。

39
00:03:11.722 --> 00:03:16.047
エイチティーエムエル側は場所の用意までで、色や形の命令はすべてジャバスクリプト側に書く点が、

40
00:03:16.047 --> 00:03:20.372
キャンバスならではの特徴です。

41
00:03:20.372 --> 00:03:24.600
記事の活用事例をもとに、全体のコード例を確認します。

42
00:03:24.600 --> 00:03:28.340
場面は、動的なグラフの描画領域を作ることです。

43
00:03:28.340 --> 00:03:33.625
キャンバスには、チャートというアイディーと、幅三百二十、高さ百六十を指定し、

44
00:03:33.625 --> 00:03:38.910
中には参加者数の内訳を代替テキストとして書いています。

45
00:03:38.910 --> 00:03:45.251
続くスクリプトでは、そのキャンバスからトゥーディーの描画道具を受け取り、

46
00:03:45.251 --> 00:03:51.593
濃い緑色で、横位置二十、縦位置二十から、幅二百四十、高さ四十の四角形を描いています。

47
00:03:51.593 --> 00:03:57.773
保存してブラウザーで再読み込みし、緑色の帯が表示されるかを確認してください。

48
00:03:57.773 --> 00:04:02.000
まずはこの最小の成功体験から始めるのがおすすめです。

49
00:04:02.000 --> 00:04:10.944
コードを写すときは、キャンバスのアイディーと、スクリプトで探す名前が一致しているかも合わせて確認してください。

50
00:04:10.944 --> 00:04:13.229
代替コンテンツについて説明します。

51
00:04:13.229 --> 00:04:18.673
キャンバスの開始タグと終了タグの間に書いた文章は、キャンバスに対応していない環境や、

52
00:04:18.673 --> 00:04:24.117
ジャバスクリプトが動かず描画できない場合に、代わりに表示される内容になります。

53
00:04:24.117 --> 00:04:28.754
記事の例では、参加者数はエイチティーエムエルが十二人、シーエスエスが八人、

54
00:04:28.754 --> 00:04:33.391
というように、グラフが伝える数字そのものが文章で書かれています。

55
00:04:33.391 --> 00:04:37.424
大切なのは、描かれた図の中身は、プログラムが描いた絵としてしか存在せず、

56
00:04:37.424 --> 00:04:41.456
読み上げソフトなどにはそのまま伝わらない点です。

57
00:04:41.456 --> 00:04:45.892
図の意味は、代替内容や周囲の説明文でも必ず伝えるようにしましょう。

58
00:04:45.892 --> 00:04:48.511
見た目の整え方も見ておきます。

59
00:04:48.511 --> 00:04:54.448
キャンバス自体は、ほかの要素と同じようにシーエスエスで装飾できます。

60
00:04:54.448 --> 00:05:02.480
たとえば、細い枠線を付けて描画範囲がどこまでか分かるようにしたり、背景色を付けたりできます。

61
00:05:02.480 --> 00:05:08.330
ただし、繰り返しになりますが、シーエスエスで表示幅だけを大きく変えると、

62
00:05:08.330 --> 00:05:14.179
内部の解像度との釣り合いが崩れて、絵がぼやけることがあります。

63
00:05:14.179 --> 00:05:19.592
小さい画面に収めるための縮小は比較的問題になりにくい一方、拡大する場合は、

64
00:05:19.592 --> 00:05:25.005
属性の数値そのものを見直すことも検討してください。

65
00:05:25.005 --> 00:05:29.720
表示サイズと解像度は別物、という意識が失敗を防ぎます。

66
00:05:29.720 --> 00:05:32.753
似た用途の要素との使い分けも整理します。

67
00:05:32.753 --> 00:05:39.275
すでにファイルとして用意された写真やイラストを表示するなら、画像要素が素直な選択です。

68
00:05:39.275 --> 00:05:46.556
拡大しても線がきれいに保たれる図形やロゴなら、ベクター形式で描けるエスブイジーも候補になります。

69
00:05:46.556 --> 00:05:52.016
一方、キャンバスが得意なのは、データに応じてその場で描き直すグラフ、動き続けるアニメーション、

70
00:05:52.016 --> 00:05:57.476
利用者の操作で絵が変わるお絵描きのような場面です。

71
00:05:57.476 --> 00:06:01.420
決まった絵を見せるのか、プログラムで描き続けるのか。

72
00:06:01.420 --> 00:06:04.302
この違いで選ぶと、迷いにくくなります。

73
00:06:04.302 --> 00:06:08.700
用途に合った要素選びが、保守しやすいページにつながります。

74
00:06:08.700 --> 00:06:12.492
迷ったときは、その絵がページを開くたびに変わる必要があるかどうかを自問すると、

75
00:06:12.492 --> 00:06:16.284
判断しやすくなります。

76
00:06:16.284 --> 00:06:18.522
ブラウザー互換性を確認します。

77
00:06:18.522 --> 00:06:24.715
記事が紹介するエムディーエヌのデータでは、キャンバス要素本体は、クロームが一以降、

78
00:06:24.715 --> 00:06:30.907
エッジが十二以降、ファイアフォックスが一点五以降、サファリが二以降で対応しています。

79
00:06:30.907 --> 00:06:38.666
ファイアフォックスとサファリには補足条件ありとされているため、細かな動作は出典の注記も確認してください。

80
00:06:38.666 --> 00:06:46.873
とはいえ、かなり古くから主要ブラウザーで広く使われてきた仕組みなので、現在の環境では基本的に安心して使えます。

81
00:06:46.873 --> 00:06:54.184
ただし、使う描画機能やモバイル環境によって差が出ることもあるため、対象の実機で試す習慣は大切です。

82
00:06:54.184 --> 00:06:57.434
まとめとして、よくある間違いを三つ挙げます。

83
00:06:57.434 --> 00:07:02.604
一つ目は、キャンバスタグを置けば自動で絵が出ると思ってしまうことです。

84
00:07:02.604 --> 00:07:06.001
描画にはジャバスクリプトの命令が必ず必要です。

85
00:07:06.001 --> 00:07:12.500
二つ目は、幅や高さをシーエスエスだけで大きく引き伸ばし、絵をぼやけさせてしまうことです。

86
00:07:12.500 --> 00:07:15.898
解像度は属性で決めることを思い出してください。

87
00:07:15.898 --> 00:07:21.806
三つ目は、代替コンテンツを空っぽにして、図の意味が絵の中にしか残らないことです。

88
00:07:21.806 --> 00:07:25.499
キャンバスは、ジャバスクリプトで描画する領域です。

89
00:07:25.499 --> 00:07:28.453
これでキャンバスタグの解説を終わります。

90
00:07:28.453 --> 00:07:32.146
まずは四角形を一つ描く練習から始めてみてください。

91
00:07:32.146 --> 00:07:39.236
小さな成功を積み重ねることで、グラフやアニメーションへの応用も、少しずつ手が届くようになります。