Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

「画像でゴミ分類!」アプリ作成日誌day4~Bootstrapでフロントエンドを整える~

はじめに

「画像でゴミ分類!」アプリ作成日誌4日目の今日はBootstrapを使ってフロントエンドを整えていきたいと思います。

<記事一覧>

前回までのあらすじ

前回までの記事では画像認識アプリを実装してDjangoに載せるところまでやりました。今回はフロントエンドを整えていこうと思います。

画像表示

まず、前回の課題として画像の表示ができていないという問題がありました。その対策を書いておきます。

そもそも、画像をどのように表示させるかというと、webページ上に画像を置いておいて、そのパスを指定することでHTML内で読むことができるようになっています。なので、いったんバックエンド側で画像を保存して、それをパスで指定してフロントエンドで読みこむ形で実装します。(JavascriptだとBlob URLでブラウザ内だけの仮想のリンクみたいなものを作成できるらしいけど、Djangoで似たようなことができるのかわからなかった)

前準備

画像を扱えるように設定を追加しておく必要があります。

garbage_proj/setting.py
# TEMPLATESのcontext_processors内に次を追加
'django.template.context_processors.media',

# 末尾あたりに以下を追加
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

また、ルーティングが行えるようにurlsも変えておきます。

garbage/urls.py
# urlpatterns = []のリストの後に以下を追加
 + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

このように設定しておくと、garbege/mediaにアクセスが来た時にmedia(garbage,garbage_projと同列のディレクトリ)を参照するように設定できます。すなわち、<img src="./media/images/title.png">のようにすることで、リンクがつながります。

templateファイル

それではtemplateファイルを書いていきます。

garbage/templates/garbage/index.html
{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画像でゴミ分類!</title>
    <link rel="stylesheet" type="text/css" href="{% static 'garbage/css/bootstrap.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'garbage/css/style.css' %}" />
</head>
<body>
    <img src="./media/images/title.png" alt="画像でゴミ分類!" class="m-4" id="title">
    <div class="container row">
        <div class="col-lg-6 offset-lg-3 col-md-8 offset-md-2">
            <div class="container card p-4 mt-4">
                <p>分類を調べたい画像を入力してください</p>
                <form action="/garbage/result" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    {{ form }}
                    <br>
                    <button type="submit" class="mt-3">送信</button>
                </form>
            </div>
        </div>
    </div>
    <h4>既存の画像を利用する</h4>
    <div class="container row">
        <div class="col-md-6 p-3">
            <img src="./media/images/temp1.jpg" alt="画像1" class="sample-img">
        </div>
        <div class="col-md-6 p-3">
            <img src="./media/images/temp2.jpg" alt="画像2" class="sample-img">
        </div>
    </div>
</body>
</html>

Bootstrapのグリッドシステムで簡単にレスポンシブに対応できるのがいいですね。
デザインの現物は以下のようになります。
ps-1

garbage/templates/garbage/result.html
{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画像でゴミ分類!</title>
    <link rel="stylesheet" type="text/css" href="{% static 'garbage/css/bootstrap.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'garbage/css/style.css' %}" />
</head>
<body>
    <img src="./media/images/title.png" alt="画像でゴミ分類!" class="m-4" id="title">
    <div class="container row">
        <div class="col-lg-8 offset-lg-2">
            <div class="container card p-3 my-4 px-5">
                <h2 class="m-3">分類結果</h2>
                <img src="./media/images/image.png" alt="画像" id="result-img">
                <div class="container">
                    <table class="table">
                        <tr><th>分類</th><td>確率</td></tr>
                        {% for key, value in pred %}
                        <tr><th>{{ key }}</th><td>{{ value }}%</td></tr>
                        {% endfor %}
                    </table>
                    <a href="{% url "index" %}">Topへ戻る</a>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

predにはそれぞれの分類とその確率がタプルのリストみたいな感じになっています。
これも以下のようになります。
ps-2

ちなみにCSSはこんな感じです。

garbage/static/garbage/css/style.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を書いていきたいと思います。

<記事一覧>

参考文献

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What are the problem?