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

  • [アーティクル]

前の手順: 静的ファイルを提供し、ページを追加し、テンプレート継承を使用する

Visual Studio での Django の基本を確認したので、'Django Web プロジェクト' テンプレートで紹介した完成度の高いアプリを簡単に理解できるようになりました。

この手順では、次のことを学習します。

  • "Django Web プロジェクト" テンプレートを使用してより完全な Django Web アプリを作成し、プロジェクト構造を調べる (手順 4-1)
  • 基本のページ テンプレートを継承し、jQuery や Bootstrap などの静的 JavaScript ライブラリを採用した 3 つのページで構成される、プロジェクト テンプレートによって作成されたビューとページ テンプレートを理解する (手順 4-2)
  • テンプレートによって提供された URL ルーティングを理解する (手順 4-3)

また、テンプレートでは、手順 5 で取り上げる基本認証も提供されます。

手順 4-1: テンプレートからプロジェクトを作成する

  1. Visual Studio で、ソリューション エクスプローラーに移動して、このチュートリアルで以前に作成した LearningDjango ソリューションを右クリックします。 次に、[追加]>[新しいプロジェクト] の順に選びます (新しいソリューションを使用する場合は、代わりに [ファイル]>[新規作成]>[プロジェクト] の順に選択します)。

  2. [新しいプロジェクト] ダイアログで、[Django Web プロジェクト] テンプレートを見つけて選びます。 プロジェクト "DjangoWeb" を呼び出し、[作成] を選びます。

  3. テンプレートには requirements.txt ファイルが含まれているので、Visual Studio によって依存関係をインストールする場所の入力が求められます。 プロンプトが表示されたら、[仮想環境にインストール] オプションを選び、[仮想環境の追加] ダイアログで [作成] を選択して既定値を受け入れます。

  4. Visual Studio による仮想環境の設定が完了したら、readme.html ファイルに表示された指示に従って、Django スーパー ユーザー (つまり、管理者) を作成します。 Visual Studio プロジェクトを右クリックして、[Python]>[Django でスーパー ユーザーを作成する] コマンドを選び、プロンプトの指示に従います。 アプリの認証機能を利用するときに使うので、必ずユーザー名とパスワードをメモしておきます。

  5. ソリューション エクスプローラーを右クリックし、[スタートアップ プロジェクトとして設定] を選択して、DjangoWeb プロジェクトを Visual Studio ソリューションの既定に設定します。 デバッガーを起動すると、太字で表示されているスタートアップ プロジェクトが実行されます。

    Solution Explorer showing the DjangoWeb project as the startup project.

  6. [デバッグ]>[デバッグの開始] (F5 キー) を選択するか、ツールバーの [Web サーバー] ボタンを使用して、サーバーを実行します。

    Run web server toolbar button in Visual Studio.

  7. テンプレートによって作成されるアプリには、[Home]、[About]、[Contact] という 3 つのページがあります。 ナビゲーション バーを使ってページ間を移動できます。 アプリのさまざまな部分を調べるのに、1 ～ 2 分かかります。 [ログイン] コマンドを使ってアプリでの認証を行うために、前に作成したスーパーユーザーの資格情報を使用します。

    Full browser view of the Django Web Project app.

  8. "Django Web プロジェクト" テンプレートで作成されたアプリでは、モバイル フォーム ファクターに対応したレスポンシブ レイアウトのために、Bootstrap を使用します。 この応答性を確認するために、コンテンツを縦長に表示してナビゲーション バーがメニュー アイコンに切り替わるように、ブラウザーの表示幅を縮小します。

    Mobile (narrow) view of the Django Web Project app.

  9. 以降のセクションのために、アプリを実行したままにすることができます。

    アプリを停止してソース コントロールへの変更をコミットする場合、チーム エクスプローラーで [変更] を開き、仮想環境のフォルダー (通常は env) を右クリックして、[これらのローカル項目を無視] を選びます。

テンプレートによって作成されたものを確認する

広義では、"Django Web プロジェクト" テンプレートは次の構造を作成します。

  • プロジェクト ルートにある次のファイル
    • manage.py: Django 管理ユーティリティ。
    • db.sqlite3: 既定の SQLite データベース。
    • requirements.txt: Django 1.x での依存関係を含む。
    • readme.html: プロジェクトの作成後に Visual Studio に表示されるファイル。 前のセクションで述べたように、このファイルの指示に従ってアプリのスーパー ユーザー (管理者) アカウントを作成します。
  • app フォルダーには、ビュー、モデル、テスト、フォーム、テンプレート、静的ファイルなど、すべてのアプリ ファイルが含まれています (手順 4-2 を参照). 通常は、より区別しやすいアプリ名を使用するために、このフォルダー名を変更します。
  • DjangoWeb (Django プロジェクト) フォルダーには、一般的な Django プロジェクト ファイルである __init__.py、settings.py、urls.py、wsgi.py が含まれています。 settings.py ファイルは、プロジェクト テンプレートを使って、アプリとデータベース ファイル用に既に構成されています。 また、urls.py ファイルには、サインイン フォームを含むすべてのアプリ ページへのルートが既に設定されています。

質問: Visual Studio プロジェクト間で仮想環境を共有することは可能ですか。

回答: はい。ただし、その場合は、時間の経過と共にプロジェクトによって異なるパッケージが使われるようになる可能性があることに気を付けてください。 そのため、共有仮想環境には、それを使うすべてのプロジェクト用にすべてのパッケージを含める必要があります。

それでもやはり、既存の仮想環境を使用するには、次の手順を実行します。

  1. Visual Studio に依存関係をインストールするようメッセージが表示されたら、[I will install them myself]\(自分でインストールします\) オプションを選択します。
  2. ソリューション エクスプローラーで、[Python 環境] ノードを右クリックして、[既存の仮想環境を追加する] を選択します。
  3. 仮想環境を含むフォルダーに移動して選択し、 [OK] をクリックします。

手順 4 2: プロジェクト テンプレートによって作成されたビューとページ テンプレートを理解する

プロジェクトを実行したときに確認すると、アプリには、[ホーム]、[About]\(詳細\)、[連絡先] という 3 つのビューが含まれています。 これらのビューに対応するコードは、views.py ファイルにあります。 各ビューの関数では、テンプレートおよび単純なディクショナリ オブジェクトへのパスを使って、django.shortcuts.render を呼び出しています。 たとえば、[About]\(詳細\) ページは、about 関数で処理されています。

def about(request):
    """Renders the about page."""
    assert isinstance(request, HttpRequest)
    return render(
        request,
        'app/about.html',
        {
            'title':'About',
            'message':'Your application description page.',
            'year':datetime.now().year,
        }
    )

テンプレートはアプリの templates/app フォルダー (通常は、app を実際のアプリの名前に変更します) に配置されています。 基本のテンプレートである layout.html は、最も拡張性に優れています。 layout.html ファイルからは、必要なすべての静的ファイル (JavaScript と CSS) を参照しています。 また、layout.html ファイルには、他のページによってオーバーライドされる "content" というブロックが定義されており、"scripts" という別のブロックもあります。次に示す layout.html ファイルからのコメント付きの抜粋は、これらの固有の領域を示しています。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <!-- Define a viewport for Bootstrap's responsive rendering -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }} - My Django Application</title>

    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static 'app/content/bootstrap.min.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'app/content/site.css' %}" />
    <script src="{% static 'app/scripts/modernizr-2.6.2.js' %}"></script>
</head>
<body>
    <!-- Navbar omitted -->

    <div class="container body-content">

<!-- "content" block that pages are expected to override -->
{% block content %}{% endblock %}
        <hr/>
        <footer>
            <p>&copy; {{ year }} - My Django Application</p>
        </footer>
    </div>

<!-- Additional scripts; use the "scripts" block to add page-specific scripts.  -->
    <script src="{% static 'app/scripts/jquery-1.10.2.js' %}"></script>
    <script src="{% static 'app/scripts/bootstrap.js' %}"></script>
    <script src="{% static 'app/scripts/respond.js' %}"></script>
{% block scripts %}{% endblock %}

</body>
</html>

個々のページ テンプレート about.html、contact.html、index.html はそれぞれ、基本のテンプレートである layout.html を拡張します。 about.html テンプレート ファイルは最も単純であり、{% extends %} と {% block content %} の各タグが表示されます。

{% extends "app/layout.html" %}

{% block content %}

<h2>{{ title }}.</h2>
<h3>{{ message }}</h3>

<p>Use this area to provide additional information.</p>

{% endblock %}

index.html と contact.html の各テンプレート ファイルは、同じ構造を使用して、"content" ブロックでより長い内容を提供します。

また、templates/app フォルダーには、{% include %} を使用して layout.html に組み込まれる loginpartial.html と、4 番目のページである login.html もあります。 これらのテンプレート ファイルについては、手順 5 の認証に関するセクションで取り上げます。

質問: {% block %} と {% endblock %} は Django ページ テンプレートでインデントできますか。

回答: はい。 多くの場合、適切な親要素の中にこれらのタグを配置する目的で、ブロック タグをインデントしても、Django ページ テンプレートは有効です。 ブロック タグが配置される場所をわかりやすく表示するために、Visual Studio のページ テンプレートではブロック タグにインデントを設定していません。

手順 4-3: テンプレートによって作成された URL ルーティングを理解する

"Django Web プロジェクト" テンプレートで作成された Django プロジェクトの urls.py ファイルには、次のコードが含まれています。

from datetime import datetime
from django.urls import path
from django.contrib import admin
from django.contrib.auth.views import LoginView, LogoutView
from app import forms, views

urlpatterns = [
    path('', views.home, name='home'),
    path('contact/', views.contact, name='contact'),
    path('about/', views.about, name='about'),
    path('login/',
         LoginView.as_view
         (
             template_name='app/login.html',
             authentication_form=forms.BootstrapAuthenticationForm,
             extra_context=
             {
                 'title': 'Log in',
                 'year' : datetime.now().year,
             }
         ),
         name='login'),
    path('logout/', LogoutView.as_view(next_page='/'), name='logout'),
    path('admin/', admin.site.urls),
]

最初の 3 つの URL パターンは、アプリの views.py ファイルにある home、contact、about ビューに直接マップされます。 一方、パターン ^login/$ および ^logout$ では、アプリ定義のビューではなく、組み込みの Django ビューを使用します。 また、url メソッドの呼び出しには、ビューをカスタマイズするための追加のデータが含まれます。 手順 5 では、これらの呼び出しについて確認します。

質問: 作成したプロジェクトでは、どうして "about" の URL パターンに、このページで示されている '^about$' ではなく '^about' を使用するのですか。

回答: 正規表現の末尾の '$' の欠如は、多くのバージョンのプロジェクト テンプレートでの単純なミスです。 URL パターンは "about" という名前のページでは完全に問題なく動作します。ただし、末尾の '$' が無い場合、URL パターンは "about=django"、"about09876", "aboutoflaughter" などの URL にも適合します。 "about" "だけ" に適合する URL パターンを作成するために、このページでは末尾の '$' が示されています。

次のステップ

Django でユーザーを認証する

詳しい説明