SKILL-INTRO_03__WWWサーバとジャンケンをしよう

name:  index
class: title, smokescreen, shelf, no-footer
# 情報システム開発基礎演習<br><small>ITインフラ編 第03回</small>

<div class=footnote>
<small><small>
Copyright (C) Ken'ichi Fukamachi &lt;fukachan@fml.org&gt;, 2021-2025. CC BY-NC-SA 4.0
</small></small>
</div>

---
class: compact
# 本日の目標

<div class=footnote>
<small><small>
(脚注)
「WWWサーバと会話できる」と言ってもよいでしょう
</small></small>
</div>

1. HTMLの基礎を理解する

1. WWWサーバにデータを送信できる

1. （【応用】ジャンケンWeb APIサーバを使い）ジャンケンができるページを作成できる

---
class: compact
# おしながき

<small>
- デモ (次頁〜)

1. 解説: HTML、CGI

1. 演習「WWWブラウザでジャンケンするページの作成」
    - 詳細はのちほど -> [こちら](#exercises)

1. TA/SAさんに動作を確認してもらってください

- [自由課題]「ISBN検索」
    - 出来る人は一瞬で出来ます、時間中（16:30まで）に、TA/SAさんに動作確認してもらってください
</small>

---
name:  demo
class: compact
# <small>【復習】動画「HTTPのGETモードはUFOキャッチャー」</small>

---
class: compact,col-3
# <small>【デモ】CGI体験 <small>http://b2902900.cloud.fml.org/lsform.html</small></small>

<div class=footnote>
<small><small>
(脚注1)
このあと演習でlsform.htmlをダウンロードして実際に体験してもらいます
(脚注2)
図(右)の画面はサーバごとに異なります。
これはlsform.htmlのaction=URLで指定されているURL「https://api.fml.org〜」で動いているサーバが、
ブラウザから送られてきたキーと値の組を返している様子です。
ちなみに、<B>演習のデモ等で使うサーバは、すべてGo言語で書かれています。
これは「キーと値の組」を取り出して%v:%vでGo言語がよしなにフォーマットした表示</B>になっています
(注: 内部では値をsliceで保持しているため[数字]と表示)
</small></small>
</div>

![](../images/lsform-01.png)

![](../images/lsform-02.png)

![](../images/lsform-03.png)

---
class: compact,col-2
# <small>【デモ】本日つくるもの: 動画</small>

<div class=footnote>
<small><small>
(脚注)
これらはブラウザで実際に行っている様子の動画です。
一応ブラウザでも実演します
</small></small>
</div>

<div class=html-begin></div> 
---
name:  html
class: title, smokescreen, shelf, no-footer
# 解説: HTML(1)

---
class: compact,img-right
# 復習: ホームページのしくみ

<div class=footnote>
<small><small>
午前中にやりましたね？ね？
</small></small>
</div>

![](/slides/skill-network/images/www-internal-htdocs.png)

- (1)

- (2)

- (3)

- (4)

---
class: compact
# HTMLの基本(1): タグ

<div class=footnote>
<small><small>
(脚注1)
真面目にHTML5をやると大変すぎるので初期のHTMLをやります
(脚注2)
この例で分かるように、
<b>HTMLのタグには文体の「構造」(P)と「装飾」(B)という異なる概念が一緒くた</b>にされています。
これが批判されて、厳密化され、現在のHTML5という読みづらい謎言語になりました。
謎すぎるので授業ではやりません。ウエブデザイナーになりたい人は勉強してください
</small></small>
</div>

<small>
```
<P> 新しい段落(paragraph)を始めます。ブラウザは、改行など適切な見栄えになるようレンダリングを行います

<P> <B>このようにBタグではさむと、太い文字(ボールド体)</B>で表示されます
```
- 単なるテキスト

- <b>タグ(`<tag>`)と呼ばれる命令を含んだテキスト</b>

- タグの始まり`<tag>`と終わり`</tag>`を書くと、それらのタグで挟まれた間だけで命令が有効になります
    - <B>閉じる方のタグは`</`(小なり+スラッシュ)</B>で始めます

- 動作確認だけ出来ればよい授業なので、<B>とりあえず`<P>`だけは覚えましょう。読みやすくなるから</B>
</small>

---
class: compact
# <small>【たとえ話 】HTMLのタグは書き方が少し異なる関数呼び出し</small>

- C言語の系譜
    <small>
    - <b>` f() `のように`()`つきで書くと関数fを呼び出す</b>意味になります
    </small>
- HTML
    <small>
    - （変わった書き方ですが）<b>`<`で始まる関数呼び出し</b>だと考えて良いです
    - <b>関数の実行を依頼する先はブラウザ</b>です
    </small>
    
```
<p> abc

// 意訳（注：これは実際には動作しません）
<段落を作成> abc

// C言語風な書き方へ意訳すると、こうなる（注：これも実際には動作しません）
段落を作成せよ("abc")
```

---
class: compact,img-right
# <small>【たとえ話 】HTMLのタグは書き方が少し異なる関数呼び出し</small>

<div class=footnote>
<small><small>
(脚注)
改行等は、
<b>ブラウザが画面の横幅やフォントサイズを考慮して画面を制御</b>しています。
よって、
「段落」と「ボールド（太字）」は同じでも、
<b>改行位置、空行の大きさ、前後左右のスキマの大きさなどもユーザごとに異なります</b>。
たとえば、PC上のブラウザは横長、スマートフォンは縦長なので、とうぜん見栄えは大きく異なりますが、
「段落」と「ボールド（太字）」は同じです
</small></small>
</div>

![](../images/browser-rendering-p,b-tags.png)

<small>
- C言語の系譜
    <small>
    - <b>` f() `のように`()`つきで書くと関数fを呼び出す</b>意味
    </small>

- HTML
    <small>
    - <b>`<`で始まる関数呼び出し</b>だと考えて良い
    - <b>関数の実行を依頼する先はブラウザ</b>です
    - 例：
      <small>
      - `<p>` ... p(paragraph=段落)関数
      - `<b>` ... b(bold=太字)関数
      </small>
    </small>
</small>

---
class: compact, img-right
# HTMLの基本(2a): FORM文(CGI)

<div class=footnote>
<small><small>
(脚注1)
ショッピングカートの作成ですが実際のサイトは作りません。
「カートの情報を送る」ところまでを作ります。
ちなみにカートがあつかう情報とは「商品名」と「数量」の組です（この組は複数可）。
(脚注2)
いまどき、どんなブラウザでも動作します。
正確にはブラウザとサーバ双方がCGIをサポートしている必要がありますけど、
過去30年以上の実績なので安心して使ってOK
</small></small>
</div>

![](../images/lsform-02.png)
<small><small>
<br>
item-01,item-02,item-03が商品名、入力欄が数量です
</small></small>

<small>
- ショッピングカートでは、購入したい「商品」と商品の「数量」を扱います
  
- ブラウザで、これが扱えるように、<B>「キーと値の組をサーバに送る」約束事</B>を作りました。

- <B>この取り決めをCGI</B>と呼んでいます
  <br>
  CGI = Common Gateway Interfaceの頭文字
  
</small>

---
class: compact, img-right
# HTMLの基本(2b): FORM文(CGI)

<div class=footnote>
<small><small>
(脚注)
図は「入力欄や送信ボタンが作成済」の状態からスタートしています。
図に描かれていない(0)で作成もしくはメニュー相当
</small></small>
</div>

![](/slides/skill-intro/images/www-internal-form.png)

<small>
- ブラウザ上に入力画面を作成します
    - `<input>`タグの場所に「入力欄」を作成
    - `<submit>`文の場所に「送信ボタン」を作成

- <b>`<form>`文では利用するWeb APIサーバの指定</b>
    - 「送信ボタン」がクリックされると
    - ブラウザはキーと値の組をサーバに送信

- WWWサーバ側では、キーと値の組を取り出す
    - これらの値を元に、<B>なんらかの処理（右図(2)）をして、結果を返すサーバ</b>
      （<b>Web APIサーバ</b>）を作りこみます
</small>

---
class: compact
# HTMLの基本(3a): lsform.htmlの解説 (画面表示の作成)

<div class=footnote>
<small><small>
(脚注)
「画面の表示（文字、段落等）」と「入力欄や送信ボタンの作り方」という２種類の話が混ざっていることに注意
</small></small>
</div>

![height480px](../images/html-form-rendering.png)

---
class: compact
# HTMLの基本(3b): lsform.htmlの解説 (サーバの指定)

<div class=footnote>
<small><small>
(脚注)
タグは大文字小文字を区別しません。大文字でも小文字でも大丈夫です。
例：
&lt;form&gt;、
&lt;Form&gt;、
&lt;FORM&gt;、
どれでもOK。
概念の説明では大文字を使いますが、
HTMLでは小文字の利用が多いような気がします（ランダムサンプリング）
</small></small>
</div>

<small>
```
<form method="POST" action="https://api.fml.org/api/lsform/v1">
   〜省略〜
</form>
```
- <b>FORMタグ(`<form ...>`)にはWeb APIサーバとのデータのやりとりの詳細設定を書きます</b>
- 具体的には<b>`<form ...>`タグの中に属性等が書けるので、そこに設定を書きます</b>
    - スペース区切りで`属性=値`形式。
      上の例でも`<FORM 属性1=値1 属性2=値2 ...>`となっています
    - `method=POST`はHTTPの動作モードの指定と考えてください
      <br>
      FORM文では、たいていPOSTを指定するので、<B>授業ではmethod=POSTと覚えておいてOK</B>
    - `action=URL`が呼び出すWeb APIサーバの指定です
      - プログラミング言語の関数と同じと考えてください
      - <B>URLを変えれば呼び出す先を変えられます</B>
      - つまり処理したい内容ごとに異なる呼び出し先が利用できます
</small>

---
class: compact
# HTMLの基本(3c): lsform.html (そのもの) 【オマケ】

<div class=footnote>
<small><small>
(脚注)
このあと実際に使うlsform.htmlの解説です(1)
</small></small>
</div>

<small>
```
<P>SHOPPING CART
<form method="POST" action="https://api.fml.org/api/lsform/v1">
  <P>item-01
    <input name="item-01"  type="text">
  <P>item-02
    <input name="item-02"  type="text">
  <P>item-03
    <input name="item-03"  type="text">
  <P>
  <input type="submit" value="buy">
</form>

```
- これが、このあとダウンロードするlsform.htmlです
- <b>空白、空行はブラウザに無視されます。
  ダウンロードするファイルでは読みやすいように空行いりです</b>
</small>

---
class: compact
# HTMLの基本(3d): lsform.htmlの読み方 【オマケ】

<div class=footnote>
<small><small>
(脚注1)
このあと実際に使うlsform.htmlの解説です(2)。
<br>
(脚注2)
<b>「表示を制御するタグ」と「FORM文が作る入力欄等」を混ぜこぜで書いていきます</b>
<b>（<- 混乱の元）</b>
</small></small>
</div>

<small>
```
<P>SHOPPING CART                                    
<form method="POST" action="Web APIサーバのURL">    
  <P>キーの名称1                                    
    <input name="キーの名称その1"  type="text">     
  <P>キーの名称2                                    
    <input name="キーの名称その2"  type="text">     
  <P>キーの名称3                                    
    <input name="キーの名称その3"  type="text">     
  <P>                                               
  <input type="submit" value="送信ボタンの表示名">  
</form>
```
<small>
- 「キーの名称1」を「変数名1」と考えれば関数よびだしの引数のイメージと重なりませんか？
  `<P>〜`の〜部分は説明（ここの文字がないと箱だけが表示されている画面になります）。
  なお右の`<!- コメント ->`は、このスライドで追加した説明
</small>
</small>

---
class: compact
# HTMLの基本(4a): 全体の動作

<div class=footnote>
<small><small>
ページ「HTMLの基本(3a)」の続き(左から右へ処理は進行)：
lsform.htmlがレンダリングされて、
ブラウザに入力画面が作成されます(左から2つ目)。
ユーザが数値を入力し(左から3つ目)、
送信ボタン(buy)をクリックすると、
入力した数値はWeb APIサーバへ送信され、
処理結果が返り(レンダリング結果が)ブラウザ上に表示されます(右端)。
<b>Web APIサーバはFORM文のaction属性で指定するURL</b>
</small></small>
</div>

![](../images/html-form-rendering-w-result.png)

---
name:  exercises
class: title, smokescreen, shelf, no-footer
# <small>演習</small>

<div class=footnote>
<small><small>
(脚注)
こまかな指示は演習支援システム(Colitas)に従ってください
</small></small>
</div>

---
class: compact
# 演習内容 (概要)

<small>
1. curlコマンドでHTTP体験（8割がた午前中の復習）

1. <b>`http://学籍番号.cloud.fml.org/lsform.html`</b> を作成してください
   <small>    
    - FORM文のテンプレート `lsform.html` をダウンロードし、上のURLで動作確認してください
    - lsform.htmlのダウンロード元URL = https://api.fml.org/dist/lsform.html
   </small>
   
1. <b>`http://学籍番号.cloud.fml.org/janken.html`</b> に「ジャンケンができるページ」を作成してください
   <small>    
   - lsform.htmlをコピーして、ファイル名janken.htmlを作成してください
   - janken.htmlファイルを編集して上記URLで動作する「Web API版ジャンケン」を作成 -> [仕様](#janken-spec)
   </small>
   
1. 動作確認(TA/SAに見せてください)
   <small>    
   - Web API版ジャンケンが動作することを確認します
   - Web API版ジャンケンのフローチャートを書いて動作を説明してください
   - 参考: フローチャートは1年前に「プログラミングとアルゴリズム基礎」で習いました
      - ELの教科書「大学情報 > 情報工学(mobile対応) > アルゴリズム > フローチャート」を参照
   </small>    
</small>

---
class: compact
# <small>【デモ】 午前中の復習(telnetとcurlコマンド)</small>

<div class=footnote>
<small><small>
(脚注)
動画のサーバはlocalhost(IPアドレス: 127.0.0.1)です。
よって
curl http://localhost/ もしくは curl http://127.0.0.1/と同様
</small></small>
</div>

<small>
- ブラウザが裏で行っている動作はtelnetとcurlで擬似体験できます
- `telnet サーバ 80`でサーバにアクセスすることは、
  ターミナルで`curl http://サーバ/`を動かすことと同じ

</small>

---
name:  janken-spec
class: compact
# <small>ジャンケンサーバの仕様</small>

- ジャンケンサーバの仕様はC言語でやったものと同じです
    <small>
    - グー、チョキ、パーを0、1、2で表現しています(C言語の演習でやりましたよね?)
    - URL =  https://api.fml.org/api/janken/v1
    - サーバは、キーが`jibun`、その値として数字(0, 1, 2)が送られてくると期待しています
      <br>
      (jibunは「ジャンケンの自分の手」という意味です)
    - サーバが返す「aiteはコンピュータ(相手)の手、kekkaは勝敗」です
      <br>
      `kekka = (3 + jibun - aite) % 3`
    </small>

---
class: compact
# 自由課題 (任意課題,講義時間内のみ受付 - 16:30)

<small>
- ISBN検索ができるページを作成してください
    - 作成するURLは `http://学籍番号.cloud.fml.org/isbn.html`
    - ISBN検索に使えるサービスはopenBD (open book database)の https://openbd.jp/
    - 使い方はopenBDのページを読んで勉強してください。
      なお、openBDのページでは説明されていませんが、POSTメソッドも対応しています

- 動作確認用のISBN = 9784621066089

- 出来るひとは一瞬で出来ると思いますので、演習の時間内部でTA/SAさんに見せてください
</small>