Dropzone のインストール

1. エグゼクティブサマリー

Dropzoneは，Flaskアプリケーションでファイルのドラッグ＆ドロップによるアップロード機能を実現するライブラリである．Windowsではpipコマンドでインストールする．インストール後は，GitHubからサンプルプログラムをクローンして動作確認できる．Flaskサーバーを起動し，Webブラウザでlocalhost:5000にアクセスすることで，ドラッグ＆ドロップによるファイルアップロードを試すことができる．ソースコードは，FlaskとDropzoneを利用して，アップロードされたファイルを指定パスに保存する基本的な実装例である．

【サイト内の関連ページ】

Flask のインストール

参考Webページ

https://github.com/greyli/flask-dropzone/projects

2. 前準備（必要ソフトウェアの入手）

ここでは、最低限の事前準備について説明する。機械学習や深層学習を行う場合は、NVIDIA CUDA、Visual Studio、Cursorなどを追加でインストールすると便利である。これらについては別ページ https://www.kkaneko.jp/cc/dev/aiassist.htmlで詳しく解説しているので、必要に応じて参照してください。

Python 3.12 のインストール（Windows 上） [クリックして展開]

以下のいずれかの方法で Python 3.12 をインストールする。Python がインストール済みの場合、この手順は不要である。

方法1：winget によるインストール

管理者権限のコマンドプロンプトで以下を実行する。管理者権限のコマンドプロンプトを起動するには、Windows キーまたはスタートメニューから「cmd」と入力し、表示された「コマンドプロンプト」を右クリックして「管理者として実行」を選択する。

winget install -e --id Python.Python.3.12 --scope machine --silent --accept-source-agreements --accept-package-agreements --override "/quiet InstallAllUsers=1 PrependPath=1 AssociateFiles=1 InstallLauncherAllUsers=1"

--scope machine を指定することで、システム全体（全ユーザー向け）にインストールされる。このオプションの実行には管理者権限が必要である。インストール完了後、コマンドプロンプトを再起動すると PATH が自動的に設定される。

方法2：インストーラーによるインストール

Python 公式サイト（https://www.python.org/downloads/）にアクセスし、「Download Python 3.x.x」ボタンから Windows 用インストーラーをダウンロードする。
ダウンロードしたインストーラーを実行する。
初期画面の下部に表示される「Add python.exe to PATH」に必ずチェックを入れてから「Customize installation」を選択する。このチェックを入れ忘れると、コマンドプロンプトから python コマンドを実行できない。
「Install Python 3.xx for all users」にチェックを入れ、「Install」をクリックする。

インストールの確認

コマンドプロンプトで以下を実行する。

python --version

バージョン番号（例：Python 3.12.x）が表示されればインストール成功である。「'python' は、内部コマンドまたは外部コマンドとして認識されていません。」と表示される場合は、インストールが正常に完了していない。

AIエディタ Windsurf のインストール（Windows 上） [クリックして展開]

Pythonプログラムの編集・実行には、AIエディタの利用を推奨する。ここでは、Windsurfのインストールを説明する。Windsurf がインストール済みの場合、この手順は不要である。

winget install -e --id Codeium.Windsurf --scope machine --accept-source-agreements --accept-package-agreements --override "/VERYSILENT /NORESTART /MERGETASKS=!runcode,addtopath,associatewithfiles,!desktopicon"
powershell -Command "$env:Path=[System.Environment]::GetEnvironmentVariable('Path','Machine')+';'+[System.Environment]::GetEnvironmentVariable('Path','User'); windsurf --install-extension MS-CEINTL.vscode-language-pack-ja --force; windsurf --install-extension ms-python.python --force; windsurf --install-extension Codeium.windsurfPyright --force"

【関連する外部ページ】

Windsurf の公式ページ: https://windsurf.com/

Git のインストール [クリックして展開]

REM Git をシステム領域にインストール
winget install --scope machine --id Git.Git -e --silent --accept-source-agreements --accept-package-agreements --custom "/NORESTART /NOCANCEL /COMPONENTS=""gitlfs"" /o:EditorOption=Notepad /o:PathOption=Cmd /o:CRLFOption=CRLFCommitAsIs /o:DefaultBranchOption=main /o:SSHOption=OpenSSH /o:UseCredentialManager=Enabled"

必要なライブラリのインストール [クリックして展開]

python -m pip install -U simplejson flask flask-dropzone

3. 実行のための準備とその確認手順（Windows 前提）

3.1 プログラムファイルの準備

以下の2つの方法がある．

方法1：GitHubからクローンする

https://github.com/greyli/flask-dropzone/tree/master/examples の手順に従う．

Windowsでコマンドプロンプトを実行し，以下のコマンドでリポジトリをクローンする．

git clone https://github.com/greyli/flask-dropzone
cd flask-dropzone/examples
pip install -r requirements.txt

方法2：ソースコードを手動で保存する

第5章のソースコードをテキストエディタ（メモ帳，Windsurf 等）に貼り付け，app.py として保存する（文字コード：UTF-8）．

3.2 実行コマンド

コマンドプロンプトでファイルの保存先ディレクトリに移動し，以下を実行する．

GitHubからクローンした場合：

python basic/app.py

ソースコードを手動で保存した場合：

python app.py

3.3 動作確認チェックリスト

確認項目	期待される結果
Flaskサーバーの起動	コマンドプロンプトにサーバー起動メッセージが表示される
Webブラウザで localhost:5000 にアクセス	ドラッグ＆ドロップ用の画面が表示される
ファイルをドラッグ＆ドロップ	ファイルがアップロードされ，指定パスに保存される
アップロード完了後	「upload done」が返される

4. 概要・使い方・実行上の注意

Dropzoneは，Flaskアプリケーションでファイルのドラッグ＆ドロップによるアップロード機能を実現するライブラリである．アップロードされたファイルは指定パスに保存される．

動作確認

Flaskサーバーを起動し，Webブラウザで「localhost:5000」にアクセスする．

ファイルをドラッグ＆ドロップしてアップロードの動作を確認する．

ソースコードは第5章に掲載している．

5. ソースコード

FlaskとDropzoneを利用したファイルアップロードのソースコード例を以下に示す．

import os
from flask import Flask, request
from flask_dropzone import Dropzone

app = Flask(__name__)
dropzone = Dropzone(app)

@app.route('/uploads', methods=['GET', 'POST'])
def upload():
    if request.method == 'POST':
        f = request.files.get('file')
        f.save(os.path.join('the/path/to/save', f.filename))
        return 'upload done'

if __name__ == '__main__':
    app.run(debug=True)

6. まとめ

Dropzoneライブラリ

Dropzoneは，Flaskアプリケーションでファイルのドラッグ＆ドロップによるアップロード機能を実現するライブラリである．

インストール

Windowsではpipコマンドでflask-dropzoneをインストールする．

サンプルプログラムによる動作確認

GitHubからサンプルプログラムをクローンし，Flaskサーバーを起動してlocalhost:5000にアクセスすることで動作を確認できる．

基本的な実装構成

ソースコードは，Flask・request・Dropzoneのインポート，アプリケーション初期化，ルーティング定義，ファイル保存処理で構成される．