項目

ドロップダウンメニューの作成
txtデータの読み込み
txtを整える

1.ドロップダウンメニューの作成

python

from flask import Flask, request, render_template
app = Flask(__name__)

players = ["勇者", "戦士", "魔法使い", "忍者"]

@app.route("/")
def show():
    message = "あらたなモンスターがあらわれた！"
    return render_template("battle.html", message = message, players = players)

今回はpy側に作ったリストを項目としてメニューを作成
リストに関してはそのまま
returnにリスト名入れるの忘れない様に

html

<form action="/result" method="post">
    <select name="name">
        {% for player in players %}
            <option value="{{ player }}">{{ player }}</option>
        {% endfor %}
    </select>
    <p></p>
    <button type="submit">たたかう</button>
</form>

selectタグでドロップダウンメニュー(セレクトボックスとも)を作るよと宣言
<option value="{{ player }}">{{ player }}に関しては、optionタグはメニューの項目を入力するもの
ここではfor文を使って表示される項目名とvalueの名前を一致させている
これでsubmitボタンを押すと、選択した項目が入力される。

2.txtデータの読み込み

用意するtxtデータは末尾を改行しておく

python

from flask import Flask, request, render_template
import codecs
app = Flask(__name__)

@app.route("/")
def bbs():
    file = codecs.open("articles.txt", "r", "utf-8")
    lines = file.readlines()
    file.close()
    return render_template("bbs.html", lines = lines)

@app.route("/result", methods=["POST"])
def result():
    article = request.form["article"]
    name = request.form["name"]
    return render_template("bbs.html", article = article, name = name)

import codecsを宣言しておく
codecsを使うと指定した文字コードとかでデータを読み込めるらしい
file = codecs.open("articles.txt", "r", "utf-8")で指定したtxtをrモードのutf-8でfile変数に入れている
lines = file.readlines()で1行ごとのリストでデータを全て読み込んでいる
ちなみに.readline()なら1行だけ読み込み、.read()ならリストとか関係なしに全部読み込む
ファイルは.openした後、必ずfile.close()する

html

{% for line in lines: %}
    <p>{{ line.rstrip() }} </p>
{% endfor %}

for文で１つずつlineに代入されたデータを表示していくだけ
.rstrip()で行末の改行コード１つのみを消している

3.読み込んだtxtデータを整える

体裁を整えるだけのhtml的な話なのでpyは触れなくてOK

html

<table>
    <tr><th>投稿</th><th>名前</th></tr>
        {% for line in lines: %}
            {% set column = line.rstrip().split(",") %}
            <tr>
                {% for item in column: %}
                    <td>{{ item }}</td>
                {% endfor %}
            </tr>
        {% endfor %}
</table>

１つ上にあるhtmlをこれに置き換える
まずtableタグで表を作るよと宣言する
trタグで横軸の中身を触るよと宣言し、タグの中でthタグによって表の項目名を設定する
setでcolumnの中にlineのデータをforの試行ごとに入れていく
今回は行末の改行コードを.rstripで消した後に、.split(",")によって「,」でデータを区切っている
それらのデータをtrタグによって横軸方向に入れるよと言ったのち、おもむろにfor文で区切られたデータ単体をitemに入れ、tdタグというデータ入力専用のタグにてデータを入力する
↑ちょい分かりにくいので補足
例えば

txt

Hello World,peko
Hello Ruby,oz
Hello Sinatra,toramaru
世界の皆さんコンニチハ,霧島
にゃー,ネコ

というtxtデータだとすると、forの試行1回目では

lineにはHello World,peko(改行コード)というデータ
columnにはHello World , pekoというデータ(データを綺麗にしている)
itemにはHello Worldというデータのみ(区切られていた為にこれ単体で取り出された)

が入っている。一応trタグで横方向に入れるって宣言したのも忘れない様に

4.終わりに

なし