はじめに
「画像でゴミ分類！」アプリ作成日誌4日目の今日はBootstrapを使ってフロントエンドを整えていきたいと思います。
＜記事一覧＞
- 「画像でゴミ分類！」アプリ作成日誌day1～データセットの作成～
- 「画像でゴミ分類！」アプリ作成日誌day2～VGG16でFine-tuning～
- 「画像でゴミ分類！」アプリ作成日誌day3～Djangoでwebアプリ化～
- 「画像でゴミ分類！」アプリ作成日誌day4～Bootstrapでフロントエンドを整える～←イマココ
- 「画像でゴミ分類！」アプリ作成日誌day5～Bootstrapでフロントエンドを整える2～
- 「画像でゴミ分類！」アプリ作成日誌day6～ディレクトリ構成の修正～
前回までのあらすじ
前回までの記事では画像認識アプリを実装してDjangoに載せるところまでやりました。今回はフロントエンドを整えていこうと思います。
画像表示
まず、前回の課題として画像の表示ができていないという問題がありました。その対策を書いておきます。
そもそも、画像をどのように表示させるかというと、webページ上に画像を置いておいて、そのパスを指定することでHTML内で読むことができるようになっています。なので、いったんバックエンド側で画像を保存して、それをパスで指定してフロントエンドで読みこむ形で実装します。(JavascriptだとBlob URLでブラウザ内だけの仮想のリンクみたいなものを作成できるらしいけど、Djangoで似たようなことができるのかわからなかった)
前準備
画像を扱えるように設定を追加しておく必要があります。
# TEMPLATESのcontext_processors内に次を追加
'django.template.context_processors.media',# 末尾あたりに以下を追加
MEDIA_ROOT=os.path.join(BASE_DIR,'media')MEDIA_URL='/media/'また、ルーティングが行えるようにurlsも変えておきます。
# urlpatterns = []のリストの後に以下を追加
+static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)このように設定しておくと、garbege/mediaにアクセスが来た時にmedia(garbage,garbage_projと同列のディレクトリ)を参照するように設定できます。すなわち、<img src="./media/images/title.png">のようにすることで、リンクがつながります。
templateファイル
それではtemplateファイルを書いていきます。
{%loadstatic%}<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>画像でゴミ分類！</title><linkrel="stylesheet"type="text/css"href="{%static'garbage/css/bootstrap.css'%}"/><linkrel="stylesheet"type="text/css"href="{%static'garbage/css/style.css'%}"/></head><body><imgsrc="./media/images/title.png"alt="画像でゴミ分類！"class="m-4"id="title"><divclass="container row"><divclass="col-lg-6 offset-lg-3 col-md-8 offset-md-2"><divclass="container card p-4 mt-4"><p>分類を調べたい画像を入力してください</p><formaction="/garbage/result"method="post"enctype="multipart/form-data">{%csrf_token%}{{form}}<br><buttontype="submit"class="mt-3">送信</button></form></div></div></div><h4>既存の画像を利用する</h4><divclass="container row"><divclass="col-md-6 p-3"><imgsrc="./media/images/temp1.jpg"alt="画像1"class="sample-img"></div><divclass="col-md-6 p-3"><imgsrc="./media/images/temp2.jpg"alt="画像2"class="sample-img"></div></div></body></html>Bootstrapのグリッドシステムで簡単にレスポンシブに対応できるのがいいですね。
デザインの現物は以下のようになります。
{%loadstatic%}<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>画像でゴミ分類！</title><linkrel="stylesheet"type="text/css"href="{%static'garbage/css/bootstrap.css'%}"/><linkrel="stylesheet"type="text/css"href="{%static'garbage/css/style.css'%}"/></head><body><imgsrc="./media/images/title.png"alt="画像でゴミ分類！"class="m-4"id="title"><divclass="container row"><divclass="col-lg-8 offset-lg-2"><divclass="container card p-3 my-4 px-5"><h2class="m-3">分類結果</h2><imgsrc="./media/images/image.png"alt="画像"id="result-img"><divclass="container"><tableclass="table"><tr><th>分類</th><td>確率</td></tr>{%forkey,valueinpred%}<tr><th>{{key}}</th><td>{{value}}%</td></tr>{%endfor%}</table><ahref="{%url"index"%}">Topへ戻る</a></div></div></div></div></body></html>predにはそれぞれの分類とその確率がタプルのリストみたいな感じになっています。
これも以下のようになります。
ちなみにCSSはこんな感じです。
body{text-align:center;background-color:rgb(239,239,240);}#title{float:center;width:50%;}#result-img{width:100%;height:auto;}.sample-img{width:90%;}主に画像の調整はCSSで書いていますが、それ以外は基本的にbootstrapに投げちゃってる感じです。
次回はサンプルでも動くようにviewをいじるかJavaScriptを書いていきたいと思います。
＜記事一覧＞
- 「画像でゴミ分類！」アプリ作成日誌day1～データセットの作成～
- 「画像でゴミ分類！」アプリ作成日誌day2～VGG16でFine-tuning～
- 「画像でゴミ分類！」アプリ作成日誌day3～Djangoでwebアプリ化～
- 「画像でゴミ分類！」アプリ作成日誌day4～Bootstrapでフロントエンドを整える～←イマココ
- 「画像でゴミ分類！」アプリ作成日誌day5～Bootstrapでフロントエンドを整える2～
- 「画像でゴミ分類！」アプリ作成日誌day6～ディレクトリ構成の修正～