はじめに
前回のあらすじ
前回はとりあえず、はじめの一歩として環境の構築（構築と言ってもcloud9がほぼ準備してくれているのでFlaskのインストールくらいですが）と簡単なWebアプリの実行（アプリといってもHello Flask!と表示するだけですが）をやってみました。
さすがにそれではアレなので、今回はもう少しアレなものを作りたいと思います。
ちなみに、前回の記事はこちらです。
AWS Cloud9でFlaskを使ってみた①
作るもの
Hello Flask from template with Css & JavaScriptと表示するWebアプリ。
これですね。
前回とほとんどかわってないんじゃね？とか言わずにお願い致します。
見た目はさほど変わっていませんが、中身はかなりアレになってます。色がついていますし、なんと色が変わります！
まずFlaskのテンプレートという機能を使っています。
テンプレートとは、ブラウザからフレームワークにリクエストがあったときに表示するHTMLファイルの型みたいなものです。ほとんどHTMLファイルなんですが、敢て型と書いたのは後から変数を埋め込むことができるからです。
これも使っていくうちにわかると思いますので、今のうちは「ふーん」くらいに思っていてください。ちなみにテンプレートはjinja2というテンプレートエンジンを使っているそうです。
テンプレート → テンプル → 神社 → jinja らしい
ダジャレかよ！ところでテンプルって寺じゃね？
まあそんな感じです。
CSSとJavaScriptはいいですよね。フォントの大きさを変えたり、色を変えたり、動きがアレになります。この組み合わせで、ほぼほぼのWebアプリが作れます。
使うもの
・AWS Cloud9
・python (2.7.14)
・Flask (1.0.2)
これは前回説明したのでいいと思います。Cloud9は便利です。ただし、無料期間が過ぎると多少お金がかかります。
やってみよう
テンプレートを使ってみる
まずはテンプレートを置いておくディレクトリを作ります。
$mkdir templates
とターミナルに打ち込みます。念のため。
ちなみに、これ以外の名前では動きませんのでご注意ください。
そして、その中にindex.htmlを作成します。
中身はこんな感じ。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
<h1>Hello Flask from template</h1>
</body>
</html>
なんの変哲もないHTMLファイルです。今回はテンプレートエンジンの本当の力の半分も使っていないのですが、今日はこれくらいにしておいてやりましょう。
続いてapp.pyを以下に書き換えます。
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def hello():
return render_template('index.html')
if __name__ == "__main__":
app.run(host = '0.0.0.0', port = 5000)
前回から変更されている点は2点だけです。
一つはパッケージのインポートでrender_templateが追加されています。もう一点はそれをhello()の中で使っているところです。render_templateはその名の通りテンプレートファイルを渡す関数です。引数は先ほど作成したtemplatesディレクトリの中のテンプレートのファイル名です。
では、ここで一旦実行してみましょう。
以下のコマンドをターミナルにぶち込みましょう。
$python app.py
実行されましたら、適当なブラウザで以下にアクセスしてみましょう。
http://(実行中のEC2のパブリックDNS):5000/
パブリックDNSはAWSサービスのEC2の実行中のインスタンスから確認してください。
ポートを開けてない方はEC2のダッシュボードからセキュリティグループの設定を変更してください。
こんなんでましたけど。
うまく出ましたか？見た目は変わっていませんが、Flaskがしっかりテンプレートを探してきてWebアプリを動かしてくれています。
「雨を感じられる人間もいれば、ただ濡れるだけの奴らもいる」（by ボブ・マーリー）
ということで次々いきましょう。
CSSとJavaScriptを使う
続きましてCSSとJavaScriptに行きましょう。これも同じようにディレクトリから作ります。
以下のコマンドをターミナルに打ち込みます。
$mkdir static
同じように名前はstaticでないとダメなんです。
ここに以下のようなCSSファイルと、Scriptファイルを保存してください。
h1 {
color: red;
}
window.onload = function() {
var e = document.getElementById('target');
//マウスがのったとき
e.addEventListener("mouseover", function(){
e.style.color = 'blue';
}, false);
//マウスがはなれたとき
e.addEventListener("mouseout", function(){
e.style.color = 'red';
}, false);
}
CSSやJavaScriptの説明は省略致します。googleさんに聞けばもっと気の利いた説明が見つかると思います。ここではマウスが乗っかると色が変わるようにしています。ちなみに離れた時も書いておかないと色が変わったままになってしまうので。
最後にHTMLファイルを書き換えます。
ちなみに私の記事のコードはまるまるコピーして置き換えて動くようになってます。書き換える部分だけ書いていたりすると不親切ですので。
ですので、まず何も考えずにコピペして動かしてみてください。ポイントはあとで説明していきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">
<script src="{{url_for('static', filename='script.js')}}"></script>
</head>
<body>
<h1 id="target">Hello Flask from template with CSS & JavaScript??</h1>
</body>
</html>
今回の変更点は一つです。
headでスタイルシートとスクリプトを読み込む部分です。読み込む場合は{{url_for()}}を利用します。ここでディレクトリとファイル名を引数として与えます。
ディレクトリ名を与えているので、名前は任意かと思いきやstaticでないとダメなんです。
それではブラウザで表示してみましょう。上手く色が変われば成功です。
マウスがのってないときー。
マウスがのったときー。
ちなみに、chromeで結果を確認している場合、キャッシュが残っていてスクリプトを更新しても変わんないじゃないの？みたいなことが起きます。そんなときはCtrl + Shift + r
でスーパーリロードしてください。キャッシュをスーパーすっきりさせてくれます。
終わりに
今回はFlaskでテンプレートを使ってみました。また、CSSとJavaScriptを読み込めるようにしました。これでかなりやれる事の幅が広がったと思います。
今後は、画像や動画を扱ったり、フォームを使ったアプリケーションでしょうか、あとはやっとpythonのプログラムと連携して、テンプレートに引数を渡すみたいなこともやっていこうと思います。