WEBVTT

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

2
00:00:00.767 --> 00:00:04.092
エイチティーエムエル、シーエスエス入門、第十回です。

3
00:00:04.092 --> 00:00:05.499
今回はいよいよ最終回。

4
00:00:05.499 --> 00:00:09.463
これまでの回で作ってきたサイトを点検し、公開する準備をします。

5
00:00:09.463 --> 00:00:12.533
ページが自分のパソコンで開けることと、他の人がユーアールエルから開いて使えることは、

6
00:00:12.533 --> 00:00:15.602
別の話です。

7
00:00:15.602 --> 00:00:19.566
今回の目標は、その公開の状態まで確認できるようになることです。

8
00:00:19.566 --> 00:00:21.868
配布コードは第九回と同じ完成版です。

9
00:00:21.868 --> 00:00:27.111
ここから、文章や画像を自分のものへ置き換えて、自分のサイトとして仕上げていきます。

10
00:00:27.111 --> 00:00:30.820
元になる記事は、エスイーの部屋の、サイトを仕上げる、です。

11
00:00:30.820 --> 00:00:33.306
まず、公開に必要なファイルを確認します。

12
00:00:33.306 --> 00:00:34.425
用意するのは四つ。

13
00:00:34.425 --> 00:00:38.196
ページ本体のインデックス、エイチティーエムエル、見た目のスタイルズ、ドット、

14
00:00:38.196 --> 00:00:41.966
シーエスエス、動きのスクリプト、ドット、ジェイエス、そして画像のワークショップ、

15
00:00:41.966 --> 00:00:45.737
ドット、エスブイジーです。

16
00:00:45.737 --> 00:00:50.461
大切なのは、この四つを同じフォルダーに入れたまま、構成ごと移動することです。

17
00:00:50.461 --> 00:00:54.252
ファイルだけを別々の場所へ移すと、エイチティーエムエルからほかのファイルを指す相対パスが切れて、

18
00:00:54.252 --> 00:00:58.044
ページが崩れてしまいます。

19
00:00:58.044 --> 00:01:02.146
この例は、素のエイチティーエムエルとシーエスエス、ジャバスクリプトだけでできているので、

20
00:01:02.146 --> 00:01:06.248
ビルドや開発用のパッケージは必要ありません。

21
00:01:06.248 --> 00:01:11.452
次に、ローカルで開くことと、公開することの違いを押さえます。

22
00:01:11.452 --> 00:01:16.830
ファイルをダブルクリックして、ファイル、という形式のアドレスで開けることは、

23
00:01:16.830 --> 00:01:22.208
公開した後の通信がうまくいく証明にはなりません。

24
00:01:22.208 --> 00:01:30.448
公開先では、ファイルの場所を表すパス、英字の大文字と小文字の違い、エイチティーティーピーエスの通信、

25
00:01:30.448 --> 00:01:38.688
古いファイルを残すキャッシュ、そして返されるファイルの種類など、手元とは条件が変わります。

26
00:01:38.688 --> 00:01:46.495
手元では動いたのに公開したら崩れた、というトラブルの多くは、この条件の違いから起こります。

27
00:01:46.495 --> 00:01:52.740
だからこそ、公開したユーアールエルから開いて確かめることが欠かせません。

28
00:01:52.740 --> 00:01:54.215
ここからは点検です。

29
00:01:54.215 --> 00:01:59.527
まず、エイチティーエムエルとシーエスエスを、リストで一つずつ確認します。

30
00:01:59.527 --> 00:02:03.363
タイトルと主見出しが、ページの目的を表していること。

31
00:02:03.363 --> 00:02:08.085
見出しの順序、フォームのラベル、画像の代替テキストが適切なこと。

32
00:02:08.085 --> 00:02:15.314
画面の横幅が三百二十ピクセルのスマートフォンから、ピーシーの幅まで、文章や入力欄が重ならないこと。

33
00:02:15.314 --> 00:02:19.003
ブラウザーを二百パーセントに拡大しても読めること。

34
00:02:19.003 --> 00:02:25.347
そして、明るいテーマと暗いテーマの両方で、リンクや入力欄、選択中の枠が見えることです。

35
00:02:25.347 --> 00:02:34.052
確認には、ブラウザーの開発者ツールのエレメンツや、ダブリュー、スリー、シーのエイチティーエムエルチェッカーが使えます。

36
00:02:34.052 --> 00:02:40.101
ただし、文法チェックに通ることと、文章がわかりやすく実際に操作できることは別です。

37
00:02:40.101 --> 00:02:41.872
両方を確認してください。

38
00:02:41.872 --> 00:02:46.087
ジャバスクリプトの点検も、開発者ツールで行います。

39
00:02:46.087 --> 00:02:51.483
コンソールという画面で、予期しないエラーが出ていないかを見ます。

40
00:02:51.483 --> 00:02:56.457
次に、ネットワークという画面で、シーエスエス、画像、ジャバスクリプトのファイルが、

41
00:02:56.457 --> 00:03:01.431
正しく取得できているかを確認します。

42
00:03:01.431 --> 00:03:05.646
メニューの操作は、開くと閉じるだけでは不十分です。

43
00:03:05.646 --> 00:03:10.367
開いた状態のまま画面の幅を変える、エスケープキーで閉じる、リンクを選んで閉じる、

44
00:03:10.367 --> 00:03:15.088
といった操作まで試してください。

45
00:03:15.088 --> 00:03:18.966
第九回で守った、保存が使えない状況でもテーマの切り替えが動くかどうかも、

46
00:03:18.966 --> 00:03:22.844
点検項目の一つです。

47
00:03:22.844 --> 00:03:27.273
フォームについては、役割をはっきりさせることが大切です。

48
00:03:27.273 --> 00:03:35.023
この例のフォームは、入力した内容をブラウザーの中だけで確認するもので、どこかへ送信はしていません。

49
00:03:35.023 --> 00:03:43.247
ですから、申し込み完了、のように、実際には行われていない送信が済んだと思わせる表示へ変えてはいけません。

50
00:03:43.247 --> 00:03:48.783
受け取る側がいないのに完了と表示すると、利用者を誤解させてしまいます。

51
00:03:48.783 --> 00:03:55.267
本当に情報を受け取りたい場合は、バックエンドと呼ばれるサーバー側の仕組みや、

52
00:03:55.267 --> 00:04:01.752
フォームサービスなど、受け取り先を決めて、送信結果に応じて画面を更新する作りに進みます。

53
00:04:01.752 --> 00:04:07.106
公開するサイトは、検索から訪れる人にも内容が伝わるように整えます。

54
00:04:07.106 --> 00:04:13.272
基本は、ページごとに、その内容を表すタイトルと短い説明文を設定することです。

55
00:04:13.272 --> 00:04:21.546
検索キーワードを何度も繰り返すのではなく、誰に向けて、何を提供するページなのかを明確に書いてください。

56
00:04:21.546 --> 00:04:28.523
なお、検索結果に表示されるタイトルや説明文は、検索エンジンが書き換える場合があります。

57
00:04:28.523 --> 00:04:32.741
設定したとおりの表示や、特定の順位は保証されません。

58
00:04:32.741 --> 00:04:38.177
エイチティーエムエルの意味、見出し、説明文、リンクの行き先を明確にすることは、

59
00:04:38.177 --> 00:04:43.612
読む人にも、情報を集める仕組みにも伝わる土台になります。

60
00:04:43.612 --> 00:04:48.627
タイトルや説明文とあわせて、ノーインデックスの扱いも知っておきましょう。

61
00:04:48.627 --> 00:04:55.593
配布されているサンプルには、画面に表示している、ロボッツのノーインデックスという一行が入っています。

62
00:04:55.593 --> 00:05:01.305
これは、練習用のページが、元のサイトと重なって検索に載るのを避けるための指定です。

63
00:05:01.305 --> 00:05:07.713
自分の文章に置き換えた本番のサイトを検索に載せたい場合は、この一行を削除してから公開します。

64
00:05:07.713 --> 00:05:12.311
注意点として、ノーインデックスは、検索に載せないよう頼む指定です。

65
00:05:12.311 --> 00:05:17.744
アクセスを制限する機能ではないので、秘密にしたいページを守ることはできません。

66
00:05:17.744 --> 00:05:19.662
続いて、カノニカルです。

67
00:05:19.662 --> 00:05:25.098
同じ内容のページが、複数のユーアールエルで表示されることがあります。

68
00:05:25.098 --> 00:05:31.173
その場合、代表とするユーアールエルを一つ決めて、画面のリンクタグで伝えます。

69
00:05:31.173 --> 00:05:36.768
画面の例にある、イグザンプル、ドット、コムは説明用の仮のアドレスです。

70
00:05:36.768 --> 00:05:43.962
そのまま使わず、自分の正式な公開ユーアールエルへ置き換えて、ヘッドの中へ追加してください。

71
00:05:43.962 --> 00:05:51.156
代表を決めておくと、検索の評価が分散しにくくなり、利用者に案内するアドレスも統一できます。

72
00:05:51.156 --> 00:05:53.044
公開の流れをまとめます。

73
00:05:53.044 --> 00:05:57.999
まず、静的サイトを公開できるホスティングサービスや、サーバーの公開ディレクトリーへ、

74
00:05:57.999 --> 00:06:02.954
四つのファイルを同じ構成のまま配置します。

75
00:06:02.954 --> 00:06:06.887
すでに運用しているサイトがある場合は、既存のファイルを先に保存したうえで、

76
00:06:06.887 --> 00:06:10.820
置く場所を決めてください。

77
00:06:10.820 --> 00:06:15.382
配置できたら、公開ユーアールエルを開き、再読み込みして、シーエスエスや画像、

78
00:06:15.382 --> 00:06:19.944
ジャバスクリプトが応答するか確認します。

79
00:06:19.944 --> 00:06:24.978
別の端末でも、ページ内リンク、メニュー、フォームを試しましょう。

80
00:06:24.978 --> 00:06:29.619
修正が反映されないときは、配信されているファイルと手元のファイルを見比べ、

81
00:06:29.619 --> 00:06:34.259
ブラウザーや配信側のキャッシュも確認します。

82
00:06:34.259 --> 00:06:39.136
公開できたことと、検索エンジンに登録されることは、別の話です。

83
00:06:39.136 --> 00:06:40.046
まとめです。

84
00:06:40.046 --> 00:06:41.715
連載はこれで完結です。

85
00:06:41.715 --> 00:06:48.087
エイチティーエムエルが書ける、シーエスエスで整えられる、ジャバスクリプトで動かせる。

86
00:06:48.087 --> 00:06:55.520
そして今回は、他の人がユーアールエルから開いて使える状態まで、確認して公開する力も身につきました。

87
00:06:55.520 --> 00:06:58.554
練習として、小さな拡張課題を紹介します。

88
00:06:58.554 --> 00:07:03.712
学習カードを増やして、キーワードで絞り込む機能を付けてみてください。

89
00:07:03.712 --> 00:07:07.657
絞り込んだ結果の件数は、文字でも伝えるようにします。

90
00:07:07.657 --> 00:07:11.980
状態はジャバスクリプト、見た目はシーエスエス、基本情報はエイチティーエムエル、

91
00:07:11.980 --> 00:07:16.304
という分担は、この先も変わりません。

92
00:07:16.304 --> 00:07:22.524
次の学びは、ドムとイベント、非同期処理とフェッチ、そしてリアクト入門へと続きます。

93
00:07:22.524 --> 00:07:27.985
まずは今回の四ファイルを、自分の目的に合うサイトへ仕上げてみてください。

94
00:07:27.985 --> 00:07:30.716
十回にわたる学習、お疲れさまでした。