やったこと
ファイルをダウンロードした後に、別ページに遷移させるようにした。
当初、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のプラグインが動かないという、予想外のことが起こり、一時はどうなるかと思ったが、結果なんとかなった。
実際の開発でも、こういうものなのだろう。
どうやってエラーを回避するのかを考えるのもエンジニアの仕事。
コメント