１．開発に至るまで
私は高専の授業でC言語を２年間学んだが、他のプログラミング言語を学んだり、扱ったりすることがなかった。
何か作ろうかと思考しても、知識が乏しいため何から作るべきかもわからず行動にも移さず、ただただ怠惰を貫いていた。
だが最近、同じ高専の友人から「こういうものを作れば良い」という案を受け今回開発に至った。
２．開発環境
開発にあたって今回は表示するもの以外何もないブラウザでもいいので、とにかくEXCELの表を全て表示させることを目的とする。
開発に使用した環境及びツールは以下の通りである。
・Windows11（自宅のPCを使用）
・Visual Studio Code 1. 106.3
・Python 3.13.5
・frask（一時的なWebサーバー）
・venv (独立した仮想環境の作成）
・EXCEL Microsoft 365
・HTML （ブラウザにフォームを表示）
・CSS （ページやフォームの見た目の整理）
・Gemini 2.5
以上の環境を整え次に、以下に示す手順の通りに作成する。
２．１ Pythonアプリケーションの作成
環境を整えたらapp.pyというファイルを作成し、アップロードフォームを表示するルートとファイルを受け取るルートの二つを
定義するプログラムを作成する。以下がそのプログラムである。
import os
from flask import Flask, render_template, request, redirect, url_for
import pandas as pd
# 許可するファイル拡張子のリスト
ALLOWED_EXTENSIONS = {'xlsx', 'xls'}
UPLOAD_FOLDER = 'uploads' # アップロードされたファイルを一時的に保存するフォルダ名
app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
# UPLOAD_FOLDERが存在しない場合は作成
if not os.path.exists(UPLOAD_FOLDER):
os.makedirs(UPLOAD_FOLDER)
# ファイルの拡張子が許可されているかチェックする関数
def allowed_file(filename):
return '.' in filename and \
filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
# --- ルート定義 ---
# 1. アップロードフォームを表示するページ
@app.route('/')
def index():
# 'index.html' テンプレートをレンダリングしてブラウザに表示
return render_template('index.html')
# 2. ファイルアップロードを処理するAPIエンドポイント
@app.route('/upload', methods=['POST'])
def upload_file():
# POSTリクエストにファイルが含まれていないかチェック
if 'file' not in request.files:
return redirect(request.url) # ファイルがない場合は同じページにリダイレクト
file = request.files['file']
# ファイル名がない（空のフォームが送信された）かチェック
if file.filename == '':
return redirect(request.url)
# ファイルが許可された拡張子であり、ファイル名が存在する場合
if file and allowed_file(file.filename):
# ファイルの保存処理（一時的な場所）
filepath = os.path.join(app.config['UPLOAD_FOLDER'], file.filename)
file.save(filepath)
# ★ ここでExcelファイルのデータ処理を実行 ★
try:
# pandasを使ってExcelファイルを読み込む
df = pd.read_excel(filepath)
# 修正後：head()を削除し、データフレーム全体をHTMLに変換します
html_table = df.to_html()
# 処理が完了したら、一時ファイルを削除することが望ましい
os.remove(filepath)
# 処理結果を表示するページにリダイレクト
# この例では、結果を直接返すことにします
return f'<h1>ファイル "{file.filename}" のアップロードと処理が完了しました。</h1><h2>データプレビュー（最初の5行）:</h2>{html_table}'
except Exception as e:
# 処理エラーが発生した場合
os.remove(filepath) # エラー時もファイルを削除
return f'<h1>Excel処理中にエラーが発生しました:</h1><p>{e}</p>', 500
# 許可されていないファイル形式の場合
return '<h1>許可されていないファイル形式です。(.xlsxまたは.xlsが必要です)</h1>', 400
# 実行
if __name__ == '__main__':
app.run(debug=True)２．２ HTMLフォームの作成
プロジェクトフォルダ直下にtamplatesというフォルダを作成し、その中でindex.htmlを作成する。
以下がindex.html内のプログラムである。
mkdir templates<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Excelファイルアップローダー</title>
<style>
body { font-family: Arial, sans-serif; margin: 50px; }
.container { max-width: 600px; margin: auto; padding: 20px; border: 1px solid #ccc; border-radius: 8px; }
h1 { text-align: center; color: #333; }
form { display: flex; flex-direction: column; gap: 15px; }
input[type="file"] { padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
input[type="submit"] { background-color: #4CAF50; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
input[type="submit"]:hover { background-color: #45a049; }
.note { color: #666; font-size: 0.9em; text-align: center; margin-top: 20px; }
</style>
</head>
<body>
<div class="container">
<h1>📁 Excelファイルアップロードフォーム</h1>
<form method="POST" action="{{ url_for('upload_file') }}" enctype="multipart/form-data">
<label for="file">アップロードするExcelファイルを選択してください (.xlsx / .xls):</label>
<input type="file" name="file" id="file" required accept=".xlsx, .xls">
<input type="submit" value="ファイルをアップロードして処理">
</form>
<p class="note">※ 処理後、サーバー上の一時ファイルは削除されます。</p>
</div>
</body>
</html>２．３ アプリケーションの実行
VS Codeのターミナル内で「python app.py」というコマンドを実行すると、サーバーが起動しURLが表示される。
アクセスをするとindex.htmlのフォームが表示される。後はフォームでEXCELファイルを選択して「ファイルをアップロードして処理」ボタンを押せば処理結果がブラウザに返り、表示される。
実際の画面を以下に示す。
今回の開発の方法やコーディングなどはGeminiをメインとして使用し、取り組んでいる。
作成者
