PyLearnWEB 03

テンプレートの使用

HTMLを直書きするのは結構大変です。そのため、ディレクトリの外にHTMLのテンプレートファイルを置いておきます。これを読み込んで、変更したい場所のみ、変更するという方法を記載します。はじめに、jinja2をpip3でインストールします。

pip3 install jinja2

その後、pyファイルと同じディレクトリに、以下のhtmlファイルを用意します。

<!DOCTYPE html>
<html>
<head>
    <title> PyLearnWEB template </title>
    <meta http-equiv="content-type" charset="utf-8">
</head>
<body>
    <p> <h1> {{title}} </h1> </p>
    {{contents}}
</body>
</html>

{{title}}と{{contents}}に注目してください。ここが変数化されているので、ここだけを入力すれば、ページが出来上がるようになります。具体的なサーバサイドのpyファイルは以下のようになります。

from bottle import route, run, get, post, request, debug
from bottle import jinja2_template as template

debug(True)

# トップページ: ボタンを押すと文字入力ページへ
@route("/")
def index():

    # メインコンテンツの部分だけを書き込む
    t = '''
         <p>文字入力ページへ</p>
         <input type="submit" value="button!" onclick="location.href=\'/InputText\'">
        '''

    return template('tpl.html', title='トップページ', contents = t)


# クライアントからサーバへデータを与えるためのページ
@get('/InputText')
def befor_InputText():

    # メインコンテンツの部分だけを書き込む
    t = '''
    <form action="/InputText" method="post">
     入力文字: <input name="input_text" type="text" />
        <input value="push" type="submit" />
       </form>
        '''

    return template('tpl.html', title='入力ページ', contents = t)

 
#クライアントから受け取ったデータを受け取るページ
@post('/InputText')
def aft_InputText():
    
    # getにある変数"input_text"を取得し、text に代入
    text = request.forms.input_text

    # メインコンテンツの部分だけを書き込む
    t = '<p>あなたの入力は「' + text + '」ですね!'

    return template('tpl.html', title='出力ページ', contents = t)

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

route, get, postの下にある関数のreturnの先を見てください。template(‘tpl.html’, title, contents)というのがあることがわかります。第一引数としてtpl.htmlをロードして、そのtitle, contentsに値が与えられていることがわかります。これにより、tpl.htmlが具体的な値として作成され、webページを構成しています。これまでと違い、htmlコードを上から下まで書かなくても良くなりました。実際の開発の際は、htmlを全て直書きするのは煩わしいので、ぜひテンプレートを活用してください。
実際にサーバを起動して確認して見ます。ターミナルでsample.pyを実行してください。

python3 sample.py

実行するとipアドレスが出るので、ブラウザのURLに入力し、動作を確かめて見てください。


template not found の対応

pyファイルにdebug(True)を入れていると、エラーが出たときに、ブラウザにエラーの原因を返してくれます。テンプレートのhtmlファイルが読み取れないというエラーが起こることがあります。これは、template関数の第一引数で指定するパスが不適切なため、起こります。ターミナルでpyファイルのサーバを起動したディレクトリから、パスの検索が始まります。そのため、サーバを起動させる前に、サーバを起動させるpyファイルがあるディレクトリよりも上位のディレクトリから、「python3 xx/yy/zz/kk.py」のようにディレクトリを経由して実行すると、エラーが出ます。きちんとzzのディレクトリに移動してから、kk.pyをターミナルで実行するようにしましょう。あるいは、templateのパス指定を、pyファイルを実行したディレクトリから開始するようにしてもいいです。