【AIアプリ開発 Day3-2】見栄えの修正に際しての Flask の注意点

3 日目は見栄えの修正ということで、前回このように見た目を整えていきました。

【AIアプリ開発 Day3】Swiper.js と無料テンプレートで見栄えを整える

無料テンプレートを色々削ったり、書き加えたりしたのですが、単にそうしただけでは Flask では上手く表示してくれませんでした。今回は前回の補足で注意点をいくつかメモしておこうと思います。（＋前回書きそびれた result ページについて）

おしながき

・テンプレートのディレクトリ配置

・ページ遷移の書き方

テンプレートのディレクトリ配置

Flask でアプリケーションを作る場合には、ディレクトリの配置に気をつける必要があります。

templates フォルダの中に html ファイルを。

static フォルダの中に、その装飾ファイル（ css や js 等）を配置する必要があります。

フォルダ名も変更すると上手く読み込んでくれません。templates を template としてしまっていたせいで出たエラーに30分ほど費やしてしまいました・・。

また、テンプレートをダウンロードしてきた時とディレクトリ構造が変わるため（html ファイルと css や js ファイルの位置関係が変わるため）、html ファイル内の、css等の読み込みのパスを変えてあげる作業も必要になります。

ページ遷移の書き方

遷移先のページの指定も注意が必要です。

app.py の中には、単純に html 名を書きます。

@app.route("/upload")
def upload():
    return render_template("upload.html")

@app.route("/upload")

def upload():

return render_template("upload.html")

一方で、html ファイル内で遷移先を書く場合は、.html を外して書いてあげる必要があります。

例えば、TOPページの Let’s Try ボタンのところはこの様になっています。

<div class="display-tc js-fullheight animate-box" data-animate-effect="fadeIn">
	<h1>Free Image Converter <a>v1.0</a></h1>
	<h2>remove people in your images by <a>semantic segmentation</a> and fill in the blanks with a favorite style.</h2>
	<p><a href="/upload" class="btn btn-primary btn-lg btn-learn">Let's Try</a></p>
</div>