新規プロジェクトを作るとき、どうしても最初の立ち上げ方を忘れてしまいがちなので、cssファイルやJavaScriptファイルを認識させるまでのやり方をメモとして残し、素早く制作できるようにしていきたいと思います。あと僕が完成したのをGitHubにあげて新しいプロジェクトを作るときの作業を楽したい。
Table of Contents
使用環境
今回使う環境は以下の通りです。
- Django ==3.1.7
- python ==3.7.3
- Visual Studio Code
- PyMySql ==0.2.7
- MySQL == 8.1
デフォルトではsqlite3ではありますが、個人的にmysqlの方が使いやすいし、このサイトの骨組みを利用して実際にサービスとして公開していく場合はsqlite3はDjango公式が非推奨していますのでmysqlを採用しています。django3.1.7ではdjango2.2と違いモジュールsixが反応しなかったり、staticfileの指定の仕方が異なっているので注意が必要です。
sixが反応しないのは、djangoが3.0にする際「今時python2 使う人なんていないしpython公式もpython3にしろとか言っているから2と3を繋げるmodule sixはいらないよね?」と言った感じでdjangoから消されたみたいです。もっともmodule six が必要な場面はSNSログインを実装するときに起きるぐらいなので、あまり遭遇するとは思いませんが…
もしそのような状況になったら下記のサイトで解決方法を記してあります。
プロジェクトの作成
まず好きなところにフォルダを作ってVisual Studio Codeで開きます。その次にメニューバーのターミナルからNew Terminal をクリックすると楽にコマンド入力ができます。
ユーザー間でゲームに関する情報を投稿できるサイトを作ってみたいと思います。
$ django-admin startproject プロジェクト名
をターミナルで入力するとこのようなフォルダ群が出来上がります。以後プロジェクトフォルダと言います。
プロジェクト名/
manage.py
mysite/
__init__.py
settings.py
urls.py
wsgi.py
これだけでも一応サイトを見ることができますが、いちいちターミナル内にあるゴミ箱ボタンを押さないといけないめんどくささが、あるのでどうなっているのかは、下記のコマンドを入力して自身の目で確かめてください
$ python manage.py runserver
入力してURL が出てくるのでコマンド(window’sならコントロール)+クリックでURLにジャンプできます。そのページにロケットの絵が出てたらうまくいっています。
アプリケーションの作成
ターミナルから下記のコマンド入力するだけで簡単にできます。
$ django-admin startapp アプリ名
app_name/
__init__.py
admin.py
apps.py
migrations/
__init__.py
models.py
tests.py
views.py
こんな感じのフォルダ群が生まれてきます。以後アプリフォルダと言います。これでシンプルなウェブサイトはでき上がりです。しかし今回はCSS等の使用を検討していくため、細かく設定を決めて行かなくてはいけません。
settings.pyの編集でCSSを読み込ませるようにする
プロジェクトフォルダにあるsettings.pyを開いて下記の項目を追加すると読み込みできるようになります。
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
MEDIA_URL ='/media/'
MEDIA_ROOT = os.path.join(BASE_DIR,'media')
ついでに画像を扱いたいと思うので、MEDIA_URLで画像の保存場所を教えてあげつつMEDIA_ROOTで画像を認識させています。これでhtmlで{% static 名前.css%}と入力するとCSSが反応するようになります。以下のコマンドを入力するとstaticファイルを1箇所にまとめたり、CSSのファイルやJavaScriptのファイルを作成してくれる便利なコマンドです。自分オリジナルのデザインにしたいのでフォルダを作ったら中身は全消去します。
$python manage.py collectstatic
DjangoアプリケーションからStatic画像を表示させる
最後にdjangoアプリケーションから画像を表示させます。
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls import url
from django.conf.urls.static import static,staticfiles_urlpatterns
urlpatterns = [
path('admin/', admin.site.urls),
path('',include('app_name.url')),
]
urlpatterns += staticfiles_urlpatterns()
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_URL)
次回はmysqlとUserの骨組みを作っていきたいと思います。