Google App Engine SDK: CSS や JS などの静的ファイルを利用する
CSS や JS（JavaScript）などの静的な外部ファイルを利用するには、まず app.yaml の handlers セクションで静的ファイルを含むディレクトリのパスなどを定義する必要があるらしい。Using Static Files - Google App Engine - Google Code を参考にやってみた。
CSS ファイルの利用
今回は外部 CSS ファイルで試してみました。
1. app.yaml の変更
handlers:
- url: /css
static_dir: css
- url: /.*
script: helloworld.py
上から順にマッチするかテストされるので、/css から始まる URL にリクエストがあると、css ディレクトリにあるファイルから適当なファイルを探すようになるらしい。……が、
<class 'google.appengine.tools.dev_appserver.InvalidAppConfigError'>: regex invalid: unbalanced parenthesis
というエラーが出てうまくいきませんでした。代わりに次のようにしてみたら動いた:
- url: /css/(.*\.css)
static_files: css/\1
upload: css/(.*\.css)
app.yaml の書き方については、Configuring an App - Google App Engine - Google Code を参照。
2. css の作成
外部スタイルシートを作成して、css ディレクトリに保存。
/* 例です */
body {
background: #eaeaea;
color: #333333;
}
#title {
color: #333399;
font-style: italic;
}
3. テンプレートの変更
テンプレートファイルの index.html の head 要素に CSS へのリンクを追加。
<head>
<link type="text/css" rel="stylesheet" href="/css/test.css" />
</head>
こんな感じで JavaScript や Flash なんかも利用可能になるらしいです。
メモ
MIME タイプ
MIME タイプは基本的に拡張子を元に決定される。追加オプションで変更することも可能。
参考: Configuring an App - Google App Engine - Google Code
関連記事
Google App Engine SDK: テンプレートの使用
チュートリアルでは、フォーム画面の作成、データの格納へと移るが、飛ばして先に進む。
webapp フレームワークには、Django のテンプレートエンジンが含まれているらしい。と言っても、その Django がよくわからないのだが、とりあえず Using Templates - Google App Engine - Google Code を参考にやってみる。Django については、機会があれば勉強するということで……。
1. template のインポート
helloworld.py に次の 2 行を追加する:
import os
from google.appengine.ext.webapp import template
2 行目が template モジュールの読み込み。1 行目で os モジュールがインポートされているが、パスの結合に必要みたい。この場合、os.path だけでもいいような気がするが、気にせず続ける。
2. index.html の作成
チュートリアルの例をいきなり理解するのは無理だったので、簡単なものにしてみた。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{{ title }}</title>
</head>
<body>
<p><span id="title">{{ title }}</span></p>
</body>
</html>
{{ title }} という部分が置換される部分。index.html という名前で保存。名前は別に index.html じゃなくてもいいかもしれない。
3. MainPage クラスの修正
self.response.out.write('<html><body><p>こんにちは、webapp の世界！</p></body></html>')
ここを次のように修正する:
template_values = {
'title': 'こんにちは、Google App Engine!'
}
path = os.path.join(os.path.dirname(__file__), 'index.html')
self.response.out.write(template.render(path, template_values))
リロードしてみると、ちゃんと {{ title }} の部分が置換されていた。Using Templates - Google App Engine - Google Code を見ると、if 文や for 文なんかも使えるようなので、あとでまたやってみる。とりあえず、ここまで。
関連記事
Google App Engine SDK: webapp フレームワーク
Using the webapp Framework - Google App Engine - Google Code から、webapp フレームワークという WSGI 互換のフレームワークを使った作業に移る。
Google App Engine では、Django も使えるらしいので、この機会に勉強してみようかとも思っていたけど、webapp についてもちょっと読んでみる。The webapp Framework - Google App Engine - Google Code に webapp フレームワークのドキュメントがある。
以下、メモ。
out プロパティ
via Building the Response - Google App Engine - Google Code
self.response.out.write("<html><body><p>Hi there!</p></body></html>")
out プロパティは、レスポンスのボディを書き出すために使用されるファイル風のオブジェクト
Content-Type ヘッダ
via Building the Response - Google App Engine - Google Code
デフォルトは、「text/html; charset=utf-8」
debug モード
via Running the Application - Google App Engine - Google Code
application = webapp.WSGIApplication(
[('/', MainPage)],
debug=True)
「debug=True」でデバッグモード。例外が起きたときに、webapp にブラウザに stack trace を表示させるようにする。デフォルトでは、エラー発生時に HTTP 500 エラーを返す。
Google アカウントとの統合
via Using the Users Service - Google App Engine - Google Code
Google アカウントを使ってサインインさせたり、サインインしていないなら認証画面にリダイレクトしたりできるらしい。個人的に今のところ必要なさそうなので、サラッと読み飛ばす。
詳細は、The Users API - Google App Engine - Google Code
参考: WSGI
関連記事
Google App Engine SDK: Hello, World! を表示させるまで
Getting Started - Google App Engine - Google Code は、ゲストブックアプリケーションを題材にしたチュートリアルになっている模様。とりあえずザックリと読みながら、動かせるところまでやってみる。
The Development Environment
このチュートリアルでは、次の 2 つのコマンドを使用する。
- dev_appserver.py: 開発用の Web サーバーを起動する。
- appcfg.py: アプリケーションファイルをアップロード。
Hello, World!
1. スクリプトの作成
helloworld という名前のディレクトリを作成し、そこに helloworld.py という名前のファイルを作成する。
とりあえず、google_appengine の下に hellowordl というフォルダを作成してみた。コードは少し変えて、日本語にしてみる（UTF-8 で保存）。
# -*- coding: utf-8 -*-
print 'Content-Type: text/plain'
print ''
print 'こんにちは、世界！'
2. app.yaml の作成
YAML 形式の設定ファイル（app.yaml）を作成する。
Hello, World! - Google App Engine - Google Code に簡単な説明がある。
3. Web サーバーの起動
dev_appserver.py で Web サーバーを起動する。
コマンドプロンプトを起動して
cd "C:\Program Files\Google\google_appengine"
dev_appserver.py helloworld
「Allow dev_appserver to check for updates on startup?」と聞かれたので、とりあえず y と入力して Enter。
4. アプリケーションのテスト
ブラウザで http://localhost:8080/ にアクセスすると、こんな感じで表示された。
スクリプトを編集して保存、ブラウザをリロードすると変更が反映される。
サーバーをシャットダウンするには、Ctrl + C。一見何も起こらないようだったが、ブラウザをリロードするとエラーが出て接続できなくなっていた。コマンドプロンプトを閉じるには exit と入力して、Enter。
関連記事
Google App Engine に登録してみた
秋元@サイボウズラボ・プログラマー・ブログ: Google App Engine SDKを使ってみたを見て、早速、Google App Engine に申し込んでみました。とくに今何か作りたいものがあるわけではないのですが、とりあえず……。
事始め
- http://appengine.google.com/ にアクセス。
- google アカウントでログイン。
- 空きが出来たらメールしてくれるということで、Definitly をクリック。
- Download the SDK - Google App Engine - Google Code から、プラットフォームに合わせて Google App Engine SDK （Windows なら GoogleAppEngine.msi）をダウンロードしてインストール。
- デフォルトでは、「
C:\Program Files\Google\google_appengine\」にインストールされる。 - Python 未インストールなら、別途ダウンロードしてインストール。
- デフォルトでは、「
- Google App Engine のドキュメント（Developer's Guide とか Google App Engine Articles 読む（予定）。
