ディレクトリ構成

適当な作業ディレクトリを作り、以下の構成にした。

$ tree

.
├── app.py
├── static
│   ├── css
│   │   └── style.css
│   └── images
│       ├── hannya.jpeg
│       ├── noumen.JPG
│       ├── noumen_mask.jpg
│       ├── noumen_mask2.jpg
│       ├── scohen.jpg
│       └── scohen_jinja2.jpg
└── templates
    ├── extend.html
    └── index.html

4 directories, 10 files

app.py : Webアプリ実行用ファイル
static/css : cssファイル用ディレクトリ
static/css/style.css : 空のcssファイル
static/images : 画像保存用ディレクトリ
static/images/* : 画像ファイルの数々
templates : htmlテンプレートファイルの保存用ディレクトリ
templates/extend.html : 拡張テンプレートファイル
templates/index.html : インデックステンプレートファイル

app.py

from flask import Flask, render_template

app = Flask(__name__, static_url_path='/static')

app.config['DEBUG'] = True


@app.route("/")
def index():
    return render_template("extend.html", title="Flask")

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

static/css/style.css

空

static/images/画像

サイズはバラバラのものを適当にstatic/images/の中に保存した。

templates/index.html

index用テンプレートファイル

<!DOCTYPE html>
<html>
  <head>
    <title>flask</title>
  </head>
  <body>
    {% block body %}{% endblock %}
  </body>
</html>

templates/extend.html

body の中身を別ファイルに分けたテンプレート

{% extends "index.html" %}
{% block body %}
<h1>{{title}}</h1>
<img src="/static/images/hannya.jpeg" alt="hannya"/>
<img src="/static/images/noumen.JPG" alt="noumen"/>
<img src="/static/images/noumen_mask.jpg" alt="noumen_mask"/>
<img src="/static/images/noumen_mask2.jpg" alt="noumen_mask2"/>
<img src="/static/images/scohen.jpg" alt="scohen"/>
<img src="/static/images/scohen_jinja2.jpg" alt="scohen_jinja2"/>
{% endblock %}

実行方法

$ python app.py

と実行すると、

FlaskのWebサーバーがローカルに起動する。
ブラウザを立ち上げ、url窓にlocalhost:5000と入力してアクセスする。
上手く行けば最初に貼った画像のようなページが表示される。
上手くいかない場合はブラウザのWebページ上にエラーが表示される。
アプリを終了したいなら、ブラウザを閉じ、ターミナルに「Ctrl + c」を入力してEnterキーでサーバーがストップし、通常のコマンド指示待ちの状態に戻る。

おわりに

ちゃんと動いて表示されたことだけを確認した。
回転寿司の客席に置いてある注文用タブレットのようなアプリが出来ないかと考えてのこの様。画像をラジオボタンの代わりに設置し、画像が押されたら注文表に追加され、注文ボタンで注文済みデータとして別ファイルに書き出す、という動作を実装したいが、htmlを勉強していないのでツラい。htmlは面倒臭い…

以上。