チュートリアル2: プロジェクト作成と設計

本チュートリアルは前回のチュートリアル1から続いています。

2. プロジェクトを作成してアプリケーションを3つ追加する

前回は my_portfolioのディレクトリを作成して仮想環境を構築し、Djangoをインストールするところまで行いました。
ではまずプロジェクトの作成から行いましょう。

// プロジェクトを作成する
django-admin startproject my_portfolio

プロジェクトを作成できたらそのプロジェクトに移動し、DB初期化のためにmigrateを行います。

cd my_portfolio

python manage.py migrate

これでデフォルトのDjangoプロジェクトが持っているユーザーのデータベースなどをsqlite3で作成することができました。
次にアプリケーションを追加していきます。

// アプリケーションを追加
python manage.py startapp portfolio
python manage.py startapp account
python manage.py startapp function

現在のディレクトリ内を確認しましょう。

ls

// 出力
account     function    my_portfolio
db.sqlite3  manage.py   portfolio

3.プロジェクト全体の設定を行い、3つのページのルーティングを実装する

では次にsettings.pyを設定して、appの読み込みとルーティングの構築を行いましょう。

まずはsettings.pyを開き、INSTALLED_APPSにappを追加していきます。
このリスト内の順番でappが読み込まれるので account, function, portfolioの順で追加していきます。

settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
　# 以下を追加
    'account',
    'function',
    'portfolio',
]

次にプロジェクトフォルダ直下にtemplatesフォルダを置いてhtmlファイルをまとめて扱いたいので、TEMPLATESを変更します。

settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 以下を追加
        'DIRS': ['templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

あとはstatic関係とmedia関係の設定を追加します。
その前にファイルの位置を取得するos機能を使うのでファイルの一番上でインポートしておきましょう。

settings.py

# 一番上で
import os

次にsettings.py一番下のSTATIC_URLを削除して、以下を追加しましょう。

まずはstaticから

settings.py

# サービス内でstaticフォルダのURLパスを設定
STATIC_URL = '/static/'

# collectstaticなどを行った際にファイルを設置するstaticフォルダの場所を記述（開発の際は必要ないのでコメントアウトしておく）
# STATIC_ROOT = os.path.join(BASE_DIR, 'static/')

# htmlファイルなどから読み込むstaticフォルダの場所を記述
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static/')
]

次にmediaを追加します。

settings.py

# サービス内でmediaフォルダのURLパスを設定
MEDIA_URL = '/media/'

# アップロードファイルなどを読み込む際のフォルダの場所を記述
MEDIA_ROOT = 'media/'

これでsettings.pyは完了です。
次にルーティングの設定をしていきますが、ルーティングを機能させるために一時的に各appのviews.pyに1つ一時的なviewを追加していきましょう。

portfolio/views.py

from django.views.generic import TemplateView

class IndexView(TemplateView):

    template_name = 'index.html'

index = IndexView.as_view()

既に紹介したviews.pyの書き方とは違い、ここではクラスベースのviewを記述しています。
こちらも今後紹介しますが、基本的なviews.pyの実装には、defで書く関数ベースとclassで書くクラスベースが存在します。
サービス開発においては、クラスベースで記述する方がコードがまとまり、処理も分けれるので断然おすすめです。

ここでは基本的なTemplateViewという機能を使って上記のように記述しています。
まずはこれでviewの作成ができたので次にtemplatesを追加していきます。

プロジェクト直下のディレクトリにtemplatesフォルダを追加して、index.htmlを追加しましょう。

ターミナル

ls

# 出力
account     function    my_portfolio
db.sqlite3  manage.py   portfolio

ターミナル

mkdir templates
cd templates
touch index.html

これでファイルが作成されました。
templatesのディレクトリは以下のようになっていると思います。

templates
index.html

index.htmlにhello world!と書いておきましょう。

templates/index.html

Hello world!

次に、portfolioフォルダにurls.pyを追加しましょう。

ターミナル

cd ../portfolio
touch urls.py

そしてurls.pyに先ほどviews.pyで作成したviewを読み込みます。

portfolio/urls.py

from django.urls import path
from . import views

app_name= 'portfolio'
urlpatterns = [
    # viewsからindexを読み込んで、nameをindexに
    path('', views.index, name='index'),
]

ここまでできたらconfigフォルダのmy_portfolioのurls.pyにportfolioのurls.pyを読み込みます。
また初期ページもconfigフォルダのurls.pyに記述する必要があるので、portfolio/views.pyからindexを読み込んで別のルーティングを設定します。
ついでにstaticとmediaファイルも読み込めるように設定をしておきましょう。

my_portfolio/urls.py

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

from portfolio import views

urlpatterns = [
    path('admin/', admin.site.urls),
    # portfolioのurls.pyを読み込み
    path('', include('portfolio.urls')),
] + static(settings.STATIC_URL, document_root=settings.STATICFILES_DIRS) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

ここまできたら一旦、プロジェクトディレクトリでサーバーを起動してみましょう。

ターミナル

python manage.py runserver

ページが開いて、Hello world!と表示されていたら、viewsもルーティングもhtmlファイルも全て読み込まれています。

あとは、同じ工程をaccount, functionで繰り返していきましょう。

以下ではコードだけを記述していきます。

account/views.py

from django.views.generic import TemplateView

class LoginView(TemplateView):

    template_name = 'account/login.html'

login = LoginView.as_view()

templatesにaccountフォルダを作成し、login.htmlを追加

templates/account/login,html

login

account/urls.py

from django.urls import path
from . import views

app_name= 'account'
urlpatterns = [
    path('login', views.login, name='login'),
]

function/views.py

from django.views.generic import TemplateView

class ContactView(TemplateView):

    template_name = 'function/contact.html'

contact = ContactView.as_view()

templates/function/contact.html

お問い合わせ

function/urls.py

from django.urls import path
from . import views

app_name= 'function'
urlpatterns = [
    path('contact', views.contact, name='contact'),
]

configフォルダにそれぞれのurls.pyを読み込み

my_portfolio/urls.py

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

from portfolio import views

urlpatterns = [
    path('admin/', admin.site.urls),
    # accountのurls.pyを読み込み
    path('account/', include('account.urls')),
    # functionのurls.pyを読み込み
    path('', include('function.urls')),
    # portfolioのurls.pyを読み込み
    path('', include('portfolio.urls')),
] + static(settings.STATIC_URL, document_root=settings.STATICFILES_DIRS) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

ここまできたら再度runserverして、以下それぞれのURLにアクセスしてみましょう。

1. http://localhost:8000
2. http://localhost:8000/account/login
3. http://localhost:8000/contact

それぞれ、

1. Hello world!
2. login
3. お問い合わせ

と文字が出てくれば完了です。
ここまでくれば次はフロントエンドの基本的な設定を行うだけです。

チュートリアル3にいってみましょう！