SlideShare a Scribd company logo
PYTHON PROJECT (3)
DEVELOPMENT OF WEB APPLICATIONS FOR INNOVATION CAFÉ
TATSUYA NAKAMURA
今日の内容
• Web開発の基礎の基礎
• 概念的なお話
[参考文献]
• “Web開発の基礎 徹底攻略”,
WEB+DB PRESS plus
• 初心者は持っていて損はない本だと思います.
2014/03/28 2
Webサービスの構成
2014/03/28 3
ユーザ
クライアント サーバ
(Webサーバ)
データベース
プログラム プログラム
WEBプログラミングの
基礎
3種の神器
2014/03/284
Webプログラミングの基礎
• Webプログラミングでは,
「サーバ」と「クライアント」が必ず存在
• 3種の神器
• URI
• HTTP
• HTML
2014/03/28 5
クライアント サーバ
クライアント
プログラム
サーバ
プログラム
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
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:
…
…
リクエスト
レスポンス
HTML: Hypertext Markup Language
• データをどう表現するのか
• 要素をタグで囲んで定義(<a>タグで囲まれたテキストはリ
ンク)
• HTML以外の言語もHTMLの中に記述可能(JavaScript, PHP
等)
• CSS
• デザインのための言語(?)
• JavaScript
• Webページを動かすためのプログラミング言語
2014/03/28 8
開発言語
CGIからAJAXへ
2014/03/289
Q&A
• Q:「Webプログラミングを始めたいんだけど,どの言語がい
いの?」
• A:「使いやすいやつを使えばいいよ」
2014/03/28 10
Q. もう少し詳しく…
• 自分の得意な言語
• 基本的に新しい言語は学習コストが高い
• 目的に合った機能を簡単に実装できる言語
• 導入が簡単,ライブラリ・レファレンスが充実
• 聞いたら答えが返ってきそうな人が使っている言語
• ほどほどに!
2014/03/28 11
CGI: Common Gateway Interface
• Webサーバ外で動作するプログラム
• 入出力(インタフェース)が正しければ開発言語は自由
2014/03/28 12
クライアント
Webサーバ
静的なWebページを
表示するだけ
(なにもしない)
CGIプログラムの
出力を返す
CGI
プログラム
標準入力
標準出力
プログラムの
ほとんどはHTML
PHP: Hypertext Preprocessor
• Webサーバ自身がプログラムを実行できるように拡張
• HTMLの中に直接記述(<?php と ?>で囲む)
2014/03/28 132014/03/28
クライアント
Webサーバ
Webページを
表示するだけ
(なにもしない)
PHPプログラム
が動作
高性能なのに
何もしていない
CGIとPHPの問題点
• サーバの負荷が大きい
• 100万回アクセスがあれば100万回プログラムを実行
• 単純な処理であればあるほどこのコストはバカらしい
• [例] 現在時刻を表示
• 1秒毎にサーバとデータをやりとり
• コスト:問い合わせ,プログラムの実行,データの返却
• 簡単な処理ならクライアントでさせればいい
• 時刻情報ならクライアント自身も持っている
2014/03/28 14
JavaScript
• クライアントサイド(ブラウザ上)で動作するプログラム
• jQueryなど便利なライブラリも充実
2014/03/28 15
クライアント
Webサーバ
Webブラウザで
Webページを表示 静的なファイルを
ただ配布するだけ
JavaScript
Ajax: Asynchronous JavaScript + XML
• 必要なデータのみサーバから取得し,
それをクライアントで加工し表示する技術
• 非同期処理
• やりとりするデータの形式はJSON
2014/03/28 16
クライアント
Webサーバ
Webブラウザで
Webページを表示
CGI, PHPが動作
JavaScript
JSON
まとめと演習
正直キリがない
2014/03/2817
概念はだいたいわかったと思うので…
• 後は,「習うより慣れろ」
• プログラミングは手を動かさないと身につかない
• Python Projectの構成
• クライアントサイド:JavaScript
• 動的なページを作るかどうかにも関わってきますが…
• サーバサイド:Python + bottlepy
• bottlepy: サーバを簡単に構築できるライブラリ
• 詳しくは後述
2014/03/28 18
bottlepyのインストール
• easy_installのインストール(済)
• pipのインストール
• Pythonのパッケージ管理システム
• bottlepyのインストール
• 確認
2014/03/28 19
c:> easy_install pip
c:> pip install bottle
c:> python
>>> import bottle
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/自分の名前 にアクセス)
仕組み
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
にアクセス

More Related Content

PDF
月間 250 億 imps 配信するために fluct が考えていること!
PPTX
はじめよう、firebase
PDF
Azure概要とハイブリッドWebサイトとか / 2014.09.27
PPTX
Asp.netとbluemixで遊んでみたお話
KEY
1Day works shop
PPTX
wordcamp haneda 20190420 Apps Based on WordPress
PDF
クラウド時代だからこそ見直したい
PHPアプリケーションのパフォーマンスチューニング
PDF
SPA時代のOGPとの戦い方
月間 250 億 imps 配信するために fluct が考えていること!
はじめよう、firebase
Azure概要とハイブリッドWebサイトとか / 2014.09.27
Asp.netとbluemixで遊んでみたお話
1Day works shop
wordcamp haneda 20190420 Apps Based on WordPress
クラウド時代だからこそ見直したい
PHPアプリケーションのパフォーマンスチューニング
SPA時代のOGPとの戦い方

What's hot (8)

PDF
Innovation eggcloudnative
PPTX
FirebaseとSPAでOGPに動的対応
PPTX
Step functionsとaws batchでオーケストレートするイベントドリブンな機械学習基盤
PDF
WordBench Saitama vol.6
PPTX
500+のサーバーで動く LINE Ads PlatformをささえるSpring
PDF
R○Sに学ぶイマドキのMySQL構築運用
PDF
Amazon GameLift FlexMatch
PDF
BluetoothメッシュによるIoTシステムを支えるサーバーレス技術 #serverlesstokyo
Innovation eggcloudnative
FirebaseとSPAでOGPに動的対応
Step functionsとaws batchでオーケストレートするイベントドリブンな機械学習基盤
WordBench Saitama vol.6
500+のサーバーで動く LINE Ads PlatformをささえるSpring
R○Sに学ぶイマドキのMySQL構築運用
Amazon GameLift FlexMatch
BluetoothメッシュによるIoTシステムを支えるサーバーレス技術 #serverlesstokyo
Ad

Viewers also liked (20)

PDF
リアルタイムweb入門
PDF
Learn Http Requests & Responses for Test Engineer
PDF
Python を使ってカメリオを高速化した話
ODP
Wxasyncweb
PDF
非同期プログラミング養成ギブスとしてのNode.js
PDF
非同期の時代がやってくる!
PDF
スクレイピングとPython
PPTX
Python札幌201406
PDF
いまさら恥ずかしくてAsyncをawaitした
PDF
これからの「async/await」の話をしよう
PDF
async/awaitダークサイド is 何
PDF
Pythonによる非同期プログラミング入門
PDF
Pythonによるソーシャルデータ分析―わたしはこうやって修士号を取得しました―
PPTX
非同期処理の基礎
PDF
IYF Building Nextgen Infotainment & Telematics Systems
PPTX
Total physical response
PDF
Fourth Quarter and Full Year 2013 Global ISG Outsourcing Index
PDF
SMART International Symposium for Next Generation Infrastructure: Estimating ...
PDF
Managing Service Providers for Today’s Digital Business
PPT
Psalm 130
リアルタイムweb入門
Learn Http Requests & Responses for Test Engineer
Python を使ってカメリオを高速化した話
Wxasyncweb
非同期プログラミング養成ギブスとしてのNode.js
非同期の時代がやってくる!
スクレイピングとPython
Python札幌201406
いまさら恥ずかしくてAsyncをawaitした
これからの「async/await」の話をしよう
async/awaitダークサイド is 何
Pythonによる非同期プログラミング入門
Pythonによるソーシャルデータ分析―わたしはこうやって修士号を取得しました―
非同期処理の基礎
IYF Building Nextgen Infotainment & Telematics Systems
Total physical response
Fourth Quarter and Full Year 2013 Global ISG Outsourcing Index
SMART International Symposium for Next Generation Infrastructure: Estimating ...
Managing Service Providers for Today’s Digital Business
Psalm 130
Ad

Similar to Python Project (3) (20)

PPTX
勉強会資料①
PDF
ゆるべん Webアプリ開発概要 20130127
 
PDF
Introduction to web development 1
PPT
Albatross
PPT
Cockatoo
PDF
Webの仕組みとプログラミング言語
PPT
Lesson01
 
PPTX
Webプログラミング入門
PPTX
Webプログラミング入門
PDF
これからはじめるインフラエンジニア
PPTX
エンジニアという職業について
KEY
Web App Framework at SwapSkills vol28
PDF
【17-A-5】ウェブアーキテクチャの歴史と未来
PDF
第21回Creators MeetUp
PPT
Webサーバの基礎知識【編集済み】
PDF
Web development fundamental
PDF
Web development fundamental_v2
PDF
Webとは何か
PDF
Mvc conf session_3_takehara
PDF
WTM52 あなたの作ったWEBサイト、生きてますか?
勉強会資料①
ゆるべん Webアプリ開発概要 20130127
 
Introduction to web development 1
Albatross
Cockatoo
Webの仕組みとプログラミング言語
Lesson01
 
Webプログラミング入門
Webプログラミング入門
これからはじめるインフラエンジニア
エンジニアという職業について
Web App Framework at SwapSkills vol28
【17-A-5】ウェブアーキテクチャの歴史と未来
第21回Creators MeetUp
Webサーバの基礎知識【編集済み】
Web development fundamental
Web development fundamental_v2
Webとは何か
Mvc conf session_3_takehara
WTM52 あなたの作ったWEBサイト、生きてますか?

Python Project (3)