3 日目は見栄えの修正ということで、前回このように見た目を整えていきました。
無料テンプレートを色々削ったり、書き加えたりしたのですが、単にそうしただけでは Flask では上手く表示してくれませんでした。今回は前回の補足で注意点をいくつかメモしておこうと思います。(+前回書きそびれた result ページについて)
・テンプレートのディレクトリ配置
・ページ遷移の書き方
テンプレートのディレクトリ配置
Flask でアプリケーションを作る場合には、ディレクトリの配置に気をつける必要があります。

templates
フォルダの中に html ファイルを。
static
フォルダの中に、その装飾ファイル( css や js 等)を配置する必要があります。
フォルダ名も変更すると上手く読み込んでくれません。templates
を template
としてしまっていたせいで出たエラーに30分ほど費やしてしまいました・・。
また、テンプレートをダウンロードしてきた時とディレクトリ構造が変わるため(html ファイルと css や js ファイルの位置関係が変わるため)、html ファイル内の、css等の読み込みのパスを変えてあげる作業も必要になります。
ページ遷移の書き方
遷移先のページの指定も注意が必要です。
app.py の中には、単純に html 名を書きます。
1 2 3 |
@app.route("/upload") def upload(): return render_template("upload.html") |
一方で、html ファイル内で遷移先を書く場合は、.html
を外して書いてあげる必要があります。
例えば、TOPページの Let’s Try ボタンのところはこの様になっています。
1 2 3 4 5 |
<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> |
4行目の a タグの中で、 href="/upload"
と書きます。ここは href="/upload.html"
ではNGです。
ここもハマりました。
そんなこんなで、result ページもこのように出来上がり、いったん見栄えには満足したので次のステップへ進もうと思います。

(続く)