DullCodes’s diary

programming,c++,python,MachineLearning,Math,Django,Competitive

初めてのDjango 10 - static files

static file

静的ファイルのこと
例えば、CSSや画像ファイルのように、中身をいじらずにそのまま配信するファイル
のことを静的ファイルという

さっそく設定 設定と言えばあのファイルの修正から

settings.py

settings.py の一番下の方にこれを追加

LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'
USE_I18N = True
USE_L10N = True
USE_TZ = True

STATIC_URL = '/static/'

# これ! タイポに注意
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

例によってBASE_DIR にstaticを付け加える形で path を追加
次に static ディレクトリを作成する

mysite-project/static

mysite-project $ ls
db.sqlite3  manage.py  myapp  mysite  templates

mysite-project $ mkdir static

mysite-project $  ls
db.sqlite3  manage.py  myapp  mysite  static  templates

完成したので後は静的ファイルの配置

適当なCSSフレームワークと、自分で書いた絵を表示してみる

配置するファイル

UlKit

CSS フレームワーク」で検索して最初に出てきたやつを使う
html, CSS, なんなら JavaScriptも全くわからない

getuikit.com

と思ったけど面倒そうだったので、もっと簡単そうなこっちにする

materializecss.com

今の所css フレームワークなんてなんでもいい static を読みたいだけ

絵というかただの文字 我ながらよくマウスでここまでまともな字が書けるなとご満悦

f:id:DullCodes:20200304105219p:plain
django static file my drawing

static ディレクトリに配置

配置なんて言葉使ってるけどなんのことはない
templatesと同様に適当に分類分けしてファイルコピーすればいいだけ

まずはstatic 配下にそれぞれのディレクトリを作る
※作らなくてもいいけどこうやって分けたほうが後々便利なはず

$ tree static/
static/
├── css
├── js
└── pictures

3 directories, 0 files

そして配置

mysite-project $ tree static/

static/
├── css
│   ├── materialize.css
│   └── materialize.min.css
├── js
│   ├── materialize.js
│   └── materialize.min.js
└── pictures
    └── 10.static_file_my_drawing.png

cssファイル と jsファイルがなぜか2つある
.minというファイルは minimizedファイルと言ってファイルの容量を小さくするために
機械的に変数名を一文字にするとか、空白を全部詰めるとかしているファイル

そうすることによって、cssやjsファイルなどの静的ファイルの読み込みが格段に速くなるらしい
中身は無茶苦茶、人間が読めるようなもんではない
読むときは普通のやつ、使うときは.minファイルという使い分けをするようです

js も css もさっぱりわからないからまたいつか

コードの修正

すごく簡単
staticファイルを使う際には load staticというコマンドを使って
このページでは static ファイルを使いますよーということを宣言する必要がある
宣言が終わったら、実際にstaticファイルの読み込みを行う

base.html

load static をしてcss と js ファイルを読み込んで、header だけ追加
Materializeのページにあったものをそのままコピペしただけ

<!DOCTYPE html>
<html lang="en">

<head>
  {% load static %}
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="{% static 'css/materialize.min.css' %}">
  <script src="{% static 'js/materialize.min.js' %}"></script>
  <title>Index</title>
</head>

<body>
  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">Logo</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>

  <h1>BASE.HTML</h1>

  {% block index %}
  {% endblock index %}
</body>

</html>

index.html

input フォームを修正するだけ

{% extends "base.html" %}

{% block index %}
<div>
  <h1>INPUT FORM</h1>

  <!-- ここらへんをコピペしただけ -->
  <!-- inputフォームのname属性だけは修正が必要 -->
  <div class="row">
    <form class="col s12" action="" method="POST">
      {% csrf_token %}
      <div class="row">
        <div class="input-field col s6">
          <label for="first_name">You Inputs</label>
          <input placeholder="some text here :D" id="first_name" name="some_text" type="text" class="validate">

          <button class="btn waves-effect waves-light" type="submit" name="action">
            Submit
          </button>
        </div>
      </div>
  </div>

  <div>
    {{ var }}
  </div>
</div>
{% endblock %}

はい簡単 というわけで実行

結果

f:id:DullCodes:20200304120757p:plain
django load static file and form index.html

おおーださい
とりあえず static ファイルはちゃんと読み込んで、htmに適用されている! すごい!

f:id:DullCodes:20200304120902p:plain
django input form after applying static css, js

適当に文字入力して送信した後 ちゃんと表示されている => POSTして受取、表示が出来ている

一応 requestの中身も見てみる

f:id:DullCodes:20200304121018p:plain
django print request after applying static css and js

何も変わらん staticファイル読み込みましたみたいな出力は無いんだね
最後に自分の書いた絵を表示して終了

static picture

mysite/urls.py

メインページが view関数のままだったので クラスに変更

from django.urls import path, include
from mysite.views import IndexView

urlpatterns = [
    path('', IndexView.as_view()),
    # include myapp
    path('myapp/', include('myapp.urls'))
]

mystei/views.py

from django.shortcuts import render
from django.views import View


class IndexView(View):
    def get(self, request, *args, **kwargs):
        ctx = {}
        return render(request, 'main.html', context=ctx)

templates/main.html

load static を忘れずに

{% extends "base.html" %}

{% block main %}
{% load static %}
<div>
    <h2>MAIN.HTML</h2>
    <img src="{% static 'pictures/10.static_file_my_drawing.png' %}" alt="">
</div>
{% endblock main %}

実行

まー簡単に修正できる
というわけでルートにアクセス

f:id:DullCodes:20200304121849p:plain
django show my drawing from static file

まとめ

static ファイルを使うには

  1. settings.py に STATICFILES_DIRS を設定 普通に '/static/' でいいかな
    実際に外部に公開する際には色々やらなきゃいけないみたいだけど今はこれくらいで

  2. 表示するhtml ファイルに {% load static %} をつける

  3. 読み込むときに {% static '/relative/file/path/'%} で設定する

たったこれだけで静的ファイルが扱える 素晴らしい

終わり