【Flask入門】Python初心者がマインスイーパーを作ってみる③ ~ボタンを表示する~
こんにちは、Amagoです。
前回の目標は達成できませんでしたが、少し進捗があったので記事を書きます。
今回は9×9のボタンを表示するところまで実装できました。
cssの取り込みはボリューム的にまた今度にします。
前回の記事を見てない方はこちらから
hamaguchi-amago.hatenablog.com
フォルダ構成
Minesweeper ├── Minesweeper.py └── templates └── index.html
コントローラー側
コントローラー側っていうんでしょうか。。。Pythonのコードはこんな感じで書いてみました。9×9の二次元配列です。もっときれいに書けると思うけど一旦はベタで書いていきます。
あとで、cellに爆弾と周りに設置された爆弾の数を設定します。これはまたの機会に関数を作りたいと思います。
次に生成した空っぽの二次元配列を『index.html』に渡します。
[Minesweeper.py]
from flask import Flask, render_template app = Flask(__name__) @app.route("/") def hello(): cell = [["", "", "", "", "", "", "", "", ""], ["", "", "", "", "", "", "", "", ""], ["", "", "", "", "", "", "", "", ""], ["", "", "", "", "", "", "", "", ""], ["", "", "", "", "", "", "", "", ""], ["", "", "", "", "", "", "", "", ""], ["", "", "", "", "", "", "", "", ""], ["", "", "", "", "", "", "", "", ""], ["", "", "", "", "", "", "", "", ""],] return render_template("index.html", cell = cell) if __name__ == "__main__": app.run( debug = True )
ビュー側
こちらはビューです。コントローラーで渡した二次元配列のcellを受け取って、buttonを生成しています。外側のループ『{% for row in cell %}』でtableの行(tr)、中側のループ『{% for col in row %}』で列(td)を作ります。
[index.html]
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Minesweeper</title> </head> <body> <table> {% for row in cell %} <tr> {% for col in row %} <td><button></button></td> {% endfor %} </tr> {% endfor %} </table> </body> </html>
実行結果
実行結果は、こんなこんな感じになります。
まだ、レイアウトの設定がされていませんが、ちゃんと9×9のボタンが作られました。
次回目標
cssを取り込んでボタンをいい感じに表示する。