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

~目次~

  1. やったこと
    1. ファイル構成
    2. 作成コード
    3. 実行結果
  2. つまづいたところ
    1. 不具合内容
    2. 原因
    3. 解決策
  3. やってみた感想

やったこと

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

当初、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」のテンプレートを追加した。

作成コード

(バックエンド側)
ルーティングの変更(GETで/downloadにアクセスしたときのコードを追加)

 

Cookieの送信

(参考ページ)
Cookieを使う – bottle

(フロントエンド側)
遷移後のページを追加

 

ダウンロードボタンを押したときに、Cookieを読み取り、完了ページに遷移するコードを追加

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

コメント

タイトルとURLをコピーしました