--- title: 「画像でゴミ分類!」アプリ作成日誌day6~ディレクトリ構成の修正~ tags: Python Django Webアプリケーション HTML author: eycjur slide: false --- # はじめに 「画像でゴミ分類!」アプリ作成日誌6日目の今日はディレクトリ構成を修正します。今日は忙しかったこともあり軽めです。 <記事一覧> - [「画像でゴミ分類!」アプリ作成日誌day1~データセットの作成~](https://qiita.com/eycjur/items/7d8223b28758c7dfaaa0) - [「画像でゴミ分類!」アプリ作成日誌day2~VGG16でFine-tuning~](https://qiita.com/eycjur/items/3e954cb70dc15f996c2d) - [「画像でゴミ分類!」アプリ作成日誌day3~Djangoでwebアプリ化~](https://qiita.com/eycjur/items/9c618538177c82f7fdc3) - [「画像でゴミ分類!」アプリ作成日誌day4~Bootstrapでフロントエンドを整える~](https://qiita.com/eycjur/items/7b58c28eb8b16e722b5d) - [「画像でゴミ分類!」アプリ作成日誌day5~Bootstrapでフロントエンドを整える2~](https://qiita.com/eycjur/items/08808097acd625e00652) - [「画像でゴミ分類!」アプリ作成日誌day6~ディレクトリ構成の修正~](https://qiita.com/eycjur/items/f436787c2d517af6cad6) ←イマココ - [「画像でゴミ分類!」アプリ作成日誌day7~サイドバーのスライドメニュー化~](https://qiita.com/eycjur/items/009dca5866c3e9ad0dd6) - [「画像でゴミ分類!」アプリ作成日誌day8~herokuデプロイ~](https://qiita.com/eycjur/items/ebfae5db5dd1cd8349ea) # 前回までのあらすじ 前回までの記事では画像認識アプリを実装してDjangoに載せたうえで、Bootstrapを使ってフロントエンドを整えるところまでやりました。現時点での問題点の一つ目はindexとresultのtemplateファイルで重複した記述が存在していることであり、これはbaseファイルを作成して対応します。2つ目の問題は画像ファイルをHTMLから相対パスで参照してしまっているので、それをstaticフォルダから読めるようにしたいと思います。 # base.htmlの作成 indexとresultで重複した記述をbaseに移行します。これは、今後デザインを変更した際にいちいち二つのファイルをいじるのが非効率だからです。 ```django:garbage/templates/garbage/base.html {% load static %} 画像でゴミ分類!
画像でゴミ分類!
{% block main %}{% endblock main %}
{% block second %}{% endblock second %}
``` 冒頭の記述やサイドバーが共通しているもののため、baseにします。`{% block main %}{% endblock main %}`のところに各ファイルごとの記述が入ります。 では、各ファイルが実際にどうなるかを見てみると、 ```django:garbage/templates/garbage/index.html {% extends "garbage/base.html" %} {% load static %} {% block main %}

分類を調べたい画像を入力してください

{% csrf_token %} {{ form }}
{% endblock main %} {% block second %}

既存の画像を利用する

画像1
画像2
{% endblock second %} ``` 最低限の部分だけを書くことで、このようにだいぶすっきりしたのが伝わるかと思います。 # 画像ファイルの配置の修正 ### 完成イメージ まず、どのようなディレクトリ構成にするかを決めておきます。 今回は以下のような構成にします。 garbage_proj ├garbage_proj │ └settings.pyなど ├garbage │ └views.pyなど └static   └garbage    ├css    │ └style.css    └media     └images     └image.pngなど ### staticとmediaのパス まず、staticとmediaのパスを設定しておきましょう。 ```py:garbage_proj/setting.py STATIC_URL = '/static/' STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),) MEDIA_ROOT = os.path.join(BASE_DIR, 'static/garbage/media') MEDIA_URL = '/media/' ``` いま、BASE_DIRは大元のgarbage_projフォルダなので、static,mediaフォルダをそれぞれ指定できていることがわかります。 こうすると、staticディレクトリを読み込むことで利用できるようになるので、templateファイルは``のように画像を指定できます。 これをもとに記述してきます。 ```django:garbage/templates/garbage/result.html {% extends "garbage/base.html" %} {% load static %} {% block main %}

分類結果

画像
{% for key, value, day in pred %} {% endfor %}
分類確率収集曜日
{{ key }}{{ value }}%{{ day }}
Topへ戻る
{% endblock main %} ``` このように書くと相対パスで記述する必要がなくなるので、ルーティングを統一できます。 ```django:garbage/templates/garbage/index.html {% extends "garbage/base.html" %} {% load static %} {% block main %}

分類を調べたい画像を入力してください

{% csrf_token %} {{ form }}
{% endblock main %} {% block second %}

既存の画像を利用する

画像1
画像2
{% endblock second %} ``` garbageアプリの`result_num`に対してパラメーター`num`を指定して渡しています。また、これを処理する`urls.py`は以下のようになっています。 ```python:garbage/urls.py from django.urls import path from django.conf import settings from django.conf.urls.static import static from . import views app_name="garbage" urlpatterns = [ path("", views.index, name="index"), path("result", views.result, name="result"), path("result/", views.result, name="result_num"), ] ``` `result_num`に対してはパラメーターを渡しつつ、"result"という同じ関数を割り当てています。 ```py:garbage/views.py(一部略) def result(request, num=0): if num: img = "./static/garbage/media/images/" + ["temp1.jpg", "temp2.jpg"][num-1] else: form = UploadPictureForm(request.POST, request.FILES) if form.is_valid(): img = form.cleaned_data["img"] else: params = { "form":UploadPictureForm() } return render(request, "garbage/index.html", params) pred = predict(img) params = { "img":img, "pred":pred } return render(request, "garbage/result.html", params) ``` サンプルが選択されたときは既存の画像を利用するようにすることができました。 # さいごに 以上のことで、だいぶファイル構造がわかりやすくなったかと思います。今後の開発がだいぶ楽になりそうです! ちなみに、今回記事を書いていてコードブロックにdjangoという言語の指定ができることを初めて知りました。HTMLのシンタックスハイライトを引き継いだうえでdjango templateも見やすくなっているので非常に便利ですね。 <記事一覧> - [「画像でゴミ分類!」アプリ作成日誌day1~データセットの作成~](https://qiita.com/eycjur/items/7d8223b28758c7dfaaa0) - [「画像でゴミ分類!」アプリ作成日誌day2~VGG16でFine-tuning~](https://qiita.com/eycjur/items/3e954cb70dc15f996c2d) - [「画像でゴミ分類!」アプリ作成日誌day3~Djangoでwebアプリ化~](https://qiita.com/eycjur/items/9c618538177c82f7fdc3) - [「画像でゴミ分類!」アプリ作成日誌day4~Bootstrapでフロントエンドを整える~](https://qiita.com/eycjur/items/7b58c28eb8b16e722b5d) - [「画像でゴミ分類!」アプリ作成日誌day5~Bootstrapでフロントエンドを整える2~](https://qiita.com/eycjur/items/08808097acd625e00652) - [「画像でゴミ分類!」アプリ作成日誌day6~ディレクトリ構成の修正~](https://qiita.com/eycjur/items/f436787c2d517af6cad6) ←イマココ - [「画像でゴミ分類!」アプリ作成日誌day7~サイドバーのスライドメニュー化~](https://qiita.com/eycjur/items/009dca5866c3e9ad0dd6) - [「画像でゴミ分類!」アプリ作成日誌day8~herokuデプロイ~](https://qiita.com/eycjur/items/ebfae5db5dd1cd8349ea)