Download to read offline
![今日の内容
• Web開発の基礎の基礎
• 概念的なお話
[参考文献]
• “Web開発の基礎 徹底攻略”,
WEB+DB PRESS plus
• 初心者は持っていて損はない本だと思います．
2014/03/28 2](https://image.slidesharecdn.com/pp03-140325040636-phpapp01/85/Python-Project-3-2-320.jpg)
![HTTP: Hypertext Transfer Protocol
• データをどう取得するのか
2014/03/28 7
$ telnet google.co.jp 80
Trying 74.125.235.183...
Connected to google.co.jp.
Escape character is '^]'.
HEAD / HTTP/1.1
Host: www.google.co.jp
HTTP/1.1 200 OK
Date: Sun, 23 Mar 2014 05:57:20 GMT
Expires: -1
Cache-Control: private, max-age=0
Content-Type: text/html; charset=Shift_JIS
Set-Cookie:
…
…
リクエスト
レスポンス](https://image.slidesharecdn.com/pp03-140325040636-phpapp01/85/Python-Project-3-7-320.jpg)
![CGIとPHPの問題点
• サーバの負荷が大きい
• 100万回アクセスがあれば100万回プログラムを実行
• 単純な処理であればあるほどこのコストはバカらしい
• [例] 現在時刻を表示
• 1秒毎にサーバとデータをやりとり
• コスト：問い合わせ，プログラムの実行，データの返却
• 簡単な処理ならクライアントでさせればいい
• 時刻情報ならクライアント自身も持っている
2014/03/28 14](https://image.slidesharecdn.com/pp03-140325040636-phpapp01/85/Python-Project-3-14-320.jpg)
More Related Content
Python Project (3)
- 1. PYTHON PROJECT (3) DEVELOPMENTOF WEB APPLICATIONS FOR INNOVATION CAFÉ TATSUYA NAKAMURA
- 2. 今日の内容 • Web開発の基礎の基礎 • 概念的なお話 [参考文献] •“Web開発の基礎 徹底攻略”, WEB+DB PRESS plus • 初心者は持っていて損はない本だと思います． 2014/03/28 2
- 3.
- 4.
- 5. Webプログラミングの基礎 • Webプログラミングでは， 「サーバ」と「クライアント」が必ず存在 • ３種の神器 •URI • HTTP • HTML 2014/03/28 5 クライアント サーバ クライアント プログラム サーバ プログラム
- 6. URI: Uniform ResourceIdentifier • データがどこにあるのか • 簡単に言うと，Webサイトのアドレス (例) Google検索: https://www.google.co.jp/search?q=HWIP • https:// データの取得方法（Scheme） • www.google.co.jp サーバの名前（host） • /search サーバ内の位置（path） • ?q=HWIP 検索条件（query） 2014/03/28 6
- 7. HTTP: Hypertext TransferProtocol • データをどう取得するのか 2014/03/28 7 $ telnet google.co.jp 80 Trying 74.125.235.183... Connected to google.co.jp. Escape character is '^]'. HEAD / HTTP/1.1 Host: www.google.co.jp HTTP/1.1 200 OK Date: Sun, 23 Mar 2014 05:57:20 GMT Expires: -1 Cache-Control: private, max-age=0 Content-Type: text/html; charset=Shift_JIS Set-Cookie: … … リクエスト レスポンス
- 8. HTML: Hypertext MarkupLanguage • データをどう表現するのか • 要素をタグで囲んで定義（<a>タグで囲まれたテキストはリ ンク） • HTML以外の言語もHTMLの中に記述可能（JavaScript, PHP 等） • CSS • デザインのための言語（？） • JavaScript • Webページを動かすためのプログラミング言語 2014/03/28 8
- 9.
- 10.
- 11. Q. もう少し詳しく… • 自分の得意な言語 •基本的に新しい言語は学習コストが高い • 目的に合った機能を簡単に実装できる言語 • 導入が簡単，ライブラリ・レファレンスが充実 • 聞いたら答えが返ってきそうな人が使っている言語 • ほどほどに！ 2014/03/28 11
- 12. CGI: Common GatewayInterface • Webサーバ外で動作するプログラム • 入出力（インタフェース）が正しければ開発言語は自由 2014/03/28 12 クライアント Webサーバ 静的なWebページを 表示するだけ （なにもしない） CGIプログラムの 出力を返す CGI プログラム 標準入力 標準出力 プログラムの ほとんどはHTML
- 13. PHP: Hypertext Preprocessor •Webサーバ自身がプログラムを実行できるように拡張 • HTMLの中に直接記述（<?php と ?>で囲む） 2014/03/28 132014/03/28 クライアント Webサーバ Webページを 表示するだけ （なにもしない） PHPプログラム が動作 高性能なのに 何もしていない
- 14. CGIとPHPの問題点 • サーバの負荷が大きい • 100万回アクセスがあれば100万回プログラムを実行 •単純な処理であればあるほどこのコストはバカらしい • [例] 現在時刻を表示 • 1秒毎にサーバとデータをやりとり • コスト：問い合わせ，プログラムの実行，データの返却 • 簡単な処理ならクライアントでさせればいい • 時刻情報ならクライアント自身も持っている 2014/03/28 14
- 15. JavaScript • クライアントサイド（ブラウザ上）で動作するプログラム • jQueryなど便利なライブラリも充実 2014/03/2815 クライアント Webサーバ Webブラウザで Webページを表示 静的なファイルを ただ配布するだけ JavaScript
- 16. Ajax: Asynchronous JavaScript+ XML • 必要なデータのみサーバから取得し， それをクライアントで加工し表示する技術 • 非同期処理 • やりとりするデータの形式はJSON 2014/03/28 16 クライアント Webサーバ Webブラウザで Webページを表示 CGI, PHPが動作 JavaScript JSON
- 17.
- 18. 概念はだいたいわかったと思うので… • 後は，「習うより慣れろ」 • プログラミングは手を動かさないと身につかない •Python Projectの構成 • クライアントサイド：JavaScript • 動的なページを作るかどうかにも関わってきますが… • サーバサイド：Python + bottlepy • bottlepy: サーバを簡単に構築できるライブラリ • 詳しくは後述 2014/03/28 18
- 19. bottlepyのインストール • easy_installのインストール（済） • pipのインストール •Pythonのパッケージ管理システム • bottlepyのインストール • 確認 2014/03/28 19 c:> easy_install pip c:> pip install bottle c:> python >>> import bottle
- 20. bottlepyのサンプルプログラム 2014/03/28 20Bottlepy Reference:http://bottlepy.org/docs/0.12/ from bottle import route, run, template @route('/hello/<name>') def index(name): return template('<b>Hello {{name}}</b>!', name=name) run(host='localhost', port=8080) simple_server.py > python simple_server.py Bottle v0.12.5 server starting up (using WSGIRefServer())... Listening on http://localhost:8080/ Hit Ctrl-C to quit. (実行後，http://localhost:8080/hello/自分の名前 にアクセス)
- 21. 仕組み 2014/03/28 21 クライアント Webサーバ <b>Hello nakamura</b>! port8080を リッスンポート として設定 /hello/nameへの アクセスに対して のみデータを返す それ以外の アクセスは 404Not found GET /hello/name HTTP/1.1 localhost:8080/hello/name にアクセス