Flask は Python で書ける軽量な Web アプリケーションフレームワーク。「URL に来たリクエストを関数で受け取り、HTML を返す」というシンプルな仕組みで、最初の一歩に向いている。
ターミナルで以下を実行するだけで導入できる。
pip install flask
ルーティングと表示用データを書く Python 側のエントリーポイント。
HTML テンプレートを置くフォルダ。index.html をここに配置する。
CSS や画像などの静的ファイル置き場。style.css はここから読み込む。
まずは「/ にアクセスしたら index.html を返す」だけの最小構成を動かす。
from flask import Flask, render_template, request, redirect, url_for app = Flask(__name__) @app.route('/') def index(): return render_template("index.html") if __name__ == '__main__': app.run()
<!DOCTYPE html> <html lang="jp"> <head> <title>flaskテスト</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes"> <meta charset="UTF-8"> <link rel="stylesheet" href="../static/css/style.css"> </head> <body> <h1>テスト</h1> <div> てすとです。<br> </div> </body> </html>
python app.py を実行すると http://127.0.0.1:5000/ でローカルサーバーが立ち上がる。ブラウザでそのアドレスを開くと、index.html がそのまま表示される。
Flask のテンプレートは Jinja2。HTML の中に {{ ... }} や {% ... %} を埋め込むことで、Python 側の値や制御構造をそのまま反映できる。
app.py 側で render_template の引数として渡し、HTML 側では {{ 変数名 }} で受け取る。
# app.py a = "こんにちは" return render_template("index.html", txt=a)
<!-- index.html --> <body> <h1>テスト</h1> <div> てすとです。<br> {{ txt }}<br> </div> </body>
<h1>テスト</h1> <div> {% for i in range(10) %} {{ txt }} --- {{ i }}<br> {% endfor %} </div>
<h1>テスト</h1> <div> {% for i in range(10) %} {% if i%2==0 %} {{ txt }} --偶数-- {{ i }}<br> {% else %} {{ txt }} --奇数-- {{ i }}<br> {% endif %} {% endfor %} </div>
| 記法 | 用途 | 例 |
|---|---|---|
| {{ ... }} | 値を 表示 する | {{ txt }} |
| {% ... %} | 制御構造（for / if）の開始・終了 | {% if x %}{% endif %} |
| {# ... #} | テンプレート内コメント（出力されない） | {# memo #} |
Step 2 では、テンプレートに渡すデータを Python 側で組み立てる。先にリスト操作と文字列置換を整理しておく。
list[i] で値を取り出すlist[i][j] のように添字を重ねる「ああああああああ」の あ を い に置き換える、というシンプルな例。
s = "ああああああああ" s = s.replace("あ", "い") print(s) # いいいいいいいい
s.replace("(", "").replace(")", "") のようにつないで、まとめて記号を落とすことが多い。
最終形は「CSV から読み込んだデータをリスト化し、テンプレート側で条件によって文字列 or リンクとして表示する」流れ。
from flask import Flask, render_template, request, session, redirect, flash, url_for from csv import reader app = Flask(__name__) @app.route('/') def index(): with open('./mmcsv.csv', 'r', encoding="utf-8") as csv_file: csv_reader = reader(csv_file) list_mm = list(csv_reader) for data in list_mm: data[3] = "https://www.google.com/maps?q=" + data[3] \ .replace("(", "") \ .replace(")", "") \ .replace(" ", "") print(list_mm) return render_template("index.html", mmlist=list_mm) if __name__ == '__main__': app.run()
<h1>テスト</h1> <div> {% for data in mmlist %} {% if data[1]=="場所" %} {{ data[1] }} <br> {% else %} <a href={{ data[3] }} target="_blank">{{ data[1] }}</a><br> {% endif %} {% endfor %} </div>
open + csv.reader で CSV を 2 次元リストに変換。
住所列の括弧と空白を replace で除去し、Google マップ URL を組み立てる。
整形済みリストを mmlist としてテンプレートへ。
ヘッダ行（"場所"）はそのまま、データ行はリンクとして描画。