子供のための本気のhtml講座
市販の子供向けのhtml の教科書を見て愕然とした。
挿し絵はかわいいけれども、書いている内容が専門用語を使ってしまっており、これでは頭に入らない。
専門用語を１つ１つ説明していると、紙面の都合上できない問題もあるので仕方がない部分もあると思うが、とても自分の子供に見せたいとは思わなかった。
自分で本気で説明しみようと思う。子供が直感的にわかるように説明してみる。
1 数千人の研究者の為に
htmlというのは、知っているかな。インターネットでみるページを作るためのルールのようなものです。
生みの親は、ティム・バーナーズ＝リー というイギリスの計算機科学者です。
※wikipedia ティム・バーナーズ＝リーより
実際にhtmlを見てみよう。以下のようなテキストです。
<html>
<head><title>タイトル</title><head>
<body>ボディー</body></html>
これをファイルに保存してブラウザで見るとこうなります。
わざわざなんでこのようなものを考え出したのでしょうか。
ここでの研究者は２千人！ここ以外でも働いている研究者や、研究者以外の従業員も含めると数千人規模になります。ちょっとした町だね。
毎日みんなが研究していますが、1980年頃の当時は、研究した内容の保存方法は決まっていなくてバラバラでした。
毎日みんなが研究していますが、1980年頃の当時は、研究した内容の保存方法は決まっていなくてバラバラでした。
でも、研究内容は、他の人達が見れるようにした方がよいですよね。
もし今からやろうとしてることがすでにほかの研究者がやっていたことであれば、そのデータをもとに次のアイデアを考えたり研究をすすめることができます。
そんな状況ですから、
ティムの上司「研究者みんながそれぞれの研究内容をみれるようにしろ！（俺はできないけど）」
ティム「マジで！？」
と、やり取りがあったかどうかわかりませんが、とりあえずみんなで見れるようにしないといけなくなりました。
ティムの上司「研究者みんながそれぞれの研究内容をみれるようにしろ！（俺はできないけど）」
ティム「マジで！？」
と、やり取りがあったかどうかわかりませんが、とりあえずみんなで見れるようにしないといけなくなりました。
ティムは、みんなが作るか研究内容のファイルを、一つの大きなサーバーに置いて貰い、みんなはそこを見てもらうようにしました。サーバに置けば、みんなはサーバに見に行くと他の研究者の研究結果を見ることができます。
2 みんな同じように作って！
これで問題は解決したでしょうか。「この人のファイル開けなーい」
「え、俺開けるけど」
研究者は自分の好きな方法で研究結果を保存しました。
専門のアプリケーションで作られた研究結果は、画像や文字などが見やすいですが、アプリケーションを持っていない人にはそのファイルが開けず、何が書いているかわかりません。
また、画像の付け方がわからず、文字だけで研究結果をまとめる人もいます。実験の結果は図やグラフでまとめると見やすいのですが、文字だけの研究結果はとても分かりずらいです。
そこでティムはみんなにお願いします。
「みんな同じように作って！」
ただし、作ってもらうときにはあるルールを決めました。
ただし、作ってもらうときにはあるルールを決めました。
「いい書き方を考えたんだ。めっちゃすごいテキストな」
「まず、書きたい「内容」を考えよう。考えた？」
「作る研究結果のファイルを私たちの体に例えよう。
「体」と「頭」があるけど、以下のように考え欲しい。」
「体」＝「研究内容」
「頭」＝「研究内容以外」
head body
4段階に分けて説明するぞ。
まず、体(body)の書き方だ。
①研究内容（例えば「これが研究結果だ」）を考えたら、その先頭に<body>を書く。
最後に</body>を書こう。
<body>これが研究結果だ</body>
「まず、書きたい「内容」を考えよう。考えた？」
「作る研究結果のファイルを私たちの体に例えよう。
「体」と「頭」があるけど、以下のように考え欲しい。」
「体」＝「研究内容」
「頭」＝「研究内容以外」
4段階に分けて説明するぞ。
まず、体(body)の書き方だ。
①研究内容（例えば「これが研究結果だ」）を考えたら、その先頭に<body>を書く。
最後に</body>を書こう。
<body>これが研究結果だ</body>
②次に頭(head)の書き方だ。
研究内容以外は色々あるけど、まずはタイトルを書こう。
<title>研究タイトル</title>
③ ②の続きだ。これは頭にあるから、さらに先頭に<head>最後に</head>をつけよう
<head><title>研究タイトル</title></head>
④頭(head)を先に、体（body）を後に書いて！③＋①だ
<head><title>研究タイトル</title></head><body>これはテストです</body>
⑤最後に全部書けたら、一番最初に<html>、最後に</html>を書いてくれ。htmlは何の意味かって？長くなるからそれはまた今度で。（５まで来ちゃった）
<html><head><title>研究タイトル</title></head><body>これはテストです</body></html>
⑥（まだあった。。。）見づらければ改行入れたりインデント（字下げしてみやすくする）してもいいよ。見た目は別で変えれるようにするから。
<html>
<head>
<title>研究タイトル</title>
</head>
<body>
これはテストです
</body>
</html>
「体」の中には、文字の色を変えたり、文字以外の「画像」（<img></img>）も入れられるよう②しました。これで図やグラフも大丈夫です。
ティムは、その後研究所全員に、今のルールで書かれたファイルを見ることができるソフトウェアをあげました。
3 その文章どこ？
今度こそ問題は全て解決したでしょうか。。。研究結果のファイルはどんどん増えていきました。
■Aさん
素粒子とは.html
今年の計測結果.html
研究中に気付いたこと.html
本日の報告20190321.html
・・・・
■Bさん
昨年からの計測結果.html
素粒子の不思議.html
研究失敗.html
・・・・
Bさんは、本日の報告を書こうとした際、Aさんの「素粒子とは.html」を参考に研究を進めたので、報告書の中でAさんの「素粒子とは.html」を紹介しようとしました。
Aさんのところの文章をコピーして持ってこようとしましたがAさんのものであることがわかるようにしたいです。
また、Aさんがファイルを修正してしまうと、Bさんのコピーした内容が古いままとなってしまいます。
どうしたらよいかBさんはティムに相談しました。
「じゃあ、そのファイルを直接見れるようにしよう！2段階に分けるよ（今度は大丈夫なはず、、）」
①文章の中にBさんの文章を紹介する内容を書く
今回の研究は、Aさんの素粒子の考え方を参考に以下の実験を行いました。
②錨（いかり）ってしってる？船が止まっておく為に使う重りのこと（英語ではAnchor（アンカー））重りに、Bさんのファイルを参考（reference）にしたことを書こう。アンカーで囲った文字は、クリックするとその文書な飛ぶことができるようしするよ凄いでしょ。
今までのテキストを越えた（hyper）テキスト（text）ということで、ハイパーテキスト（h）と名付けてみた。それぞれ単語全部書くと長いので単語の最初だけちょっと書いてもらいたい。
<anchor hypertextreference="素粒子とは.html"></anchor>
まとめ
長くなった。。。これでもまだ足りないくらい。「タグ」という言葉は使わないようにしてみました。
ティム先生がいかに凄かったか『1999年 - 『タイム』誌の「20世紀で最も重要な人物100人」(100 Most Important People of the 20th Century)の一人に選ばれる』も伝えたかったので、ゆうきゆう先生のアドラー心理学を参考に書いてみたけど、なかなか難しい。
