SKILL-INTRO_03__ホームページをつくろう

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

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

1. 基礎的なUnix/Linuxコマンド操作ができる

1. WWWサーバをたてられる

1. 自分のホームページを作ることができる

---
class: compact
# お品書き

1. システム構築演習支援システム(Colitas)について
1. 午前中の復習
    - HTTPとWWWサーバのしくみ
1. 前回の復習 
1. 用語(本日のNEW)
1. 演習 WWWサーバ(www.py)の作成
    - WWWサーバにはPythonで書いたwww.pyを配布します
1. [必須課題] (1)ホームページを編集する(2)構成図(ポータルのレポートボックスへ)
1. TA/SAさんに(1)を確認してもらったら終了(三々五々解散してOK)
1. [自由課題]「自分のホームページをリッチにする」

---
name:  colitas
class: title, smokescreen, shelf, no-footer
# <small>演習支援システム(Colitas)の解説</small>

<div class=footnote>
<small><small>
Colitas = COmmand LIne Training Assitance System;
CLI砂漠に咲く花が甘い香りを漂わせます,Hotel Calforniaで...
</small></small>
</div>

---
name:  review
class: title, smokescreen, shelf, no-footer
# 復習

---
class: compact,img-right
# ホームページ（WWW）のしくみ

<div class=footnote>
<small><small>
(脚注)
これを「サーバ(給仕)・クライアント(お客様)モデル」と呼んでいます
</small></small>
</div>

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

- (1) URL(`http://b2902900.cloud.fml.org/`)をブラウザでクリックすると

- (2) 【WWWサーバの内側の動作】
  <br>
  URL右端の`/`を`/index.html`と解釈しindex.htmlの中身を返す準備をします

- (3) WWWサーバはブラウザにコンテンツ(index.html)を送り返します

- (4) ブラウザは受け取ったコンテンツを解釈して表示します(レンダリング)

---
class: compact
# URLとは「サーバ名＋見たいコンテンツの場所」

<div class=footnote>
<small><small>
(脚注)
www.pyとか、具体的なコンテンツ場所の説明は、月曜午後の科目にあわせています
</small></small>
</div>

<small>
URL = サーバ名＋見たいコンテンツの場所
<br>
例: `http://b2902900.cloud.fml.org/` = サーバ名(b2902900.cloud.fml.org) + 場所(/)

- (ここでは、午後の科目で使うWWWサーバの仕様で説明します)
- サーバ名が`b2902900.cloud.fml.org`
- サーバ名の右側部分(ここでは`/`)がサーバ上でのコンテンツの場所の指定
  <br>
  (注: `/`=`/index.html`は相対位置です。
  WWWサーバ(www.py)には`/index.html`の実在する位置は`/home/admin/htdocs/index.html`であると解釈する設定が入っています)

```
[例]
http://b2902900.cloud.fml.org/             ... デフォルトのコンテンツ /home/admin/htdocs/index.html
http://b2902900.cloud.fml.org/janken.html  ... この場合のコンテンツは /home/admin/htdocs/janken.html

http://portal.net.fml.org/
```
</small>

---
class: compact
# 用語

<div class=footnote>
<small><small>
(脚注)
先週分および午前中の授業と一部重複しています。午前の復習も兼ねているわけですね
</small></small>
</div>

<small>
- プロトコル ... Protocol
    - 相互に取り決めた約束事。インターネットの場合は「通信規約」といった意味
- IPアドレス(発音：あいぴーあどれす) ... IP Address
    - コンピュータを識別する数字。
      ちなみにIPはInternet Protocolの略
- コマンド
   - コンピュータに与える命令で擬似英語っぽい単語(+文章)、スペース区切りに注意
- AWS (発音：えーだぶりゅーえす) ... Amazon Web Services
    - もっとも有名な事実上の業界標準であるクラウドサービス
- Unixオペレーティングシステム (発音：ゆにっくす)
    - このテキストではDebian GNU/Linuxのことです
- Linux　（発音：りなっくす、りぬ〜くす）
    - クラウドサービスでもっともよく使われるOS
    - UNIXのニセモノ(Unix クローン)のひとつ
</small>

---
class: compact
# 用語

<small>
- サーバ
   - サービスを提供するコンピュータのこと。「サーバクライアントモデル」も参照
- EC2 (発音：いーしーつー) ... Elastic Compute Cloudの略
   - AWSのサーバのこと。正確には仮想サーバ
- Public IP (発音：ぱぶりっくあいぴー)
   - サーバについている(インターネットから見える)IPアドレス; 午前中やった210.128.53.193の仲間 
   - 反対語は(インターネットから見えてない)Private IPになりますが、
     この話はネットワークの授業のだいぶ先で話します
- EIP (発音：いーあいぴー) ... Elasic IPの略
   - AWSで購入できるサーバに設定する(固定の)Public IPアドレス
   - [注意] EC2デフォルトのPublic IPは起動(vocareumでStart Labをクリック)するたびに異なります！
</small>

---
class: compact
# [解説] 前回のColitasのインストール、Colitasの使い方

- TA/SAさん、よろしく

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

<div class=footnote>
<small><small>
Colitasのメッセージを参考にがんばってみよう
</small></small>
</div>

---
name:  pre-test
class: compact
# はじめるまえに

- プレテスト

---
class: compact
# 演習「自分のホームページを立てる」

<div class=footnote>
<small><small>
Colitasのメッセージを参考にがんばってみよう
</small></small>
</div>

- １５〜２０分の時間をあげます。以下の演習を行ってください
    - 演習「自分のホームページを作成してください」
    - 課題「自分の学籍番号が表示されるホームページにしてください」

- ふだんスマートフォンでもアプリを入れたりしますよね？そのへんを思い出しながら、
  <b>作業手順を自分で考えてください</b>
    - 作業のヒントや必要な要素は続くスライド(合計２ページ)に書いてあります
    - また実際にコマンド操作をする際にはColitasの支援を受けられます
    - WWWサーバはwww.pyというPythonスクリプトを配布しています。それを使ってください

---
class: compact
# 演習「自分のホームページを立てる」

<div class=footnote>
<small><small>
Colitasのメッセージを参考にがんばってみよう
</small></small>
</div>

<small>

- 自分のホームページを確認する方法は「ブラウザに URL を入力してENTER」です
    - ホームページのURLは `http://学籍番号.cloud.fml.org/` です

- ダウンロードするコマンドは `curl -O URL` です
    - URL は http://api.fml.org/dist/www.py

- www.pyを実行するコマンドは`sudo python3 ファイル名`です
    - ここでファイル名は www.py のことです

</small>

---
class: compact
# 必須課題「自分のホームページにする」

<div class=footnote>
<small><small>
Colitasのメッセージを参考にがんばってみよう
</small></small>
</div>

<small>

- 自分のホームページの表示を「Welcome to 学籍番号」に変更してください
    - 例: 学籍番号 b2902900 の人は「Welcome to b2902900」
    - 編集するコマンドは`nano ファイル名`です
    - このファイル名は /home/admin/htdocs/index.html です

</small>

---
name:  post-test
class: compact
# 終わったら？

- (早々とおわってしまったら、同期をとるので、すこし待っててください)

- ポストテスト

- 口頭試問

---
name:  round-2
class: title, smokescreen, shelf, no-footer
# <small>ラウンド２</small>

---
class: compact
# はじめに

- スマートフォンのたとえに戻りますけどね

- スマートフォンのアプリを入れるときって、どういう手順でしょうか？
    1. アプリを〜する
    1. アプリを〜する
    1. アプリを〜する