DESIGNMAP

  1. TOP
  2. 公開講座
  3. ゼロから始めるPython入門
  4. TodoリストWebアプリをつくってみよう(2)ー ゼロから始めるPython入門【Vol.20】

TodoリストWebアプリをつくってみよう(2)ー ゼロから始めるPython入門【Vol.20】

前回書いた、「db1.py」はコマンドラインから実行できるプログラムでした。今回はWebブラウザにテーブルのデータが表示するようにつくっていきます。

全体像を説明しますと、WebブラウザはWebサーバーにPythonの実行を依頼します。Webサーバーは、Pythonを実行します。Pythonは、データベースサーバーに問い合わせをして、データを取得します。処理して、データを含んだHTMLを生成します。

WebサーバーはPythonからHTMLをうけとって、Webブラウザに渡します。
Webブラウザは、そのHTMLを表示します。

今回はこの一連の流れを実際にコードを書いていきます。

CGIとは

Webサーバーが外部のプログラムを実行して、データを外部プログラムに渡して、処理データを受け取る仕組みをCGIといいます。CGIとは、Common Gateway Interfaceの略です。CGIでつかわれる言語はPythonに限りません。Webアプリケーションを作るときにでてくる用語です。

Webサーバーを起動しよう

WebサーバーはPythonにあらかじめ用意されている簡易Webサーバーを使います。

Webサーバーは起動したまま、Webブラウザからのリクエストを待ちます。実際のWebサーバーも24時間営業で、Webブラウザからのリクエストを待っている状態です。

ではWebサーバーを起動しましょう。
Windowsはコマンドプロンプト、Macはターミナルを起動して、現在位置を「python-study」フォルダに移します。

Windowsは

python -m http.server --cgi 8080

Macは

python3 -m http.server --cgi 8080

と入力して[enter]キーをおします。許可ダイアログが表示された場合は、「許可」ボタンをクリックします。

Webサーバーが起動します。
Windowsはコマンドプロンプト、Macはターミナルをみると下記のようにメッセージが表示されます。Webサーバーは営業中ですよという意味です。

Serving HTTP on 0.0.0.0 port 8080 ...

実際にWebサーバーにリクエストをしてみましょう。
と言ってもWebブラウザを使うと簡単にできます。

Google Chromeを起動します。アドレス欄に「http://localhost:8080/」と入力して[enter]キーをおします。これで自分のパソコンのWebサーバーにリクエストを送ったことになります。

下図のように、「python-study」フォルダの中が表示されます。

Windowsはコマンドプロンプト、Macはターミナルをみてください。下記のようなログが表示されています。

127.0.0.1 - - [11/Dec/2016 08:18:50] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [11/Dec/2016 08:18:50] code 404, message File not found
127.0.0.1 - - [11/Dec/2016 08:18:50] "GET /favicon.ico HTTP/1.1" 404 -

これはHTTPという通信規約です。HTTPはWebブラウザとWebサーバーの間の通信の取り決めです。HTTPがあるから、Webサーバーは多様なWebブラウザからのリクエストをさばくことができます。

WebブラウザはGETメソッドで、ファイルを要求して、Webサーバーは「code 404, message File not found」と応答しています。ファイルがないですよと答えています。なんとなく2者の間で会話していることが分かればOKです。HTTPについては『Webを支える技術 -HTTP、URI、HTML、そしてREST』という本がおすすめです。

冒頭でも書きましたがWebアプリケーションは多様な技術をつかいます。その中でもHTTPはWebアプリケーションの基礎になる技術なので、最初に勉強しておくとWebアプリケーションの勉強がはかどります。これはPythonに限らず、PHP、Java、Rubyなどで、Webアプリケーションを作るときに共通していえます。

関連記事:
HTTP、動的サイト、WordPressのブログ – まったくのゼロから、独学でWebデザイナーになるためのロードマップ 【Vol. 4】

HTTPの歴史は『Webの創成 ― World Wide Webはいかにして生まれどこに向かうのか』がおすすめです。絶版ですが図書館で読んでみてください。著者のティム・バーナーズ-リーさんは初めてWebブラウザとWebサーバーをつくり、HTTPの仕組みをつくった人です。Webの仕組みをつくった人です。

ではPythonのコードを書いていきましょう。
「python-study」フォルダ直下に「cgi-bin」というフォルダをつくります。この「cgi-bin」フォルダに、「todo.py」を作成します。

以下のコードを書きます。

#!/usr/bin/env python3

import sqlite3

conn = sqlite3.connect('todolist.db')
curs = conn.cursor()


print('Content-type: text/html')
print('')


def print_html(data=''):
    print('''\
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Todoリスト</title>
    </head>
    <body>
    <ul>
    {0}
    </ul>
    </body>
    </html>
    '''.format(data))



curs.execute('SELECT * FROM tasks')
rows = curs.fetchall()

data = ""

for id, name in rows:
    data +=  '''
    <li>{0}</li>
    '''.format(name)


print_html(data)

Google Chromeのアドレス欄に「http://localhost:8080/cgi-bin/todo.py」と入力して[enter]キーをおします。下図のように表示されれば成功です。

Macはパーミッションの設定が必要

ただしMacの方はエラーがでているはずです。
UNIX系のOSであるMacはもう一手間必要です。WebサーバーがPythonを実行するために、プログラムの実行権限を与える必要があります。

ターミナルを表示します。Webサーバーが起動しています。[シェル]メニュー→[新規ウインドウ]→[新規ウインドウ(設定を指定)Basic]をクリックします。新規のターミナルウインドウが表示されます。

chmod +x Documents/python-study/cgi-bin/todo1.py 

と入力して[enter]キーをおします。これでChromeで更新するとうまく表示されます。
このファイルの権限を変更する行為をパーミッションの設定といいます。CGIをUNIX系のOSで動作するときにでてきます。

ではコードの解説をしていきましょう。

print('Content-type: text/html')
print('')

ここがポイントの記述です。WebサーバーがWebブラウザにデータを渡すときに、このファイルはHTMLですよとデータの本体の前に知らせます。その下にprint('')と空行をいれています。これも必要で、本体のデータの前に空行が必要です。空行の前のデータをヘッダー情報といいます。これらはHTTPの規約です。

残りのコードはいままで学んだ文法がでています。

def print_html(data=''):

はデフォルト引数を使っています。「関数 ー ゼロから始めるPython入門【Vol.10】」で学びました。

'''.format(data))

トリプルクォートとformat()は「文字列 ー ゼロから始めるPython入門【Vol.18】」で学びました。

テーブルのデータを含んだHTMLを出力していることがわかります。

def print_html(data=""):
    print('''\
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Todoリスト</title>
    </head>
    <body>
    <ul>
    {0}
    </ul>
    </body>
    '''.format(data))

このあたりのHTMLの出力の仕方はスマートとはいえません。

プロの実践の現場でPythonをWebアプリケーションで使う場合は、フレームワークを使います。
フレームワークは開発の生産性をあげてくれる仕組みです。よく使う機能などがあらかじめ準備されています。

多くのWebアプリケーションのフレームワークにはテンプレートという機能があり、HTML部分を別ファイルに切り出すことができます。本講座では勉強用のため、わざとフレームワークを使用しないので、HTMLの記述がやや大変です。

今回はここまでとします。
次回はHTMLで入力欄を作り、データーベースにタスクを登録できる機能をつくっていきます。

スポンサーリンク

関連記事

プロフィール

DESIGNMAP
制作ディレクター
ON VISITINGを運営。
お問い合わせ