はじめに
前回は、Visual Studio Codeを使ったデータベース「SQLite3」を解説。その後、PythonでプログラミングしてSQLite3を解説しました。
今回は、いよいよ「一筆書きBBS」のWebサイトを作っていきます。今回は1番シンプルなWebページである「アバウトページ」を作ります。アバウトページでは、このサイトについての紹介と、アクセスするたびにランダムなarticle（記事）のベジェ曲線の一筆書き図形を表示します。
最初は、前回作成した三角形のベジェ曲線図形しか出てきません。しかし、お絵描きページを作ってお絵描きを保存できるようになったら、さまざまなベジェ曲線図形が出てきます。実は、お絵描き自体はどのページでもできますが、お絵描きページでなければ作成したベジェ曲線データはデータベースに保存できません。
index.pyファイルを用意する
基本的に一筆書きBBSでは「index.py」ファイルだけが実行ファイルになります。これに「index.py?page=home」や「index.py?page=about」などとリンクで「GET」してページを遷移します。まずは次の図のようなメニューだけのアバウトページを作ります。
.pyファイルをCGIにハンドラーを追加する
いつものように「.htaccess」ファイルを用意します。これがないと.pyファイルをCGIスクリプトとして実行することができません。
AddHandler cgi-script .py DirectoryIndex index.py
about.pyファイルをコーディングする
後ほどindex.pyファイルから呼び出すために、「pages」→「about.py」ページの「html」関数をコーディングします。まだ引数の「cur」は使っていません。
def html(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">
''')
サンプルコードの解説
html関数で、クライアントのWebブラウザに送るHTML5文書の途中まで出力します。HTML5文書の残りはindex.pyファイルで続きを出力します。
index.pyファイルをコーディングする
次のサンプルコード[1]「index.py」をコーディングしたら、XAMPPのローカルサーバでindex.pyを実行してください。macOSやLinuxの場合はindex.pyに実行権限のパーミッションを与えてください。まだデータベースは使いませんが、記事を書きやすいように先にデータベースを読み込んで閉じるだけのプログラムを実装します。
index.pyの後半で、about.pyで出力したHTML5文書の続きが出力されます。どのようにWebブラウザにHTML5文書が送られたかは、Webブラウザの「ページのソース」などのメニューで確認してみるといいでしょう。
なぜこんなわかりにくい書き方をするかと言うと、後半のHTML5文書は全てのWebページで共通しているため、コード量を減らすためにこのようにしました。こうすることで、書き換える時も管理しやすくなります。
#!C:\Users\ユーザー名\AppData\Local\Programs\Python\Python312\python.exe
import sys
import io
import sqlite3
import pages.about as about
#日本語があってもエラーにならないように
sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
con = sqlite3.connect('bezierbbs.db')
cur = con.cursor()
print('Content-Type: text/html; charset=utf-8\n\n')
about.html(cur)
cur.close()
con.close()
print('''
<h2>メニュー</h2>
<ul>
<li><a href="?page=home">HOME</a></li>
<li><a href="?page=draw">DRAW(お絵描き)</a></li>
<li><a href="?page=about">ABOUT</a></li>
</ul>
</div>
<div id="right">
<canvas width="760" height="500"></canvas>
<footer>
<h3>このサイトは2025年から<a href="http://vexil.jp" target="_blank">VexilJp</a>がテストしています。</h3>
</footer>
</div>
</body>
</html>
''')
サンプルコードの解説
シェバンのところはご自分のユーザー名にしてください。またmacOSやLinuxでは「#!/usr/local/bin/python3.12」などになります。
モジュールを読み込みます。「pages」→「about.py」を「about」モジュールとして読み込みます。
UTF-8で日本語に対応します。
「bezierbbs.db」ファイルを読み込むところは前回と同じでコネクトしてカーソルを取得します。
このHTML5文書がhtml文であることを出力して明示します。
importしたaboutのhtml関数を呼び出します。
データベースを閉じます。
HTML5文書の終わりを出力します。
