python project (3)
DESCRIPTION
Python Project (3) Humanware Innovation ProgramTRANSCRIPT
![Page 1: Python Project (3)](https://reader034.vdocuments.mx/reader034/viewer/2022052213/55962f6a1a28abc11f8b4570/html5/thumbnails/1.jpg)
PYTHON PROJECT (3)DEVELOPMENT OF WEB APPLICATIONS FOR INNOVATION CAFÉTATSUYA NAKAMURA
![Page 2: Python Project (3)](https://reader034.vdocuments.mx/reader034/viewer/2022052213/55962f6a1a28abc11f8b4570/html5/thumbnails/2.jpg)
今日の内容
• Web開発の基礎の基礎
• 概念的なお話
[参考文献]
• “Web開発の基礎徹底攻略”,WEB+DB PRESS plus
• 初心者は持っていて損はない本だと思います.
2014/03/28 2
![Page 3: Python Project (3)](https://reader034.vdocuments.mx/reader034/viewer/2022052213/55962f6a1a28abc11f8b4570/html5/thumbnails/3.jpg)
Webサービスの構成
2014/03/28 3
ユーザ
クライアント サーバ(Webサーバ)
データベース
プログラム プログラム
![Page 4: Python Project (3)](https://reader034.vdocuments.mx/reader034/viewer/2022052213/55962f6a1a28abc11f8b4570/html5/thumbnails/4.jpg)
WEBプログラミングの基礎3種の神器
2014/03/284
![Page 5: Python Project (3)](https://reader034.vdocuments.mx/reader034/viewer/2022052213/55962f6a1a28abc11f8b4570/html5/thumbnails/5.jpg)
Webプログラミングの基礎
• Webプログラミングでは,「サーバ」と「クライアント」が必ず存在
• 3種の神器
• URI
• HTTP
• HTML
2014/03/28 5
クライアント サーバ
クライアントプログラム
サーバプログラム
![Page 6: Python Project (3)](https://reader034.vdocuments.mx/reader034/viewer/2022052213/55962f6a1a28abc11f8b4570/html5/thumbnails/6.jpg)
URI: Uniform Resource Identifier
• データがどこにあるのか
• 簡単に言うと,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
![Page 7: Python Project (3)](https://reader034.vdocuments.mx/reader034/viewer/2022052213/55962f6a1a28abc11f8b4570/html5/thumbnails/7.jpg)
HTTP: Hypertext Transfer Protocol
• データをどう取得するのか
2014/03/28 7
$ telnet google.co.jp 80Trying 74.125.235.183...Connected to google.co.jp.Escape character is '^]'.HEAD / HTTP/1.1Host: www.google.co.jp
HTTP/1.1 200 OKDate: Sun, 23 Mar 2014 05:57:20 GMTExpires: -1Cache-Control: private, max-age=0Content-Type: text/html; charset=Shift_JISSet-Cookie:……
リクエスト
レスポンス
![Page 8: Python Project (3)](https://reader034.vdocuments.mx/reader034/viewer/2022052213/55962f6a1a28abc11f8b4570/html5/thumbnails/8.jpg)
HTML: Hypertext Markup Language
• データをどう表現するのか
• 要素をタグで囲んで定義(<a>タグで囲まれたテキストはリンク)
• HTML以外の言語もHTMLの中に記述可能(JavaScript, PHP等)
• CSS
• デザインのための言語(?)
• JavaScript
• Webページを動かすためのプログラミング言語2014/03/28 8
![Page 9: Python Project (3)](https://reader034.vdocuments.mx/reader034/viewer/2022052213/55962f6a1a28abc11f8b4570/html5/thumbnails/9.jpg)
開発言語CGIからAJAXへ
2014/03/289
![Page 10: Python Project (3)](https://reader034.vdocuments.mx/reader034/viewer/2022052213/55962f6a1a28abc11f8b4570/html5/thumbnails/10.jpg)
Q&A
• Q:「Webプログラミングを始めたいんだけど,どの言語がいいの?」
• A:「使いやすいやつを使えばいいよ」
2014/03/28 10
![Page 11: Python Project (3)](https://reader034.vdocuments.mx/reader034/viewer/2022052213/55962f6a1a28abc11f8b4570/html5/thumbnails/11.jpg)
Q. もう少し詳しく…
• 自分の得意な言語
• 基本的に新しい言語は学習コストが高い
• 目的に合った機能を簡単に実装できる言語
• 導入が簡単,ライブラリ・レファレンスが充実
• 聞いたら答えが返ってきそうな人が使っている言語
• ほどほどに!
2014/03/28 11
![Page 12: Python Project (3)](https://reader034.vdocuments.mx/reader034/viewer/2022052213/55962f6a1a28abc11f8b4570/html5/thumbnails/12.jpg)
CGI: Common Gateway Interface
• Webサーバ外で動作するプログラム
• 入出力(インタフェース)が正しければ開発言語は自由
2014/03/28 12
クライアントWebサーバ
静的なWebページを表示するだけ
(なにもしない)
CGIプログラムの出力を返す
CGIプログラム
標準入力
標準出力
プログラムのほとんどはHTML
![Page 13: Python Project (3)](https://reader034.vdocuments.mx/reader034/viewer/2022052213/55962f6a1a28abc11f8b4570/html5/thumbnails/13.jpg)
PHP: Hypertext Preprocessor
• Webサーバ自身がプログラムを実行できるように拡張
• HTMLの中に直接記述(<?php と ?>で囲む)
2014/03/28 132014/03/28
クライアントWebサーバ
Webページを表示するだけ
(なにもしない)
PHPプログラムが動作
高性能なのに何もしていない
![Page 14: Python Project (3)](https://reader034.vdocuments.mx/reader034/viewer/2022052213/55962f6a1a28abc11f8b4570/html5/thumbnails/14.jpg)
CGIとPHPの問題点
• サーバの負荷が大きい
• 100万回アクセスがあれば100万回プログラムを実行
• 単純な処理であればあるほどこのコストはバカらしい
• [例] 現在時刻を表示• 1秒毎にサーバとデータをやりとり
• コスト:問い合わせ,プログラムの実行,データの返却
• 簡単な処理ならクライアントでさせればいい
• 時刻情報ならクライアント自身も持っている
2014/03/28 14
![Page 15: Python Project (3)](https://reader034.vdocuments.mx/reader034/viewer/2022052213/55962f6a1a28abc11f8b4570/html5/thumbnails/15.jpg)
JavaScript
• クライアントサイド(ブラウザ上)で動作するプログラム
• jQueryなど便利なライブラリも充実
2014/03/28 15
クライアントWebサーバ
WebブラウザでWebページを表示 静的なファイルを
ただ配布するだけ
JavaScript
![Page 16: Python Project (3)](https://reader034.vdocuments.mx/reader034/viewer/2022052213/55962f6a1a28abc11f8b4570/html5/thumbnails/16.jpg)
Ajax: Asynchronous JavaScript + XML
• 必要なデータのみサーバから取得し,それをクライアントで加工し表示する技術
• 非同期処理
• やりとりするデータの形式はJSON
2014/03/28 16
クライアントWebサーバ
WebブラウザでWebページを表示
CGI, PHPが動作
JavaScript
JSON
![Page 17: Python Project (3)](https://reader034.vdocuments.mx/reader034/viewer/2022052213/55962f6a1a28abc11f8b4570/html5/thumbnails/17.jpg)
まとめと演習正直キリがない
2014/03/2817
![Page 18: Python Project (3)](https://reader034.vdocuments.mx/reader034/viewer/2022052213/55962f6a1a28abc11f8b4570/html5/thumbnails/18.jpg)
概念はだいたいわかったと思うので…
• 後は,「習うより慣れろ」
• プログラミングは手を動かさないと身につかない
• Python Projectの構成
• クライアントサイド:JavaScript• 動的なページを作るかどうかにも関わってきますが…
• サーバサイド:Python + bottlepy• bottlepy: サーバを簡単に構築できるライブラリ
• 詳しくは後述
2014/03/28 18
![Page 19: Python Project (3)](https://reader034.vdocuments.mx/reader034/viewer/2022052213/55962f6a1a28abc11f8b4570/html5/thumbnails/19.jpg)
bottlepyのインストール
• easy_installのインストール(済)
• pipのインストール
• Pythonのパッケージ管理システム
• bottlepyのインストール
• 確認
2014/03/28 19
c:\> easy_install pip
c:\> pip install bottle
c:\> python>>> import bottle
![Page 20: Python Project (3)](https://reader034.vdocuments.mx/reader034/viewer/2022052213/55962f6a1a28abc11f8b4570/html5/thumbnails/20.jpg)
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.pyBottle v0.12.5 server starting up (using WSGIRefServer())...Listening on http://localhost:8080/Hit Ctrl-C to quit.
(実行後,http://localhost:8080/hello/自分の名前 にアクセス)
![Page 21: Python Project (3)](https://reader034.vdocuments.mx/reader034/viewer/2022052213/55962f6a1a28abc11f8b4570/html5/thumbnails/21.jpg)
仕組み
2014/03/28 21
クライアントWebサーバ
<b>Hello nakamura</b>!
port8080をリッスンポートとして設定
/hello/nameへのアクセスに対してのみデータを返す
それ以外のアクセスは
404 Not found
GET /hello/name HTTP/1.1
localhost:8080/hello/nameにアクセス