チュートリアル: Visual Studio で Flask で静的ファイルを提供し、テンプレートの継承を使用する

2025-08-08

この記事では、チュートリアルシリーズ「 Visual Studio での Flask Web フレームワークの操作」の手順 3 について説明します。

このチュートリアルシリーズの前の手順では、自己完結型 HTML の 1 ページで最小限の Flask アプリを作成します。最新の Web アプリは通常、多くのページで構成され、CSS や JavaScript ファイルなどの共有リソースを使用して、一貫したスタイルと動作を提供します。手順 3 では、Visual Studio 項目テンプレートを使用して Flask プロジェクトにコンテンツを追加し、アプリケーションの機能を拡張します。

チュートリアルの手順 3 では、次の方法を学習します。

Visual Studio 項目テンプレートを使用して定型コードを使用して新しいファイルをすばやく追加する
Flask コードから静的ファイルを提供する
Flask アプリにページを追加する
テンプレートの継承を使用してページ間でヘッダーとナビゲーションを作成する

[前提条件]

手順 1: Flask プロジェクトを作成し、「手順 2: Flask プロジェクトをリファクタリングする」で更新された Visual Studio ソリューションと Flask アプリケーションプロジェクト。

Visual Studio で項目テンプレートを探索する

Flask アプリケーションを開発するときは、通常、Python、HTML、CSS、JavaScript の各ファイルをさらに追加します。 Visual Studio には、ファイルの種類 (およびデプロイに必要な web.config などの他のファイル) ごとに、作業を開始するための便利な項目テンプレートが用意されています。これらのテンプレートを使用すると、定型コードを使用してさまざまな種類の新しいファイルをすばやく追加できます。

使用可能なテンプレートを表示するには、Visual Studio の ソリューションエクスプローラー に移動し、プロジェクト構造を開きます。
新しいファイルを作成するフォルダーを右クリックし、[ 追加>新しいアイテム] を選択します。 [ 新しい項目の追加] ダイアログが開きます。
テンプレートを使用するには、目的のテンプレートを選択し、ファイルの名前を入力して、[ 追加] を選択します。

Visual Studio によって現在のプロジェクトにファイルが追加され、ソース管理の変更がマークされます。

Visual Studio で項目テンプレートを識別する方法を理解する

Visual Studio プロジェクトファイル (.pyproj) には、ファイルを Python プロジェクトとしてマークするプロジェクトの種類識別子が含まれています。 Visual Studio では、この型識別子を使用して、プロジェクトの種類に適した項目テンプレートのみを認識して表示します。 Visual Studio では、このアプローチに従って、毎回並べ替えを求めることなく、多くのプロジェクトの種類に対して豊富な項目テンプレートのセットを提供します。

アプリから静的ファイルを提供する

(任意のフレームワークを使用して) Python を使用して構築された Web アプリでは、Python ファイルは常に Web ホストのサーバー上で実行され、ユーザーのコンピューターに送信されることはありません。 CSS や JavaScript などの他のファイルはブラウザーでのみ使用されるため、ホストサーバーは要求されたときに as-is 配信するだけです。これらの種類のファイルは "静的" ファイルと呼ばれ、Flask はコードを記述しなくても自動的に配信できます。たとえば、HTML ファイル内では、プロジェクト内の相対パスを使用して静的ファイルを参照できます。このセクションの最初の手順では、既存のページテンプレートで静的 CSS ファイルを使用する方法を示します。

API エンドポイントの実装など、コードから静的ファイルを配信する必要がある場合、Flask には便利なメソッドが用意されています。プロジェクトルートの static という名前のフォルダー内の相対パスを使用して、ファイルを参照できます。このセクションの 2 番目の手順では、コードから単純な静的データファイルを操作する方法を示します。

どちらの手順でも、設定に従って静的フォルダーの下にファイルを整理できます。

テンプレートで静的 CSS ファイルを使用する

テンプレートで静的ファイルを使用するには、次の手順に従います。

ソリューションエクスプローラーで、プロジェクト内の HelloFlask フォルダーを右クリックし、[追加>New フォルダー] を選択し、フォルダーに静的な名前を付けます。
静的フォルダーを右クリックし、[追加>新しいアイテム] を選択します。
[ 新しい項目の追加 ] ダイアログで、 スタイルシート テンプレートを選択し、ファイル にsite.cs名前を 付け、[追加] を選択します。

Visual Studio によって 、site.css ファイルがプロジェクトに追加され、エディターでファイルが開きます。更新された Flask プロジェクト構造の例を次に示します。
site.css ファイルの内容を次のスタイルに置き換えます。
```
.message {
    font-weight: 600;
    color: blue;
}
```
HelloFlask/templates/index.htmlファイルの内容を次のマークアップに置き換えます。
```
<html>
   <head>
      <title>{{ title }}</title>
      <link rel="stylesheet" type="text/css" href="/static/site.css" />
   </head>
   <body>
      <span class="message">{{ message }}</span>{{ content }}
   </body>
</html>
```
このコードは、チュートリアルシリーズの手順 2 の<strong> HTML 要素を、message スタイルクラスを参照する<span>要素に置き換えます。この方法でスタイルクラスを使用すると、HTML 要素のスタイルをより柔軟に設定できます。
[ファイル]>[すべて保存]を選択するか、Ctrl+Shift+S キーボードショートカットを使用して、プロジェクトの変更を保存します。 (プロジェクトの開発時に Visual Studio によってファイルが自動的に保存されるため、この手順は必要ありません)。
プロジェクトを実行し、結果を確認します。完了したら、アプリを停止します。
(省略可能)変更をソース管理にコミットし、リモートリポジトリを更新できます。詳細については、このチュートリアルシリーズの手順 2 でソース管理への変更をコミットするを参照してください。

コードから静的ファイルを提供する

Flask には、 send_static_file という名前の関数が用意されています。コードから呼び出して、プロジェクトの静的フォルダー内の任意のファイルを参照できます。次のプロセスでは、静的データファイルを返す単純な API エンドポイントを作成します。

静的フォルダーに、data.jsonという名前の静的 JSON データファイルを作成します。 テキスト ファイルテンプレートは、ファイルの基礎として使用できます。
JSON ファイルの内容を、メカニズムを示すサンプルデータを提供する次のコードに置き換えます。
```
{
   "01": {
      "note" : "Sample data to demonstrate the mechanism."
   }
}
```
HelloFlask/views.py ファイルで、send_static_file メソッドを使用して静的データファイルを返すルート /api/data エンドポイントを持つ関数を追加します。
```
@app.route('/api/data')
def get_data():
  return app.send_static_file('data.json')
```
プロジェクトの変更を保存し、プロジェクトをもう一度実行します。 /api/data ルートエンドポイントを参照し、アプリから静的ファイルが返されたことを確認します。
完了したら、アプリを停止します。

静的ファイルとフォルダーを整理する

プロジェクトのニーズに応じて、静的フォルダーに他の CSS、JavaScript、HTML ファイルを追加できます。静的ファイルを整理する一般的な方法は、 フォント、 スクリプト、 コンテンツ (スタイルシートやその他のファイル用) という名前のサブフォルダーを作成することです。

API からの URL ルートとクエリパラメーターを使用する

Flask を使用する場合は、API を使用して URL 変数とクエリパラメーターを処理できます。詳細については、このチュートリアルシリーズの手順 1 で変数 URL ルートとクエリパラメーターを使用するを参照してください。

Flask アプリケーションにページを追加する

Flask アプリケーションに別のページを追加するには、次のタスクが必要です。

ビューを定義する Python 関数を追加する
ページの HTML マークアップ用のテンプレートを追加する
Flask プロジェクトの views.py ファイル内の URL ルートを更新する

BasicProject Flask プロジェクトに About (/about) ページを追加し、ホームページからそのページへのリンクを追加するには、次の手順に従います。

ソリューションエクスプローラーで、プロジェクトの HelloFlask/templates フォルダーを右クリックし、[追加>新しい項目] を選択します。

ヒント

[追加] メニューに [新しい項目] コマンドが表示されない場合は、必要に応じて Visual Studio がデバッグモードを終了するように Flask アプリを停止してください。
[ 新しい項目の追加 ] ダイアログで、 HTML ページ テンプレートを選択し、ファイル にabout.html名前を付 け、[追加] を選択します。

about.html ファイルの内容を次の HTML マークアップに置き換えます。

<html>
   <head>
      <title>{{ title }}</title>
      <link rel="stylesheet" type="text/css" href="/static/site.css" />
   </head>
   <body>
      <div><a href="home">Home</a></div>
      {{ content }}
   </body>
</html>

次の手順では、ホームページへの明示的なリンクをナビゲーションバーに置き換えます。

HelloFlask/views.py ファイルに、テンプレートを使用する about という名前の関数を追加します。

@app.route('/about')
def about():
   return render_template(
      "about.html",
      title = "About HelloFlask",
      content = "Example app page for Flask.")

HelloFlask/templates/index.html ファイルで、<body>要素の最初のステートメントとして次のマークアップを追加します。
```
<div><a href="about">About</a></div>
```
このマークアップは、Flask アプリの /about ページへのリンクを追加します。後の手順では、このリンクをナビゲーションバーに置き換えます。
プロジェクトの変更を保存し、プロジェクトをもう一度実行します。 /about ページを参照し、さまざまなアプリページ間のナビゲーションを確認します。
完了したら、アプリを停止します。

ページ関数に名前を付けます

Flask では、ページ関数の名前に制限や要件は適用されません。 @app.routeデコレーターは、Flask が関数を呼び出して応答を生成する URL を決定します。通常、開発者はページ関数名をルートと照合しますが、この種類の一致は必要ありません。

ヘッダーとナビゲーションにテンプレートの継承を使用する

多くの Web アプリには、各ページの明示的なナビゲーションリンクではなく、最も重要なページリンクやポップアップメニューなどを提供するブランド化ヘッダーとナビゲーションバーがあります。アプリ内の一貫性を確保するために、ヘッダーとナビゲーションバーはすべてのページで同じである必要がありますが、すべてのページテンプレートで同じコードを繰り返す必要はありません。すべてのページの共通部分を 1 つのファイルで定義できます。

Flask のテンプレートシステム (既定では Jinja) には、複数のテンプレート間で特定の要素を再利用する 2 つの方法が用意されています。

インクルード は、構文 {% include <template_path> %}を使用して参照元テンプレート内の特定の場所に挿入する他のページテンプレートです。コード内でパスを動的に変更する場合は、変数を使用することもできます。インクルードは通常、ページ内の特定の場所に共有テンプレートを取得するために、ページの本体部分で使用されます。
継承では、ページテンプレートの先頭にある {% extends <template_path> %} 構文を使用して、参照元テンプレートが構築する共有ベーステンプレートを指定します。継承は、アプリのページの共有レイアウト、ナビゲーションバー、およびその他の構造を定義するために一般的に使用されます。この方法では、参照するテンプレートで 、ブロックと呼ばれる基本テンプレートの特定の領域のみを追加または変更する必要があります。

どちらの方法でも、 <template_path> 値はアプリの テンプレート フォルダー (../ または ./ も許可されます)。

基本テンプレートは、 {% block <block_name> %} タグと {% endblock %} タグを使用してブロックを線分けします。参照元テンプレートで同じブロック名のタグが使用されている場合、参照元テンプレートのブロックコンテンツは、ベーステンプレート内の一致するブロックをオーバーライドします。

次の手順では、テンプレートの継承を示します。

ソリューションエクスプローラーで HelloFlask/templates フォルダーを右クリックし、layout.html という名前の新しいファイルを HTML ページ テンプレートから作成します。

layout.html ファイルの内容を次の HTML マークアップに置き換えます。

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>{{ title }}</title>
   <link rel="stylesheet" type="text/css" href="/static/site.css" />
</head>

<body>
   <div class="navbar">
      <a href="/" class="navbar-brand">Hello Flask</a>
      <a href="{{ url_for('home') }}" class="navbar-item">Home</a>
      <a href="{{ url_for('about') }}" class="navbar-item">About</a>
   </div>

   <div class="body-content">
      {% block content %}
      {% endblock %}
      <hr/>
      <footer>
         <p>&copy; 2024</p>
      </footer>
   </div>
</body>
</html>

このテンプレートには content という名前のブロックが含まれており、参照元のページが置き換える必要があるすべてのコンテンツを識別します。

HelloFlask/static/site.css ファイルで、ファイルの末尾に次のスタイルを追加します。

.navbar {
   background-color: lightslategray;
   font-size: 1em;
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   color: white;
   padding: 8px 5px 8px 5px;
}

.navbar a {
   text-decoration: none;
   color: inherit;
}

.navbar-brand {
   font-size: 1.2em;
   font-weight: 600;
}

.navbar-item {
   font-variant: small-caps;
   margin-left: 30px;
}

.body-content {
   padding: 5px;
   font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

これらのスタイル定義は、この演習の興味深い結果を生成します。このチュートリアルでは、レスポンシブデザインについては説明しません。

HelloFlask/templates/index.htmlファイルの内容を次のマークアップに置き換えます。
```
{% extends "layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
index テンプレートが基本テンプレートを参照し、content ブロックをオーバーライドするようになりました。継承を使用すると、このテンプレートが簡略化されていることがわかります。
HelloFlask/templates/about.html ファイルの内容を次のマークアップに置き換えます。そのため、about テンプレートは基本テンプレートも参照し、content ブロックをオーバーライドします。
```
{% extends "layout.html" %}
{% block content %}
{{ content }}
{% endblock %}
```
アプリをもう一度実行し、結果を確認します。ナビゲーションバーのリンクを使用して、アプリページを切り替えます。
完了したら、アプリを停止し、プロジェクトの変更を保存します。
アプリに大幅な変更を加えたので、変更を Git リポジトリに保存することをお勧めします。詳細については、このチュートリアルシリーズの手順 2 でソース管理への変更をコミットするを参照してください。

チュートリアルのレビュー

Visual Studio の Flask でこのチュートリアルを完了しました。

このチュートリアルでは、次の方法を学習しました。

複数のページを含む Flask プロジェクトを作成する
テンプレートを使用して別のページビューを作成する
静的ファイルの提供、ページの追加、テンプレートの継承の使用

Jinja テンプレートデザイナーのドキュメント (jinja.pocoo.org)
Flask Application オブジェクトドキュメントのurl_for (flask.pocoo.org)
GitHub のチュートリアルソースコード (Microsoft/python-sample-vs-learning-flask)