##本記事の趣旨
静的サイトは作ったことがあったが動的サイトは初めて作った時期に、少しだけ戸惑ったポイントをメモとして記載。
なお、フレームワークはpythonのflaskです。
1 css,javascriptが反映されない
色々な例が考えられますが、例えば以下の様な構成だとapp.py実行時にcss,javascript,画像ファイルが読み込まれません。
ディレクトリ構成【失敗例】
-app/
-app.py
-index.html
-index.css
-index.js
-img.png
app.py【失敗例】
from flask import Flask
app = Flask(__name__)
@app.route('\')
def showTopPage():
return render_template('index.html')
if __name__ =='__main__':
app.run()
index.html【失敗例】
<head>
<link rel='stylesheet' href="index.css">
<script src="index.js')}}" defer></script>
</head>
<body>
This is my flask application!
<h3>
<img class='img' src="static/images/img.png">
</h3>
</body>
</html>
※index.cssとindex.jsのコードの中身はどのような内容でも、本記事の趣旨とは関係ないので、例の記載を省きます。
その代わり、ディレクトリ構成とindex.htmlの
部分を下記の通り修正すると、index.cssとindex.jsが反映されます。ディレクトリ構成【成功例】
-app/
-app.py
-templates/
-index.html
-static/
-css/
-index.css
-js/
-index.js
-images/
-img.png
app.py【成功例】
from flask import Flask
app = Flask(__name__)
@app.route('\')
def showTopPage():
return render_template('index.html')
if __name__ =='__main__':
app.run()
index.html【成功例】
<head>
<link rel='stylesheet' href="{{url_for('static',filename='css/index.css')}}"> #←ここを修正
<script src="{{url_for('static',filename='js/index.js')}}" defer></script> #←ここを修正
</head>
<body>
This is my flask application!
<h3>
<img class='img' src="static/images/img.png">
</h3>
</body>
</html>
2 cssを変更したのに、変更が反映されない
【原因】変更前のcssファイルと変更後のcssファイルが同じurlであるため、ブラウザが「すでに取得済みなので再び読み込みに行く必要がない」と判断し、前回のcssの内容を反映している。（キャッシュ）
【解決策１】cssのファイル名を変更する。そうすることで、変更前と変更後のcssのurlが同じでなくなるため、キャッシュしなくなる。
[解決策2】キャッシュを無効にする。chromeの場合は、「developer tool」から、「Disable cache」にチェックを入れることで、キャッシュを無効にできます。
##終わり
以上です。静的サイトは作ったことがあるものの、動的サイトを初めて作った時に、最初に引っかかったのは上の様な点でした。