今回のPython Flaskフレームワークで作るもの
今回はFlaskで静的ファイルを使用する方法について書きます。
前回はHTMLテンプレートを使って表示を作りました。簡単なデータ埋め込みです、表示を動的に作成していました。
今日扱うのは、「静的ファイル」を使ってページ作成です。静的ファイルは
- 画像ファイル
- CSS
- JavaScript
こんなものがあります。WEBページを作るときには必須の要素ですがファイルそのものを配置して、Flaskではとくに処理しないで表示するだけという、中身のデータが変化しないでそのまま使うようなものを静的ファイルって言います。
Pythonで作るFlaskアプリ記事一覧
| 内容 | |
|---|---|
| part1 | 簡単なページ作成 |
| part2 | HTMLテンプレート表示 |
| part3 | "画像" "CSS" "Javascript"実装← ココ |
| part4 | フォーム送信 |
| part5 | データベースの値取得・更新 |
ソースコード
この章のコードは以下です。確認やコピペでどうぞ
0. 静的ファイルをFlaskで扱うための準備
では、静的ファイル入れるためにstaticフォルダを作ってください。
その後、今回は画像、CSS、JavaScriptを使うので画像を入れるためのimagesフォルダを作成しました。
$ mkdir static
$ cd static
$ mkdir images
そして、今回私はimagesフォルダの中にflask-logo.pngと言う名前のファイルを入れました。
別に画像ならなんでもいいので、好きな画像ファイルを配置してください。
1. 画像の表示をPython Flaskで
第一引数に'static'を指定、filenameに先ほど作成したstaticディレクトリ以降を記述すればOKです。
.
.
<div class="container">
<h1>index.html表示してます</h1>
<img src="{{ url_for('static', filename='images/flask-logo.png') }}">
.
.
表示されました。
url_forはリンクとか、ファイルのディレクトリ先を作成する関数。なので直に以下のURL
アクセスすると普通に画像だけ表示されます。
http://127.0.0.1:5000/static/images/flask-logo.png
こんなURLをFlaskで作ってHTMLに埋め込んでいるだけと言うことです。
2. FlaskでCSS適用
前回すでにbootstrap使っているので不要かもしれませんが、追加の方法を書きます。
手順は画像の追加方法とほぼ同じです。
まずcssファイルを配置するためのディレクトリを作成して、さらにCSSファイルをその中に作成します。
$ mkdir css
$ touch css/style.css
h1 {
color: blue;
border-bottom: double 6px #87CEFA;
}
お試しなのでわかりやすいようにh1の色と線を変更してみました。
このCSSファイルを読み込めばいいだけです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"/>
<title>テストWebアプリ</title>
</head>
読み込んでいるのは
{{ url_for('static', filename='css/style.css') }}
参照先をurl_for()で作成しているだけです。
前回共通で使用するテンプレートを作成しました。
今回のCSSは今後作成するどのページでも使用するようにしてみたいので、layout.htmlに読み込みを追加しました。
画像の時の違いはlinkタグにしてhrefに変えただけです。
ここら辺はPythonでなくHTMLの話なのでいまいちわからない方はHTMの話ですね。
cssを指定したh1がちゃんとダサくなりましたのでちゃんとスタイルが適用されていますね。
3. FlaskでJavaScriptを配置
これもurl_for()を使って該当ファイルを参照すればいいので同じです。
フォルダを作成して、JavaScriptの処理を記述するのはsample.jsにしました。
$ mkdir javascript
$ touch javascript/sample.js
JavaScriptの学習はメインでないので以下をコピペで良いと思います。
window.onload = function() {
var changeColor = function() {
var e = document.getElementById('test');
e.style.color = 'red';
console.log("書き換えテスト")
}
setTimeout(changeColor, 5000);
}
idが「test」の要素を5秒後に赤くしてるだけです。
追加するのは
- 読み込みの記述
-
id="test"- idはJavaScriptの処理で今回は使っているので
読み込みはlayout.htmlで行っても良いですが、全てのページで処理が起こって欲しくはないのでindex.htmlに追加しました。
{% extends "layout.html" %}
{% block content %}
<div class="container">
<h1>index.html表示してます</h1>
<img src="{{ url_for('static', filename='images/flask-logo.png') }}">
<p id="test">{{ my_dict.insert_something1 }}</p>
<p>{{ my_dict.insert_something2 }}</p>
...
</div>
<script src="{{ url_for('static', filename='javascript/sample.js') }}"></script>
{% endblock %}
scriptタグを読むのはHTMLのルールと同じ。どこでもいいです。
今回は{% endblock %}の前だとbodyタグ終わり直前なので(layout.htmlも参照)ここで読み込むようにしました。
もしくは、layout.htmlの<head>の中でJSファイルを参照しても同じ結果は得られるはずです。
画面を確認してみましょう。
5秒後に文字が赤くなったらOKです。
まとめ
今回URLのリンク作るだけなので中身が薄い気がしますが、、、
簡単すぎるからか、公式のQuickstartにさらっとしか書いてなかったのでお役に立てればなと思います。
Pythonで作るFlaskアプリ記事一覧
| 内容 | |
|---|---|
| part1 | 簡単なページ作成 |
| part2 | HTMLテンプレート表示 |
| part3 | "画像" "CSS" "Javascript"実装← ココ |
| part4 | フォーム送信 |
| part5 | データベースの値取得・更新 |
ソースコード
この章のコードは以下です。確認やコピペでどうぞ