SlideShare a Scribd company logo
1 of 21
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

What's hot

What's hot (8)

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

Viewers also liked

非同期プログラミング養成ギブスとしてのNode.js
非同期プログラミング養成ギブスとしてのNode.js非同期プログラミング養成ギブスとしてのNode.js
非同期プログラミング養成ギブスとしてのNode.js
Tajima Itsuro
 
Python札幌201406
Python札幌201406Python札幌201406
Python札幌201406
Shinya Okano
 
Pythonによるソーシャルデータ分析―わたしはこうやって修士号を取得しました―
Pythonによるソーシャルデータ分析―わたしはこうやって修士号を取得しました―Pythonによるソーシャルデータ分析―わたしはこうやって修士号を取得しました―
Pythonによるソーシャルデータ分析―わたしはこうやって修士号を取得しました―
Hisao Soyama
 
Total physical response
Total physical responseTotal physical response
Total physical response
Deny Mc
 

Viewers also liked (20)

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

Similar to Python Project (3)

「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
Yusuke Wada
 
クラウド運用のためのストリームマイニング
クラウド運用のためのストリームマイニングクラウド運用のためのストリームマイニング
クラウド運用のためのストリームマイニング
Shin Matsumoto
 
Twitter クライアント開発のすすめ #twtr_hack
Twitter クライアント開発のすすめ #twtr_hackTwitter クライアント開発のすすめ #twtr_hack
Twitter クライアント開発のすすめ #twtr_hack
Mocel Mocelic
 
クラウドコンピューティングでつくるビッグデータ解析のいまとこれから
クラウドコンピューティングでつくるビッグデータ解析のいまとこれからクラウドコンピューティングでつくるビッグデータ解析のいまとこれから
クラウドコンピューティングでつくるビッグデータ解析のいまとこれから
Shohei Kobayashi
 
ゆるべん Webアプリ開発概要 20130127
ゆるべん Webアプリ開発概要 20130127ゆるべん Webアプリ開発概要 20130127
ゆるべん Webアプリ開発概要 20130127
Y
 
AWS における Microservices Architecture と DevOps を推進する組織と人とツール
AWS における Microservices Architecture と DevOps を推進する組織と人とツールAWS における Microservices Architecture と DevOps を推進する組織と人とツール
AWS における Microservices Architecture と DevOps を推進する組織と人とツール
Amazon Web Services Japan
 

Similar to Python Project (3) (20)

【資料】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】
【資料】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】【資料】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】
【資料】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】
 
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
 
App013 ここはあえて紙と
App013 ここはあえて紙とApp013 ここはあえて紙と
App013 ここはあえて紙と
 
App013 ここはあえて紙と
App013 ここはあえて紙とApp013 ここはあえて紙と
App013 ここはあえて紙と
 
クラウド運用のためのストリームマイニング
クラウド運用のためのストリームマイニングクラウド運用のためのストリームマイニング
クラウド運用のためのストリームマイニング
 
クラウドを積極活用した サービスの開発のために
クラウドを積極活用したサービスの開発のためにクラウドを積極活用したサービスの開発のために
クラウドを積極活用した サービスの開発のために
 
ASP.NET Core 概要(2017年3月時点)
ASP.NET Core 概要(2017年3月時点)ASP.NET Core 概要(2017年3月時点)
ASP.NET Core 概要(2017年3月時点)
 
[db tech showcase Tokyo 2015] E27: Neo4jグラフデータベース by クリエーションライン株式会社 李昌桓
[db tech showcase Tokyo 2015] E27: Neo4jグラフデータベース by クリエーションライン株式会社 李昌桓[db tech showcase Tokyo 2015] E27: Neo4jグラフデータベース by クリエーションライン株式会社 李昌桓
[db tech showcase Tokyo 2015] E27: Neo4jグラフデータベース by クリエーションライン株式会社 李昌桓
 
Twitter クライアント開発のすすめ #twtr_hack
Twitter クライアント開発のすすめ #twtr_hackTwitter クライアント開発のすすめ #twtr_hack
Twitter クライアント開発のすすめ #twtr_hack
 
クラウドコンピューティングでつくるビッグデータ解析のいまとこれから
クラウドコンピューティングでつくるビッグデータ解析のいまとこれからクラウドコンピューティングでつくるビッグデータ解析のいまとこれから
クラウドコンピューティングでつくるビッグデータ解析のいまとこれから
 
今なぜサーバーレスなのか
今なぜサーバーレスなのか今なぜサーバーレスなのか
今なぜサーバーレスなのか
 
One step of first to a cloud
One step of first to a cloudOne step of first to a cloud
One step of first to a cloud
 
ゆるべん Webアプリ開発概要 20130127
ゆるべん Webアプリ開発概要 20130127ゆるべん Webアプリ開発概要 20130127
ゆるべん Webアプリ開発概要 20130127
 
RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話
 
データ分析基盤におけるOpsのためのDev with event driven + serverless
データ分析基盤におけるOpsのためのDev with event driven + serverlessデータ分析基盤におけるOpsのためのDev with event driven + serverless
データ分析基盤におけるOpsのためのDev with event driven + serverless
 
AWS における Microservices Architecture と DevOps を推進する組織と人とツール
AWS における Microservices Architecture と DevOps を推進する組織と人とツールAWS における Microservices Architecture と DevOps を推進する組織と人とツール
AWS における Microservices Architecture と DevOps を推進する組織と人とツール
 
WebIntentsにより拓かれる次のWeb
WebIntentsにより拓かれる次のWebWebIntentsにより拓かれる次のWeb
WebIntentsにより拓かれる次のWeb
 
大規模サービスにおける価値開発の“これまで”と“将来”~新たな“じゃらんnet”のチャレンジに関して~
大規模サービスにおける価値開発の“これまで”と“将来”~新たな“じゃらんnet”のチャレンジに関して~大規模サービスにおける価値開発の“これまで”と“将来”~新たな“じゃらんnet”のチャレンジに関して~
大規模サービスにおける価値開発の“これまで”と“将来”~新たな“じゃらんnet”のチャレンジに関して~
 
PythonによるWebスクレイピング入門
PythonによるWebスクレイピング入門PythonによるWebスクレイピング入門
PythonによるWebスクレイピング入門
 
DB設計
DB設計DB設計
DB設計
 

Recently uploaded

Recently uploaded (12)

Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 

Python Project (3)