投稿日：
2018年4月1日
最終更新日：
【仕組みを理解】Djangoのtemplateファイルから静的コンテンツを読み込んでみよう
YouTubeも見てね♪
Anker PowerCor
旅行には必須の大容量モバイルバッテリー！
【最新機種】GoPro hero11 Black
最新機種でVlogの思い出を撮影しよう！
[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット
防水暴風で耐久性抜群なので旅行で大活躍です！
ペヤング ソースやきそば 120g×18個
とりあえず保存食として買っておけば間違いなし！
モンスターエナジー 355ml×24本 [エナジードリンク]
脳を活性化させるにはこれ！
Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK
メインデスクの横に置くのにぴったりなおしゃれな可動式ラック！
サンディスク microSD 128GB
スマホからSwitchまで使える大容量MicroSDカード！
Djangoでは静的コンテンツの管理も楽
静的コンテンツとはCSSやJavaScript、Imageファイル等のファイル群の事を指します。
また、Djangoではそれらをstaticファイルと呼びます。
Djangoでは、staticファイルをtemplateファイルから簡単に読み込むための仕組みがありますが、仕組みを理解していないと少しつまづいてしまうかもしれません。
今回は、staticファイルを読み込んで画面で確認するまでの手順を整理してみましたので、ご紹介致します。
手順
staticディレクトリの作成
まずは、対象のアプリディレクトリ配下に以下のコマンドで各staticフォルダを作成してください。
|
1
2
3
|
mkdir static/css
mkdir static/js
mkdir static/image
|
Djangoはアプリディレクトリ配下のstaticフォルダに対して静的コンテンツを探しに行きます。
似たような動きとして、templateのHTMLファイルについてもアプリディレクトリ配下のtemplateフォルダに探しに行きますね。
確認
では、今回は以下のディレクトリ構成にしてCSS/JavaScript/Imageの表示確認をしてみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.
省略
├── static
│ ├── css
│ │ └── style.css
│ ├── image
│ │ └── icon.png
│ └── js
│ └── index.js
├── templates
│ └── sample
│ └── index.html
省略
|
|
1
2
3
|
h1{
color: #F00;
}
|
|
1
2
3
|
(function(){
alert("Hello, JavaScript!!");
})();
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<html lang="en">
<head>
<meta charset="utf-8">
{% load static %}
<title>Sample</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}" />
<script src="{% static 'js/index.js' %}"></script>
</head>
<body>
<h1>静的コンテンツサンプル</h1>
<div>
<p>
<img src="{% static 'image/icon.png' %}" / />
</p>
</div>
</body>
</html>
|
すると、以下のように表示されると思います。
staticファイルをtemplateファイルから読み込む際に、押さえるべきポイントは以下です。
| ポイント | 説明 |
|---|---|
| {% load static %} |
templateファイル内でこの記述をすること。 そうすることでアプリ内のstaticフォルダを認識するようになります。 |
| {% static ‘{相対パス}’ %} | srcやhrefで指定するパスの部分をstaticディレクトリを基準とした相対パスで指定すること。 |
終わりに
以上のように、Djangoでは簡単に静的コンテンツの管理及び読み込みを実現することが可能になっています。
レイアウトを調整する上で、staticファイルは必要不可欠なファイルになるので、皆さんも是非お試しください。