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

Djangoでスクリーンショット撮影ウェブサイトを作成する方法

この記事では、Djangoを使ってスクリーンショットを撮影できるウェブサイトを作成する方法を解説します。このサイトでは、ボタンをクリックすると画面のスクリーンショットが自動的に撮影され、画像はmediaフォルダに保存されます。保存されたスクリーンショットは、いつでも好きなタイミングで閲覧できます。

プロジェクトとアプリの作成

まずは、プロジェクトとアプリを作成するところから始めましょう。

settings.py の設定

settings.py の INSTALLED_APPS に作成したアプリ名を追加し、ファイルの末尾に以下のコードを追記します。

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR/'media'

これで、画像をアップロード・保存するための基本的なメディアフォルダの設定が完了しました。

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

次に、プロジェクトの urls.py を以下のように編集します。

from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),

    # ここは私のアプリ名です
    path('',include('screenshottaker.urls'))
]

ここでは、単純にアプリ側の urls.py を読み込んでいるだけです。

アプリの urls.py の設定

続いて、アプリ側の urls.py を以下のように記述します。

from django.urls import path,include
from . import views
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
    path('', views.home)
]+ static(settings.MEDIA_URL,document_root = settings.MEDIA_ROOT)

シンプルなビューをレンダリングし、メディアファイルを配信するためのURL設定も行っています。

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

以下のモジュールをインストールしてください。

pip install pyautogui
pip install pillow

ここでは、このプロジェクトで使用するライブラリをインストールしています。pyautogui は画面のスクリーンショットを撮影するためのライブラリ、pillow は画像を扱うためのライブラリです。

views.py の実装

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

from django.shortcuts import render

# Create your views here.
import random
import pyautogui
from django.conf import settings
from django.contrib import messages

def home(request):
    if request.method == "POST":
        ss = pyautogui.screenshot()
        img = f'myimg{random.randint(1000,9999)}.png'
        ss.save(settings.MEDIA_ROOT/img)
        messages.success(request,'screenshot has been taken')
        return render(request,'home.html',{'img':img})
    return render(request,'home.html')

views.py の処理の流れは以下の通りです。

  • pyautogui を使ってスクリーンショットを撮影します。
  • ランダムな数値を生成し、「png」形式の画像ファイル名を作成します。これにより、ファイル名の重複を防ぐことができます。
  • 撮影した画像を MEDIA_ROOT(mediaフォルダ)に保存します。
  • フロントエンドに成功メッセージと、撮影したスクリーンショットを渡して表示します。

mediaフォルダとテンプレートの作成

次に、プロジェクトおよびアプリのディレクトリと同じ階層に「media」フォルダを作成してください。

さらに、アプリディレクトリ内のmigrationフォルダと同じ階層に「templates」フォルダを作成し、その中に home.html ファイルを作成して、以下のコードを記述します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=devicewidth, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/
dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
    <style>
        img{
            width: 800px;
        }
    </style>

{% if messages%}
{% for message in messages%}
<div class="text-center mt-5">{{message}}</div>
{%endfor%}
{%endif%}
    <form method="post" class="text-center">{%csrf_token%}
        <button class="p-3 btn btnsuccess">Take A Screenshot</button>
    </form>
    {% if img%}
<div class="text-center p-5 mt-5 container border shadowsm">
        <img src="https://127.0.0.1:8000/media/{{img}}" class= "img-fluid">
    </div>
    {%endif%}
</body>
</html>

これですべての準備が完了しました。ここでは、CSSを使ったシンプルなフロントエンドとPOSTフォームを作成し、Djangoのテンプレートタグによる条件分岐を使って、撮影した画像とメッセージを表示できるようにしています。

実行結果

実際に動かすと、以下のような画面が表示されます。

Djangoでスクリーンショット撮影ウェブサイトを作成する方法

  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