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

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

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

ウェブページを構成する
ファイルの大元は
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から様々なファイルを
「リンク」することによって
表現力を高める

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を編集して確認しながら
聞いていってください

Web分科会 第1回 Webの仕組み概説編

By Koki Takahashi

Web分科会 第1回 Webの仕組み概説編

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

  • 848
Loading comments...

More from Koki Takahashi