Python
 Computer >> コンピューター >  >> プログラミング >> Python

DjangoでQRコード生成Webサイトを作る方法を徹底解説

Webサイトを運営していると、URLからQRコードを生成したい場面がよくあります。QRコードは本人確認、サイトへのログイン、Webページを開くなど、さまざまな用途でスキャンされています。この記事では、Djangoを使って「qrgenerator」というQRコード生成サイトを実装する手順を、初心者にもわかりやすく解説します。

実装例

1. プロジェクトとアプリの準備

まずDjangoプロジェクトとアプリを作成します。続いて、プロジェクトおよびアプリと同じ階層にmediaフォルダを作成してください。

2. settings.py の設定

プロジェクトフォルダ内のsettings.pyを開き、INSTALLED_APPSにアプリ名を追加します。さらにファイルの末尾に以下のコードを追記しましょう。

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

ここでは、生成したQRコード画像を保存するためのmediaフォルダの設定を行っています。

3. プロジェクト側の urls.py の設定

プロジェクトディレクトリのurls.pyに以下を追加します。

from django.contrib import admin
from django.urls import path,include
from django.conf.urls.static import static
from django.conf import settings

urlpatterns = [
    path('admin/', admin.site.urls),
    path("",include("qrgenerator.urls"))
]
urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

これでアプリのURLとmediaフォルダへのアクセス経路が定義されました。「qrgenerator」はアプリ名ですので、ご自身の環境に合わせて変更してください。

4. 必要なライブラリのインストール

次に、PIL（Pillow）とqrcodeという2つのライブラリをインストールします。

pip install PIL
pip install qrcode

5. アプリ側の urls.py の設定

アプリのurls.pyは以下のように記述します。

from django.urls import path,include
from . import views

urlpatterns = [
    path('', views.home,name='Home'),
]

ここでは、トップURLにアクセスした際にhomeビューが表示されるように設定しています。

6. views.py の実装

views.pyに以下のコードを追加します。

from django.shortcuts import render
from .models import QrCode
# ここにビューを作成します
def home(request):
    if request.method=="POST":
        Url=request.POST['url']
        QrCode.objects.create(url=Url)

    qr_code=QrCode.objects.all()
    return render(request,"home.html",{'qr_code':qr_code})

POSTリクエストで送信されたURLを受け取り、QrCodeモデルのオブジェクトを生成します。GETリクエスト時には、保存済みのすべてのQRコードをテンプレートに渡して表示します。

7. テンプレートの作成

アプリディレクトリ内（migrationフォルダと同じ階層）にtemplatesフォルダを作成し、その中にhome.htmlというファイルを以下の内容で作成します。

<!DOCTYPE html>
<html>
    <head>
        <title>tut</title>
    </head>
    <body>
        <form method="POST">
            {% csrf_token %}
            <input type="url" placeholder="URLを入力してください" required name="url">
            <button type= "submit" >QRコードを生成</button>
        </form>
        {% for qr in qr_code %}
        <img src="{{qr.image.url}}"/><br>
        {%endfor%}
    </body>
</html>

このテンプレートでは、URLを入力してバックエンドへ送信するフォームを作成しています。フォームの下では、保存されている各QRコードオブジェクトをループ処理で取り出し、画像として表示しています。

8. models.py の実装

models.pyに以下のコードを追加します。

from django.db import models
import qrcode
from PIL import Image, ImageDraw
from io import BytesIO
from django.core.files import File

# ここにモデルを作成します
import random
class QrCode(models.Model):
    url=models.URLField()
    image=models.ImageField(upload_to='qrcode',blank=True)

    def save(self,*args,**kwargs):
        qrcode_img=qrcode.make(self.url)
        canvas=Image.new("RGB", (300,300),"white")
        draw=ImageDraw.Draw(canvas)
        canvas.paste(qrcode_img)
        buffer=BytesIO()
        canvas.save(buffer,"PNG")
        self.image.save(f'image{random.randint(0,9999)}',File(buffer),save=False)
        canvas.close()
        super().save(*args,**kwargs)

ポイントは、独自のsaveメソッドを定義しているところです。qrcodeライブラリでQRコードを生成し、PILのキャンバス（白背景・300×300px）に貼り付けてPNG画像として保存します。生成された画像はmediaフォルダに保存され、同時にモデルのインスタンスとして登録されます。ファイル名にはランダムな数値を付与することで、同名ファイルの衝突を防いでいます。

以上ですべての準備が整いました。サーバーを起動して、実際に動作を確認してみましょう。

出力結果

DjangoでQRコード生成Webサイトを作る方法を徹底解説

  1. Djangoで実現するクライアント側の画像ズーム・回転機能の実装方法

    Webアプリケーションを開発していると、アップロードされた画像をユーザー側で回転したり拡大縮小（ズーム）したりしたい場面があります。そんなときに役立つのが、クライアント側で動作する画像ズーム・回転ライブラリです。HTMLファイルにjQuery関連のJSとCSSを読み込むだけで、ズームや回転の機能を簡単に追加できます。 この記事では、django-client-side-image-croppingライブラリを使って、Djangoアプリケーションに画像のクロップ（トリミング）・ズーム・回転機能を実装する手順を解説します。 事前準備 まずDjangoプロジェクトとアプリを作成し、URL設定などの

  2. WebサイトからExcelへデータを取り込む2つの方法｜手動インポートとVBAスクレイピングを徹底解説

    World Wide Webには有用なデータが膨大に存在することは周知のとおりです。しかし、何らかの分析を行う前には、そのデータをMicrosoft Excelに取り込む必要があります。本記事では、このタスクを完了させるために使える2つの方法を詳しく解説します。 方法1：Webクエリ機能で外部データを手動取得する ここでは、興行収入ランキング上位の映画データをWebページからダウンロードするケースを例に、手順をわかりやすく紹介します。 まずMicrosoft Excelを開き、「データ」タブをクリックします。次に「外部データの取込」グループ内の「Web」をクリックしてください。「新しいWeb