一つ一つのjsやcssだけを狙って更新する。っていうのできないかな？と思ったら、あったので共有。
apacheを用いてflaskサーバーを用意した。しかしjsやcssを書き換えてもいちいちブラウザのキャッシュを消さないとサーバーサイドでエラーが出る。
「おい！なんか内部がおかしいぞ！(過去のjsを引用して)お前の言う機能はないぞ！」
みたいな？
これを解決するためにChatGPTに聞いたら
HTMLに
<meta name="cache-control" content="no-cache">
これ付け加えろ
って答えが返ってきたから。実際にやったらまぁいちいち消す必要はなくなった。
と思ったら毎回すべてのキャッシュを消してるせいで、つぎの弊害が発生した。
①スマホでアクセスするときに画像読み込みに時間かかる。
②flaskのsessionで管理しているログイン履歴が消える
③毎回サーバーに無駄に負荷がかかる
①は、画像が読み込まれるのが遅いせいでUIが崩れることがあった。
②は、ログインしたら次アクセスしたときもログインしたままになっててほしいのに。勝手にログアウトされるからめんどい
③は、利用者数増えたらえぐいことになりそうやから予防
って感じかな。
ここで！狙ったファイルだけ強制更新させる方法があったんですわ。
「クエリパラメーター」
やり方は簡単！
<link rel="stylesheet" href="static/css/defaults.css"> ↓ <link rel="stylesheet" href="static/css/defaults.css?ver=20240407"> <link rel="stylesheet" href="{{ url_for('static', filename='css/defaults.css') }}"> ↓ <link rel="stylesheet" href="{{ url_for('static', filename='css/defaults.css') }}?ver=20240407"> <script type="text/javascript" src="static/js/session.js"></script> ↓ <script type="text/javascript" src="static/js/session.js?ver=20240405"></script> <script type="text/javascript" src="{{ url_for('static', filename='js/session.js') }}"></script> ↓ <script type="text/javascript" src="{{ url_for('static', filename='js/session.js') }}?ver=20240405"></script>
引用するファイル名の後ろに?〇〇=△△って書き足す、だけ！
こうするだけで、サイトの利用者全員が
webサイト更新後にアクセスしたときに指定されたjs,cssが更新されるようになるんだな。
もし、付け足してから変更点があったらクエリパラメータの値を変えればまた更新できるよ！
?ver=20240405→202404051917
とか
これのおかげでflaskのsessionからもデータが消えてログアウト状態になることも防げたしバンバンザーイ！だ
コラム①
ちなみにhtmlに直接styleやscriptを書いている場合は自動的に更新されるからクエリパラメータとかキャッシュの更新作業はいらないかも
コラム②
クエリパラメータって2，30年前から使われている技らしいけお、今も昔もwebの大枠は変わってないんだなってことがはっきりわかんだね
サービス紹介
カラオケで新曲あったけど本家MV,PV見ながら歌いたいな....
ってのを解決できるアプリがあります！
カラオケアプリKalyokeへアクセス
