PyLearnWEB 02

フォームによるクライアント・サーバ間データ通信

ここでは、クライアント(Webページを見ているユーザ)から与えられた入力を、pythonの変数として獲得し、出力に反映させる方法について述べます。
まず、以下のコードを見てください。

from bottle import route, run, get, post, request


# クライアントからサーバへデータを与えるためのページ
@route('/')
def befor_func():
    t = '<!DOCTYPE html><html>'
    t = t + '<head>'
    t = t + '<title> PythonHTML </title>'
    t = t + '<meta http-equiv="content-type" charset="utf-8">'
    t = t + '</head>'
    t = t + '<body>'

    ############# フォーム開始 #############
    t = t + '<form action="/output" method="post">'

    # テキスト入力
    t = t + '<p>'
    t = t + '<h3>テキスト入力:</h3>'
    t = t + '<input type="text" name="input_text">'
    t = t + '</p>'

    # チェックボタン
    t = t + '<p>'
    t = t + '<h3>チェックボタン:</h3>'
    t = t + '<input type="checkbox" name="input_check" value="1"> りんご'
    t = t + '<input type="checkbox" name="input_check" value="2" checked> みかん'
    t = t + '</p>'

    # ラジオボタン
    t = t + '<p>'
    t = t + '<h3>ラジオボタン:</h3>'
    t = t + '<input type="radio" name="input_radio" value="1"> 美味しい'
    t = t + '<input type="radio" name="input_radio" value="2" checked> まずい'
    t = t + '</p>'

    # スライダー
    t = t + '<p>'
    t = t + '<h3>スライダー:</h3>'
    t = t + '<input type="range" name ="input_range" value="1" min="1" max="10" step="0.1">'
    t = t + '</p>'

    # 数字
    t = t + '<p>'
    t = t + '<h3>数字:</h3>'
    t = t + '<input type="number" name ="input_num" value="1" min="1" max="10" step="0.1">'
    t = t + '</p>'

    # カラー
    t = t + '<p>'
    t = t + '<h3>カラー:</h3>'
    t = t + '<input type="color" name ="input_col">'
    t = t + '</p>'

    # 送信ボタン
    t = t + '<input value="push" type="submit" />'
    t = t + '</form>'
    ############# フォーム終了 #############

    t = t + '</body>'
    t = t + '</html>'

    return t


# クライアントから受け取ったデータを受け取るページ
@post('/output')
def aft_func():

    # フォームの入力を取得
    output_text = request.forms.input_text
    output_check = request.forms.getlist("input_check") # 複数選択の場合があるため
    output_radio = request.forms.input_radio
    output_range = request.forms.input_range
    output_num = request.forms.input_num
    output_col = request.forms.input_col

    t = '<!DOCTYPE html><html>'
    t = t + '<head>'
    t = t + '<title> PythonHTML </title>'
    t = t + '<meta http-equiv="content-type" charset="utf-8">'
    t = t + '</head>'
    t = t + '<body>'
    t = t + "<p>あなたの回答:</p>"
    t = t + "テキスト: " + output_text + "<br>"
    t = t + "チェックボックス: " + str(output_check) + "<br>"
    t = t + "ラジオボタン: " + output_radio + "<br>"
    t = t + "スライダー: " + output_range + "<br>"
    t = t + "数字: " + output_num + "<br>"
    t = t + "カラー: " + output_col + "<br>"
    t = t + '</body>'
    t = t + '</html>'

    return t

# サーバの起動(一番下に書くこと)
run(reloader=True, port=9999, debug=True)

フォームの定義(14行目〜58行目):

フォームと呼ばれる、ユーザの入力を行う領域を定義しています。ボタンを押すと15行目で定義されているように、「/output」へと飛ぶようになっています。「/output」に相当するページは、67行目以降に定義されています。飛ぶ前のurlは「http://xxx.xxx.xxx.xxx:9999/」であり、飛んだあとのurlは「http://xxx.xxx.xxx.xxx:9999/output」となります。xxx.xxx.xxx.xxxはサーバを起動した時のターミナルに出力される数字列となります。9999はポート番号であり、97行目で定義されています。ポート番号の後ろの「/」「/output」という部分は、5行目、67行目にて定義しています。

テキスト入力欄の作成(17行目〜21行目):

inputタグのtypeにtextと入れると、テキスト入力欄が作成できます。nameで指定した文字列(input_text)に対し、入力された文字列が貯蔵されます。

チェックボックスの作成(23行目〜28行目):

inputタグのtypeにcheckboxと入れると、チェックボックスが作成できます。チェックボックスは複数選択でるユーザインタフェースとなります。nameで指定した文字列(input_check)に対し、入力された文字列が貯蔵されます。27行目に、checkedという文字が見えます。これは初期からチェックしておくという意味があります。りんごにチェックが入れば、valueにあるように、input_checkが1を保持し、みかんにチェックが入ればinput_checkが2を保持します。りんごとみかんにチェックが入っているときは、input_checkが配列となり[1,2]を保持するようになります。

ラジオボタンの作成(30行目〜35行目):

チェックボックスとほぼ同じです。ただチェックボックスとは異なり、複数選択ができません。したがって、input_radioは配列とはなりません。

スライダーの作成(37行目〜41行目):

inputタグのtypeにrangeを指定すると、スライダーを用意できます。minとmaxはスライダーの最小と最大です。stepは分割幅を表します。valueは初期値です。

数字の作成(43行目〜47行目):

inputタグのtypeにnumberを指定すると、数字の選択欄が出ます。min, max, stepで最小、最大、分割幅を指定することができます。valueは初期値です。

カラーの作成(49行目〜53行目):

inputタグのtypeにcolorを指定すると、色を選択できるようになります。デザイン系の研究や感性評価などで使いそうですね。

入力データの取得(70行目〜76行目):

name領域に指定された変数(input_colorなど)に対し、request.forms.を付与すると、htmlのデータがpythonの変数として取得できます。チェックボックスのみ複数選択可能ですから、配列として取得する必要性があるので、少し異なる書き方をしています。

htmlの作成(78行目〜92行目):

最後に、pythonの文字列でhtmlを生成します。returnにてこの文字列を返すと、ページが表示されます。

理解できたら、ターミナルで「python3 sample.py」とうち、実行結果を確認してみてください。ターミナルに出るxxx.xxx.xxx.xxxx:9999をブラウザに打ち込めばokです。

for文などで、html側の変数をpythonに連続的に渡したい場合は、以下のようにします。

a = []
for i in range(0, 10):
   a.append(request.forms.get("input_text"+str(i))


GetとPostについて

GetとPostは、HTMLでのデータの受け渡しを意味します。これには以下の違いがあります。

  • Get: URLに対して送信するデータをそのまま記載する送受信方法
  • Post: URLに送信するデータを記載しない送受信方法

これをみてわかるように、基本的にはPostにより送信した方が安全です。上のプログラムでは、postメソッドによりデータの受け渡しをしています。これを確認するため、以下の行を確認してみてください。

postメソッドによるデータの受け渡し:

  • 15行目: データ送信側で、formのmethodがpostとなっている。
  • 67行目: データ受信側のページが、post指定されている。
  • 71〜76行目: formsで、データを受け取っている。

15行目より、送信側のformによりpost指定されており、67行目における受け取り側のページでもpost指定されていますね。post指定されているデータの送信は、formsを用いて受け取りを行います。


Getメソッドを使う場合

以下は、getメソッドによるデータの送受信です。上のコードに対して、以下の変更点があるのみです。

getメソッドによるデータの受け渡し:

  • 15行目: データ送信側で、formのmethodがgetとなっている。
  • 67行目: データ受信側のページが、get指定されている。
  • 71〜76行目: queryで、データを受け取っている。

送信側と受信側がどちらもgetになっています。要するに、メソッドをきちんと合わせればokです。なお、getメソッドによるデータをpythonで受け取るには、queryを使用します。これを実行し、URLにユーザの選択肢が表示されていることを確認してみてください。

from bottle import route, run, get, post, request


# クライアントからサーバへデータを与えるためのページ
@route('/')
def befor_func():
    t = '<!DOCTYPE html><html>'
    t = t + '<head>'
    t = t + '<title> PythonHTML </title>'
    t = t + '<meta http-equiv="content-type" charset="utf-8">'
    t = t + '</head>'
    t = t + '<body>'

    ############# フォーム開始 #############
    t = t + '<form action="/output" method="get">'

    # テキスト入力
    t = t + '<p>'
    t = t + '<h3>テキスト入力:</h3>'
    t = t + '<input type="text" name="input_text">'
    t = t + '</p>'

    # チェックボタン
    t = t + '<p>'
    t = t + '<h3>チェックボタン:</h3>'
    t = t + '<input type="checkbox" name="input_check" value="1"> りんご'
    t = t + '<input type="checkbox" name="input_check" value="2" checked> みかん'
    t = t + '</p>'

    # ラジオボタン
    t = t + '<p>'
    t = t + '<h3>ラジオボタン:</h3>'
    t = t + '<input type="radio" name="input_radio" value="1"> 美味しい'
    t = t + '<input type="radio" name="input_radio" value="2" checked> まずい'
    t = t + '</p>'

    # スライダー
    t = t + '<p>'
    t = t + '<h3>スライダー:</h3>'
    t = t + '<input type="range" name ="input_range" value="1" min="1" max="10" step="0.1">'
    t = t + '</p>'

    # 数字
    t = t + '<p>'
    t = t + '<h3>数字:</h3>'
    t = t + '<input type="number" name ="input_num" value="1" min="1" max="10" step="0.1">'
    t = t + '</p>'

    # カラー
    t = t + '<p>'
    t = t + '<h3>カラー:</h3>'
    t = t + '<input type="color" name ="input_col">'
    t = t + '</p>'

    # 送信ボタン
    t = t + '<input value="push" type="submit" />'
    t = t + '</form>'
    ############# フォーム終了 #############

    t = t + '</body>'
    t = t + '</html>'

    return t


# クライアントから受け取ったデータを受け取るページ
@get('/output')
def aft_func():

    # フォームの入力を取得
    output_text = request.query.input_text
    output_check = request.query.getlist("input_check") # 複数選択の場合があるため
    output_radio = request.query.input_radio
    output_range = request.query.input_range
    output_num = request.query.input_num
    output_col = request.query.input_col

    t = '<!DOCTYPE html><html>'
    t = t + '<head>'
    t = t + '<title> PythonHTML </title>'
    t = t + '<meta http-equiv="content-type" charset="utf-8">'
    t = t + '</head>'
    t = t + '<body>'
    t = t + "<p>あなたの回答:</p>"
    t = t + "テキスト: " + output_text + "<br>"
    t = t + "チェックボックス: " + str(output_check) + "<br>"
    t = t + "ラジオボタン: " + output_radio + "<br>"
    t = t + "スライダー: " + output_range + "<br>"
    t = t + "数字: " + output_num + "<br>"
    t = t + "カラー: " + output_col + "<br>"
    t = t + '</body>'
    t = t + '</html>'

    return t

# サーバの起動(一番下に書くこと)
run(reloader=True, port=9999, debug=True)