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

コメント（過去分）

※コメントがインポートできなかったため、旧ブログ時代にいただいたコメントについては、記事の末尾に再掲載する形を取らせていただいています。

app.yaml の変更

はじめまして。
.css ファイルをなかなか別ファイルにできずにあきらめかけて
いたのですが、参考になりました。　ありがとうございました。

Posted by kw at 2008/04/15 (Tue) 23:09:33

Re: app.yaml の変更

お役に立てて何よりです。

kwさんのサイト、RSS リーダーに登録させていただきました。
これから Datastore API の勉強をしようと思っていたので、参考にさせていただきます。

Posted by にーやん at 2008/04/16 (Wed) 00:50:30

niiyan's blog

niiyanの個人ブログ。