Django で静的なファイルを扱うには?

記事
IT・テクノロジー

Django で静的なファイルを扱うには?

Web サービスや Web アプリを作る場合でも、静的な HTML ファイルやイメージ、CSS などを扱う機会も結構あります。 Django のバックエンドを含めたホスティングではそうした静的ファイルをどう扱ったら良いかをまとめてみました。


Django のプロジェクト作成

実際にプロジェクトを作成して、簡単な実装を体験するのが一番早くやり方がわかるので、今回はゼロから Django のプロジェクトを作成して、HTML ファイルから「Hello World!」を表示するようなシンプルな例で解説します。

仮想環境の作成と Django のインストール
Linux / Mac の場合は、virtualenv を利用するのをお勧めします。

$ pip3 install virtualenv
で仮想環境を利用するためのモジュールをインストールします。 次に、Django のプロジェクトのフォルダを作成して、そのフォルダに移動します。 今回は、「sample」というフォルダの下に仮想環境のフォルダと Django のプロジェクトフォルダを作るようにしています。

$ mkdir sample
$ cd sample
$ python3 -m virtualenv sample
$ source sample/bin/activate
で「sample」という仮想環境を作成してそれを有効にしています。

Windows10 の場合は、PowerShell が一般的な Unix 系の OS のシェルとは違うので、Python に組み込まれている「venv」を使います。 PowerShelll は標準設定では、スクリプトの実行が制限されているので、スクリプトの実行を有効にするか、従来のコマンドプロンプトを利用して使用します。

設定の変更は、Windows PowerShell を管理者モードで立ち上げます。スタートメニューから PowerShell を実行する際に、マウスの右ボタンを PowerShell の起動メニュー上でクリックします。

そのあとで以下のコマンドを実行します。

> Set-ExecutionPolicy -ExecutionPolicy Bypass -Scope CurrentUser
これで、スクリプトが実行できるようになりました。

> mkdir sample
> cd sample
> python -m venv sample
> sample/Scripts/activate
で仮想環境が利用できるようになっています。

続いて Django をインストールします。

$ pip3 install django
(*) Windows10 の場合は「pip3」の代わりに「pip」を使います。

Django プロジェクトとアプリの作成
Django のインストールができたら Django のプロジェクトとアプリの作成をします。

$ django-admin startproject sample_project
$ cd sample_project
$ python3 manage.py startapp sample_app
(*) Windows10 の場合、「python」を利用します

以上で Django のプロジェクトとアプリの作成は完了です。

静的なファイルとは?

Django のフレームワークの場合、Python のプログラムとテンプレートの機能を使うと Web ページを動的に作成することが可能です。データベースのデータを取得して必要に応じて表示するデータや画面の構成を変えて表示することができます。このようなページを「動的なページ」と呼びます。(英語ではダイナミック/dynamic)

一方でトップページやプライバシーポリシーなどのページは静的なファイルをそのまま使うケースも結構あります。また、ページに埋め込むイメージやページの体裁を整える CSS のファイルなどが静的なファイルの例です。

Firebase などの場合は、標準では「publid」というフォルダに HTML/CSS/Javascript/画像情報などをおくと、そのまま利用できるようになっています。

同じように、Django で静的なファイルを扱うには、簡単な設定の変更が必要になります。

Django の設定の変更

Django で静的なコンテンツを扱うのに必要な変更は以下の3点です。

* アプリのフォルダの下に静的コンテンツを入れるフォルダを作成(sample_app/static/sample_app)を作成
* 表示する静的コンテンツ(この例では「test.html」)の作成
* プロジェクトフォルダの「settings.py」の変更
です。

アプリのフォルダの下に静的コンテンツを入れるフォルダの作成
この例では、アプリの名前が「sample_app」で同じ名前のフォルダが作成されています。 この下に、「static/sample_app」というフォルダを作成します。 このフォルダに静的コンテンツのファイルを置きます

表示する静的コンテンツの作成
静的コンテンツを置くフォルダができたら、静的コンテンツの例として、HTML ファイルを作成します。今回は、シンプルに「Hello World!」を表示するだけです。

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>
このファイルを「test.html」で保存します。

「settings.py」の変更
変更は、1点です。

* アプリの登録
最後の部分に、「sample_app」を追加します。

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'sample_app'
]
標準設定で、静的ファイルの設定で

STATIC_URL = '/static/'
は設定されているので、新規に作成したアプリを追加するだけです。

開発用のサーバーで使ってみる

この記事で解説しているのは、開発用のサーバーを使って静的なコンテンツを扱う方法なので開発用のサーバーを起動します。公開の場合は少し仕組みが違うので、後日公開の解説をする際に取り上げる予定です。

開発サーバーの起動は、

$ python3 manage.py runserver
で起動されます。標準設定の場合は、Web ブラウザで「127.0.0.1:8000/static/sample_app/test.html」を指定すると、「Hello World!」が表示されます。 同じ容量で、必要な HTML ファイルや、CSS ファイル、画像ファイル、Javascript のファイルなどを置くことができます。

動的なコンテンツの場合、URL のマッピングで「urls.py」や「views.py」で設定する必要がありますが、静的なコンテンツの場合は必要ありません。

まとめ

Django のフレームワークを利用して Web アプリや Web サービスを開発する場合は、多くの場合は動的なコンテンツを扱う場合が多くなります。しかし、画像ファイルや CSS ファイル、Javascript など静的なコンテンツを利用する場合も意外に多いものです。

そうした場合でも、簡単な設定で Django で静的なコンテンツを扱うことができます。

* フォルダの準備
* 静的コンテンツの準備
* settings.py にアプリの登録
これだけで静的なコンテンツを扱えるようになります。最初は少し面倒に感じるかもしれませんが慣れれば簡単です!
サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す