8. インターネットのプログラミング

SFCのScrapbox

/sfc-sampo

/sfchelp

本日のトピック

Webのしくみ

サーバのプログラミング

ブラウザのプログラミング

IoT次代のプログラミング

インターネット = Web?

現状ではほぼインターネット ≈ Web

ネットプログラミング ≈ Webプログラミング

Webのプログラミング

Webサービスで提供

サーバ上のプログラミング

ブラウザ上のプログラミング

ユーザが作成

サーバ上のユーザプログラミング

ブラウザ上のユーザプログラミング

Webを支える技術

http://www.amazon.co.jp/dp/4774142042/ http://gyazo.com/458ebc9b45cd38cfe36a3dc16380b033.png

Webアクセスの基本

http://gyazo.com/4fe5e73511ea1909e61e437e06a50056.png

ブラウザの基本動作

HTTP

RFC2616

code:brouserloop.txt

while true do

1. ユーザがブラウザを操作

2. GET, POSTリクエストをブラウザがサーバに送る

3. サーバからの返事を待つ

4. サーバから返されたHTMLを表示する

end

基本動作の場合

プログラミングは不要

Webサーバ(Apache, nginx, etc.)とブラウザ(Chrom, Firefox, etc.)が勝手にやってくれる

初期のWebはこれだけ

プログラムを動かすことができない

CGIプログラムの利用

ユーザがブラウザを操作

ブラウザがサーバにCGIのURL+引数(データ)を送る

GET, POST

サーバが送られたデータを解釈

サーバがCGIプログラムを起動

CGIプログラムが何かの計算を実行

計算結果をサーバがブラウザに送る

ブラウザの表示を更新する

GET の例

http://localhost/~masui/calc.html https://gyazo.com/64366bc955d84addbf4fb68290af1ab5

code:calc.html

</form>

サーバに送られる文字列

code:get.txt

GET /calc.cgi?exp=3%2B4 HTTP/1.1

Host: pitecan.com

User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; ja-JP-mac; rv:1.9.0.8) Gecko/2009032608 Firefox/3.0.8

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: ja,en-us;q=0.7,en;q=0.3

Accept-Encoding: gzip,deflate

Accept-Charset: UTF-8,*

Keep-Alive: 300

Connection: keep-alive

Webの通信

http://gyazo.com/4fe5e73511ea1909e61e437e06a50056.png

POST の例

code:post.html

</form>

サーバに送られる文字列

code:post.txt

POST /calc.cgi HTTP/1.1

Host: pitecan.com

User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; ja-JP-mac; rv:1.9.0.8) Gecko/2009032608 Firefox/3.0.8

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: ja,en-us;q=0.7,en;q=0.3

Accept-Encoding: gzip,deflate

Accept-Charset: UTF-8,*

Keep-Alive: 300

Connection: keep-alive

Content-Type: application/x-www-form-urlencoded

Content-Length: 9

color=yellow>exp=3%2B4

CGIプログラムに渡される情報

環境変数のリスト

code:envvars.txt

HTTP_HOST pitecan.com

HTTP_USER_AGENT Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; ja-JP-mac; rv:1.9.0.8) Gecko/2009032608 Firefox/3.0.8

HTTP_ACCEPT text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

HTTP_ACCEPT_LANGUAGE ja,en-us;q=0.7,en;q=0.3

HTTP_ACCEPT_ENCODING gzip,deflate

HTTP_ACCEPT_CHARSET UTF-8,*

HTTP_KEEP_ALIVE 300

HTTP_CONNECTION keep-alive

HTTP_CACHE_CONTROL max-age=0

PATH /sbin:/usr/sbin:/bin:/usr/bin

SERVER_SIGNATURE <address>Apache/2.2.9 (Fedora) Server at pitecan.com Port 80</address>

SERVER_SOFTWARE Apache/2.2.9 (Fedora)

SERVER_NAME pitecan.com

SERVER_ADDR 210.143.110.224

SERVER_PORT 80

REMOTE_ADDR 133.27.61.16

DOCUMENT_ROOT /www/www.pitecan.com

SCRIPT_FILENAME /env.cgi

REMOTE_PORT 60478

GATEWAY_INTERFACE CGI/1.1

SERVER_PROTOCOL HTTP/1.1

REQUEST_METHOD GET

QUERY_STRING exp=123+456

REQUEST_URI /env.cgi?exp=123+456

SCRIPT_NAME /env.cgi

Webの通信

http://gyazo.com/4fe5e73511ea1909e61e437e06a50056.png

CGIプログラム

データベースにアクセスして情報を取得/変更

e.g. Amazon, Google, ...

あらゆる計算

Webサーバが返す形式の例

code:http;txt

Http/1.1 200 OK

Date: Sun, 11 Jan 2004 16:06:23 GMT

Server: Apache/1.3.22 (Unix) (Red-Hat/Linux)

Last-Modified: Sun, 07 Dec 2003 12:34:18 GMT

ETag: "1dba6-131b-3fd31e4a"

Accept-Ranges: bytes

Content-Length: 3

Keep-Alive: timeout=15, max=100

Connection: Keep-Alive

Content-Type: text/html

579

Webの通信

http://gyazo.com/4fe5e73511ea1909e61e437e06a50056.png

Webサーバの仕事

クライアントからの要求を解析

必要があればCGIプログラムを呼び出し、その出力をクライアントに返す

またはJavaサーブレットなどを動かし、その出力をクライアントに返す

CGIプログラムがやるべきこと

1. ユーザからの要求を解釈

2. 何らかの計算

3. 結果をHTMLなどの形式に変換してサーバに返す

CGIプログラムの作り方

自力で全部作る

ライブラリを活用しまくる

フレームワークを使う

全部自分で書く場合

code:calc.rb

#! /usr/bin/ruby

# Get request string

method = ENV'REQUEST_METHOD'

if method == 'GET' then

data = ENV'QUERY_STRING'

elsif method == 'POST' then

data = STDIN.read(ENV'CONTENT_LENGTH'.to_i)

end

# Calculation

data =~ /exp=(.*)$/

exp = $1.sub(/%(..)/){ $1.pack('H*') }

result = eval(exp)

# Output

print "Content-type: text/plain\r\n\r\n"

print "#{result}\r\n"

ライブラリを使う場合

code:cgi.rb

#! /usr/bin/ruby

require 'cgi'

cgi = CGI.new('html3')

exp = cgi.params'exp'0

result = eval(exp)

cgi.out { result.to_s }

Webアプリケーションフレームワーク(WAF)

WebObjects (Objective-C, Java)

Django (Python)

Struts (Java)

Ruby on Rails (Ruby)

Sinatra (Ruby)

Express (Node.js)

Angular (Javascript)

React.js (Javascript)

Vue.js (Javascript)

面倒なプログラミングを簡単化する

Webサーバプログラミングの面倒なところ

パラメタの解釈

HTMLの出力

状態の保持

ログイン情報の保持、etc.

データベースの扱い

フレームワークでこれらを解決

WebObjects

https://gyazo.com/27487c266e35c7abbfc72858080f6b2e

1996 世界初のアプリケーションサーバとしてNeXTが開発

アップルがNeXT買収 WebObjectsは5万ドル

2000 699ドル(!)に値下げ

2001 OSX Server販売により実質無料に

2006 開発ツール終焉

2007 Rails環境がMacに標準装備

2008 Appleが提供中止

WebObjects

https://www.youtube.com/watch?v=DmCu97u35Ek

フレームワークがやってくれること

DBアクセス

O/Rマッピング

HTMLテンプレート

URLマッピング

その他

認証、セキュリティ

セッションの保持

Ajax対応

キャッシュ処理

Sinatraの利用例

code:sinatra.rb

require 'sinatra'

get '/' do

'Hello world!'

end

Sinatraの利用例

code:sinatra.rb

require 'sinatra'

get '/' do

'Hello world!'

end

get '/hello/:name' do

"Hello #{params:name}!"

end

PaaS

Platform as a Service

SinatraやRailsを動かす場所を提供

e.g. Heroku

フレームワークの問題点

重厚長大

様々なシステムが必要

Ruby, SQL, ...

本質的でない沢山のことを覚える必要がある

特殊な記法、コンベンション

遅い場合もある

いろんな処理をするので直書きよりは遅い

でも泣きながら使うことになる

e.g. LaTeX

単純なフレームワークに人気が出てきている

e.g. Sinatra, Express

最近のWebサービス開発

✖ 自前サーバ

✖ レンタルサーバ

GitHub + heroku

Twelve-factor App

最近のWebサービス開発のオキテ

https://gyazo.com/3c4c514d780d3c35674cb460e34c4aa7 https://12factor.net/ja/

どういう運用が良いか?

Apache + mod_passenger + Sinatra

簡単に立ち上げ

Apache + mod_passenger + Rails

ユーザが多い

重厚長大

Nginx

Nginx + Express (Node.js)

Puma

単純にWebサーバを立ち上げる

Firebase

Heroku