Webブラウザ(クライアント)

name: www-browser
class: title, smokescreen, shelf, no-footer
# Webブラウザの基礎

---
class: img-right,compact
# Webブラウザ

![](images/browser.png)

<small>
1. URLを(指定して)クリック
1. コンテンツをダウンロード
1. コンテンツをレンダリングして表示
    - HTMLは、
      コンテンツの構造(段落とか)や見栄え(大文字、太い文字など)の指示をするための決まりごと。初期のものは曖昧だったので、のちに「構造はHTML」「見栄えはCSS」という規格が作られ今にいたる
    - ダウンロードしたコンテンツがJavascript(JS)というプログラミング言語の場合、
      手元のWebブラウザ(という仮想OS上)内にJSを実行する仕組みが入っていて、
      JSを動かします
</small>

---
class: img-right,compact
# [演習] Javascript

- chromeで新しいタブ(or ウインドウ)を開いてください
- chromeの左上にある「縦に・３つ」->「その他のツール」->「デベロッパーツール」をクリックし、出てくる画面の右側中央にある`>`に次のコードを入力してEnter
- 課題1
```
alert("welcome to my homepage")
```
    - 左下にokがついた"welcome to my homepage"という箱が登場しましたか?
- 課題2
```
window.open("http://www.ex2022.fml.org")
```
    - ブラウザに新しいタブ(or ウインドウ)が開き、そこにIt Works!と表示されましたか?

---
name: why-www-become-popular
class: center,compact
# なぜ、World Wide Web は流行したのか?

<div class=footnote>
<small>
(脚注)
ではシンキングタ〜イムです。10秒まってみよう
</small>
</div>

![height480px](images/why-www-got-popular.jpg)

---
class: img-right,compact
# なぜ、World Wide Web は流行したのか?

<div class=footnote>
<small>
(脚注)
VHS vs beta しかり、DVDしかり、
</small>
</div>

![height480px](images/website_normal.png)

- コピペだ！
    - あっと言うまに自分のホームページが作れるよ
- ~~そして、人間の煩悩だ~~

---
name: html
class: title, smokescreen, shelf, no-footer
# HTML

---
class: col-2,compact
# HTML (ホームページの記述言語)

<div class=footnote>
<small>
(脚注1)
人のHTMLを見本にして、適当に編集すれば作れます。
これが流行した理由で...(後述)
<br>
(脚注2)
そういうわけでHTMLの詳しい説明は省略です
</small>
</div>

- `<tag>`という数学の大なり小なりで囲み、その囲まれたブロックの構造を指示
- `<tag>`で始まり、`</tag>`で終わります。tagは大文字でも小文字でもok
- `<tag>`の前後やブロック中の改行コードや余分の空白は特別な意味をもちません
- みんなが正しいHTMLを書かないためWebブラウザが頑張って表示します。
  よって適当でok(これが流行した理由の一つ)。
  結果、適当なページが氾濫;_;

```


<HTML>   
<BODY>   
It works
</BODY>
</HTML>

<HTML><BODY>It works</BODY></HTML>

It works
```

---
class: col-2,compact
# HTMLの構造と見栄え

<div class=footnote>
<small>
(脚注1)
セカンドシステム症候群 ...
ガンダム(1979)とZガンダムとか、
宇宙戦艦ヤマト(1974)とヤマト2199とか... ;-)
(脚注2)
F.P.Brooks「人月の神話【新装版】」(2014,丸善);(2002,ピアソン)の再出版;
ISBN:9784621066089
</small>
</div>

- 大文字を出したいなら`<H1>`で囲めばok
  (いま書くとディすられるHTMLです;-)
- でも、このくらい雑な使い方でokだったからブレイクしたんだとおもうよ
- いまのHTMLとCSSは複雑怪奇で、わけわからない。
  理念は分かるけど...
- 突破口を開く人は、えいやっ！って作るけど、
  流行したものがあると「けしからん、もっと正確に！」という人が群がってきて...
  さて学ぶべき教訓とは?
-  **セカンドシステム症候群**?(人月の神話)

```

<HTML>
<BODY>
<H1>見出し</H1>  
It works
</BODY>
</HTML>
```

---
class: compact
# HTMLとCGIの仕組み(janken API, 全体像, 静的)

<div class=footnote>
<small>
　　　　　　　　　　　　　　　　　　　　　　　　　
(脚注)
CGIは別の資料で詳しくやります
</small>
</div>

![height560px](images/janken.api.png)

---
class: img-right,compact
# [演習] HTML

<div class=footnote>
<small>
(脚注)
これを、どこかのWebレンタルサーバにアップロードすれば自分のページの出来上がり
</small>
</div>

1. http://www.ex2022.fml.org/~fukachan/janken/ へアクセス
1. ブラウザでURLを開いてページのどこかで右クリック
1. 「名前をつけて保存」をクリックし、好きなファイル名で保存してください。
   以下、テキストではjanken.htmlとします
1. では、保存したファイルを開いてみましょう
    - ブラウザでページのどこかで右クリック
    - Ctrl-o (Ctrlとアルファベットの小文字o, oscarのoを同時に押す)
    - janken.htmlを指定して右下(select)をクリック
    - 上のURLと同じページが開きましたね?

---
class: img-right,compact
# [演習] 保存したHTMLからjanken APIを呼ぶ

![height240px](images/janken.html.png)
![height240px](images/janken.api.png)

1. この画面(右図)になっていますよね?
1. 真ん中の`click(perl version)`をクリックしてみましょう
1. こんな感じに数字群が出ました?(数字は実行するたびに異なります)
   ```
    [2,2,0] # comment omitted ...
   ```
- これは、手元にあるjanken.htmlを読みこんでブラウザが作成したページから、
  そこに書いてあるURLへアクセスして、
  じゃんけんの結果をもらった様子です。ちなみにアクセスしたURLはコチラ
  ```
  http://ise.ex2022.fml.org/api/janken/v2
  ```

---
class: compact
# [コラム] コピペしちゃったけど、いいのかな?

<div class=footnote>
<small>
(脚注)
なお、コンテンツの中身を使うと問題になりますが,
定番のHTMLの書き方(どこにでもあるプログラム)を勉強
(<タグ>の並びのコピペを)するだけなら問題にならないはず。
いずれにせよ、一番いいのは、
コピペokなどと、きちんとcopyrightが書いてあるウエブだけを手本にすることね
</small>
</div>

- いま演習に使っているウエブは自分が演習用に作ってるサーバなので何してもokっす
- どこにでもある手本のHTMLが書いてあるだけ。
  copyrightを、きちんと書いてないですが、
  そんなものを書くほどの中身が(アイデアも、すごいHTMLも)無い:-)
- 人のページのコピペ、本当はダメなんじゃないんですか?と言われると、
  微妙なところですが、
  みんな気にせず真似したいページを持ってきて、
  自分のページの改造元に使ってましたね。
  すごくハードルが低い。
  1990年代前半にウエブが登場したとき、
  これが簡単にできたのでホームページを作りました！というのが流行した
- でも中身ないから、すぐ飽きるけどね:-)
  黎明期は何やっても新しかったので、
  自分の昼飯記録とか、
  コーヒーサーバの中継とか、
  金魚の水槽を中継(<- 旭川CATV:-)するだけの金魚チャンネルとか、
  そういうウエブ(最初の一人限定)が流行しました
- SNSの流行って、だいたいかつての流行の再生産;知らない世代にとっては新しいさ

---
name: trial-duerer
class: img-right,compact
# [コラム] アイデアは保護されない [脱線ついで]

![height240px](https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Albrecht_D%C3%BCrer_-_Selbstbildnis_im_Pelzrock_-_Alte_Pinakothek.jpg/800px-Albrecht_D%C3%BCrer_-_Selbstbildnis_im_Pelzrock_-_Alte_Pinakothek.jpg)
![height240px](https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Vier_Apostel_%28Albrecht_Duerer%29.jpg/800px-Vier_Apostel_%28Albrecht_Duerer%29.jpg)
![height240px](https://upload.wikimedia.org/wikipedia/commons/b/b9/D%C3%BCrer_-_Rhinoceros.jpg)

- **史上初の著作権裁判**はデューラー(1471-1528)の起こした裁判と言われている
- デューラーは版画もやっていて、その版画のパクリを売っていた奴がいた。
  激怒して裁判沙汰へ。勝訴しました
- この判決の重要なところは
 「デューラーのサイン(の紋様)まで丸パクリ」
  した版画を売っていたのでダメという判決でした。
  デューラーそっくりの絵を書いたからダメということではありません
- 今風に言えば、アイデア特許は認めません(だって似たような絵を描いている先人の画家たちがたくさんいるし)が、**意匠権侵害**を認めます判決