はじめに
今回でこの「Pythonで学ぶバックエンド開発」の連載は最終回です。今回は連載の総仕上げとして、お絵描きのベジェ曲線データをデータベースに保存する機能を実装します。あわせて、作品のタイトルや作者名、コメントも保存できるようにします。
なお、前回までに作成したcss/mobile.cssやindex.py、bezierbbs.dbなどのファイル群がすでに存在することを前提に進めます。今回もこれらのファイルにコードを追記し、機能を拡張していきます。
お絵描きページを用意する
本項のサンプルコードを実装し、トップページの「DRAW」メニューへアクセスすると、次の図のようなお絵描きページが表示されます。このページでは既存のデータを表示するのではなく、キャンバスに新規に絵を描画できます。
「pages」→「draw.py」ファイルをコーディングする
お絵描きページは、pagesディレクトリ内のdraw.pyファイルにて、html関数を用いて出力します。ここでは定型的な<html>タグ、<head>タグ、<body>タグなどを定義します。
def html(form,con,cur):
print('''
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お絵描き - 一筆書きBBS</title>
<link href="css/pc.css" rel="stylesheet" type="text/css" />
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-width:1023px)" />
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id="left">
<header>
<h1>お絵描き</h1>
<nav>
<a href="?page=home">HOME</a>
<a href="?page=draw">DRAW</a>
<a href="?page=about">ABOUT</a>
</nav>
</header>
''')
「index.py」ファイルを実装する
以下のサンプルコードをindex.pyファイルに記述します。実装後はXAMPPなどのWebサーバを起動し、ブラウザからindex.pyへアクセスして動作を確認してください。なお、macOSやLinux環境の場合は、index.pyに実行権限（パーミッション）を付与する必要があります。
index.pyの後半では、draw.pyで生成されたHTMLの続きが出力されます。実際にどのようなHTMLがブラウザに送信されたかは、ブラウザの「ページのソースを表示」機能などで確認できます。
#!C:\Users\ユーザー名\AppData\Local\Programs\Python\Python312\python.exe
import cgi
import sys
import io
import sqlite3
import pages.comment as comment
import pages.draw as draw
import pages.about as about
import pages.home as home
#日本語があってもエラーにならないように
sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
form = cgi.FieldStorage()
page = form.getfirst('page', '')
con = sqlite3.connect('bezierbbs.db')
cur = con.cursor()
print('Content-Type: text/html; charset=utf-8\n\n')
if page == 'comment':
comment.html(form,con,cur)
elif page == 'draw':
draw.html(form,con,cur)
elif page == 'about':
about.html(cur)
else:
home.html(form,cur)
cur.close()
con.close()
print('''
(中略)
''')
サンプルコードの解説
1行目のShebang（シェバン）は、ご自身の環境に合わせてパスを変更してください（macOSやLinuxでは#!/usr/local/bin/python3.12など）。
pagesディレクトリのdraw.pyを、drawモジュールとしてインポート（as）します。標準出力のエンコーディングをUTF-8に設定し、日本語の文字化けを防ぎます。
「FieldStorage」関数と「getfirst」メソッドを使用し、GETリクエストの「page」パラメータを取得します。
データベースファイル「bezierbbs.db」への接続とカーソルの取得は、前回と同様の手順です。
Content-Typeヘッダを出力し、このHTML5文書がhtml文であることを出力してを宣言します。
取得したpageパラメータの値に応じて、各モジュール（draw, comment, about, home）のhtml関数を条件分岐で呼び出します。
処理終了後、データベース接続を閉じます。
HTML5文書の末尾部分を出力します。
