トップ画面を作成します。Pythonに限らず一般的なWebアプリケーションでは、ブラウザからのリクエストを受け付けるロジックを受け持つ部分と、ブラウザで表示するHTMLを生成する部分を、分割して実装することが好まれます（例：JavaにおけるサーブレットとJSP、Ruby on Railsにおけるコントローラーとerbファイル）。Google App Engineでは、ロジックを受け持つ部分はあらかじめ用意されているRequestHandlerクラスを継承して作成したクラスとして作成します。また、HTMLを生成する部分はDjangoというフレームワークのテンプレートを利用します。
ロジックはPythonのモジュールとして作成します。webapp.RequestHandlerクラスを継承したクラスを作成して、doGetメソッドをオーバーライドします。doGetメソッドの中では、次に説明するテンプレートを使った処理を行うよう指定しています。あとは、ブラウザで"/index"が呼ばれたときにこのモジュールが実行されるようにするための設定です。
ロジック部分(index.py)
# -*- coding: UTF-8 -*-
from google.appengine.ext import webapp
from google.appengine.ext.webapp import template
from google.appengine.ext.webapp.util import run_wsgi_app
import sentencehelper
class IndexPage(webapp.RequestHandler):
def get(self):
self.response.out.write(template.render('html/index.html', {}))
application = webapp.WSGIApplication([('/index', IndexPage)], debug=True)
def main():
run_wsgi_app(application)
if __name__ == "__main__":
main()
HTMLを生成する部分はDjangoというフレームワークのテンプレートを利用します。 このファイルは拡張子を".html"として作成します。ただし通常のHTML以外にもDjango特有のテンプレート言語を埋め込むこともできます。このファイルはどこに作成してもよいのですが、モジュールと混じらないよう本書では"html"フォルダを作成して、その中に保存するものとします。
HTMLの生成(html/index.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>イツドコデダレガナニシタ</title>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form action="/index" method="POST">
<h1>イツドコデダレガナニシタ</h1>
<div class="box">
<dl>
<dt>いつ</dt>
<dd>
<input type="text" name="when" />
</dd>
<dt>どこで</dt>
<dd>
<input type="text" name="where" />
</dd>
<dt>だれが</dt>
<dd>
<input type="text" name="who" />
</dd>
<dt>なにした</dt>
<dd>
<input type="text" name="what" />
</dd>
</dl>
<p>
<input type="submit" value="新しい文章を作成する" />
</p>
</div>
</form>
</body>
</html>
HTMLの中ではスタイルシートも利用します。そこでcssファイルも作成します。cssファイルもcssフォルダを作成してそこに保存します。
スタイルシート(css/style.css)
@CHARSET "UTF-8";
body {
width: 500px;
text-align: center;
}
h1 {
border-left: 20px solid #669999;
border-right: 20px solid #669999;
padding: 10px 8px 8px 10px;
background-color: #dddddd;
text-align: center;
}
.box {
width: 480px;
border: 10px #dddddd solid;
margin-bottom: 20px;
}
dl {
line-height: 2em;
padding: 12px;
}
dt {
width: 70px;
padding: 3px;
font-weight: bold;
}
dd {
padding: 3px 3px 3px 80px;
margin-top: -2.5em;
}
input {
width: 96%;
padding: 4px;
font-size: 150%;
}
最後に、アプリケーションの設定を行います。設定はapp.yamlファイルに行います。app.yamlファイルは、ランチャーでプロジェクトを作成すると自動で作成されます。このファイルに対して設定する項目は、次の二つです。
新しく作成したindex.pyモジュールの登録
cssフォルダを静的ファイルが保存されているフォルダとする
アプリケーションの設定(app.yaml)
application: wwwwgame
version: 1
runtime: python
api_version: 1
handlers:
- url: /favicon\.ico
static_files: favicon.ico
upload: favicon\.ico
- url: /css
static_dir: css
- url: /index
script: index.py
- url: .*
script: main.py
これで準備は完了です。アプリケーションを起動していない場合は、ランチャーから起動してください。そして以下のURLにアクセスすると、画面が表示されます。
前の手順：手順1 新しいプロジェクトを作成する
次の手順：coming soon