django-filerの紹介

# はじめに

pythonやdjangoには、先人たちが構築した様々なアプリケーションがあります。

自分で１からシステムを作るのはとても楽しく、やりがいのあることです。ただ、たまには巨人の肩に乗って景色を見てみるのも悪くないと思います。

ここでは公開されているdjangoのアプリケーション、**django-filer**について、設定を紹介します。

# システム要件

下記がインストールされていることを前提とさせてください。

* Django 2系（Django 2.1を使用）
* python 3系（python 3.7を使用）

# django-filerってこんなもの

* django-filerに画像ファイルをアップロードするデモ

![djnago-filer_0_30.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/175ad66a-901d-a1a4-a30a-e54328927597.gif)

djangoの管理者画面で画像をアップロードすることが出来ます。アップロードした画像に対して、名前や詳細な説明などを加えて管理することが出来ます。このアプリケーション単体で使用するのではなく、別のアプリケーションで使う画像を管理するためのアプリケーションです。

* 作成したアプリケーション「ImageViewer」でアップロードした画像を表示するデモ

![djnago-filer_30_60.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/eb5258d0-ca26-3cdf-2dc3-c9759edba872.gif)

こちらは、django-filerにて管理している画像を使って、WEBサイトに画像を表示するテストアプリケーションです。

# インストール方法

`pip install django-filer`を行うことでパッケージをダウンロードすることができます。

# 行う設定

## プロジェクト全体の設定

settings.pyの抜粋です。デフォルトのsettings.pyに追記してください。
※**'ImageViewer'**はテスト用アプリケーションです。また**TEMPLATES**の設定もテスト用アプリケーションの設定です。これが必要ない場合外してください。

```python:settings.py
# アプリケーションの追加
INSTALLED_APPS = [
    ...
    'easy_thumbnails',
    'filer',
    'mptt',
    'ImageViewer',
    ...
]

.......

TEMPLATES = [
    {
        ...
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        ...
]


.......

# static, mediaの配置

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
```


プロジェクト全体のurls.pyです。
※**path('imageviewer/', include('ImageViewer.urls'))**はテスト用アプリケーション用の設定です。これが必要ない場合外してください。

```python:urls.py
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('filer/', include('filer.urls')),
    path('imageviewer/', include('ImageViewer.urls')),
]

if settings.DEBUG:    
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
```

## テスト用アプリケーションの設定（必要ない方は読み飛ばしてください）

* STEP1：アプリケーションフォルダ「ImageViewer」をプロジェクトフォルダ直下に作成します。

* STEP2：models.pyを作成します。

```python:models.py
from django.db import models
from filer.fields.image import FilerImageField


class Book(models.Model):
    title = models.CharField(max_length=255)
    cover = FilerImageField(related_name="book_covers", on_delete=models.PROTECT)
    back = FilerImageField(related_name="book_backs", on_delete=models.PROTECT)
```

**「FilerImageField」**は**「django.db.models.ForeignKey」**のサブクラスであるため、「ForeignKey」を使うときと同じように使用します。
**「on_delete」**はdjango2系から必須になった設定です。


* STEP3：views.pyを作成します。

```python:views.py
from django.views import generic
from .models import Book


class BookListView(generic.ListView):
    model = Book
```

「ListView」を使用してモデルのリストを表示させます。


* STEP4：urls.pyを作成します。

```python:urls.py
from django.urls import path
from . import views


app_name = 'ImageViewer'

urlpatterns = [
    path('', views.BookListView.as_view(), name='book_list'),
]
```

* STEP5：templateのhtmlファイルを作成します。

```html:book_list.html
{% load thumbnail %}

{% for book in book_list %}

<h1>{{ book.title }} crop無し</h1>

<img src="{% thumbnail book.cover 250x250 %}" alt="" />

<br>

<h1>{{ book.title }} crop有り</h1>

<img src="{% thumbnail book.cover 250x250 crop %}" alt="" />

<br>

{% endfor %}
```

「ListView」で呼び出すのでファイル名は「book_list.html」としてください。
このファイルは、プロジェクトフォルダ直下に「templates」-「ImageViewer」というフォルダを作ってその下に配置してください。
「crop」がある場合は四隅が少しだけ切り取られて表示されます。

* STEP6：admin.pyを作成します。

```python:admin.py
from django.contrib import admin
from .models import Book


admin.site.register(Book)
```

## 設定後に行うこと

マイグレーションファイルを作って、データベースのテーブルを作成する。

> python manage.py makemigrations
> python manage.py migrate

静的ファイルをstatic配下に配置する。

> python manage.py collectstatic

管理者ユーザーを作成する。

> python manage.py createsuperuser

起動する。

> python manage.py runserver

# 参考文献

[django-filer公式サイト](https://django-filer.readthedocs.io/en/latest/installation.html)