【Django入門】画像などのstatic(静的)なファイルを使ってみよう

今回はDjangoでstatic(静的)なファイルを扱う方法を解説したいと思います。

この記事では、

・staticファイルとは何か
・staticファイルの公開

について解説します。さらに、

・staticファイルを公開するときの注意点

についても解説します。

staticファイルを扱うときに必要なsettings.pyの編集方法についてもしっかりと学んでいきましょう。

staticファイルとは

ここでstaticファイルについて知っておきましょう。

staticファイルとは、静的なファイルです。

例としては、

・画像
・CSS
・JavaScript

などが挙げれます。

Djangoはビューやリクエストによってその都度表示が変わるシステムを得意としています。

そのような動的ではないファイルをこれから扱っていきます。

staticファイルを公開してみよう

これから実際にstaticファイルを公開してみましょう。

Djangoの下準備

まずはDjangoの下準備をします。

Djangoはプロジェクトを作成して、その中にWebアプリケーションを作成するのが基本の流れになっています。

まずは、プロジェクトを作りたいディレクトリに移動して、このコマンドを実行しましょう。

これでmySiteというディレクトリが出来上がります。

次にmySiteディレクトリに移動して、このコマンドを実行しましょう。

これでmySiteプロジェクトの中に、myappというWebアプリケーションが出来上がりました。

現在のディレクトリ構成はこのようになっています。

次に、mySite/settings.pyのINSTALLED_APPSを編集していきます。

INSTALLED_APPSに、myappを追加しました。

さらにtemplateファイルを置く場所を指定しましょう。

TEMPLATESの’DIRS’に、‘templates’という文字列を追加します。

これは、templatesというディレクトリにtemplateファイルを入れていくことを宣言しています。

肝心のtemplatesディレクトリは、manage.pyと同じ階層に作ります。

このtemplatesディレクトリにhtmlファイルを作成することで、templateとして使うことができます。

今回はindex.htmlというテンプレートを作ります。

詳しくはこちらの記事をご覧ください。

【Django入門】templateとHTMLを使ってWebページを表示しよう
更新日 : 2019年5月13日

次にviews.pyurls.pyを編集します。

views.pyは、このように編集します。

これでindex.htmlというファイルを返すことが出来ました。

次に、myapp/urls.pyを編集します。

このファイルは、最初はありませんが、自分で作る必要があります。

これでviews.pyとmyapp/urls.pyをつなげることが出来ました。

次にmySite/urls.pyを編集します。

これで http://localhost:8000/myapp/templates/ に接続するとindex.htmlを返すことが出来るようになりました。

runserverコマンドで接続をしてエラーが出なければ準備は完了です。

これでDjangoの下準備は出来ました。

staticファイルを置く

今回はtemplateファイルを使ってページを表示します。

そのページに画像を表示させることで、パスの指定方法などを見ていきましょう。

まずは、settings.pyを見てみましょう。

INSTALLED_APPSにある‘django.contrib.staticfiles’が、staticファイルを公開するために必要なDjangoアプリケーションになります。

これがINSTALLED_APPSに追加されていることを確認しておきましょう。

また、settings.pyの一番下に注目してみましょう。

このパスが、staticファイルを置く場所を指定しているものです。

そしてsettings.pyにこの記述を追加しましょう。

これでプロジェクト直下にstaticというディレクトリを作ることでstaticファイルを作ることが出来ました。

manage.pyと同じ階層にstaticというディレクトリを作り、その中にmyappというディレクトリを作ります。

さらにmyappというディレクトリにこの画像(pic.png)を入れておきます。

pic

現在のディレクトリ構成はこのようになっています。

非常に複雑なディレクトリ構造のように見えます。

でもプロジェクトとWebアプリケーションを作成した後に、staticディレクトリとtemplatesディレクトリを同じ階層に作っているだけなので、安心してください。

templates/myapp/index.htmlをこのように編集します。

普通のHTMLには見慣れない部分がありますが、これはtemplateファイルを扱うときに便利な変数です。

このあとにページを表示してソースを見ていただければ、どのような働きをするのかがわかるかと思います。

このコマンドで確認してみましょう。

ページがこのように表示されれば成功です。

スクリーンショット 2017-08-27 21.56.35

無事にstaticファイルを扱うことが出来ました。

ソースを見ていただければ、変数でパスを指定していたことがわかるかと思います。

これでDjangoでstaticファイルを扱うことが出来ました。

staticファイルを公開するときの注意点

これまでの手順でstaticファイルを公開することは出来ます。

しかし、気をつけなければならない点もあります。

settings.pyに記述するこの内容についてです。

これはWebアプリケーションごとに必要なstaticファイルを指定しているもので、この記述をしなければstaticファイルを使うことは出来ません。

まとめ

Djangoは動的なページを配信するのにとても便利な機能をたくさん持っています。

しかし画像やCSS、JavaScriptなどのファイルも、上質なページを作っていく上では欠かすことの出来ない存在です。

Djangoでページを作っていく時はぜひ、この方法でstaticなファイルを扱っていきましょう。

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

ryo

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説