【Pythonから出力した情報を表示する方法】サーバサイドで出力したHTML5ファイルをWebページで表示しよう！

Pythonで学ぶバックエンド開発　第3回

HTML5のスクリプトを出力する

　「Page 1」の「.htaccess」ファイルがあるものとして話を進めます。今度は実際に、よくあるHTML5のスクリプトを出力します。<html>タグや<head>タグや<body>タグがあるHTML5スクリプトです。「Page 1」と比べて新たに「print」関数に「'''」～「'''」を囲んだ複数行の文字列を出力し、そこで普通のHTML5のスクリプトを出力します。

　今回のサンプルコードでは出てきませんがPythonで、投稿された記事を繰り返し列挙したりして動的にこのHTML5スクリプトを書き換えるようなことができます。そうやってデータベースのデータを出力するようなことをします。

　「Page 1」と同じように「body.py」ファイル^[1]と「.htaccess」ファイル^[2]を「xampp」→「htdocs」→「BezierBBS」フォルダ内に配置します。macOSやLinuxではbody.pyファイルにパーミッションで実行権限を与えます。

　「XAMPP」の「Apache」を「Start」して「http://localhost/BezierBBS/BezierBBS_samplecode_03/body.py」をWebブラウザで開くと、次の図のようにHTML5スクリプトのWebページが表示されます。Webブラウザを終了する時にはApacheを「Stop」して停止するのを忘れないように。

サンプルコード「body.py」を開いたところ

　今までは具体的なHTML5文書を書かずに、文字列をWebブラウザに表示するだけしましたが、今回はやっと<html>タグや<head>タグや<body>タグを書いて実際にHTML5文書を出力してみます。これでやっとWebアプリらしくなってきましたね。

　本来WebブラウザではHTML5スクリプトのソースコードでなく、HTML5文書を元にレイアウトされたように表示されます。生のHTML5文書はWebブラウザの「ページのソース」などで見られます。

サンプルコード「body.py」

#!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">
</head>
<body>

htmlタグとheadタグとbodyタグを出力する。

</body>
</html>
''')

サンプルコードの解説

　1行目の「ユーザー名」はお使いのパソコンに合わせて変更してください。またLinuxやmacOSでは「#!/usr/local/bin/python3.12」などのパスになります。

　「import」で「sys」モジュールと「io」モジュールを読み込みます。

　「Content-Type」を「text/html」とこのWebページがテキスト形式のHTML文書だと指定して出力します。

　「print('''」～「''')」までの間をWebブラウザにそのまま出力します。

　「<!DOCTYPE html><html lang="ja">」～「</html>」はよくあるシンプルなHTML5のスクリプトです。HTML5の文法については「フロントエンジニアのためのTauri 2.0ではじめるRustプログラミング」の第3回を参考にしてください。