静的なファイルを使う

Using Static Files

CSSファイル、JSコード、画像、Flashアニメーションなど、本来はサーバー側においてそこから読み取られる情報をローカルで実現させる仕組み?

まず、helloworld.pyの場所に新しくstylesheetsフォルダを作成します。
その後、app.yamlファイルのhandlersに先ほど作成したstylesheetsフォルダを静的にアクセスできる場所として指定するため、以下を追加します。

handlers:
- url: /stylesheets
 static_dir: stylesheets

stylesheetsフォルダにmain.cssという名前でスタイルシートファイルを作成

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

最後に、index.htmlにmain.cssを読み込ませる。


 

これで、完了。
リロードすると、スタイルが適用される。
app.yamlのhandlers指定が無いとスタイルが適用されません。

じゃあ、これは一体なにしてるの?

handlers:
- url: /stylesheets
 static_dir: stylesheets

これは、/stylesheetsを要求されたときにAdd Engine側で参照しに行く場所を追加指定しています。
つまり、index.htmlでhref="/stylesheets/main.css"と要求されたとき、サーバー側にファイルが無いためスタイルが実行されないけど、handlers指定することで、ローカルのディレクトリを参照してその結果を返してくれるようになります。

その他のファイル形式(画像、スクリプト等)でも同じように指定する必要があります。

handlers:
#スタイルシート
- url: /stylesheets
 static_dir: stylesheets
#Javascriptコード
- url: /js
 static_dir: js
#画像
- url: /images
 static_dir: images
#Flashアニメーション
- url: /animations
 static_dir: animations

みたいな感じになるのか。ちょっと面倒くさいな。