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

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

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

<div class=footnote>
<small><small>
(脚注)
WWWサーバとの会話とは、WWWサーバと「データのやりとりが出来る」という意味です
</small></small>
</div>

1. HTMLの基礎を理解する

1. WWWサーバと会話できる

1. (会話の応用として)ジャンケンができる

---
class: compact
# おしながき (#04)

<small>
1. 解説: HTML (1)
1. 演習「WWWブラウザでジャンケンするHTML」を作る
1. [必須課題] ジャンケンのフローチャート、janken.html
1. TA/SAさんにフローチャートとジャンケンの実演を確認してもらい終了(三々五々解散してOK)
1. [自由課題]「ISBN検索」(出来る人は一瞬で出来るはずなので、時間中に、みせてください)
</small>

<div class=html-begin></div> 
---
name:  exercises
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)
この例で分かるように、
HTMLのタグには文体の「構造」(P)と「装飾」(B)という異なる概念が一緒くたにされています。
これが批判されて、厳密化され、現在のHTML5という読みづらい謎言語になりました。
謎すぎるので授業ではやりません。ウエブデザイナーになりたい人は勉強してください
</small></small>
</div>

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

<P> <B>このようにBタグではさむと、太い文字(ボールド体)</B>で表示されます
```
- 単なるテキストです。ただしタグ(`<tag>`)と呼ばれる命令を含めることが出来ます

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

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

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

<div class=footnote>
<small><small>
(脚注)
ショッピングカートの最初のところだけです
</small></small>
</div>

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

<small>
- たとえばショッピングカートを作ることを考えます。
  カートがあつかう情報とは「商品名」と「数量」の組です。組は複数可
  
- 元祖HTMLでは、こういうショッピングが出来ないため、新たに
  <B>「キーと値の組をサーバに送る」約束事</B>を作りました。
  <B>この取り決めがCGI</B>
  <br>
  (CGI = Common Gateway Interface)

- WWWブラウザとサーバ両方がCGIをサポートしている必要があります
  (過去30年以上そうなっているので安心して使ってOK)
</small>

---
class: compact, img-right
# 復習: C言語の関数呼び出しを思い出そう

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

```
(ソースコードのイメージ)

// カートに商品と数量を入れる
cart_add(item1, 1);
cart_add(item2, 2);
cart_add(item3, 3);

// 画面にショッピングカートの中身を表示する
cart_show();
```
<small>
- <B>処理を依頼するURLが関数に相当</B>します
- だいぶ文法は異なりますが、
  C言語の関数呼び出しと同じですよね？
- CGIの場合、たいてい関数が別のPCで実行されるけど、<B>図としては同じですよね？</B>
</small>

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

<div class=footnote>
<small><small>
(脚注)
ショッピングカートの最初のところだけです
</small></small>
</div>

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

<small>
- FORM文で、キーと値  (「商品名」と「数量」)の組をサーバに送るHTMLを書けます
    - ブラウザはFORM文に沿って入力欄や送信ボタンなどを作成(レンダリング)します
    - ブラウザはキーと値の組をブラウザに送る
    - サーバ側では、キーと値の組を取り出す

- 上記までがCGIの仕様で、
  たいてい取り出した後、<B>なんらかの処理をして結果を返すサーバの作りこみが、別途、必要</B>です
  <br>
  (最近は、このサーバのことをWeb APIと呼ぶ)
</small>

---
class: compact,col-3
# <small>FORM文の体験例: http://b2902900.cloud.fml.org/lsform.html</small>

<div class=footnote>
<small><small>
(脚注1)
このあと演習でlsform.htmlをダウンロードして実際に体験してもらいます
(脚注2)
図(右)の画面はサーバごとに異なります。
これはlsform.htmlのaction=URLで指定されているURL「http://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
# HTMLの基本(3a): lsform.htmlの解説 (画面の表示)

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

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

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

<small>
```
<form method="POST" action="http://api.fml.org/api/lsform/v1">
   〜省略〜
</form>
```
- FORMタグ(`<form>`)で、データのやりとりの詳細設定を書きます
    - この部分はブラウザでレンダリングされませんが、
    - WWWサーバとのやりとりで重要な情報を書くところです
- タグのなかにはタグの属性等が書けます。スペース区切りで`属性=値`形式です
    - この例でも`<FORM 属性1=値1 属性2=値2 ...>`となっています
    - `method=POST`はHTTPの動作モードの指定と考えてください
      <br>
      FORM文では、たいていPOSTを指定するので、<B>授業ではmethod=POSTと覚えておいてOK</B>
    - `action=URL`が使うサーバのURLの指定です。ここは様々です。
      C言語で呼び出す関数を変えれば色々できるように、
      <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="http://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です
</small>

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

<div class=footnote>
<small><small>
(脚注)
このあと実際に使うlsform.htmlの解説です(2)
</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>
```
- `<!- コメント ->`で説明しています。
 `<P>〜`の部分がないと箱が並ぶだけでページの意味が分かりません。
  「説明を書く元祖HTML」と「FORM文が作る入力欄」の両方を混ぜこぜで書いていきます
- 「キーの名称1」を「変数名1」と考えると、関数呼び出しのイメージと重なります
</small>

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

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

<div class=footnote>
<small><small>
(脚注)
ステップの1,3,4は Colitas が支援してくれます
</small></small>
</div>

<small>
1. FORM文のテンプレート `lsform.html` をダウンロードし、FORM文を体験してください

1. Web API版ジャンケンのフローチャートを書いてください

1. lsform.htmlをコピーして、ファイル名janken.htmlを作成します

1. janken.htmlファイルを編集し「Web API版ジャンケン」を完成してください

- もう少し詳しい説明が次ページ以降にあります
</small>

---
class: compact
# <small>演習内容(1) lsform.htmlをダウンロードし、FORM文を体験する</small>

<div class=footnote>
<small><small>
(脚注)
Colitas が支援してくれます
</small></small>
</div>

- FORM文のテンプレート `lsform.html` をダウンロードしてください

- ダウンロードするコマンドは`curl -o ファイル名 URL`です
    - オプション`-o`は、マイナス、アルファベット小文字のo(oscarのo)です
    - (ダウンロード先の)ファイル名 = /home/admin/htdocs/lsform.html
    - (ダウンロード元の)URL =  http://api.fml.org/dist/lsform.html

- ブラウザで各自のWWWサーバ `http://学籍番号.cloud.fml.org/lsform.html` にアクセスし、
  「FORM文でキーと値を送る」体験をしてください。
    - 体験イメージはスライド p.10 を参照
</small>

---
class: compact
# <small>演習内容(2) Web API版ジャンケンのフローチャートを書きなさい</small>

- フローチャートは1年前に「プログラミングとアルゴリズム基礎」で習いました
    <small>    
    - ELの教科書「大学情報 > 情報工学(mobile対応) > アルゴリズム > フローチャート」を参照
    </small>

- STARTは「lsform.htmlをブラウザが読みこんだところ(レンダリング前)」とします

- 「WWWサーバ呼び出し」を「関数呼び出し」(つまり「定義済み処理内容」)と考えてください

---
class: compact
# <small>演習内容(3) lsform.htmlをコピーしてjanken.htmlを作成する</small>

<div class=footnote>
<small><small>
(脚注)
Colitas が支援してくれます
</small></small>
</div>

- ファイル/home/admin/htdocs/lsform.htmlをコピーしてください

- コピー先のファイル名は/home/admin/htdocs/janken.htmlです

- Unixターミナルでファイルをコピーするコマンドは cp (CoPyの頭文字)です

```
[cpコマンドの書式]

cp コピー元 コピー先
```

---
class: compact
# <small>演習内容(4) janken.htmlファイルを編集する</small>

<div class=footnote>
<small><small>
(脚注)
Colitas が支援してくれます
</small></small>
</div>

- janken.htmlファイルを編集し「ジャンケンサーバ(Web API)を利用したジャンケン」を実現してください

- 作成する画面イメージは次ページを参照

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

---
class: compact
# 見本: Web API版ジャンケンの画面

![height400px](/slides/skill-intro/images/html-form-janken-example.png)

---
class: compact
# 見本: Web API版ジャンケン実行後のブラウザ画面

<div class=footnote>
<small><small>
(脚注)
これはJSON形式です。
JSONになっているのは、これを利用した自由課題のためです(今回の自由課題ではありませんが)
</small></small>
</div>

```
{"jibun":1,"aite":0,"kekka":1}
```

---
class: compact
# 必須課題

次の二つをTA/SAさんに確認してもらってください

1. Web API版ジャンケンのフローチャート
1. 作成した janken.html が実際に動くところ
    - とうぜんURLは各自ことなります
    - URL = `http://学籍番号.cloud.fml.org/janken.html`

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

<small>
- ISBN検索ができるページを作成してください
    - URLは `http://学籍番号.cloud.fml.org/isbn.html`
    - 使えるサービスはopenBD (open book database)の https://openbd.jp/
    - 使い方はopenBDのページを読んで勉強してください。
      なお、openBDのページでは説明されていませんが、POSTメソッドも対応しています
    - 確認用の ISBN = 9784621066089
- 出来るひとは一瞬で出来ると思いますので、演習の時間内部でTA/SAさんに見せてください
</small>