.png)
はじめに
今回は「ホームページ」を作ります。一般的に、かつてはWebサイト全体を「ホームページ」と呼ぶことがありましたが、英語圏では主にトップページのことを指します。この記事で作成する「一筆書きBBSのホームページ」は、トップページにあたり、タイトル、メニュー、記事のタイトル一覧、ランダムに選ばれた一筆書きの絵が表示されます。
前回に引き続きコードを追記します。そのため「index.py」ファイル、「pages」→「about.py」ファイル、「pages」→「etc.py」ファイル、「bezierbbs.db」ファイル、cssファイル、jsファイルが既に存在することを前提として説明を進めます。
ホームページを用意する
はじめに記事のタイトル一覧をまだ表示しない状態のホームページを作成します（下の図を参照）。コードの多くは前回と似ていますが、今回は新たにURLから「GET」で渡された「page」パラメータを取得します。pageパラメータが「home」または空の場合は「home.py」ファイルの「html」関数を呼び出します。
.pyファイルをCGIとして動作させる設定
「.htaccess」ファイルを用意し、.pyファイルをCGIスクリプトとして実行できるように設定します。この設定がないと、pyファイルはスクリプトとして実行されません。なお、Webサーバーの設定ファイル（「httpd.conf」ファイルなど）に同様の設定を記述することで、プロジェクトごとに.htaccessファイルを用意する必要はなくなります。しかし、サーバー全体の重要な設定ファイルを誤って変更するリスクを避けるため、今回は.htaccessファイルを使用します。
AddHandler cgi-script .py DirectoryIndex index.py
home.pyファイルをコーディングする
次に「pages/home.py」ファイルを作成します。この「html」関数は、ホームページのHTML5文書の前半部分（headタグ、htmlタグ、bodyタグの開始部分など）を出力します。 このように1つのHTML5文書を複数の関数に分割して出力する手法は、常に最適とは限りません。特に、ページごとにWebデザインが大きく異なる場合は、分割しない方が管理しやすいこともあります。
import pages.etc as etc
def html(form,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">
''')
etc.random_load(cur)
index.pyファイルをコーディングする
次のサンプルコード「index.py」をコーディングしたら、XAMPPのローカルサーバーを起動し、Webブラウザで「index.py」にアクセスしてください。macOSやLinuxの場合は、「index.py」に実行権限（パーミッション）を与える必要があります。
「index.py」の後半（home.pyのhtml関数呼び出し後）で、HTML5文書の残りの部分が出力されます。最終的にどのようなHTML5文書がWebブラウザに送信されたかは、ブラウザの「ページのソースを表示」などのメニューから確認できます。
#!C:\Users\ユーザー名\AppData\Local\Programs\Python\Python312\python.exe
import cgi
import sys
import io
import sqlite3
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 == 'about':
about.html(cur)
else:
home.html(form,cur)
cur.close()
con.close()
print('''
(中略)
''')
サンプルコードの解説
シェバンのところはご自分のユーザー名にしてください。またmacOSやLinuxでは「#!/usr/local/bin/python3.12」などになります。
新たに「cgi」モジュールも読み込みます。「pages」→「home.py」を「home」モジュールとして（as）読み込みます。
UTF-8で日本語に対応します。
「FieldStorage」関数と「getfirst」メソッドでGETしたpageパラメータを取得します。
「bezierbbs.db」ファイルを読み込むところは前回と同じでコネクトしてカーソルを取得します。
このHTML5文書がhtml文であることを出力して明示します。このようにhtmlファイルで送らずHTML5文書を出力する際はhtml文であることを明示しなければなりません。
GETしたURLのpageパラメータ次第でaboutモジュールやimportしたhomeモジュールのhtml関数を呼び出します。
データベースを閉じます。
HTML5文書の残りを出力します。
