【PythonとFlask】フォーム作成

どうもこんばんは、最近腰が痛いあしかぺんぎんです。

前回のプログラミングでは、サイトに「Hello World」を表示させるのみのプログラムを作成しました。

ゆくゆくは文字を表示させるだけではなく、もっと使えるWebアプリを作成することを目指しています。

そこで、今回はFlaskと呼ばれるPythonのモジュールを用いて、文字を入力してその文字を取得し、それを表示させるフォームを作成しようと四苦八苦したので、そのことについてまとめたいと思います。

Flaskのインストール
1. Flaskについて
2. レンタルサーバへのFlaskのインストール
フォームの作成
まとめ

Flaskのインストール

Flaskについて

今回はPythonのモジュールであるFlaskと呼ばれるものを使ってフォームの作成を行うこととしました。

Flaskとは

Python上で動く小規模なWebアプリケーションフレームワーク
手軽にWebアプリケーションが開発できるようにパッケージがされている
「Python　Flask」で調べるといろんな記事があり、初心者にもとっつきやすい

同じPythonのWebフレームワークとして有名なものにDjangoと呼ばれるものがありますが、これにはいろんな機能が盛り込まれており、どんなアプリでも作成できるように作られているみたいです。逆にいえば本格的な開発を目的とした玄人向けといった感じでしょうか。

もちろんFlaskも必要最低限の機能を有しているだけと言いつつも、拡張させることでいろんなアプリを開発することができるみたいです。

まあ今回はお試しということでFlaskを使うことにしました。

レンタルサーバへのFlaskのインストール

普通にローカル環境でPythonをインストールしているだけだったらFlaskをインストールするのは簡単で、

$ pip install Flask

1	$ pip install Flask

とコマンドプロンプトあたりに入れるとインストールされるんですが、今回はレンタルサーバに導入したいので、一筋縄では行かなかったです。

まずはSSHソフトと呼ばれるソフトを入れます。SSH（Secure Shell）安全にリモートコンピュータを通信を行うためのソフトみたいです。ようは自分のパソコンをコマンドプロンプトで操作するみたいなイメージでしょうか。

SSHの導入や使い方については各レンタルサーバに記載があります。

私は数あるSSHのうちからPuTTYと呼ばれるものをインストールしました。

Pythonのモジュールのインストール方法はこちらのサイトを参考にさせていただきました。

まずはインストールに重要なpipのインストールをします。これをしないとたぶんかなりインストールがめんどくさくなります。

pipをインストールしたことがある人ならわかると思いますが、pipを使えば、

$ pip install モジュール名

1	$ pip install モジュール名

と入力するだけで必要なモジュールをインストールすることができます。このpipをインストールするためには以下ように入力します。

$ curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py

1	$ curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py

curlコマンドはネットワーク経由のファイルダウンロードやアップロードを行うためのコマンドです。デフォルトで使うことができました。

この後、

$ python get-pip.py --user

1	$ python get-pip.py --user

と入力すればpipのインストールはできました。ただし、このままではPATHを通していないので、自由に使うことはできません。そこで以下のように入力します。

$ PATH=$PATH:/home/users/0/<ユーザー名>/.local/bin
$ export PATH

1 2	$ PATH=$PATH:/home/users/0/<ユーザー名>/.local/bin $ export PATH

これで、ようやくpipが使えるようになったと思います。

PATHとは

PATHとはインストールしたモジュールを簡単に使うことができるようにするものです。

例えば下記のコマンドは、pipがbinにインストールされたときにpipを使いたいとき、PATHを通したもの（上）とPATHを通していないもの（下）を表していますが、どちらも同様の結果が帰ってきます。

$ pip
$ /bin/pip

1 2	$ pip $ /bin/pip

つまりPATHをとおしたものはどこからでもアクセスして使用することができるようになるということですね。

pipが使えるか確認するためにはいかのように

$ pip list

1	$ pip list

と入力したときに、以下のようにインストール済みのモジュールが表示されれば良いと思います。

ここまできてやっとFlaskのインストールです。長かった😫。以下のように入力してFlaskをインストールしました。

$ pip install Flask --user

1	$ pip install Flask --user

–userは~/.local/へインストールするときに使うようで、他にもインストール先を指定してインストールする方法があります。このあたりは色々試していて良くわかっていなかったので、たぶんこれで行けると思いますが、できなかった方はこちら等を参考にされて下さい。

フォームの作成

ここまでくればFlaskを使うことができるため、いよいよフォームを作成していきます。といっても初心者に１から作ることはできないため、こちらのページを参考に入力した結果を表示させるフォームを作成することにしました。

ただし、ここでも鬼門が！！以下のようにサイトの真似をしファイルを作りました。

#ディレクトリの構成
dest/src
├── test.py
└── templates
    ├── confirm.html
    └── form.html

#ディレクトリの構成

dest/src

├── test.py

└── templates

├── confirm.html

└── form.html

#test.pyの中身
# coding: utf-8
from flask import Flask, render_template, request
app = Flask(__name__)

@app.route('/form')
def form():
   return render_template('form.html')

@app.route('/confirm', methods = ['POST', 'GET'])
def confirm():
   if request.method == 'POST':
      result = request.form
      return render_template("confirm.html",result = result)

if __name__ == "__main__":
    app.run()

#test.pyの中身

# coding: utf-8

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/form')

def form():

return render_template('form.html')

@app.route('/confirm', methods = ['POST', 'GET'])

def confirm():

if request.method == 'POST':

result = request.form

return render_template("confirm.html",result = result)

if __name__ == "__main__":

app.run()

<!--templates/form.htmlの中身-->
<html>
  <body data-rsssl=1>
      <form action = "/confirm" method = "POST">
         <p>Name <input type = "text" name = "Name" /></p>
         <p>Value <input type ="text" name = "Value" /></p>
         <p><input type = "submit" value = "submit" /></p>
      </form>
   </body>
</html>

<html>

<body>

<p>Value <input type ="text" name = "Value" /></p>

</form>

</body>

</html>

<!--templates/confirm.htmlの中身-->
<html>
   <body data-rsssl=1>
      <table border = 1>
         {% for key, value in result.iteritems() %}
            <tr>
               <th> {{ key }} </th>
               <td> {{ value }} </td>
            </tr>
         {% endfor %}
      </table>
   </body>
</html>

<html>

<body>

{% for key, value in result.iteritems() %}

<tr>

<td> {{ value }} </td>

</tr>

{% endfor %}

</table>

</body>

</html>

詳しいそれぞれの言語や関数の意味は理解していませんが、形にはなりました。

新しく出てきた「form.html」等のHTMLファイルはPythonとは異なるプログラミング言語になります。HTMLはウェブを作成するために開発された言語で、現在インターネットで公開されているほとんどのWebページはこのHTMLを用いて作成されているみたいです。ページのアレンジをする場面になったときに詳しく学んでいく予定です。

・・・が、結果はエラー！どうやらレンタルサーバではそのまま実行することができない模様。理由は初心者にはわかりませんが、権限の問題とかなんとか。

色々調べた結果ありました！どうやらcgiファイルを用いて.htaccessでリダイレクトさせて実行するらしいです。ん～わからん単語がめっちゃ出てくる！

CGIはCommon Gateway Interfaceの略でWebサーバ上でプログラムを使って処理した結果を表示させる機能のことみたいです。主にはPerlという言語を使うみたいですが、Pythonにもcgiモジュールというものがあるみたいでそれを用います。

.htaccessは「Apache」と呼ばれるサーバソフトウェアを制御する設定ファイルの１つで、たとえば、サーバの移転をいたので、新しいページに転送「リダイレクト」したいときや携帯電話以外からアクセスできないようにしたい等の設定を行うことができるみたいです。私のレンタルサーバはApacheを用いているみたいでした。

たぶんですが、Flaskを使うにはCGIを使ってWebアプリを動かし、そのときに.htaccessで一部アクセスの設定が必要といったところだと思います。

そこで以下の２つのファイル（index.cgiと.htaccess）を追加し、「test.py」と「form.html」を書き換えます。

# index.cgiの中身
#!/usr/local/bin/python3.4
import cgitb
cgitb.enable()
from wsgiref.handlers import CGIHandler
from test import app
CGIHandler().run(app)

# index.cgiの中身

#!/usr/local/bin/python3.4

import cgitb

cgitb.enable()

from wsgiref.handlers import CGIHandler

from test import app

CGIHandler().run(app)

# .htaccessの中身
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ /dest/src/index.cgi/$1 [QSA,L]

# .htaccessの中身

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f

RewriteRule ^(.*)$ /dest/src/index.cgi/$1 [QSA,L]

# test.pyの中身
# coding: utf-8
from flask import Flask, render_template, request
app = Flask(__name__)

@app.route('/')
def form():
   return render_template('form.html')

@app.route("/confirm", methods = ["POST", "GET"])
def confirm():
   if request.method == "POST":
      result = request.form
      return render_template("confirm.html",result = result)
   else:
      return "Hello World !"
   
if __name__ == "__main__":
    app.run()

# test.pyの中身

# coding: utf-8

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')

def form():

return render_template('form.html')

@app.route("/confirm", methods = ["POST", "GET"])

def confirm():

if request.method == "POST":

result = request.form

return render_template("confirm.html",result = result)

else:

return "Hello World !"

if __name__ == "__main__":

app.run()

<!--templates/form.htmlの中身-->
<html>
   <body data-rsssl=1>
      <form action = "/dest/src/confirm" method = "POST">
         <p>Name1 <input type = "text" name = "Name1" /></p>
         <p>Name2 <input type ="text" name = "Name2" /></p>
         <p><input type = "submit" value = "submit" /></p>
      </form>
   </body>
</html>

<html>

<body>

</form>

</body>

</html>

ここで注意するところは「form.html」の３行目のaction = “/dest/src/confirm”の部分です。.htaccessを設定したせいか、URLの設定を注意しないとうまくページが表示されませんでした。

よ～し、これでURLにアクセスすれば、、、

おおおおおおおおおおおお、うまく表示されています。

と一息ついたのもつかの間、適当に文字を入力してsubmitすると、

エラー画面が！😫

挫折しそうになるもどこがまずいのかプログラムを見直すことにしました。

いろいろ試していると「test.py」を以下のように修正して再度URLにアクセスする。

# test.pyの中身
# coding: utf-8
from flask import Flask, render_template, request #追加
app = Flask(__name__)

@app.route('/')
def form():
   return render_template('form.html')

@app.route("/confirm", methods = ["POST", "GET"])
def confirm():
   if request.method == "POST":
      result = request.form
      print("Content-type: text/html\n")
      print(result)     
      return "Hello World !"
   else:
      return "Hello World !"
   
if __name__ == "__main__":
    app.run()