Google App Engine で画像を扱うには

Google App Engine において、CSS を独立したファイルにして扱おうと思ったけれど、なぜかアプリケーションのルートディレクトリに置いてもファイルが認識されない。仕方がないので、スタイルシートの情報は HTML ファイル内に埋め込んだ。そして、今度は画像を表示させようと思い、 HTML の img 要素や CSS の background で指定したみたけれどダメ。うーん… (+_+) これは何か表示させるための仕組みがあるということか。

 

静的ファイルの扱い

静的ファイルの使用 - Google App Engine - Google Code によると、

Google App Engine では、特に設定しない限り、アプリケーションのソース ディレクトリからファイルを直接供給することはありません。(…)

画像、CSS スタイルシート、JavaScript コード、映像、Flash アニメーションなどはすべて、通常は Web アプリケーションで保存され、ブラウザに直接供給されます。

 

app.yaml の設定

上記のページではスタイルシートを独立したファイルとして使う場合の指定方法が書かれていた。これを真似して画像を扱えるようにした。例えば、アプリケーションのルートに `img ディレクトリ’ があり、そこに画像ファイルが置かれているとする。この場合、アプリケーションの設定ファイルである app.yaml の handlers セクションに次のように記述を追加する。

handlers:
- url: /img
  static_dir: img
- url: /.*
  script: XXXXXXX.py

ただし、 `- url: /.* ’ の記述よりも前に記述すること。

アプリの構成 - Google App Engine - Google Code によると、

static_dir

アプリケーションのルート ディレクトリから、静的ファイルを格納しているディレクトリまでのパスです。一致した url パターンの末尾から後の部分はすべて static_dir に付加され、要求されたファイルへのフルパスとなります。

 

HTML における指定方法

上記のように設定した場合、HTML ファイルにおいて次のように画像ファイルを指定する。

<img src="/img/XXXXXX.png" />

/img ではじまる URL の指定が handlers の設定によって img ディレクトリにマッピングされているのがわかる。