手順 4: Django Web プロジェクト テンプレートを使用するStep 4: Use the full Django Web Project template

前の手順: 静的ファイルを提供し、ページを追加し、テンプレート継承を使用するPrevious step: Serve static files, add pages, and use template inheritance

Visual Studio の "空の Django Web プロジェクト" テンプレート上にアプリを構築して、Django の基本を確認したので、"Django Web プロジェクト" テンプレートで作成されるより完全なアプリを簡単に理解できるようになりました。Now that you've explored the basics of Django by building an app upon the "Blank Django Web Project" template in Visual Studio, you can easily understand the fuller app that's produced by the "Django Web Project" template.

この手順では、次のことを学習します。In this step you now:

  • "Django Web プロジェクト" テンプレートを使用してより完全な Django Web アプリを作成し、プロジェクト構造を調べる (手順 4-1)Create a fuller Django web app using the "Django Web Project" template and examine the project structure (step 4-1)
  • 基本のページ テンプレートを継承し、jQuery や Bootstrap などの静的 JavaScript ライブラリを採用した 3 つのページで構成される、プロジェクト テンプレートによって作成されたビューとページ テンプレートを理解する (手順 4-2)Understand the views and page templates created by the project template, which consist of three pages that inherit from a base page template and that employs static JavaScript libraries like jQuery and Bootstrap (step 4-2)
  • テンプレートによって提供された URL ルーティングを理解する (手順 4-3)Understand the URL routing provided by the template (step 4-3)

また、テンプレートでは、手順 5 で取り上げる基本認証も提供されます。The template also provides basic authentication, which is covered in Step 5.

手順 4-1: テンプレートからプロジェクトを作成するStep 4-1: Create a project from the template

  1. Visual Studio で、ソリューション エクスプローラーに移動して、このチュートリアルで以前に作成した LearningDjango ソリューションを右クリックし、[追加] > [新しいプロジェクト] を選択します In Visual Studio, go to Solution Explorer, right-click the LearningDjango solution created earlier in this tutorial, and select Add > New Project. (または、新しいソリューションを使用する場合は、代わりに [ファイル] > [新規] > [プロジェクト] の順に選択します)。(Alternately, if you want to use a new solution, select File > New > Project instead.)

  2. 新しいプロジェクトのダイアログで、Django Web プロジェクト テンプレートを検索して選択し、プロジェクトに "DjangoWeb" という名前を付けて、[OK] をクリックします。In the new project dialog, search for and select the Django Web Project template, call the project "DjangoWeb", and select OK.

  3. ここでも、テンプレートに requirements.txt ファイルが含まれているので、Visual Studio からそれらの依存関係をインストールする場所をたずねられます。Because the template again includes a requirements.txt file, Visual Studio asks where to install those dependencies. オプションを選択し、仮想環境にインストールして、[仮想環境の追加] ダイアログで [作成] を選択して、既定値を受け入れます。Choose the option, Install into a virtual environment, and in the Add Virtual Environment dialog select Create to accept the defaults.

  4. Visual Studio による仮想環境の設定が終了したら、readme.html に表示された指示に従って、Django スーパー ユーザー (つまり、管理者) を作成します。Once Visual Studio finishes setting up the virtual environment, follow the instructions in the displayed readme.html to create a Django super user (that is, an administrator). Visual Studio プロジェクトを右クリックして、[Python] > [Django でスーパー ユーザーを作成する] コマンドを選択して、プロンプトの指示に従います。Just right-click the Visual Studio project and select the Python > Django Create Superuser command, then follow the prompts. アプリの認証機能を利用するときに使うので、必ずユーザー名とパスワードを記録してください。Make sure to record your username and password as you use it when exercising the authentication features of the app.

  5. ソリューション エクスプローラーを右クリックし、[スタートアップ プロジェクトとして設定] を選択して、DjangoWeb プロジェクトを Visual Studio ソリューションの既定に設定します。Set the DjangoWeb project to be the default for the Visual Studio solution by right-clicking that project in Solution Explorer and selecting Set as Startup Project. デバッガーを起動すると、太字で表示されているスタートアップ プロジェクトが実行されます。The startup project, which is shown in bold, is what's run when you start the debugger.

    スタートアップ プロジェクトとして DjangoWeb プロジェクトを表示したソリューション エクスプローラー

  6. [デバッグ] > [デバッグの開始] (F5 キー) を選択するか、またはツールバーの [Web サーバー] ボタンを使用して、サーバーを実行します。Select Debug > Start Debugging (F5) or use the Web Server button on the toolbar to run the server:

    Visual Studio の [Web サーバー] ツールバー ボタンを実行する

  7. テンプレートで作成したアプリには [ホーム]、[About](詳細)、[連絡先] という 3 つのページがあり、ナビゲーション バーを使用して各ページ間を移動できます。The app created by the template has three pages, Home, About, and Contact, which you navigate between using the nav bar. アプリのさまざまな部分を調べるのに、1 ~ 2 分かかります。Take a minute or two to examine different parts of the app. [ログイン] コマンドを使ってアプリでの認証を行うために、前に作成したスーパーユーザーの資格情報を使用します。To authenticate with the app through the Log in command, use the superuser credentials created earlier.

    Django Web プロジェクト アプリの完全なブラウザー ビュー

  8. "Django Web プロジェクト" テンプレートで作成されたアプリでは、モバイル フォーム ファクターに対応したレスポンシブ レイアウトのために、Bootstrap を使用します。The app created by the "Django Web Project" template uses Bootstrap for responsive layout that accommodates mobile form factors. この応答性を確認するために、コンテンツを縦長に表示してナビゲーション バーがメニュー アイコンに切り替わるように、ブラウザーの表示幅を縮小します。To see this responsiveness, resize the browser to a narrow view so that the content renders vertically and the nav bar turns into a menu icon:

    Django Web プロジェクト アプリのモバイル (縮小幅) 表示

  9. 以降のセクションについては、アプリにそのまま実行させることができます。You can leave the app running for the sections that follow.

    アプリを停止してソース コントロールへの変更をコミットする場合、最初にチーム エクスプローラー[変更] を開き、仮想環境のフォルダー (通常は env) を右クリックして、[これらのローカル項目を無視] を選択します。If you want to stop the app and commit changes to source control, first open the Changes page in Team Explorer, right-click the folder for the virtual environment (probably env), and select Ignore these local items.

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

広義では、"Django Web プロジェクト" テンプレートは次の構造を作成します。At the broadest level, the "Django Web Project" template creates the following structure:

  • プロジェクト ルートにある次のファイルFiles in the project root:
    • manage.py: Django 管理ユーティリティ。manage.py, the Django administrative utility.
    • db.sqlite3: 既定の SQLite データベース。db.sqlite3, a default SQLite database.
    • requirements.txt: Django 1.x での依存関係を含む。requirements.txt containing a dependency on Django 1.x.
    • readme.html: プロジェクトの作成後に Visual Studio に表示されるファイル。readme.html, a file that's displayed in Visual Studio after creating the project. 前のセクションで述べたように、このファイルの指示に従ってアプリのスーパー ユーザー (管理者) アカウントを作成します。As noted in the previous section, follow the instructions here to create a super user (administrator) account for the app.
  • app フォルダーには、ビュー、モデル、テスト、フォーム、テンプレート、静的ファイルなど、すべてのアプリ ファイルが含まれています (手順 4-2 を参照).The app folder contains all the app files, including views, models, tests, forms, templates, and static files (see step 4-2). 通常は、より区別しやすいアプリ名を使用するために、このフォルダー名を変更します。You typically rename this folder to use a more distinctive app name.
  • DjangoWeb (Django プロジェクト) フォルダーには、一般的な Django プロジェクト ファイルである __init__.pysettings.pyurls.pywsgi.py が含まれています。The DjangoWeb (Django project) folder contains the typical Django project files: __init__.py, settings.py, urls.py, and wsgi.py. プロジェクト テンプレートを使用することで、settings.py は既にアプリおよびデータベース ファイル用に構成されており、urls.py は既にログイン フォームを含むすべてのアプリ ページへのルートを使って構成されています。By using the project template, settings.py is already configured for the app and the database file, and urls.py is already configured with routes to all the app pages, including the login form.

質問: Visual Studio プロジェクト間で仮想環境を共有することは可能ですか。Question: Is it possible to share a virtual environment between Visual Studio projects?

回答: はい。ただし、異なるプロジェクトは時間の経過と共に異なるパッケージを使用する傾向があるため、共有した仮想環境には、使用するすべてのプロジェクトに対応するすべてのパッケージを含む必要があることを認識したうえで、共有してください。Answer: Yes, but do so with the awareness that different projects likely use different packages over time, and therefore a shared virtual environment must contain all the packages for all projects that use it.

それでもやはり、既存の仮想環境を使用するには、次の手順を実行します。Nevertheless, to use an existing virtual environment, do the following:

  1. Visual Studio に依存関係をインストールするようメッセージが表示されたら、[I will install them myself](自分でインストールします) オプションを選択します。When prompted to install dependencies in Visual Studio, select I will install them myself option.
  2. ソリューション エクスプローラーで、[Python 環境] ノードを右クリックして、[既存の仮想環境を追加する] を選択します。In Solution Explorer, right-click the Python Environments node and select Add Existing Virtual Environment.
  3. 仮想環境を含むフォルダーに移動して選択し、 [OK] をクリックします。Navigate to and select the folder containing the virtual environment, then select OK.

手順 4 2: プロジェクト テンプレートによって作成されたビューとページ テンプレートを理解するStep 4-2: Understand the views and page templates created by the project template

プロジェクトを実行したときに確認すると、アプリには、[ホーム]、[About](詳細)、[連絡先] という 3 つのビューが含まれています。As you observe when you run the project, the app contains three views: Home, About, and Contact. これらのビューに対応するコードは、app/views フォルダーにあります。The code for these views is found in the app/views folder. 各ビューの関数では単に、テンプレートおよび単純なディクショナリ オブジェクトへのパスを使って、django.shortcuts.render を呼び出しています。Each view function simply calls django.shortcuts.render with the path to a template and a simple dictionary object. たとえば、[About](詳細) ページは、about 関数で処理されています。For example, the About page is handled by the about function:

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 を実際のアプリの名前に変更します) に配置されています。Templates are located in the app's templates/app folder (and you typically want to rename app to the name of your real app). 基本のテンプレートである layout.html は、最も拡張性に優れています。The base template, layout.html, is the most extensive. このテンプレートは、すべての必要な静的ファイル (JavaScript および CSS) を参照し、他のページによってオーバーライドされる "content" という名前のブロックを定義し、"scripts" という名前のもう 1 つのブロックを提供しています。It refers to all the necessary static files (JavaScript and CSS), defines a block named "content" that other pages override, and provides another block named "scripts". 次に示す layout.html からのコメント付きの抜粋は、これらの固有の領域を示しています。The following annotated excerpts from layout.html show these specific areas:

<!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.htmlcontact.htmlindex.html はそれぞれ、基本のテンプレートである layout.html を拡張します。The individual page templates, about.html, contact.html, and index.html, each extend the base template layout.html. about.html は最もシンプルで、次のように {% extends %} および {% block content %} タグを表示します。about.html is the simplest and shows the {% extends %} and {% block content %} tags:

{% 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" ブロックでより長い内容を提供します。index.html and contact.html use the same structure and provide lengthier content in the "content" block.

また、templates/app フォルダーには、{% include %} を使用して layout.html に組み込まれる loginpartial.html と、4 番目のページである login.html もあります。In the templates/app folder is also a fourth page login.html, along with loginpartial.html that's brought into layout.html using {% include %}. これらのテンプレート ファイルについては、手順 5 の認証に関するセクションで取り上げます。These template files are discussed in step 5 on authentication.

質問: {% block %} と {% endblock %} は Django ページ テンプレートでインデントできますか。Question: Can {% block %} and {% endblock %} be indented in the Django page template?

回答: はい。多くの場合、適切な親要素の中にこれらのタグを配置する目的で、ブロック タグをインデントしても、Django ページ テンプレートは有効です。Answer: Yes, Django page templates work fine if you indent block tags, perhaps to align them within their appropriate parent elements. タグの配置場所が明確にわかるように、これらのタグは Visual Studio プロジェクト テンプレートで生成されたページ テンプレートではインデントされません。They're not indented in the page templates generated by the Visual Studio project template so that you can clearly see where they are placed.

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

"Django Web プロジェクト" テンプレートで作成された Django プロジェクトの urls.py ファイルには、次のコードが含まれています。The Django project's urls.py file as created by the "Django Web Project" template contains the following code:

from datetime import datetime
from django.conf.urls import url
import django.contrib.auth.views

import app.forms
import app.views

urlpatterns = [
    url(r'^$', app.views.home, name='home'),
    url(r'^contact$', app.views.contact, name='contact'),
    url(r'^about$', app.views.about, name='about'),
    url(r'^login/$',
        django.contrib.auth.views.login,
        {
            'template_name': 'app/login.html',
            'authentication_form': app.forms.BootstrapAuthenticationForm,
            'extra_context':
            {
                'title': 'Log in',
                'year': datetime.now().year,
            }
        },
        name='login'),
    url(r'^logout$',
        django.contrib.auth.views.logout,
        {
            'next_page': '/',
        },
        name='logout'),
]

最初の 3 つの URL パターンは、アプリの views.py ファイルにある homecontactabout ビューに直接マップされます。The first three URL patterns map directly to the home, contact, and about views in the app's views.py file. 一方、パターン ^login/$ および ^logout$ では、アプリ定義のビューではなく、組み込みの Django ビューを使用します。The patterns ^login/$ and ^logout$, on the other hand, use built-in Django views instead of app-defined views. また、url メソッドの呼び出しには、ビューをカスタマイズするための追加のデータが含まれます。The calls to the url method also include extra data to customize the view. 手順 5 では、これらの呼び出しについて確認します。Step 5 explores these calls.

質問: 作成したプロジェクトでは、どうして "about" の URL パターンに、このページで示されている '^about$' ではなく '^about' を使用するのですか。Question: In the project I created, why does the "about" URL pattern uses '^about' instead of '^about$' as shown here?

回答: 正規表現の末尾の '$' の欠如は、多くのバージョンのプロジェクト テンプレートでの単純なミスです。Answer: The lack of the trailing '$' in the regular expression was a simple oversight in many versions of the project template. URL パターンは "about" という名前のページでは完全に問題なく動作しますが、末尾の '$' が無い場合、URL パターンは "about=django"、"about09876", "aboutoflaughter" などの URL にも適合します。The URL pattern works perfectly well for a page named "about", but without the trailing '$' the URL pattern also matches URLs like "about=django", "about09876", "aboutoflaughter"and so on. "about" "だけ" に適合する URL パターンを作成するために、このページでは末尾の '$' が示されています。The trailing '$' is shown here to create a URL pattern that matches only "about".

次の手順Next steps

詳しい説明Go deeper