Flaskのrender_templateでHTML・CSS・JavaScriptファイルを読み込む

前提条件

Flaskを『ローカルで開発する環境構築』から『プログラムの実行まで』を一通り

HTMLファイルを読み込む

STEP.1
templatesフォルダを作成し、その中にindex.htmlを作成する
ターミナル
$ mkdir templates; touch templates/index.html
ディレクトリ
flask/
 ┣ app.py
 ︙
 ┗ templates/
   ┗ index.html
STEP.2
index.htmlを修正する
index.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello Jinja2</title>
  </head>
  <body>
		<h1>Hello Jinja2</h1>
		<p>Jinja2でHTMLファイルを読み込みことに成功しました。</p>
  </body>
</html>
STEP.3
app.pyを修正する
app.py
# -*- coding: utf-8 -*-
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
	return render_template('index.html')

if __name__ == '__main__':
	app.run()
STEP.4
app.pyを実行し、動作確認する
ターミナル
$ python app.py

http://127.0.0.1:5000/で動作確認してみましょう。

END

CSS、JSファイルを読み込む

STEP.1
staticフォルダを作成し、その中にcssとjsフォルダを作成する
ターミナル
$ mkdir -p static/css static/js
ディレクトリ
flask/
 ┣ app.py
 ︙
 ┣ static/
 ┃ ┣ css/
 ┃ ┗ js/
 ┗ templates/
   ┗ index.html
STEP.2
cssフォルダの中にstyle.css、jsフォルダの中にscript.jsを作成する
ターミナル
$ touch static/css/style.css; touch static/js/script.js
ディレクトリ
flask/
 ┣ app.py
 ︙
 ┣ static/
 ┃ ┣ css/
 ┃ ┃ ┗ style.css
 ┃ ┗ js/
 ┃   ┗ script.js
 ┗ templates/
   ┗ index.html
STEP.3
index.htmlを修正する
index.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello Jinja2</title>
    
    <!-- cssの読み込み -->
    <link rel="stylesheet" href="static/css/style.css">
    
  </head>
  <body>
    <h1>Hello Jinja2</h1>
    <p>Jinja2でHTMLファイルを読み込みことに成功しました。</p>
		
    <!-- jsの読み込み -->
    <script src="static/js/script.js"></script>

  </body>
</html>
STEP.4
style.cssscript.jsを修正する
style.css
body {
  background: #F4E7D3;
}
h1 {
  color: #B01335;
}
p {
  color: #1F4E5F;
}
script.js
alert('Hello Jinja2');
STEP.5
app.pyを実行し、動作確認する
ターミナル
$ python app.py

http://127.0.0.1:5000/で動作確認してみましょう。

END

連載目次:FlaskでWebアプリケーションを開発するためのロードマップ

入門編:10記事

入門編の10記事を順に読んでいけば、FlaskでWebアプリケーションを開発する必要最小限のことが学べます。

簡単なアプリケーションであれば、セキュリティ上の観点を考慮しなかった場合公開できるでしょう。

実践編

実践編の記事では、FlaskでWebアプリケーションを公開するために欠かせないセキュリティのことや実践的なテクニックを紹介しています。

ここまで読み込めば、あとはアイディア次第でいろんなWebアプリケーションを公開できるでしょう!

  1. セッション
  2. Cookie
  3. メソッドベース・ディスパッチ
  4. ベーシック認証・Digest認証
  5. ログイン機能
  6. サーバーサイドからクライアントサイドにpandas.Series、pandas.DataFrameを渡す
  7. クライアントサイド(form)からPOSTされた1、2次元配列を受け取る
  8. matplotlibを使う
  9. Bootstrap4を使う
  10. フォームの非同期通信(Ajax, jQuery)