ITWS2021/導入（たぶん15分でわかるWebコンテンツ公開の仕組み）
===

総合研修1日目午前用の骨子

元ネタ: https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works

## このコマで話すこと（内部メモ）

* 午後はWebコンテンツを公開するために必要なHTML、CSS、JavaScriptについて説明していきます
* ここでは前提として、それぞれがどういう役割をになっているかイメージを共有したいです

## 導入の導入

* 「WEBコンテンツの公開」を考えるにあたって、まずはWEBコンテンツを入手する側から考えてみたいと思います
* WEBコンテンツはどこにあるでしょうか？　→　どこかのサーバーです
* ではサーバーとは？　→　ある機能/データを提供するコンピュータです
* そのサーバーにあるWEBコンテンツをどうやって入手するのでしょうか → そのコンテンツを示すURLを開きます

## URLを開いたときに起きること:

例えば、2021年度の「大学図書館員のためのIT総合研修」の概要というコンテンツを入手するとします。

https://contents.nii.ac.jp/hrd/it/2021

このURLをメールだったり、他のウェブページに掲載されていたりで知って、ブラウザのアドレスバーに入れたり、リンクをクリックしたりしたと思います。
そのとき、なにが起きるでしょうか。

名前解決（DNS）
contents.nii.ac.jp　→　

WEBサーバーにコンテンツを要求

GET /hrd/it/2021 HTTP/1.1
Host: contents.nii.ac.jp

サーバーがコンテンツ（HTML）を返戻

HTTP/1.1 200 OK

ブラウザがレンダリング

* ブラウザがHTMLを解釈して参照されているファイルを取得
* DOMツリーが生成
* CSSを適用
* JavaScriptが実行

ということで

## Webサイトの構成
ざっくりいうとWebサイト（の表側）はHTMLとCSSとJavaScript(JS)でできています
* HTML … Webサイトの構造を記述
* CSS … Webサイトの見た目を整える
* JS … Webサイトに動的な機能を追加する

それぞれの詳しい説明は午後にしますが、ここでは概略を説明します。

### HTML

* Hypertext Markup Language
* ウェブサイトの構成をブラウザに対して伝えるために使うマークアップ言語
* XMLみたいなやつです（要素があって属性があって……）、が違う点もいろいろあります

<div>
<h2>受講の前提となる知識・技術・環境</h2>
<ul>
<li>Webに接続したPC（イヤホン、外付けマイク）を用意し、Web会議システム（ビデオ通話）を使って受講可能なこと。
<li>PCはソフトウェアのインストールが受講者自身で行える（管理者権限が付与されている）こと。
<li>通信容量制限や速度制限があるネットワーク環境の場合は、利用状況によって遅延等が発生する場合があるので、注意すること（またネットワークへの接続は有線が望ましい）。
</ul>
</div>

↓

<iframe height="300" style="width: 100%;" scrolling="no" title="nii_20211013_demo_am02" src="https://codepen.io/da1blue/embed/GRmLEZm?default-tab=result&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/da1blue/pen/GRmLEZm">
nii_20211013_demo_am02</a> by da1blue (<a href="https://codepen.io/da1blue">@da1blue</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### CSS

* Cascading Style Sheets
* HTMLで記述されたコンテンツにスタイルを与えたりレイアウトを決める

<style>
.content h2{
   color:white;
   background-color: #57a613;
}
.content ul{
   list-style-type: square
}
</style>

↓

<iframe height="300" style="width: 100%;" scrolling="no" title="nii_20211013_demo_am02" src="https://codepen.io/da1blue/embed/YzVMQqG?default-tab=result&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/da1blue/pen/YzVMQqG">
nii_20211013_demo_am02</a> by da1blue (<a href="https://codepen.io/da1blue">@da1blue</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### JavaScript

* Webサイトに動的な機能を追加する
* プログラミング言語（Javaとは似た名前だけれど別物！）

<div class="content" onclick="darkTheme();">
<button onclick="darkTheme();">ダークテーマ</button>
<!-- 略 -->
</div>
<script>
function darkTheme(){
  let node = document.querySelector(".content");
  node.style.backgroundColor = "#112";
  node.style.color = "#fff";
}
</script>

<iframe height="300" style="width: 100%;" scrolling="no" title="" src="https://codepen.io/da1blue/embed/zYwXwgX?default-tab=result&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/da1blue/pen/zYwXwgX">
</a> by da1blue (<a href="https://codepen.io/da1blue">@da1blue</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## Webコンテンツの公開環境

Webコンテンツを公開するためには何らかの環境においてあげる必要があります

* 自機関のサーバー（オンプレミス）→電算機室のなか
* レンタルサーバー(無料/有料)
* クラウド環境
* 静的サイトホスティング

今回の演習では静的サイトホスティングサービスの1つであるGitHub Pagesを使います。

https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages

特徴として

* Microsoft傘下のGitHub社が無料で提供（広告なし）
* コードホスティングのデファクトスタンダードであるGitHubと連携
* そのため共同での編集が容易
* PHPやPythonなどのサーバーサイド言語は実行できない

いったんはちょっと特殊なレンタルサーバーだと思っておいてください

## おまけ：フロントエンドとバックエンド

* 最近のWebサービスは（基本）HTML+CSS+JSのフロントとその裏で処理をするサーバーで分業されています(SPA…)
* フロントとバックをつなぐのがAPI　→ 2020年度
* 3層アーキテクチャとか　→　データを保持しているのはRDB　→ 2019年度

## 参考情報

* MDN Web Docs
Firefoxの開発元であるMozillaの管理するドキュメント
https://developer.mozilla.org/ja/docs/Web