お気に入り | 日本語 | ログイン

静的ファイルの使用

従来の Web ホスティング環境とは異なり、Google App Engine では、特に設定しない限り、アプリケーションのソース ディレクトリからファイルを直接供給することはありません。テンプレート ファイルとして index.html というファイルを使っていますが、URL /index.html で自動的にそのファイルにアクセスできるわけではありません。

しかし、ウェブ ブラウザに静的ファイルを直接渡す必要がある場合も多くあります。画像、CSS スタイルシート、JavaScript コード、映像、Flash アニメーションなどはすべて、通常は Web アプリケーションで保存され、ブラウザに直接供給されます。App Engine では、ハンドラをコーディングしなくても、特定のファイルを直接供給するよう設定できます。

静的ファイルの使用

helloworld/app.yaml を編集し、コンテンツを次のように置き換えます。

application: helloworld
version: 1
runtime: python
api_version: 1

handlers:
- url: /stylesheets
  static_dir: stylesheets

- url: /.*
  script: helloworld.py

新しい handlers セクションでは、URL に対する 2 つのハンドラを定義しています。App Engine が、/stylesheets で始まる URL を持つリクエストを受け取ると、stylesheets ディレクトリ内のファイルへのパスの残りの部分をマッピングし、該当のファイルが見つかれば、ファイルのコンテンツをクライアントへ返します。/ パスと一致する他のすべての URL は、helloworld.py スクリプトによって処理されます。

デフォルトでは、App Engine は、ファイル名拡張子に基づく MIME タイプを使用して静的ファイルを供給します。たとえば、ファイル名の拡張子が .css の場合、このファイルの MIME タイプは text/css となります。この MIME タイプは、追加のオプションで変更することもできます。

URL ハンドラのパス パターンは、app.yaml で出現した順に上から下へテストされます。この場合、/.* パターンが該当のパスに一致する前に、/stylesheets パターンが一致することになります。URL マッピングと app.yaml で使用できるオプションに関する詳しい情報は、app.yaml リファレンスをご覧ください。

ディレクトリ helloworld/stylesheets を作成します。この新しいディレクトリで、main.css という名前のファイルを作成し、次のコンテンツを入れます。

body {
  font-family: Verdana, Helvetica, sans-serif;
  background-color: #DDDDDD;
}

最後に、helloworld/index.html を編集し、最初の <html> 行の直下に次の行を挿入します。

  <head>
    <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
  </head>

ブラウザでページをリロードすると、新しいバージョンでは、スタイルシートが使用されています。

次のステップ

いよいよ、完成したアプリケーションを世界にお披露目するときが来ました。

アプリケーションのアップロードに進みます。