python project (3)

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プログラミングの基礎３種の神器

2014/03/284

Webプログラミングの基礎

• Webプログラミングでは，「サーバ」と「クライアント」が必ず存在

• ３種の神器

• 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 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:……

リクエスト

レスポンス

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ページを表示するだけ

（なにもしない）

PHPプログラムが動作

高性能なのに何もしていない

CGIとPHPの問題点

• サーバの負荷が大きい

• 100万回アクセスがあれば100万回プログラムを実行

• 単純な処理であればあるほどこのコストはバカらしい

• [例] 現在時刻を表示• 1秒毎にサーバとデータをやりとり

• コスト：問い合わせ，プログラムの実行，データの返却

• 簡単な処理ならクライアントでさせればいい

• 時刻情報ならクライアント自身も持っている

2014/03/28 14

JavaScript

• クライアントサイド（ブラウザ上）で動作するプログラム

• jQueryなど便利なライブラリも充実

2014/03/28 15


WebブラウザでWebページを表示静的なファイルを

ただ配布するだけ

JavaScript

Ajax: Asynchronous JavaScript + XML

• 必要なデータのみサーバから取得し，それをクライアントで加工し表示する技術

• 非同期処理

• やりとりするデータの形式はJSON

2014/03/28 16


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.pyBottle 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


<b>Hello nakamura</b>!

port8080をリッスンポートとして設定

/hello/nameへのアクセスに対してのみデータを返す

それ以外のアクセスは

404 Not found

GET /hello/name HTTP/1.1

localhost:8080/hello/nameにアクセス

python project (3)

Technology