えもんブログ

セキュリティからライフハックまでゆるくとどけるWEBメディア

【基本】python3を使ってCGIを実行する【ローカルWEBサーバ】

こんにちは、えもんです。

 

今回は、python3を使ってcgiスクリプトを動かす方法を説明します。

 

 

まずCGIプログラムってなんですか?

CGIとはCommon Gateway Interfaceの略です。

Webページには静的なページと動的なページというものがあります。静的なページはHTMLファイルやCSSファイルによってブラウザに表示をさせるだけのページのことを指します。

一方、動的なページとは下記、画像のようにWebページ上に設置された入力フォームなどがあった場合に入力した値によって処理を変えたり、返す応答を変えたりすることができるページのことを指します。

f:id:emonnao:20190520193950p:plain

動的なWebページの例

この動的なページを実現する仕組みの一つとしてCGIがあります。

CGIとは、ユーザが入力した値を受け取ってWebサーバ上で実行されるプログラムであり、その結果をWebブラウザに返すもの。程度に理解してもらえると良いと思います。

pythonCGIプログラムを動かしてみる

試行環境

今回は下記環境をベースにcgiプログラムを動かしてみます。

  

サンプルコード

htmlファイル(index.html)とcgiプログラム(pyCGI.py)を用意します。

フォルダ構造

.root

├── cgi-bin

│   └── pyCGI.py

├── css *今回無くても動く

│   └── style.css

└── index.html

cssは適当にしています。今回はなくても問題ありません。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CGIテスト</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="contact">
    <h1 style="margin-bottom: 30px;margin-top:30px;">お申込み・お問い合わせ</h1>
    <div class="form">
        <form action="/cgi-bin/pyCGI.py" method="post">
            <table>
                <tr>
                    <th>名前</th>
                    <td><input type="text" id="name" name="name"></td>
                </tr>
                <tr>
                    <th>カナ</th>
                    <td><input type="text" id="kananame" name="kananame"></td>
                </tr>
                <tr>
                    <th>mail</th>
                    <td><input type="mail" id="email" name="email"></td>
                </tr>
                <tr>
                    <th>当社を知ったきっかけ</th>
                    <td><select name="kikkake" size="1">
                        <option value="google検索">Google検索</option>
                        <option value="SNS">SNS</option>
                        <option value="紹介">紹介</option>
                        <option value="その他">その他</option>
                    </select></td>
                </tr>
                <tr>
                    <th>ご要望</th>
                    <td>
                        <input type="checkbox" name="chkbox" value="1" class="checkbox">商品の情報がほしい<br>
                        <input type="checkbox" name="chkbox" value="2" class="checkbox">商品の話を聞きたい<br>
                        <input type="checkbox" name="chkbox" value="3" class="checkbox">商品を購入したい<br>
                    </td>
                </tr>
                <tr>
                    <th>詳細</th>
                    <td><textarea name="other" rows="8"></textarea></td>
                </tr>
            </table>
            <p style="margin-top:30px;margin-bottom:30px;"><input class="button1" name="submit" type="submit"></p>
        </form>
    </div>
</div>
</body>
</html>

cgiプログラム(pyCGI.py)は下記のように記述します。

1行目の#!/usr/bin/python(which pythonなどでpythonの場所を確認して変更してください)と7行目のprint('Content-Type: text/html; charset=UTF-8\n')を忘れないでください。エラーの原因となります。

#!/usr/bin/python
# -*- coding: utf-8 -*-
import cgi
import sys
import io
 
print('Content-Type: text/html; charset=UTF-8\n')
html_body = """
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.parent{
   
}
.contact{
   display: flex;
   flex-direction: column;
}
</style>
</head>
<body>
<div class="parent">
<div class="contact">
<h1>名前:%s</h1>
<h1>カナ:%s</h1>
<h1>メールアドレス:%s</h1>
<h1>きっかけ:%s</h1>
<h1>ご要望:%s</h1>
<h1>詳細:%s</h1>
</div>
</div>
</body>
</html>
"""

form = cgi.FieldStorage()
name = form.getvalue('name','')
kana = form.getvalue('kananame','')
mail = form.getvalue('email','')
kikkake = form.getfirst('kikkake','')
value = form.getvalue('chkbox','')
text = form.getvalue('other','')

print(html_body % (name,kana,mail,kikkake,value,text))

 ローカルWebサーバの立ち上げ

2つのファイルを用意したら、コンソール上でWebサーバを立ち上げます。

python3では下記のコマンドでローカルWebサーバが立ち上がるはずです。

--cgiオプションは忘れないでください。これがないと動きません。

python -m http.server 8080 --cgi

Webサーバが起動したら、http://localhost:8080にアクセスします。

すると下記のようなページにジャンプできると思います。

        f:id:emonnao:20190520202656p:plain

 

フォームに適当に値を入力して、送信ボタンを押してみてください。

するとサーバ側でpyCGI.pyが実行され、Webブラウザに結果が表示されます。

 

f:id:emonnao:20190520204121p:plain

pyCGI.pyの実行結果

 

今回は単純にHTMLを挿入するだけでしたが、pyCGI.py上でメールを送信する処理を入れることで、この情報をメールで受け取ったりすることが可能になります。

企業HPの問い合わせページなどはこのような仕組みで動いているんですね〜。