今回はテンプレートの使い方を試してみます。

WEBサイトを作るにあたって、デザイン部分とプログラム部分をわけることは管理をするうえで非常に重要なポイントとなります。サイトがシンプルなうちはまだいいのですが、複雑になるにつれメリットは大きくなります。このテンプレート機能はかなり充実してますが、全部を把握しょうとすると訳がわからなくなりますので、今回も最低限の機能だけ押さえます。

どのように分けるかというと、テンプレート部分でHTML上に変化される部分を置き、プログラム部分でその値を動的に変化をさせます。今回の出力結果は前回とまったく同じです。


#templateモジュールをインポートします。
import os
from google.appengine.ext.webapp import template

import cgi
from google.appengine.ext import webapp
from google.appengine.ext.webapp.util import run_wsgi_app
from google.appengine.ext import db

class Message(db.Model):
  name = db.StringProperty()
  comment = db.StringProperty(multiline=True)
  date = db.DateTimeProperty(auto_now_add=True)

class MainPage(webapp.RequestHandler):
  def get(self):

    messages = db.GqlQuery("SELECT * FROM Message ORDER BY date DESC LIMIT 10")

    #テンプレート上で置き換える部分です。データストアの結果をそのまま使います。
    template_values = {
      'messages': messages
    }

    #テンプレートファイルへのパスです。
    #今回は同じディレクトリにindex.htmlというファイルをつくります。
    path = os.path.join(os.path.dirname(__file__), 'index.html')
    #template.render(テンプレートファイルへのパス, 変換する内容)という使い方です。
    self.response.out.write(template.render(path, template_values))

class Addcomment(webapp.RequestHandler):
  def post(self):
    message = Message()

    message.name = self.request.get('name')
    message.comment = self.request.get('comment')
    message.put()
    self.redirect('/')

application = webapp.WSGIApplication(
                                     [('/', MainPage),
                                      ('/add', Addcomment)],
                                     debug=True)

def main():
  run_wsgi_app(application)

if __name__ == "__main__":
  main()

続いて、テンプレートファイルの内容です。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
  </head>
  <body>

      {% for message in messages %}
        {% if message.name %}
          {{ message.name|escape }} :
        {% else %}
          nanashi :
        {% endif %}
        {{ message.comment|escape }}
        ( {{ message.date }} )
        <br />
      {% endfor %}

    <form action="/add" method="post">
    <div>
        name<br />
        <input type="text" name="name" value=""></textarea>
    </div>
    <div>
        comment<br />
        <textarea name="comment" rows="3" cols="60"></textarea>
    </div>
    <div>
        <input type="submit" value="submit">
    </div>
  </form>
</body>
</html>

for message in messages という部分でデータストアでの検索結果について、ひとつづつループ処理をして行きます。内容は前回と同じですが、message.name がある場合はそのデータを、データがない場合はnanashiと表示します。|escape という部分はテンプレートの機能でページの表示を壊す可能性がある部分を置き換えます。

http://www.djangoproject.com/documentation/0.96/templates/#escape

ESCAPE
Escapes a string’s HTML. Specifically, it makes these replacements:

“&” to “&”
< to "<"
> to “>”
‘”‘ (double quote) to ‘"’
“‘” (single quote) to ‘'’

最後に投稿フォームを表示して完了です。

テンプレート部分を別にすることによってデザインとプログラム部分の分離ができました。これにより保守も楽にできるようになるのではと思います。