６０の手習い

第四章．公開コンテンツの作成

さあ、いよいよここからが本番です。

いままでの作業は事前準備で割とスムーズに進められたかと思います。サイト公開までの道のりは遠いですが、当サイトのソースコードをコピペしてそのまま利用して頂ければ WEB画面を表示できるようにはなっています。これを参考に最後まで頑張りましょう！！

１）

WEBアプリを作成する

(1)

python フォルダの構成を決定する

これはレンタルサーバにも影響してくるので重要です。

Flask を使用する場合は、フォルダ構成がかなりシンプルですので

ローカルＰＣで作成するフォルダ構成も出来るだけシンプルにする

参考： Xserver（レンタルサーバー）でのフォルダ構成

    \home\userID\domainName
                    |- aaaaaaa
                    |- bbbbbbb
                    |- ccccccc
                    |
                    |- public_html    <-- このフォルダ内に作成したフォルダ,ファイルをコピーする
                    |
                    |- xxxxxxx
                    |- zzzzzzz

(2)

開発環境のWEBサーバーを準備する

①

仮想環境の実装

開発用のフォルダを作成(sample_pj と)します

(sample_pj)は、どのフォルダの配下に作成しても問題ありません

ここでは /userの配下に作成しました

C:\Users\user\sample_pj

sample_pj内にpython の仮想環境を実行する定義ファイルを準備していきます

準備はコマンドプロンプト画面で実行します

C:\Users\user>cd C:\Users\user\sample_pj                    <-- ディレクトリを移動します
C:\Users\user\sample_pj>python -m venv tenarai              <-- python コマンドを実行します (tenaraiはフォルダ名です。もちろん任意でかまいません)

実行後、sample_pj のフォルダ構成は以下の通りになっていると思います

C:\Users\user\sample_pj
                    |- tenarai
                        |-Include
                        |-lib
                        |-Scripts
                        |-.gitgnore
                        |-pyvenv.cfg

tenarai のフォルダが出来ましたら、python の仮想環境を実行させましょう

Scriptsフォルダ内の activate ファイルを実行します

C:\Users\user>cd C:\Users\user\sample_pj\tenarai\Scripts                <-- ディレクトリを移動します
C:\Users\user\sample_pj\tenarai\Scripts>activate                        <-- [activate] を実行します

activate 実行後、コマンドプロントは先頭が()付きに変わっているはずです

これが仮想環境による稼働状態です（WEBアプリを実行する環境となります）

変わっていない場合、sample_pjフォルダごと削除してから再度作り直して実行してみて下さい

C:\Users\user\sample_pj\tenarai\Scripts>
----> 
(tenarai) C:\Users\user\sample_pj\tenarai\Scripts>                    <-- (tenarai)が付与されたプロンプトになる

プロンプトが()付きの状態で、python にモジュールを追加します。

モジュール追加では、ディレクトリを元の場所に戻しておきます。

(tenarai) C:\Users\user\sample_pj\tenarai\Scripts>cd C:\Users\user\sample_pj       <-- ディレクトリを移動します
(tenarai) C:\Users\user\sample_pj>

※モジュール追加は、開発途中で必要となった場合に実施しても可。

ちなみに、初期状態の python のモジュールリストはこうなっています。

(tenarai) C:\Users\user\sample_pj>pip list                <-- [pip xxxx]は、pythonのコマンドです

Package Version
------- -------
pip     25.3

注意）

pythonのみインストールした場合です。anacondaやminicondaをインストールした方はモジュールの数はもっと多く表示されます。

python のフレームワークのモジュールをインストールします。

(tenarai) C:\Users\user\sample_pj>pip install Flask               <-- [pip install Flask]で、Flask を追加します

Collecting Flask
  Using cached flask-3.1.3-py3-none-any.whl.metadata (3.2 kB)
Collecting blinker>=1.9.0 (from Flask)
  Using cached blinker-1.9.0-py3-none-any.whl.metadata (1.6 kB)
Collecting click>=8.1.3 (from Flask)
  Using cached click-8.3.1-py3-none-any.whl.metadata (2.6 kB)
Collecting itsdangerous>=2.2.0 (from Flask)
  Using cached itsdangerous-2.2.0-py3-none-any.whl.metadata (1.9 kB)
Collecting jinja2>=3.1.2 (from Flask)
  Using cached jinja2-3.1.6-py3-none-any.whl.metadata (2.9 kB)
Collecting markupsafe>=2.1.1 (from Flask)
  Using cached markupsafe-3.0.3-cp314-cp314-win_amd64.whl.metadata (2.8 kB)
Collecting werkzeug>=3.1.0 (from Flask)
  Using cached werkzeug-3.1.6-py3-none-any.whl.metadata (4.0 kB)
Collecting colorama (from click>=8.1.3->Flask)
  Using cached colorama-0.4.6-py2.py3-none-any.whl.metadata (17 kB)
Using cached flask-3.1.3-py3-none-any.whl (103 kB)
Using cached blinker-1.9.0-py3-none-any.whl (8.5 kB)
Using cached click-8.3.1-py3-none-any.whl (108 kB)
Using cached itsdangerous-2.2.0-py3-none-any.whl (16 kB)
Using cached jinja2-3.1.6-py3-none-any.whl (134 kB)
Using cached markupsafe-3.0.3-cp314-cp314-win_amd64.whl (15 kB)
Using cached werkzeug-3.1.6-py3-none-any.whl (225 kB)
Using cached colorama-0.4.6-py2.py3-none-any.whl (25 kB)
Installing collected packages: markupsafe, itsdangerous, colorama, blinker, werkzeug, jinja2, click, Flask
Successfully installed Flask-3.1.3 blinker-1.9.0 click-8.3.1 colorama-0.4.6 itsdangerous-2.2.0 jinja2-3.1.6 markupsafe-3.0.3 werkzeug-3.1.6

[notice] A new release of pip is available: 25.3 -> 26.0.1                  <-- pipコマンドのバージョンが上がってますよ との案内がありましたが気にせず
[notice] To update, run: python.exe -m pip install --upgrade pip            <-- upgrade したい場合は、左記のコマンドを実行すれば可能です

(tenarai) C:\Users\user\sample_pj>

インストールされたか確認します(Flaskに関係するモジュールがセットで入ります。)

(tenarai) C:\Users\user\sample_pj>pip list

Package      Version
------------ -------
blinker      1.9.0
click        8.3.1
colorama     0.4.6
Flask        3.1.3             <-- Flask が入っている（問題なし）
itsdangerous 2.2.0
Jinja2       3.1.6
MarkupSafe   3.0.3
pip          25.3
Werkzeug     3.1.6

これでローカルＰＣで WEBアプリの開発が可能となりました

（Flaskが簡易のWEBサーバーです）

その他、開発で必要なモジュールが発生した場合は、随時追加してください

(tenarai) C:\Users\user\sample_pj>pip install xxxxxx

pip install Flask-SQLAlchemy

pip install python-dateutil <--- sampleでは使用しません

モジュールの種類やバージョンアップなどの方法は他のサイトから確認願います

(先ほどの例で pip のupgradeの連絡があったように対応の要否を判断します)

初心者が教えるよりも確かなので！！

(3)

DBを作成（Sqliteを使用）する

①

モデリング（sample_pjでは、hello.py内でモデルを記述しています）

DB名：Tenarai.db

config.py でDBを作成（dbが作成済の場合、処理はスルーされます）

config.pyの設定（サンプル）

DEBUG = True
SQLALCHEMY_DATABASE_URI = 'sqlite:///Tenarai.db'
SQLALCHEMY_TRACK_MODIFICATIONS = True

Table名：Tenarai_Datas

Tableを作成（Tableが作成済の場合、処理はスルーされます）

hello.pyの一部抜粋（サンプル）

class Tenarai_Datas(db.Model):
    __tablename__ = 'tenarai_datas'
    id = db.Column(db.Integer, primary_key=True)  # システムで使う番号
    shimei  = db.Column(db.String(10))  # 氏名
    course = db.Column(db.String(10))   # 講座名
    stymd  = db.Column(db.String(8))    # 開始年月日
    edymd  = db.Column(db.String(8))    # 終了年月日
    created_at = db.Column(db.Integer, nullable=False, default=datetime.now)  # 登録日時
    updated_at = db.Column(db.Integer, nullable=False, default=datetime.now, onupdate=datetime.now)  # 更新日時

Sqliteは簡易DBの為、カラムに桁数を指定していますが実（物理）テーブルでは無視されてます恐らくですが、別DBに変更する時そのままの定義で利用するためだと思います。

(4)

WEBアプリのフロント側を作成する

プログラミングは、使いなれたエディターがあればそのまま利用すれば良いのですが、

そう言うものが無ければ VSCODE を利用するのも良いと思います。

①

レンタルサーバー側のフォルダ構成及びファイル名を以下のようにしました

フォルダ名称はそのままにする

ファイルは「index.cgi」「.htaccess」以外、任意です

ローカルＰＣにこのフォルダ構成を設定することによりレンタルサーバーにそのまま移行できます。

    \home\userID\domainName
                    |- public_html      (このフォルダ内に作成したファイルをコピーする)
                        |-instance          <-- SqliteDB を、保存、参照するフォルダ
                        |   |-tenarai.db    <<- （サンプルでは処理実行時に作成するようになっています）
                        |
                        |-models            <-- DBモデルの保存先
                        |   |-tenarai.py    <<- （サンプルでは hello.py に統合した為ファイルはありません）
                        |
                        |-static
                        |   |-css           <-- cssファイルの保存先
                        |   |  |-style.css
                        |   |
                        |   |-images        <-- img(png,jpg等)ファイルの保存先
                        |   |  |-logo.png
                        |   |
                        |   |-javascript    <-- javascriptファイルの保存先
                        |      |-keisan.js  <<- （サンプルでは js は使用していません）
                        |
                        |-templates         <-- htmlファイルを保存する
                        |   |-index.html
                        |
                        |-.htaccess         <<- 一番最初に参照される（phpとpythonを連携するファイル）
                        |-config.py         <<- 設定を hello.py に組み込めた場合は不要
                        |-hello.py          <<- サーバ側pgm (main_pgm) 
                        |-index.cgi         <<- .htaccessから参照されるファイル

②

ブラウザで稼働する (index.html) を作成（サンプル）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サンプルフォーム</title>
</head>
<body>
    <h1>60の手習いサンプルフォームです。</h1>
    
    {% for tenarai_data in tenarai_datas %}
    <p><h4>{{ tenarai_data.shimei }}</h4></p>
    <p><h4>{{ tenarai_data.course }}</h4></p>
    <p><h4>{{ tenarai_data.stymd }}</h4></p>
    <p><h4>{{ tenarai_data.edymd }}</h4></p>
    {% endfor %}
    
</body>
</html>

{%%}や{{}} は、pythonに標準にインストールされているモジュール [jinja2]のコマンドです

(5)

WEBアプリのエンド側を作成する

①

それでは、各設定ファイルを作成していきましょう

.htaccess の設定（サンプル）

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ /index.cgi/$1 [L]
</IfModule>

index.cgi の設定（サンプル）

#! /home/userID/miniconda3/envs/py313/bin/python    <-- ここの指定は python を私自身でインストールした場合の参照先です
#! /usr/bin/python3.6                               <-- コマンドパスを設定（ただし、起動していないのでそのまま使用できるか不明です）
                                                    <-- #! は、先頭１行目のみ設定です。（どちらかを選ぶことになります）
from wsgiref.handlers import CGIHandler
from hello import app

CGIHandler().run(app)

ここで重要なポイントがあります。

先に記載した .htaccess の設定ファイルですが、これはサーバー側での設定ファイルです。そのためローカルＰＣ環境では、利用できません。サーバー側にコピーして初めて利用できます。 .htaccessファイルに記述している index.cgi も当然起動しません。ローカルＰＣ環境では、代わりに次のサンプルファイルから実行することになります。（apacheでwebサーバが機能していないこと）これもファイル名は何でもよいのですが、ここでは svstart.py としました。

svstart.py の設定（サンプル）

from hello import app

if __name__ == '__main__':
    app.run()

②

メインとなるWEBアプリを作成

hello.py の作成（サンプル）

from flask import Flask, render_template
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime

app = Flask(__name__)
app.config.from_object('config')      # <-- DBの作成先指定

# 手習い管理ＤＢ作成
db = SQLAlchemy(app)                  # <-- ここでDBが作成される

class Tenarai_Datas(db.Model):
    __tablename__ = 'tenarai_datas'
    id = db.Column(db.Integer, primary_key=True)  # システムで使う番号
    shimei  = db.Column(db.String(10))  # 氏名
    course = db.Column(db.String(10))   # 講座名
    stymd  = db.Column(db.String(8))    # 開始年月日
    edymd  = db.Column(db.String(8))    # 終了年月日
    created_at = db.Column(db.Integer, nullable=False, default=datetime.now)  # 登録日時
    updated_at = db.Column(db.Integer, nullable=False, default=datetime.now, onupdate=datetime.now)  # 更新日時

# データベースの作成 
from hello import app,db
with app.app_context():
   db.create_all()                      # <-- ここでTabelが作成される


@app.route('/')
def index():

    tenarai_datas = Tenarai_Datas.query.filter(Tenarai_Datas.shimei == "鈴木一郎").all()      # <-- ＤＢの読込 (SQLAlchemy)

    return render_template('index.html',tenarai_datas=tenarai_datas)

[hello.py]のファイル名について

他のサイトではよく[app.py]で説明されていますが、初心者からすれば[app]がいたるところにコーディングされているため、分かりませんでした。そのため、あえて[hello]というファイル名にしております。ですので[aaa]でも[yayaya]でもなんでもかまいません。

python コーディングにおいての注意点

pythonは、コーディングのカラム位置が非常に重要となっています。特に、if文の終了を判断する場合、endif のようなコマンドが存在しません。if文の範囲は次のコマンド行が同じ開始位置にある手前までとしています。（詳しくは別途サイトを検索してみて下さい）

２）

WEBアプリをテストする

(1)

仮想環境で実行する

実行することで DB,Tableを作成します

コマンドプロンプトから実行環境を仮想化する

C:\Users\user>cd C:\Users\user\sample_pj\tenarai\Scripts
C:\Users\user\sample_pj\tenarai\Scripts>activate
(tenarai) C:\Users\user\sample_pj\tenarai\Scripts>

WEBサーバーを仮想環境で起動する

(tenarai) C:\Users\user\sample_pj\tenarai\Scripts>cd C:\Users\user\sample_pj
(tenarai) C:\Users\user\sample_pj>python svstart.py

 * Serving Flask app 'hello'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 508-642-572

一旦、ブラウザを立ち上げます(url => localhost:5000)

「60からの手習いサンプルフォームです。」の文字が表示されていれば OK です

内部(サーバー側)で Tenarai.db と Tenarai_Datas が作成されています

ここで、WEBサーバー(CTRLキー + Cキーを同時に押下)を落とします。

(tenarai) C:\Users\user\sample_pj>python svstart.py
 * Serving Flask app 'hello'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 508-642-572
127.0.0.1 - - [12/Mar/2026 12:08:37] "GET / HTTP/1.1" 200 -
                                              <-- (CTRLキー + Cキーを同時に押下)
(tenarai) C:\Users\user\sample_pj>            <-- プロンプトが元に戻っています。

ブラウザは、落としてもそのままでも問題ありません。

(2)

Table にデータをロードする

csvデータ(tenarai_datas.csv)を準備する

1,鈴木一郎,python全般,20250401,20250820,2026-02-05 00:00:000,2026-02-05 00:00:000
2,山田太郎,html初心者,20250612,20250710,2026-02-05 00:00:000,2026-02-05 00:00:000
3,山田太郎,css初心者,20250715,20250920,2026-02-05 00:00:000,2026-02-05 00:00:000
4,鈴木一郎,Sqlite初心者,20250901,20250930,2026-02-05 00:00:000,2026-02-05 00:00:000
5,佐藤一,Xserverについて,20250402,20250403,2026-02-05 00:00:000,2026-02-05 00:00:000

ロード処理ソース(Tenarai_Datas_sql_from_csv.py)を作成する

import csv
import sqlite3

### データベースファイルに接続（ファイルが存在しない場合は作成される）
conn = sqlite3.connect('Tenarai.db')
cur = conn.cursor()

#Tenarai_Datasテーブルのデータを削除（何回もコード実行すると同じデータ追加されるので）
del_data = "DELETE FROM Tenarai_Datas"
cur.execute(del_data)

### CSVファイルオープン
file_csv = open("tenarai_datas.csv", "r", encoding="utf-8")
### CSVファイル読み込み
read_csv = csv.reader(file_csv)

### CSVデータをINSERTする
rows = []
for row in read_csv:
    rows.append(row)
#    print(row)

### executemany() で複数のINSERTを実行する
cur.executemany(
    "INSERT INTO Tenarai_Datas (id, shimei, course, stymd ,edymd, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?, ?)", rows
)

### コミット
conn.commit()

### カーソルクローズ
cur.close()
### DB切断
conn.close()
 
### ファイルクローズ
file_csv.close()

テーブル内データチェック(tablechk.py)を作成する

import sqlite3

# データベースファイルに接続（ファイルが存在しない場合は作成される）
conn = sqlite3.connect('Tenarai.db')
cursor = conn.cursor()

# テーブル一覧を取得して表示する例
cursor.execute("SELECT name FROM sqlite_master WHERE type='table';")
tables = cursor.fetchall()
print("テーブル一覧:", tables)

# 特定のテーブルの中身を確認する例 (例: 'Tenarai_Datas'テーブル)
try:
    cursor.execute("SELECT * FROM Tenarai_Datas;")
    rows = cursor.fetchall()
    print("Tenarai_Datasテーブルの内容:")
    for row in rows:
        print(row)
except sqlite3.OperationalError:
    print("Tenarai_Datasテーブルが見つかりません。")

conn.close()

DBフォルダ(instance)の構成は以下の通りです

C:\Users\user\sample_pj
                    |- instance              <-- 作成したファイルをこのフォルダに保存
                        |-Tenarai.db 
                        |
                        |-tenarai_datas.csv
                        |-Tenarai_Datas_sql_from_csv.py
                        |-tablechk.py

コマンドプロンプトからTenarai_Datas_sql_from_csv.pyを実行し

テーブルにcsvデータをロードします

C:\Users\user>
C:\Users\user>cd C:\Users\user\sample_pj\tenarai\Scripts
C:\Users\user\sample_pj\tenarai\Scripts>activate                                         <-- 仮想環境を起動します
(tenarai) C:\Users\user\sample_pj\tenarai\Scripts>
(tenarai) C:\Users\user\sample_pj\tenarai\Scripts>cd C:\Users\user\sample_pj\instance    <-- DBの保存フォルダに移動する
(tenarai) C:\Users\user\sample_pj\instance>
(tenarai) C:\Users\user\sample_pj\instance>python Tenarai_Datas_sql_from_csv.py          <-- csvデータをtenarai_datasにロード

コマンドプロンプトからtablechk.pyを実行し

テーブルにcsvデータをロードできたか確認します

(tenarai) C:\Users\user\sample_pj\instance>python tablechk.py                            <-- tenarai_datasの登録内容を確認

テーブル一覧: [('tenarai_datas',)]
Tenarai_Datasテーブルの内容:
(1, '鈴木一郎', 'python全般', '20250401', '20250820', '2026-02-05 00:00:000', '2026-02-05 00:00:000')
(2, '山田太郎', 'html初心者', '20250612', '20250710', '2026-02-05 00:00:000', '2026-02-05 00:00:000')
(3, '山田太郎', 'css初心者', '20250715', '20250920', '2026-02-05 00:00:000', '2026-02-05 00:00:000')
(4, '鈴木一郎', 'Sqlite初心者', '20250901', '20250930', '2026-02-05 00:00:000', '2026-02-05 00:00:000')
(5, '佐藤一', 'Xserverについて', '20250402', '20250403', '2026-02-05 00:00:000', '2026-02-05 00:00:000')

テーブルにcsvデータが登録できましたので

再度、WEBサーバーを仮想環境で起動します

(tenarai) C:\Users\user\sample_pj\instance>cd C:\Users\user\sample_pj
(tenarai) C:\Users\user\sample_pj>python svstart.py

 * Serving Flask app 'hello'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 508-642-572

(3)

ＤＢの読込を確認する

ローカルＰＣのブラウザを起動し検証する

３）

サイトに広告を掲載する場合

掲載する場所をあらかじめ決めておく

【広告】ご都合がよろしければ、お立ち寄りください。