開発準備をしよう(仮想環境/プロジェクト/アプリを作る)

開発を進めるにあたって、これまでのチュートリアルと同様、まずはDjangoプロジェクトとアプリを作成します。

以下の一連の作業で、仮想環境・プロジェクト・アプリの作成を行います。今回は、Djangoのバージョン2.1.4を使いたいと思います。

~/

# 仮想環境の作成
$ python3 -m venv photo_venv
$ source photo_venv/bin/activate

# Djangoインストール・プロジェクト作成
(photo_venv) $ pip install django==2.1.4
(photo_venv) $ django-admin startproject PhotoService

~/

# アプリの作成
$ cd PhotoService
$ django-admin startapp app

~/PhotoService/PhotoService/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app',                                     # 追加
]

LANGUAGE_CODE = 'ja-JP' # 変更

TIME_ZONE = 'Asia/Tokyo' # 変更

スーパーユーザーを作成します。

~/PhotoService

$ python manage.py migrate
$ python manage.py createsuperuser

トップページの表示

~/PhotoService/PhotoService/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('app.urls')),
]

~/PhotoService/app/urls.py

from django.urls import path
from . import views

app_name = 'app'
urlpatterns = [
    path('', views.index, name='index'),
]

~/PhotoService/app/views.py

from django.shortcuts import get_object_or_404, redirect, render

def index(request):
    return render(request, 'app/index.html')

Templateについては2つ目のチュートリアルと同様、各ページで共通する部分はbase.htmlにまとめて記述して、それを拡張する形で各htmlファイルを作っていきます。

~/PhotoService/app/templates/app/base.html

{% load static %}

<!DOCTYPE html>
<html>

<head>
    <title>写真投稿サイト</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>

<body>
    <header>
        <div class="container">
            <h1><a href="{% url 'app:index' %}">写真投稿サイト</a></h1>
            <div class="header-menu">
                <a href="">投稿</a>
            </div>
        </div>
    </header>

    <div class="container">
        {% block content %}{% endblock %}
    </div>
</body>

</html>

~/PhotoService/app/templates/app/index.html

{% extends 'app/base.html' %}

{% block content %}

<h2>トップページ</h2>

{% endblock %}

最後に、CSSを適用します。今回もCSSファイルは用意しましたので、以下ファイルを使ってください。ただし、今回はフォルダ階層を少し変えてみたいと思います。

2つ目のチュートリアルでは、memo/app/static/app/css/style.cssのように、アプリ内にstaticディレクトリを作成しました。

今回は、PhotoService/static/css/style.cssのように、プロジェクトディレクトリ直下にstaticディレクトリを作ります。1つのアプリだけではなく、複数のアプリに適用させたいCSSファイルについては、アプリディレクトリ内に作るのではなく、今回のような階層にするのが望ましいです。

ただし、デフォルトの状態では、アプリ内にあるstaticディレクトリしか読み込まれないようになっています。(アプリ内のstaticディレクトリが読み込まれるのは、settings.pyに以下の記述があるからです。)

~/PhotoService/PhotoService/settings.py

STATIC_URL = '/static/'

プロジェクトディレクトリ直下のstaticディレクトリも読み込みたい場合は、以下のようにSTATICFILES_DIRSを設定します。

~/PhotoService/PhotoService/settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

ここまでの設定ができたら、以下のようにCSSファイルを作成してください。

~/PhotoService/static/css/style.css

html, body {
    margin: 0;
}

div {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: #000;
}

.container {
    width: 80%;
    margin: auto;
    overflow: auto;
}

header {
    border-bottom: solid 1px #000;
    height: 70px;
}

header .container {
    display: flex;
    justify-content: space-between;
}

body > .container {
    width: 65%;
    padding-top: 60px;
}

header h1 {
    margin: 0;
    height: 100%;
    line-height: 70px;
}

.header-menu {
    display: flex;
    align-items: center;
}

.header-menu a {
    padding: 10px;
    margin-left: 10px;
}

.photo {
    width: calc(100%/3);
    float: left;
    padding: 10px;
    margin-bottom: 15px;
}

.photo a {
    display: block;
}

.photo-info a:hover {
    text-decoration: underline;
}

.photo-info .category {
    display: inline-block;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
    background-color: #000;
}

.user-name {
    font-size: 30px;
}

.photo-img {
    width: 100%;
    max-width: 500px;
    height: 300px;
    object-fit: cover;
    border-radius: 4px;
}

.photo-img:hover {
    opacity: 0.8;
}

.photo-detail .photo-img{
    object-fit: contain; 
}

.photo-detail .photo-img:hover {
    opacity: 1;
}

.message-success {
    background-color: #00d1b2;
    padding: 10px;
    padding-left: 30px;
    border-radius: 4px;
}        

CSSが適用されるとトップページはこんな感じになります。

< PREV NEXT >
SHARE ! Tweet