Help us understand the problem. What is going on with this article?

Django(Python)でシンプルなアイコン・ダウンロードサイトを作ってみました。

フリー素材サイトは世の中にたくさんありますが、どうしても作ってみたかったので作ってみました。
初投稿&プログラミング初心者ですが、よろしくお願いします。

作成したもの

muralmarks_screenshot.png

https://muralmarks.com/
アイコン作成にはAdobe IllustratorAnimate CCを使用しています。

意識したこと

・出来る限り無駄を省いてシンプルなサイトにする。
・ユーザー登録不要&無料で利用できるようにする。
・できるだけ開発にお金をかけない。

使用した環境・サービスなど

・Python (Django)
・HTML
・CSS (SCSS)

・エックスサーバー (ドメイン取得)
・Heroku (インフラ丸投げ) ※今のところ無料プランで利用
・Cloudflare (Herokuでの独自ドメイン・SSL化の設定)
・Uptime Robot (Herokuがスリープするのを防ぐために使用)
・AWS S3 (静的ファイルはこちらで管理)

・GitHub (ソースコード管理)

ダウンロード機能を実装(Django)

下記のように、a要素のダウンロード属性でダウンロードできるかと思いましたが、本番環境では上手くいきませんでした。ダウンロード対象ファイルをアマゾンウェブサービスで管理してるからだと思います。

html
<a href="ファイルの場所" download="ファイル名">download</a>

調べてみると、HttpレスポンスにContent-Disposition(パラメータにattachmentを指定)というヘッダーを加えるように指示してやればいいとのことで、views.pyにその記述をします。(Narito Blogさんの記事をかなり参考にしました)

views.py
from .models import Image
from django.shortcuts import get_object_or_404
from django.http import HttpResponse

import mimetypes
import shutils

def download(request, pk):
    upload_file = get_object_or_404(Image, pk=pk)  #Image = モデル名
    file = upload_file.png_image
    name = file.name

    response = HttpResponse(content_type=mimetypes.guess_type(name)[0] or 'application/octet-stream')
    response['Content-Disposition'] = f'attachment; filename="{name}"'

    shutil.copyfileobj(file, response)

    return response

いま書いたviews.pyをurls.pyに紐づけします。↓

urls.py
from . import views

urlpatterns = [
    ...
    path('download/<int:pk>', views.download, name='download'),
    ...
]

あとはhtmlのa要素にurlをリンクさせます。↓

html
<a href="{% url 'アプリ名:download' image.pk %}">
    <span>Download</span>
</a>

これでなんとか本番でもダウンロードできるようになりました。

まとめ

DjangoとHeroku・AWSを関連付けるのがうまくいかなかったりDjangoからhtmlへ変数を渡すのに苦労しましたが、何とか公開するところまではいきました。

アイコンの種類がまだ少ないので徐々に増やしていきたいと思います。

Why do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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