Web

2016-05-11 2016年度 TSG 第1回Web分科会

@hakatashi

Webの仕組み概説編

自己紹介

博多市(@hakatashi)
Web特化型プログラマ(たぶん)
OSS好きマン
- npmモジュールを16個公開
- そのうち3個はscoped clone
- Google Summer of Code 2016 参加中
最近ノリで取得した
tokyo-olym.pics というドメインの使いみちに悩んでいる

Agenda

ネットワーク通信のしくみ
ウェブサイトのしくみ
Webプログラミングとは
HTMLを書いてみる

ネットワーク通信のしくみ

通信は情報の要求と
応答の繰り返し

1. 要求

2. 考える

3. 応答

「1000円貸して」

(相手の名前?)
(自分の状況?)

「誰だお前は」

コンピューターどうしの
通信の場合

1. 要求

2. 考える

3. 応答

「secret.pngください」

(相手のユーザ名?)
(ファイルの状況?)

「403 forbidden」

あらゆる通信には
「プロトコル」が存在する

「あなたはxxxですか?」

「ピヨピヨ」

プロトコル: yesなら1回、noなら2回鳴く

プロトコルの例

Ethernet
IP
TCP
UDP
HTTP
HTTPS
FTP
FTPS
SFTP
SSH
などなど……

ウェブページのしくみ

世の中のウェブページも
この「通信」のしくみの上で
動いている

1. 要求

2. 考える

3. 応答

クライアント

サーバー

ウェブページの通信に用いられるのは
主にHTTPと呼ばれるプロトコル

GET /tsg_ut HTTP/1.1
Host: twitter.com

このような通信がウェブブラウザの裏側で動いている

HTTP/1.1 301 Moved Permanently
content-length: 0
date: Wed, 11 May 2016 08:09:42 GMT
location: https://twitter.com/tsg_ut
server: tsa_a
set-cookie: guest_id=v1%3A146295418253673640; Domain=.twitter.com; Path=/; Expires=Fri, 11-May-2018 08:09:42 UTC
x-connection-hash: 41673d10831586465d4266b42c5cfb34
x-response-time: 2

要求

応答

例: http://twitter.com/tsg_ut にアクセスした場合

実際にやってみる

Mac, Linux の場合

$ nc twitter.com 80
GET /tsg_ut HTTP/1.1
Host: twitter.com

HTTP/1.1 301 Moved Permanently
content-length: 0
date: Wed, 11 May 2016 08:18:33 GMT
location: https://twitter.com/tsg_ut
server: tsa_a
set-cookie: guest_id=v1%3A146295471330788706; Domain=.twitter.com; Path=/; Expires=Fri, 11-May-2018 08:18:33 UTC
x-connection-hash: 90975a388e059974eb310deb0c55d59c
x-response-time: 2

Windows の場合

> telnet twitter.com 80
GET /tsg_ut HTTP/1.1
Host: twitter.com

HTTP/1.1 301 Moved Permanently
content-length: 0
date: Wed, 11 May 2016 08:18:33 GMT
location: https://twitter.com/tsg_ut
server: tsa_a
set-cookie: guest_id=v1%3A146295471330788706; Domain=.twitter.com; Path=/; Expires=Fri, 11-May-2018 08:18:33 UTC
x-connection-hash: 90975a388e059974eb310deb0c55d59c
x-response-time: 2

telnetをインストールしてから

HTTPには応答の種類を表す
Status Code がある

301 Moved permanently: 別の場所に行け
403 Forbidden: てめーらにはおしえてやんねー
404 Not Found: ねーよ
など……
見つかった場合(200 OK)はファイルの内容を返してくる

https://gist.github.com/rosylilly/3401612

ウェブページを構成する
ファイルの大元は
HTMLと呼ばれる形式のファイル

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="description" content="東京大学に本拠をおくコンピュータサークルTSGのウェブサイトです。">
    <meta name="keywords" content="TSG,プログラミング,プログラム,アプリ開発,東京大学,コンピュータ,サークル">
    <meta name="author" content="TSG">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <base href="">
    <link rel="stylesheet" media="screen" href="/css/tsg-top.css" type="text/css">
    <link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Josefin+Sans:300' type='text/css'>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/galleria/1.3.5/themes/classic/galleria.classic.min.css" type='text/css'>
    <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/history.js/1.8/bundled-uncompressed/html5/jquery.history.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/galleria/1.3.5/galleria.min.js" type="text/javascript"></script>
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.js" type="text/javascript"></script>
    <![endif]-->
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
    <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
    
    <script>
        
        var pageState = 1; // open
        
    </script>
    <title>TSGについて - 東京大学コンピュータ系サークル TSG</title>
    <!-- Google Analytics -->
    <script>

http://www.tsg.ne.jp/about.html

HTMLから様々なファイルを
「リンク」することによって
表現力を高める

HTML
├画像
├スタイルシート
├スクリプト
├動画
├Flash ☠
│などなど……

Webプログラミング

静的ウェブサイトと
動的ウェブサイト

静的ウェブサイト

要求に対して決まったページを返す
TSGのウェブサイトなど

動的ウェブサイト

ユーザーの要求によって何かしらの操作を行い、要求ごとに違う応答を返す
- ツイートしたり
- 検索したり
- ドキュメントを編集したり……
Webプログラミングによって解決

Webプログラミングには
2種類ある

1. 要求

3. 応答

クライアントサイド
(フロントエンド)

サーバーサイド
(バックエンド)

クライアントサイドと
サーバーサイド

サーバーサイド
(バックエンド)

サーバーで動く
リクエストに応じて応答の内容を変化させる
言語はなんでもいい
- PHP
- Ruby
- JavaScript
- など

クライアントサイド
(フロントエンド)

ブラウザで動く
一度受け取ったウェブページを
シュッと動かしたり書き換えたりする
言語はJavaScript限定

HTMLを書いてみる

今回は第1回なので、
プログラミングを行わない
「静的ウェブサイト」の、
特に何の飾りもない
生のHTMLを書いてみましょう

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="description" content="東京大学に本拠をおくコンピュータサークルTSGのウェブサイトです。">
    <meta name="keywords" content="TSG,プログラミング,プログラム,アプリ開発,東京大学,コンピュータ,サークル">
    <meta name="author" content="TSG">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <base href="">
    <link rel="stylesheet" media="screen" href="/css/tsg-top.css" type="text/css">
    <link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Josefin+Sans:300' type='text/css'>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/galleria/1.3.5/themes/classic/galleria.classic.min.css" type='text/css'>
    <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/history.js/1.8/bundled-uncompressed/html5/jquery.history.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/galleria/1.3.5/galleria.min.js" type="text/javascript"></script>
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.js" type="text/javascript"></script>
    <![endif]-->
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
    <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
    
    <script>
        
        var pageState = 1; // open
        
    </script>
    <title>TSGについて - 東京大学コンピュータ系サークル TSG</title>
    <!-- Google Analytics -->
    <script>

HTMLは要はプログラムと同じ
ただのテキストファイル

SGMLと呼ばれる
マークアップ言語の一種

SGML

HTML

XML

XHTML

SVG

簡単に言うと、
開始タグと終了タグで囲まれた
1つの要素で
1つの「もの」を表現する

<blockquote>吾輩は猫である</blockquote>

ここからはCollabEditで配信しながら
解説するので、
各自お好みのエディタで
自分用のHTMLを編集して確認しながら
聞いていってください

http://collabedit.com/6wahu

Web

自己紹介

Agenda

ネットワーク通信のしくみ

通信は情報の要求と 応答の繰り返し

コンピューターどうしの 通信の場合

あらゆる通信には 「プロトコル」が存在する

プロトコルの例

ウェブページのしくみ

世の中のウェブページも この「通信」のしくみの上で 動いている

ウェブページの通信に用いられるのは 主にHTTPと呼ばれるプロトコル

実際にやってみる

HTTPには応答の種類を表す Status Code がある

ウェブページを構成する ファイルの大元は HTMLと呼ばれる形式のファイル

HTMLから様々なファイルを 「リンク」することによって 表現力を高める

Webプログラミング

静的ウェブサイトと 動的ウェブサイト

Webプログラミングには 2種類ある

クライアントサイドと サーバーサイド

HTMLを書いてみる

今回は第1回なので、 プログラミングを行わない 「静的ウェブサイト」の、 特に何の飾りもない 生のHTMLを書いてみましょう

HTMLは要はプログラムと同じ ただのテキストファイル

SGMLと呼ばれる マークアップ言語の一種

SGML

HTML

XML

XHTML

SVG

簡単に言うと、 開始タグと終了タグで囲まれた 1つの要素で 1つの「もの」を表現する

ここからはCollabEditで配信しながら 解説するので、 各自お好みのエディタで 自分用のHTMLを編集して確認しながら 聞いていってください

通信は情報の要求と
応答の繰り返し

コンピューターどうしの
通信の場合

あらゆる通信には
「プロトコル」が存在する

世の中のウェブページも
この「通信」のしくみの上で
動いている

ウェブページの通信に用いられるのは
主にHTTPと呼ばれるプロトコル

HTTPには応答の種類を表す
Status Code がある

ウェブページを構成する
ファイルの大元は
HTMLと呼ばれる形式のファイル

HTMLから様々なファイルを
「リンク」することによって
表現力を高める

静的ウェブサイトと
動的ウェブサイト

Webプログラミングには
2種類ある

クライアントサイドと
サーバーサイド

今回は第1回なので、
プログラミングを行わない
「静的ウェブサイト」の、
特に何の飾りもない
生のHTMLを書いてみましょう

HTMLは要はプログラムと同じ
ただのテキストファイル

SGMLと呼ばれる
マークアップ言語の一種

簡単に言うと、
開始タグと終了タグで囲まれた
1つの要素で
1つの「もの」を表現する

ここからはCollabEditで配信しながら
解説するので、
各自お好みのエディタで
自分用のHTMLを編集して確認しながら
聞いていってください