お絵描きのWebページを表示する
「Page 1」の「.htaccess」ファイルがあるものとして話を進めます。「index.py」ファイル[1]と「.htaccess」ファイル[2]を「xampp」→「htdocs」→「BezierBBS」フォルダ内に配置します。macOSやLinuxではindex.pyファイルにパーミッションで実行権限を与えます。
「XAMPP」の「Apache」を「Start」して「http://localhost/BezierBBS/BezierBBS_samplecode_03/index.py」をWebブラウザで開くと次の図のように表示されます。Webブラウザを終了する時にはApacheを「Stop」するのを忘れないように。
「js」→「main.js」と「css」→「pc.css」と「css」→「mobile.css」は第1回の「Page 2」で解説した通りです。第1回で解説したものをそのままPythonからWebブラウザに出力するだけのサンプルコードです。
もうベジェ曲線によるお絵描きはできるので、既に完成形に近いものができたように見えますが、まだデータベースを使ってデータをやり取りしていません。それについては次回以降解説します。
#!C:\Users\ユーザー名\AppData\Local\Programs\Python\Python312\python.exe
import sys
import io
#日本語があってもエラーにならないように
sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
print('Content-Type: text/html; charset=utf-8\n\n')
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>一筆書きBBS</h1>
<nav>
<a href="?page=home">HOME</a>
<a href="?page=draw">DRAW</a>
<a href="?page=about">ABOUT</a>
</nav>
</header>
<h2>記事</h2>
<ul>
<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>
''')
サンプルコードの解説
1行目の「ユーザー名」はお使いのパソコンに合わせて変更してください。またLinuxやmacOSでは「#!/usr/local/bin/python3.12」などのパスになります。
システム関係と入出力関係のモジュールを読み込みます。
デフォルトではLinuxはUTF-8エンコーディングしますが、WindowsではUTF-8エンコーディングに対応していないことがあるので、UTF-8エンコーディングにセットします。
コンテンツへのエンコードが適用される前の、リソースの元のメディア種別をテキスト形式のHTMLフォーマットにセットします。
「print('''」～「''')」の間に第1回の「Page 2」で解説した「index.html」のソースコードをそのまま書き写します。
おわりに
今回はシンプルにPythonからHTML5文書を出力するだけしてみました。ベジェ曲線でお絵描きもできるようにしました。
次回はPythonは使わず、「Visual Studio Code」上から「SQLite3」のデータベースを扱う解説をします。
