静的ファイルの提供

このページでは、CSS を静的ファイルとして提供する方法を説明します。

従来のウェブホスティング環境とは異なり、Google App Engine では、構成を行わない限り、アプリケーションのソースディレクトリから直接ファイルを提供しません。ただし、画像、CSS、JavaScript コードなどの静的ファイルをウェブブラウザに直接提供することはできます。また、独自のハンドラを作成せずに特定のファイルを提供するように App Engine に指示できます。

このページは複数ページからなるチュートリアルの一部です。設定などの手順を最初から見るには、ゲストブックの作成に移動してください。

ハンドラの定義

次のコードサンプルでは、app.yaml ファイルで URL の 2 つの新しいハンドラが定義されています。

  1. App Engine は、/stylesheets で始まる URL のリクエストを受け取ると、残りのパスを stylesheets ディレクトリ内のファイルにマッピングします。適切なファイルが見つかった場合、その内容をクライアントに返します。

  2. 他の URL はすべて /.* パスと照合され、helloworld.php スクリプトによって処理されます。

    app.yaml 
    runtime: php55
api_version: 1

handlers:
- url: /stylesheets
  static_dir: stylesheets

- url: /.*
  script: helloworld.php

URL ハンドラのパスパターンは、app.yaml 内での出現順でテストされます。この場合、/.* パターンが適切なパスを照合する前に、/stylesheets パターンの照合を行います。URL マッピングや app.yaml で指定できるその他のオプションの詳細については、app.yaml リファレンスをご覧ください。

スタイルシートの追加

次のコードサンプルでは、CSS ファイルを作成してアプリケーションに追加しています。

  1. このコードサンプルでは、次の内容を helloworld/stylesheets ディレクトリ内の main.css ファイルに追加します。

    stylesheets/main.css 
    body {
  font-family: Verdana, Helvetica, sans-serif;
  background-color: #DDDDDD;
}

    デフォルトでは、App Engine はファイルの拡張子に基づいた MIME タイプを使用して静的ファイルを提供します。たとえば、.css で終わる拡張子を持つファイルの場合、text/css の MIME タイプで提供されます。app.yaml 構成ファイルでハンドラを構成するときに mime_type 設定を使用すると、MIME タイプを明示的に構成できます。

  2. このコードサンプルでは、アプリケーションでスタイルシートを使用するために、先頭の <html> 行の後に次の行を挿入します。

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