65日目 割烹芸人の実装1
ひたすらコードを書く日々です……
ということで早速プロジェクトを作っていきます。
mkdir keditor
cd keditor
python -m venv myvenv
myvenv\Scripts\activate
pip install django
keditorプロジェクトフォルダを作って、そこに仮想環境を作って、Djangoをインストールします。
django-admin startproject project .
projectを作成しました。これでDjangoプロジェクトの作成が終わりました。
今のフォルダはこんな感じになっています。
settings.pyを開いて初期設定を行います。
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'
まずは、言語とタイムゾーンを設定。
次にテンプレート、メディア、静的ファイルの保存場所を変更します。
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, "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_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
Djangoのテンプレートや静的ファイルは各アプリケーション直下に置くのがデフォルトですが、自分は管理が面倒になるのが嫌なので直下になるように指定します。
データベースはデフォルトのSQlite3を使います。そこまで大量のデータを扱うわけでもないのでこれで十分でしょう。
ということで、各フォルダも作って、こんな感じになりました。
python manage.py runserver
開発サーバーを立ち上げて、 http://127.0.0.1:8000/にアクセスすると、おなじみの画面が出てきました。
これでプロジェクトの作成が終わったので、次に各アプリケーションを作っていきます。
・topアプリ-Topページ用のアプリケーション 色々といじりたいので独立させておく。
・infoアプリ-運営用のアプリケーション。お知らせやヘルプ用として使う。
・accountsアプリ-ユーザー登録用のアプリ。
・editorアプリ-メイン機能。割烹エディター用。
4つのアプリケーションを作っていきます。
まぁといってもそこまで難しいものは作りませんが。
今回勉強したいのはaccountsですね。ユーザー登録やログイン処理などを学びたいです。
ということでアプリだけ作っておきますか。
python manage.py start app top
python manage.py start app info
python manage.py start app accounts
python manage.py start app editor
アプリを作ったのでsettingsに登録します。
INSTALLED_APPS = [
'top.apps.TopConfig',
'info.apps.InfoConfig',
'accounts.apps.AccountsConfig',
'editor.apps.EditorConfig',
これでアプリケーションの準備も終わりました。
次に基本的なページを作ります。
とりあえず、404ページとTopページを作っていきましょう。
templatesフォルダに404.htmlを作ります。これで、ページがなかった場合にこのhtmlが呼び出されるようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>404</title>
<meta name="robots" content="noindex,nofollow">
</head>
<body>
<h1>このページはありません！</h1>
<p>アクセスできないURLか、ページが削除されています。</p>
<p>もしくは、URLの打ち間違い、リンクミスの可能性があります。確認してみてください。</p>
<p><a href="/">トップページに戻る</a></p>
</body>
</html>
OKですね。Noteの404美術館みたいにちょっと凝った雰囲気にしてみてもいいですが、まぁそれは余裕があればで。
はいということで次にTopページですね。
templates/index.htmlを作ってそこにTopページを作ります。
Topページは独立に作っておきます。他のアプリケーションに組み込んでもよかったのですけど、今回作るレイアウト的に独立で作った方がいいかなと思ったのでそうします。何事も経験。
metaタグ
<title>タイトル名</title>
<meta content="概要文を120文字程度" name="description">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
とりあえずこの4つを設定しておけばいいかな。OGPは共通のテンプレートと一緒に後で設定します。
次にbody構造を決めます。文書構造を表すタグは
header
nav
article
section
main
aside
footer
div
があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<<title>割烹エディター</title>
<meta charset="UTF-8">
<meta content="割烹エディターは小説家になろうの活動報告を彩るためだけに作られたエディターです。あなたの割烹を素敵に彩ってみませんか？" name="description">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<header class="top-header"></header>
<section class="top-section"></section>
<aside class="top-info"></aside>
<main class="top-main"></main>
<nav class="top-nav"></nav>
<footer class="top-footer"></footer>
</body>
</html>
とりあえず。構造だけ作っておきます。
次にCSSを作ります。static/top.cssを作ります。
resetcssとしてhtml5doctorを使います。
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav, ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
CSSはブラウザで初期値が異なっているので、ブラウザ間の差異をなくすためにリセットCSSを設定することが多いです。色々と種類があります。
それかCSSのフレームワークにお任せする人も多いですね。
今回はCSSのフレームワークは使いませんが、bootstrapなんかが有名ですね。私は、デザインをするのにそこまで苦でないので自分でcssを書いていきます。
あとは、いったんhtmlの方に戻って、staticフォルダをLoadしておきます。
{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
<title>割烹エディター</title>
<meta charset="UTF-8">
<meta content="割烹エディターは小説家になろうの活動報告を彩るためだけに作られたエディターです。あなたの割烹を素敵に彩ってみませんか？" name="description">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="{% static 'top.css' %}">
<link rel="icon" type="image/png" href="{% static 'favicon.png' %}">
</head>
<body>
<header class="top-header">
<figure class='header-img' ><img src="{% static 'logo.png' %}" alt="logo"></figure>
<div class="header-white">
<h2>あなたの<span class="red">割烹</span>に彩りを</h2>
<p>割烹エディターは小説家になろうの活動報告を彩るためだけに作られたエディターです。</p>
</div>
<aside class="header-info"><a>お知らせ</a></aside>
<div class="header-black">
<h2>あなたの<span class="red">割烹</span>を彩ってみませんか？</h2>
<p>割烹エディターはユーザー登録不要で簡単に使えます。</p>
</div>
<aside class="header-help"><a>使い方</a></aside>
</header>
<nav class="top-nav"> ・おすすめ
・定番
・変わり種
・テンプレート
・会員登録
</nav>
<footer class="top-footer">Copyright© 割烹エディター , 2020 AllRights Reserved.</footer>
</body>
</html>
{% static 'top.css' %}でstaticフォルダのcssを呼び出しています。
さて、では準備が終わったのでURLの設定に行きます。
project/urls.pyにTopページの設定を追加します。
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('top.urls')),
]
次に、top/urls.pyを作成し、viewに渡します。
from . import views
app_name = 'top'
urlpatterns = [
path('', views.IndexView.as_view(), name='index'),
]
top/views.pyを以下のように設定します。
from django.views import generic
class IndexView(generic.TemplateView):
template_name = 'index.html'
templateの表示に特化したtemplateviewのクラスを使います。
これでURLの流れが設定できたので表示を見ましょうか。
python manage.py runserver
開発環境で、Topページを見るとこんな感じになっています。
まぁこんなものかな。resetcssしか適用していないのでシンプルな感じ。ここからレイアウトを整える必要があります。
ということで次はレイアウトを整えるためにCSSを書いていきます。
レイアウトはグリッドレイアウトで整えていきます。
.top-header img{
width: 100%;
height: auto;
vertical-align: bottom;
}
.top-header{
--sideLR: 20px;
--sideTB: 40px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 170px auto 100px;
margin: var(--sideTB) var(--sideLR);
}
.red{
color: orangered;
}
.header-img{
grid-column: 1 / -1;
grid-row: 2;
justify-self: center;
align-self: center;
width:60%;
}
.header-white{
grid-column: 2;
grid-row: 1 / 3;
align-self: start;
writing-mode: vertical-rl;
}
.header-white h2{
font-size: 3em;
font-weight: bold;
}
.header-white p{
margin: 0 1em;
font-size: 1.5em;
height: 12em;
line-height: 1.5;
}
.header-info{
grid-column: 2;
grid-row: 3;
justify-self: end;
align-self: end;
width: 10em;
padding: 1em;
box-sizing: border-box;
border: solid 1px #aaa;
text-align: center;
}
.header-black{
grid-column: 1;
grid-row: 1 / 3;
color: #fff;
}
.header-black h2{
font-size: 2.5em;
font-weight: bold;
}
.header-black p{
margin: 1em 0 ;
font-size: 1.25em;
width: 12em;
line-height: 1.5;
}
.top-header::after{
grid-column: 1;
grid-row: 1 /-1;
z-index: -1;
content: '';
background-color: #222;
margin-left:calc( var(--sideLR) * -1) ;
margin-top:calc( var(--sideTB) * -1) ;
margin-bottom:calc( var(--sideTB) * -1) ;
}
.header-help{
grid-column: 1;
grid-row: 3;
color: #fff;
justify-self: start;
align-self: end;
width: 10em;
padding: 1em;
box-sizing: border-box;
border: solid 1px #fff;
text-align: center;
}
はい、こんな感じ。
お知らせや使い方のリンクや、下の方のテンプレートのリンクや説明覧なんか作りますけど、全体整えてからかな。
ということで、暫定的なTopページができたので次は共通のヘッダー、フッターかな。
あと、スマホ用のレイアウトもしておきます。このままだと小さい画面だとレイアウト崩れるので
@media(max-width:767px){
.top-header{
grid-template-columns: 1fr;
grid-template-rows: repeat(6, auto);
}
.header-white{
grid-column: 1;
grid-row: 1;
writing-mode: horizontal-tb;
}
.header-white h2{
font-size: 1.75em;
}
.header-white p{
font-size: 1.2em;
margin: 1em 0 ;
height: auto;
}
.header-info{
grid-column: 1;
grid-row: 2;
justify-self: center;
margin-bottom: 1em;
}
.header-img{
grid-column: 1;
grid-row: 3/5;
width:80%;
}
.header-black{
grid-column: 1;
grid-row: 5;
}
.header-black h2{
margin: 1em 0;
font-size: 1.75em;
}
.header-black p{
font-size: 1.2em;
margin: 1em 0 ;
}
.header-help{
grid-column: 1;
grid-row: 6;
justify-self: center;
}
.top-header::after{
grid-column: 1;
grid-row: 4 /-1;
margin-top:0 ;
margin-right: calc( var(--sideLR) * -1) ;
}
}
とりあえずiPadの768px未満はスマホ用のレイアウトで表示させるようにしておきます。
全部縦方向に並べてみました。
いちおうこれでOKかな。
次回は共通テンプレートを作って、必要なページをそろえていきます。
まだまだあるよ！
