[WithPopup] submitと同時にポップアップを開くRails用Gem
Webアプリケーションを作っていて、何らかのアクションの後にポップアップを開きたい場面があると思います。例えば『とあるデータを登録して、登録が完了した後にポップアップでプリント画面を開きたい』場合とか。
普通に考えると、登録後に遷移する画面内のJavascriptで window.openすれば良さそうですが、これはブラウザのポップアップブロック機能に引っ掛かります。ポップアップを許可してあげれば問題ないのですが、不特定多数に使ってもらうWebサービス等の場合は、なるべくならセキュリティ警告をユーザーに見せたくはありません。
そんなときの常套手段のひとつとして、
- 登録ボタンクリック時に、あらかじめポップアップを開いておき
- 登録完了後にさっき開いたポップアップをリロードする
という手が用いられます。1はポップアップブロックに引っ掛かりません。 clickのように、『ユーザーが意図的に起こすアクション』内にはポップアップを開く処理を書いても大丈夫なのです。
これを実現する具体的なコードのイメージは次のような感じになります。
1 2 3 | $('.submit').on('click', function(e) { window.open('', 'popup'); }); |
1 2 | var popup = window.open('', 'popup'); popup.location.href = '/print'; |
登録時にバリデーションエラーがあった場合は、開いてしまったポップアップを閉じてやります。
1 2 | var popup = window.open('', 'popup'); popup.close(); |
流れとしては↓こんな感じ↓になります。
Demo
先にポップアップが開いてしまうのは少々格好悪いですが、一応目的は達成できました。WithPopupはこれと同じことをやってくれるrails用のgemです。
WithPopup
まずはインストールの仕方から。Gemfileに次のコードを追加します。
1 | gem 'with_popup' |
bundler使ってない人は gem install with_popupしてください。
次に app/assets/javascripts/application.jsを編集して、with_popupをjqueryより後に記述します。
1 2 3 4 | //= require jquery //= require jquery_ujs //= require with_popup //= require_tree . |
使い方
クリックを伴うようなDOMを生成するForm用のヘルパー（ link_toとか submit_tagとか）をラップしています。前段の登録後にプリント画面を開く例をコードにすると、次のような感じになります。
1 2 3 4 5 | <%= form_for @post do |f| %> ... # Submit while opening a popup window <%= f.submit_with_popup %> <% end %> |
f.submit_with_popupという箇所が通常とは違うところ。これは f.submitと書くのと同じ（透過的に委譲している）で、submiと同時にポップアップを開いてくれます。
開いたポップアップの命運はコントローラが決めます。
1 2 3 4 5 6 7 8 9 10 11 12 | def create @post = Post.new(params[:post].permit(...)) if @post.save # Show print preview in the popup window you've opened reload_popup print_post_path(@post) redirect_to @post else # Close the popup window close_popup render :new end end |
基本的な使い方はこれだけです。Javascriptは一切書く必要はありません。簡単でしょ？
その他詳細はgithub上に記載しています。かなりニッチなニーズしかないと思いますが、何かの役に立てばと幸いです。
リンク
関連する記事
- ポップアップブロックを回避してsubmitと同時に新しいウィンドウを開く
- Rails+JSフレームワークでリアルタイム掲示板を作成してみる（AngularJS編）
- Rails+JSフレームワークでリアルタイム掲示板を作成してみる（Ember.js編）
- Rails+JSフレームワークでリアルタイム掲示板を作成してみる（Backbone.js編）
- chosen-railsによる検索機能付きセレクトボックスで、検索画面作成の手間を省く