WEBVTT

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

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

3
00:00:04.058 --> 00:00:08.261
エイチティーエムエルタグ編の五十三本目は、マップタグです。

4
00:00:08.261 --> 00:00:13.478
マップは、一枚の画像の中に複数のクリックできる場所を作るためのタグです。

5
00:00:13.478 --> 00:00:18.188
普通の画像リンクは、画像全体が一つのリンクになりますが、マップを使えば、

6
00:00:18.188 --> 00:00:22.898
画像の左側と右側で別々のページへ移動させることができます。

7
00:00:22.898 --> 00:00:27.970
今回は、画像とマップとエリアという三つの部品の組み合わせ、形と座標の指定方法、

8
00:00:27.970 --> 00:00:33.043
表示サイズが変わったときの注意点まで、順に学んでいきましょう。

9
00:00:33.043 --> 00:00:38.260
一枚の絵をそのまま案内板として使える点が、この仕組みの面白いところです。

10
00:00:38.260 --> 00:00:41.648
まず、どんな場面で使うのかを整理します。

11
00:00:41.648 --> 00:00:45.374
代表例は、会場の案内図や建物の見取り図です。

12
00:00:45.374 --> 00:00:53.505
入り口、受付、会議室といった場所ごとにクリックできると、利用者は目的の案内ページへ直接進めます。

13
00:00:53.505 --> 00:01:03.499
ほかにも、地図の画像で地域ごとにリンクを分けたり、商品写真の中で部品ごとに説明ページへ案内したりする使い方があります。

14
00:01:03.499 --> 00:01:11.461
逆に、写真一枚をそのまま一つのリンクにしたいだけなら、マップは不要で、通常のリンクで十分です。

15
00:01:11.461 --> 00:01:18.914
一枚の画像の中に、行き先の違う場所が複数あるかどうかが、使うかどうかの判断ポイントです。

16
00:01:18.914 --> 00:01:25.520
利用者が迷わず目的の場所へ進めることが、案内図にリンクを付ける大きな目的です。

17
00:01:25.520 --> 00:01:27.473
基本の形を確認します。

18
00:01:27.473 --> 00:01:31.200
イメージマップは三つの部品でできています。

19
00:01:31.200 --> 00:01:35.283
一つ目は、画像を表示するアイエムジー要素です。

20
00:01:35.283 --> 00:01:39.543
二つ目は、クリック領域をまとめるマップ要素です。

21
00:01:39.543 --> 00:01:45.401
三つ目は、領域一つひとつを表すエリア要素で、マップの中に置きます。

22
00:01:45.401 --> 00:01:54.632
画面の例では、アイエムジーにユーズマップ属性で使うマップを指定し、マップの中にエリアを一つ入れています。

23
00:01:54.632 --> 00:01:58.715
開始タグと終了タグを明示して書くのが基本です。

24
00:01:58.715 --> 00:02:02.265
まずはこの三点セットの形を覚えましょう。

25
00:02:02.265 --> 00:02:07.235
部品の役割を分けて考えると、コードが読みやすくなります。

26
00:02:07.235 --> 00:02:14.868
この三つの名前と役割を先に押さえておくと、この後の形や座標の話も理解しやすくなります。

27
00:02:14.868 --> 00:02:17.826
次に、画像とマップをつなぐ仕組みを押さえます。

28
00:02:17.826 --> 00:02:19.241
カギは名前の一致です。

29
00:02:19.241 --> 00:02:23.036
画像側ではユーズマップ属性に、シャープを付けた名前を書き、マップ側ではネーム属性に、

30
00:02:23.036 --> 00:02:26.830
シャープなしで同じ名前を書きます。

31
00:02:26.830 --> 00:02:31.589
たとえば、ユーズマップがシャープ、ベニューなら、ネームもベニューにします。

32
00:02:31.589 --> 00:02:36.734
一文字でも違うと、ブラウザーは対応を見つけられず、クリックしても何も起きません。

33
00:02:36.734 --> 00:02:40.207
名前は文書の中で重ならないように付けることも大切です。

34
00:02:40.207 --> 00:02:44.580
動かないときは、まずこの二つの名前がそろっているかを確かめましょう。

35
00:02:44.580 --> 00:02:50.368
シャープを付ける側と付けない側を間違えやすいので、書きながら声に出して確認すると安心です。

36
00:02:50.368 --> 00:02:53.947
エリアの形は、シェイプ属性で選びます。

37
00:02:53.947 --> 00:02:55.454
種類は四つです。

38
00:02:55.454 --> 00:03:04.119
レクトは四角形、サークルは円形、ポリは多角形で、建物の形に沿った複雑な輪郭にも対応できます。

39
00:03:04.119 --> 00:03:07.133
デフォルトは画像全体を表します。

40
00:03:07.133 --> 00:03:12.973
会場案内図なら、部屋は四角形なのでレクト、丸いオブジェならサークル、というように、

41
00:03:12.973 --> 00:03:18.812
実際の見た目に合った形を選ぶのがコツです。

42
00:03:18.812 --> 00:03:27.666
形によって、次のコーズ属性に書く数字の個数や意味が変わるので、形と座標はセットで覚えましょう。

43
00:03:27.666 --> 00:03:32.940
迷ったら、まず扱いやすい四角形から試すのがおすすめです。

44
00:03:32.940 --> 00:03:38.780
形を先に決めてから座標を測ると、作業の手戻りが少なくなります。

45
00:03:38.780 --> 00:03:44.729
コーズ属性には、領域の位置と大きさを数字で書きます。

46
00:03:44.729 --> 00:03:49.991
単位はピクセルで、画像の左上を起点に数えます。

47
00:03:49.991 --> 00:04:00.515
四角形のレクトでは、左上の横、左上の縦、右下の横、右下の縦、という順に四つの数字を書きます。

48
00:04:00.515 --> 00:04:06.692
円のサークルでは、中心の横、中心の縦、半径の三つです。

49
00:04:06.692 --> 00:04:12.183
多角形のポリでは、頂点の横と縦を順番に並べます。

50
00:04:12.183 --> 00:04:23.623
数字の順番を間違えると、意図と違う場所がクリック領域になるので、図を見ながら一つずつ確認しましょう。

51
00:04:23.623 --> 00:04:29.800
座標は画像そのものの大きさを基準に考える点も大切です。

52
00:04:29.800 --> 00:04:38.952
画像編集ソフトでマウスを合わせながら座標を読み取ると、指定がぐっと楽になります。

53
00:04:38.952 --> 00:04:41.447
記事の活用事例を読み解きます。

54
00:04:41.447 --> 00:04:49.929
画面の例は、幅四百、高さ二百の会場案内図で、左半分をクリックすると教材案内のページへ移動する設定です。

55
00:04:49.929 --> 00:04:54.585
コーズのゼロ、ゼロ、二百、二百は、左上から横二百、縦二百までの四角形を意味し、

56
00:04:54.585 --> 00:04:59.242
ちょうど画像の左半分に当たります。

57
00:04:59.242 --> 00:05:06.227
エリアにはエイチアールイーエフで移動先を、オルトで教材案内という説明を書いています。

58
00:05:06.227 --> 00:05:15.042
オルトは、画像が見えない環境や読み上げ利用時に行き先を伝えるため、リンクのあるエリアには必ず書きましょう。

59
00:05:15.042 --> 00:05:18.534
小さな例ですが、基本がすべて入っています。

60
00:05:18.534 --> 00:05:25.852
まずはこの例をそのまま写して動かし、数字を変えると領域がどう変わるかを試してみましょう。

61
00:05:25.852 --> 00:05:29.175
エリアは、マップの中に複数並べられます。

62
00:05:29.175 --> 00:05:38.313
画面の例では、同じ案内図に四角形と円形の二つのエリアを用意し、それぞれ違うページへ移動できるようにしています。

63
00:05:38.313 --> 00:05:45.457
利用者は、受付の四角を押せば受付案内へ、丸いホールの部分を押せばホール案内へ進めます。

64
00:05:45.457 --> 00:05:51.770
このように場所ごとに行き先を分けられるのが、イメージマップの一番の強みです。

65
00:05:51.770 --> 00:05:57.585
ただし、エリア同士が重なると、前に書いた方が優先される場合があります。

66
00:05:57.585 --> 00:06:05.061
重なりを作らない配置を心がけ、作ったあとはすべての領域を実際にクリックして確かめましょう。

67
00:06:05.061 --> 00:06:10.544
数が増えるほど、オルトの説明文を具体的に書くことが大切になります。

68
00:06:10.544 --> 00:06:13.293
つまずきやすい注意点を確認します。

69
00:06:13.293 --> 00:06:16.526
最大の落とし穴は、表示サイズの変更です。

70
00:06:16.526 --> 00:06:22.104
コーズの座標は画像のピクセル基準で固定されるため、シーエスエスで画像を縮小したり拡大したりすると、

71
00:06:22.104 --> 00:06:27.683
見た目とクリック位置がずれてしまいます。

72
00:06:27.683 --> 00:06:33.180
記事でも、サイズ変更で座標がずれないか確認するよう案内されています。

73
00:06:33.180 --> 00:06:39.809
対策として、画像は指定した大きさのまま表示する、どうしても大きさを変えるならジャバスクリプトで座標を計算し直す、

74
00:06:39.809 --> 00:06:46.438
あるいはエスブイジーで図を描く方法も検討しましょう。

75
00:06:46.438 --> 00:06:50.965
公開前に、実際の表示で押して確かめることが欠かせません。

76
00:06:50.965 --> 00:06:57.756
スマートフォンで見る人が多いページほど、このずれの問題は早めに確かめておきましょう。

77
00:06:57.756 --> 00:07:00.236
ブラウザー互換性を確認します。

78
00:07:00.236 --> 00:07:05.748
記事が参照するエムディーエヌの記録では、マップ要素本体は、クロームが一以降、

79
00:07:05.748 --> 00:07:11.260
エッジが十二以降、ファイアフォックスが一以降で補足条件あり、サファリが一以降と、

80
00:07:11.260 --> 00:07:16.772
主要ブラウザーで古くから広く対応しています。

81
00:07:16.772 --> 00:07:20.741
ネーム属性も同じく全ブラウザーで対応しています。

82
00:07:20.741 --> 00:07:25.867
安心して使える要素ですが、座標のずれは互換性とは別の問題です。

83
00:07:25.867 --> 00:07:37.111
作ったあとは、タブキーで各エリアへ移動してエンターで開けるか、三百二十ピクセル程度の細い画面でも操作できるかをあわせて確認してください。

84
00:07:37.111 --> 00:07:42.568
古い要素だからこそ、基本を押さえれば長く安定して使い続けられます。

85
00:07:42.568 --> 00:07:44.028
最後にまとめです。

86
00:07:44.028 --> 00:07:50.193
マップタグは、一枚の画像の中に複数のクリック領域をまとめるための要素でした。

87
00:07:50.193 --> 00:07:51.815
ポイントは三つです。

88
00:07:51.815 --> 00:07:58.791
一つ目、画像のユーズマップとマップのネームを、シャープの有無に注意して一致させること。

89
00:07:58.791 --> 00:08:05.443
二つ目、エリアのシェイプで形を、コーズで座標を決め、オルトで行き先を説明すること。

90
00:08:05.443 --> 00:08:13.555
三つ目、表示サイズを変えると座標がずれるので、通常のテキストリンクも併せて用意すると安心なことです。

91
00:08:13.555 --> 00:08:19.071
練習として、案内図の左と右で行き先の違うマップを作ってみてください。

92
00:08:19.071 --> 00:08:20.531
お疲れさまでした。

93
00:08:20.531 --> 00:08:27.020
小さな案内図からでよいので、実際に手を動かして座標の感覚をつかんでみてください。