ホラ・コーダーズ この記事は Flask の静的ファイルとその実装についてです。
この記事もチェック：Flaskでファイルアップロード機能を実装する方法を分かりやすく解説する
Flask における静的ファイルの必要性
ほとんどの Web サイトが、写真や背景色などの美化要素で構成されていることにお気づきでしょう。
from flask import Flask,render_template
app = Flask(__name__)
@app.route('/blog')
def blog():
return render_template('blog.html')
app.run(host='localhost', port=5000)
|
Webサイトのこのような美しさは、画像、CSSファイル、JSスクリプトで構成される静的ファイルを使用することで実現されています。
これらの静的ファイルは、Flaskアプリケーションの横にあるstaticという別のフォルダに保存されます。
<img src = "{{ url_for('static',filename="<filename>") }}>
|
さて、静的ファイルについての知識を得たところで、実際に静的ファイルを実装してみましょう。
Flask の静的ファイルを使ったハンズオン
Flask を使って、Web ページに背景の静的ファイル画像を表示させてみます。
1. メインアプリケーションのコード化
次のようなFlaskアプリケーションのコードを考えてみましょう。
<html>
<body>
<img src= "{{ url_for('static',filename='blog.jpg') }}">
<h2>This is a blog website</h2>
</body>
</html>
|
ここでは、render_template 関数を使って HTML テンプレートをレンダリングしています。
もし、アプリケーションの構文が理解できない場合は、Flask入門の記事を読むとより理解が深まります。
2. テンプレートの作成
ここでは、静的ファイルの場所を指定するために、特別なURL属性を使用しています。
url_for 属性は、static フォルダにあるファイルのパスを取得します。
以下の画像をダウンロードして、staticフォルダに保存してください。
次に、「blog.html」というテンプレートファイルを作成し、以下のコードを追加します。
Flask Templates の記事で、Flask でのテンプレート作成について詳しく説明しています。
この記事もチェック：FlaskのCookiesの設定、保存や取得等の使い方を分かりやすく解説する
3. コードの実装
それでは、サーバを起動してWebページを確認してみましょう。
完璧です!
まとめ
今回のチュートリアルはここまでです。
この記事が Flask の静的ファイルに関する知識を深めるのに役立てば幸いです。
テンプレートについてもっと知りたい方は Flask Template の記事をチェックしてみてください。
それではまた、次の記事でお会いしましょう では、また次回！ハッピーコーディング