やったこと
ファイルをダウンロードした後に、別ページに遷移させるようにした。
当初、JavaScriptを用いて別ページに遷移させようとした。ただ、バックエンド側（Python）で、/downloadにアクセスしてファイルをダウンロードするようなコードを書いているので、
フロントエンド側（JavaScript）で別ページに遷移させようとしても正常に遷移できなかった。
（参考ページ）
JavaScriptで指定したURLにページ遷移する方法
inputタグ、buttonタグでの画面遷移の記述について
なので、JavaScript（フロントエンド）側で、ダウンロードボタンをクリックした後、/downloadに遷移するコードを追加した。
また、バックエンド側で、/downloadにアクセスするとファイルをダウンロードするコードを書いていたので、
bottleのルーティングで、
- Postで/downloadにアクセスしたときは、ファイルのダウンロード
- Getで/downloadにアクセスしたときは、別ページに遷移
するように、バックエンド側のコードを変更した。
Getで/downloadにアクセスしたときは、別ページに遷移させるために、
PythonでCookieを発行し、JavaScriptでそのCookieを読み取ることで、別ページに遷移できるようにした。
（参考ページ）
javascriptでダウンロード終了を検知する
ファイル構成
ファイルのダウンロード後の遷移先ページとして、「complete.html」のテンプレートを追加した。
. ├── form.py ├── views │ └── base.html │ └── form.html │ └── complete.html │ └── form_failed.html │ └── 404.html └── static └── main.js
作成コード
（バックエンド側）
ルーティングの変更（GETで/downloadにアクセスしたときのコードを追加）
@get('/download')
def download():
title = "ダウンロード完了"
return template('complete.html', title = title)
Cookieの送信
# ダウンロードボタンを押したときに別ページに遷移させるためにCookieを発行
response.set_cookie("downloaded", "yes", max_age = 15552000)
return response
（参考ページ）
Cookieを使う – bottle
（フロントエンド側）
遷移後のページを追加
{% extends 'base.html' %}
{# base.html の contents の中に入れるコンテンツ #}
{% block contents %}
<div class="container">
<h1>TogglのデータをCSV形式でダウンロードするツールです。</h1><br>
<h2>ファイルのダウンロードが完了しました。</h2>
<h3>5秒後に自動的にトップページに移動します。</h3><br>
</div>
<script>
// 5秒後に自動的にトップページに戻る
setTimeout(function(){
window.location.href = '/';
}, 5*1000);
</script>
{% endblock %}
ダウンロードボタンを押したときに、Cookieを読み取り、完了ページに遷移するコードを追加
// ダウンロードボタンを押したときに、Cookieを受け取り、完了ページに遷移させる
document.getElementById("download").onclick = function(){
setTimeout(function () {
//データを1つずつに分ける
var r = document.cookie.split(';');
//cookie名と値に分ける
r.forEach(function(value) {
var content = value.split('=');
var name = content[0];
var value = content[1];
if(name == "downloaded" && value == "yes"){
location.href="/download";
console.log("Cookieあるよ");
// Cookieの削除
//日付データを作成する
var date1 = new Date();
//1970年1月1日00:00:00の日付データをセットする
date1.setTime(0);
//有効期限を過去にして書き込む
document.cookie = "downloaded=yes;expires="+date1.toGMTString();
}
else{
console.log("Cookieないよ");
}
})
}, 3000);
}
（参考ページ）
cookieのデータを取得する方法
JavaScript で Cookie を扱う
cookieデータを削除する
JavaScriptでsetIntervalを使う方法【初心者向け】
実行結果
フォーム画面
ボタンを押すと、ファイルがダウンロードされる
ダウンロード完了画面
つまづいたところ
jQueryで、Cookieの操作ができるプラグイン（jquery.cookie.js）があるとのことなので使ってみたが、動かなかった。
（参考ページ）
ファイルダウンロード完了後に画面遷移などをjavascriptで行う
jQueryプラグイン「jquery.cookie.js」でcookieを簡単に扱う
不具合内容
jQueryが動かなかった。
原因
不明。Cookieの操作ができるプラグイン（jquery.cookie.js）が開発終了しているとのことで、古くなっているため動かなかったのでは。
解決策
なし。
Cookieの操作ができるプラグイン（jquery.cookie.js）は、js-cookieというプラグインに移行しているらしい。
（参考ページ）
【2018年最新版】JavaScriptプラグインjs-cookieで超簡単にクッキー管理
やってみた感想
jQueryのプラグインが動かないという、予想外のことが起こり、一時はどうなるかと思ったが、結果なんとかなった。
実際の開発でも、こういうものなのだろう。
どうやってエラーを回避するのかを考えるのもエンジニアの仕事。
コメント