bottleでファイルをダウンロードした後に別ページに遷移させる

~目次~
やったこと
1. ファイル構成
2. 作成コード
実行結果
つまづいたところ
やってみた感想

~目次~

やったこと
つまづいたところ
やってみた感想

やったこと

ファイルをダウンロードした後に、別ページに遷移させるようにした。

当初、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

├── 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)

@get('/download')

def download():

title = "ダウンロード完了"

return template('complete.html', title = title)

Cookieの送信

    # ダウンロードボタンを押したときに別ページに遷移させるためにCookieを発行
    response.set_cookie("downloaded", "yes", max_age = 15552000)
    return response

# ダウンロードボタンを押したときに別ページに遷移させるために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 %}

{% extends 'base.html' %}

{# base.html の contents の中に入れるコンテンツ #}

{% block contents %}

<h1>TogglのデータをCSV形式でダウンロードするツールです。</h1><br>

<h2>ファイルのダウンロードが完了しました。</h2>

<h3>5秒後に自動的にトップページに移動します。</h3><br>

</div>

// 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を受け取り、完了ページに遷移させる

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のプラグインが動かないという、予想外のことが起こり、一時はどうなるかと思ったが、結果なんとかなった。
実際の開発でも、こういうものなのだろう。
どうやってエラーを回避するのかを考えるのもエンジニアの仕事。