カラオケアプリ製作 (2) : Flaskの使い方 template Jinja2 htmlとの連携 - 暇があるから人である。暇でなければ機械だ

FlaskはPython上で手軽にサーバーを開くことができるもの。である。

導入とかはほかの人の記事のほうが参考になると思うので書きません。

自分がflaskでよくわかんねぇ？って最初なった部分。使えるようになったらクソ便利だった。「Jinja2」の使い方を残そうと思います。

①htmlとhtmlをくっつけられる(同じヘッダーやフッターを使える)

base.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>AppName</title>
     </head>
{% block [name] %}
{% endblock %}
    </body>
</html>

※[name]は好きな単語

page01.html
{% extends 'base.html' %}
{% block [name] %}
<div> content01 </div>
{% endblock %}

page02.html
{% extends 'base.html' %}
{% block [name] %}
<div> content02 </div>
{% endblock %}

この3つを用意することで、base.htmlにあるヘッダーとかタイトルとか、フッターの内容をpage01,02で転用できる。
いちいち全部のhtmlをコピペする必要がなくてすっきりする！

②サーバー(Flask,Python)からのデータをhtmlやJavaScriptに反映できる

pythonでデータベースから曲の情報を取得するのだが、その内容をhtmlやjsに利用したい。
そんなときに使える機能がある。

app.route('/page02')
def main():
	title=GetTitleFromDatabase(musicid)
	return render_template("page01.html", music_title=title)

ここではmusic_titleという受け渡し用の変数にtitleという変数(今回は曲の題名という文字列)をいれて...

page02.html
{% extends 'base.html' %}
{% block [name] %}
<div> title: {{ music_title }} </div>
{% endblock %}

---------------
htmlで{{ 受け渡し変数 }}って用意することでpythonからの値を利用できる。
<a href="https://music/{{ music_title }}">元の曲サイトへアクセス</a>
hrefの中に入れたり
<script>let title = "{{ music_title }}";</script>
jsの変数にも代入できる

複数の変数を渡したいときは
(1)

app.route('/page02')
def main():
	title=GetTitleFromDatabase(musicid)
        lyric=GetLyricFromDatabase(musicid)
	return render_template("page02.html", music_title=title, music_lyric=lyric)

page02.html
{% extends 'base.html' %}
{% block [name] %}
<div> title: {{ music_title }} </div>
<div> title: {{ music_lyric }} </div>
{% endblock %}

(2)

app.route('/page02')
def main():
	title=GetTitleFromDatabase(musicid)
    lyric=GetLyricFromDatabase(musicid)
	datas={
		"music_title": title,
		"music_lyric": lyric
	}
	return render_template("page02.html", datas=datas)

page02.html
{% extends 'base.html' %}
{% block [name] %}
<div> title: {{ datas['music_title'] }} </div>
<div> title: {{ datas['music_lyric'] }} </div>
{% endblock %}

このように書ける

③for分を使ってhtmlを書ける

履歴を表示する部分を作るときに同じhtmlをコピペで用意するのが面倒だからどうにかできないかと思ったら。forが使えるだと...!

{% for i in datas['history'] %}
<div class="user-singed-history-index-box">
    <a href="{{ i['url'] }}" id="user-history-title{{ loop.index }}">・{{ i['title'] }}</a>
</div>
{% endfor %}

datas['history'] はリストになっていて、リストの要素数分

を生成する。
それぞれにurlとtitleが入ってるから、その要素を取り出してhrefには要素のurlを。textContentには要素のtitleを入れている。
またaタグのidには何個目のaタグか判別がつくようにloop.index(0,1,2,3,4.....)を用意している。

④htmlの要素に対してif文を用いれる。

セッションの有無で表示する。しないが設定できたからマジ助かった。

{% if 'username' in session %}
<p id="welcome-message">ようこそ{{ session['username'] }}様！</p>
{% endif %}

ほかにも
style="display: {% if 'user_name' in session %}block{% else %}none{% endif %};"
という表示、非表示の操作もできる

コラム

似たようなことができる物に「Pug」というものがありますが、flask環境で導入がめんどくさそうだったから使いませんでした。あと、開発初期じゃなくて中盤に知ったのも入れれないなと思いましたねｗ

サービス紹介

洋楽も最新曲もニッチな曲も歌えるカラオケアプリを作りました！
ぜひ使ってみてください。
カラオケアプリ　Kalyoke　へアクセス
and-ha.com