こんにちは、えもんです。
今回は、python3を使ってcgiスクリプトを動かす方法を説明します。
まずCGIプログラムってなんですか？
CGIとはCommon Gateway Interfaceの略です。
Webページには静的なページと動的なページというものがあります。静的なページはHTMLファイルやCSSファイルによってブラウザに表示をさせるだけのページのことを指します。
一方、動的なページとは下記、画像のようにWebページ上に設置された入力フォームなどがあった場合に入力した値によって処理を変えたり、返す応答を変えたりすることができるページのことを指します。
動的なWebページの例
この動的なページを実現する仕組みの一つとしてCGIがあります。
CGIとは、ユーザが入力した値を受け取ってWebサーバ上で実行されるプログラムであり、その結果をWebブラウザに返すもの。程度に理解してもらえると良いと思います。
試行環境
今回は下記環境をベースにcgiプログラムを動かしてみます。
使用するpythonのバージョン：python3.7
OS：macOS
サンプルコード
htmlファイル（index.html）とcgiプログラム（pyCGI.py）を用意します。
フォルダ構造
.root
├── cgi-bin
│ └── pyCGI.py
├── css ＊今回無くても動く
│ └── style.css
└── index.html
cssは適当にしています。今回はなくても問題ありません。
<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）は下記のように記述します。
１行目のprint('Content-Type: text/html; charset=UTF-8\n')を忘れないでください。エラーの原因となります。
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サーバの立ち上げ
２つのファイルを用意したら、コンソール上でWebサーバを立ち上げます。
python3では下記のコマンドでローカルWebサーバが立ち上がるはずです。
--cgiオプションは忘れないでください。これがないと動きません。
python -m http.server 8080 --cgi
Webサーバが起動したら、http://localhost:8080にアクセスします。
すると下記のようなページにジャンプできると思います。
フォームに適当に値を入力して、送信ボタンを押してみてください。
するとサーバ側でpyCGI.pyが実行され、Webブラウザに結果が表示されます。
pyCGI.pyの実行結果
今回は単純にHTMLを挿入するだけでしたが、pyCGI.py上でメールを送信する処理を入れることで、この情報をメールで受け取ったりすることが可能になります。
企業HPの問い合わせページなどはこのような仕組みで動いているんですね〜。
