【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 名を書きます。

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

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

4行目の a タグの中で、 href="/upload" と書きます。ここは href="/upload.html" ではNGです。

ここもハマりました。

 

そんなこんなで、result ページもこのように出来上がり、いったん見栄えには満足したので次のステップへ進もうと思います。

 

(続く)