次の方法で共有

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

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

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

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

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

[前提条件]

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

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

  1. 使用可能なテンプレートを表示するには、Visual Studio の ソリューション エクスプローラー に移動し、プロジェクト構造を開きます。

  2. 新しいファイルを作成するフォルダーを右クリックし、[ 追加>新しいアイテム] を選択します。 [ 新しい項目の追加] ダイアログが開きます。

  3. テンプレートを使用するには、目的のテンプレートを選択し、ファイルの名前を入力して、[ 追加] を選択します。

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

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

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

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

(任意のフレームワークを使用して) Python を使用して構築された Web アプリでは、Python ファイルは常に Web ホストのサーバー上で実行され、ユーザーのコンピューターに送信されることはありません。 CSS や JavaScript などの他のファイルはブラウザーでのみ使用されるため、ホスト サーバーは要求されたときに as-is 配信するだけです。 これらの種類のファイルは "静的" ファイルと呼ばれ、Django はコードを記述しなくても自動的に配信できます。

Django プロジェクトは、アプリの 静的フォルダーから 静的ファイルを提供するように既定で設定されます。 この動作は、Django プロジェクトの settings.py ファイル内の次のコードによって可能になります。

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/

STATIC_URL = '/static/'

STATIC_ROOT = posixpath.join(*(BASE_DIR.split(os.path.sep) + ['static']))

任意のフォルダー構造を使用してアプリの 静的 フォルダー内のファイルを整理し、 静的 フォルダー内の相対パスを使用してファイルを参照できます。

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

次の手順に従って CSS ファイルをアプリに追加し、 index.html テンプレートで CSS スタイルシートを使用します。

  1. ソリューション エクスプローラーで、プロジェクト内の HelloDjangoApp フォルダーを右クリックし、[追加>New フォルダー] を選択し、フォルダーに静的な名前を付けます。

  2. 静的フォルダーを右クリックし、[追加>新しいアイテム] を選択します。

  3. [ 新しい項目の追加 ] ダイアログで、 スタイル シート テンプレートを選択し、ファイル にsite.cs名前を 付け、[追加] を選択します。

    Visual Studio によって 、site.css ファイルがプロジェクトに追加され、エディターでファイルが開きます。 更新された Django プロジェクト構造の例を次に示します。

    ソリューション エクスプローラーの静的ファイル構造を示すスクリーンショット。

  4. site.css ファイルの内容を次のスタイルに置き換えます。

    .message {
    font-weight: 600;
    color: blue;
}

  5. HelloDjangoApp/templates/index.htmlファイルの内容を次のマークアップに置き換えます。

    <html>
   <head>
      <title>{{ title }}</title>
      {% load static %} <!-- Instruct Django to load static files -->
      <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 要素のスタイルをより柔軟に設定できます。

  6. [ファイル]>[すべて保存]を選択するか、Ctrl+Shift+S キーボード ショートカットを使用して、プロジェクトの変更を保存します。 (プロジェクトの開発時に Visual Studio によってファイルが自動的に保存されるため、この手順は必要ありません)。

  7. プロジェクトを実行し、結果を確認します。 完了したら、アプリを停止します。

  8. (省略可能)変更をソース管理にコミットし、リモート リポジトリを更新できます。 詳細については、このチュートリアル シリーズの手順 2 で ソース管理への変更をコミットする を参照してください。

{% load static %} タグを使用する

{% load static %}ステートメントは、<head>や<body>などの HTML 要素内の静的ファイルへのサイト相対参照の前に、index.htmlファイル内に存在する必要があります。 このセクションに示す例では、"静的ファイル" はカスタム Django テンプレート タグ セットを参照します。 タグ セットを使用すると、 {% static %} 構文を使用して静的ファイルを参照できます。 {% load static %} タグがないと、アプリの実行時に例外が表示されます。

{% load static %} タグなしで参照を追加する

{% load static %} タグを使用せずに、HTML マークアップ内の静的ファイルへのサイト相対参照を設定することもできます。 この場合、Django プロジェクト フォルダー階層内の 静的 フォルダーの場所を指定します。

<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>

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

プロジェクトのニーズに応じて、 静的 フォルダーに他の CSS、JavaScript、HTML ファイルを追加できます。 静的ファイルを整理する一般的な方法は、 フォント、 スクリプト、 コンテンツ (スタイルシートやその他のファイル用) という名前のサブフォルダーを作成することです。 いずれの場合も、 {% static %} 参照の相対ファイル パスにフォルダーを含める必要があります。

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

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

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

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

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

    ヒント

    [追加] メニューに [新しい項目] コマンドが表示されない場合は、必要に応じて Visual Studio がデバッグ モードを終了するように Django アプリを停止してください。

  2. [ 新しい項目の追加 ] ダイアログで、 HTML ページ テンプレートを選択し、ファイル にabout.html名前を付 け、[追加] を選択します。

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

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

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

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

    def about(request):
   return render(
      request,
      "HelloDjangoApp/about.html",
      {
         'title' : "About HelloDjangoApp",
         'content' : "Example app page for Django."
      }
   )

  5. Django プロジェクトの BasicProject/urls.py ファイルで、 about ページのパスを urlPatterns 配列の最後の項目として追加します。

    # Django processes URL patterns in the order they appear in the array
urlpatterns = [
   re_path(r'^$', HelloDjangoApp.views.index, name='index'),
   re_path(r'^home$', HelloDjangoApp.views.index, name='home'),
   re_path(r'^about$', HelloDjangoApp.views.about, name='about')
 ]

  6. templates/HelloDjangoApp/index.html ファイルで、<body>要素の最初のステートメントとして次のマークアップを追加します。

    <div><a href="about">About</a></div>

    このマークアップは、Django アプリの /about ページへのリンクを追加します。 後の手順では、このリンクをナビゲーション バーに置き換えます。

  7. プロジェクトの変更を保存し、プロジェクトをもう一度実行します。 /about ページを参照し、さまざまなアプリ ページ間のナビゲーションを確認します。

  8. 完了したら、アプリを停止します。

[インデックス] ページへのルート

実行中のアプリの /index ページを参照しようとすると、 ページが見つかりません (404) エラーが表示されます。

HelloDjangoApp/views.py ファイルには index という名前の関数がありますが、Django プロジェクトの BasicProject/urls.py ファイル内の URL ルーティング パターンには、文字列indexに一致する正規表現は含まれません。 アプリの "インデックス" ページの現在の式が ^$。 文字列 indexと一致するには、パターン ^index$の別の URL エントリを追加する必要があります。

次のセクションでは、ページ テンプレートで {% url '<pattern_name>' %} タグを使用してパターンの 名前 を参照する方法について説明します。 この場合、Django によって適切な URL が作成されます。 たとえば、templates/HelloDjangoApp/ about.htmlファイルの<div><a href="home">Home</a></div>マークアップをマークアップ <div><a href="{% url 'index' %}">Home</a></div>に置き換えることができます。 urls.py ファイルの最初の URL パターンの名前が 'index' であるため、'index'文字列の使用が機能するようになりました。 'home'を使用して、2 番目のパターンを参照することもできます。

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

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

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

  • インクルード は、構文 {% include <template_path> %}を使用して参照元テンプレート内の特定の場所に挿入する他のページ テンプレートです。 コード内でパスを動的に変更する場合は、変数を使用することもできます。 インクルードは通常、ページ内の特定の場所に共有テンプレートを取得するために、ページの本体部分で使用されます。

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

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

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

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

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

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

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

<body>
   <div class="navbar">
      <a href="/" class="navbar-brand">Hello Django</a>
      <a href="{% url 'home' %}" class="navbar-item">Home</a>
      <a href="{% url '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 という名前のブロックが含まれており、参照元のページが置き換える必要があるすべてのコンテンツを識別します。

  3. HelloDjangoApp/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;
}

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

  4. templates/HelloDjangoApp/index.html ファイルの内容を次のコードに置き換えます。

    {% extends "HelloDjangoApp/layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}

    index テンプレートが基本テンプレートを参照し、content ブロックをオーバーライドするようになりました。 継承を使用すると、このテンプレートが簡略化されていることがわかります。

  5. templates/HelloDjangoApp/about.html ファイルの内容を次のコードに置き換えます。そのため、about テンプレートはベース テンプレートも参照し、content ブロックをオーバーライドします。

    {% extends "HelloDjangoApp/layout.html" %}
{% block content %}
{{ content }}
{% endblock %}

  6. アプリをもう一度実行し、結果を確認します。 ナビゲーション バーのリンクを使用して、アプリ ページを切り替えます。

    テンプレートの継承を使用してヘッダーとナビゲーション バーをすべてのページに表示する、変更された Django アプリを示すスクリーンショット。

  7. 完了したら、アプリを停止し、プロジェクトの変更を保存します。

  8. アプリに大幅な変更を加えたので、変更を Git リポジトリに保存することをお勧めします。 詳細については、このチュートリアル シリーズの手順 2 で ソース管理への変更をコミットする を参照してください。

次のステップ

手順 4: 完全な Django Web プロジェクト テンプレートを使用する