[WithPopup] submitと同時にポップアップを開くRails用Gem


Webアプリケーションを作っていて、何らかのアクションの後にポップアップを開きたい場面があると思います。例えば『とあるデータを登録して、登録が完了した後にポップアップでプリント画面を開きたい』場合とか。

普通に考えると、登録後に遷移する画面内のJavascriptで window.openすれば良さそうですが、これはブラウザのポップアップブロック機能に引っ掛かります。ポップアップを許可してあげれば問題ないのですが、不特定多数に使ってもらうWebサービス等の場合は、なるべくならセキュリティ警告をユーザーに見せたくはありません。

そんなときの常套手段のひとつとして、

  1. 登録ボタンクリック時に、あらかじめポップアップを開いておき
  2. 登録完了後にさっき開いたポップアップをリロードする

という手が用いられます。1はポップアップブロックに引っ掛かりません。 clickのように、『ユーザーが意図的に起こすアクション』内にはポップアップを開く処理を書いても大丈夫なのです。

これを実現する具体的なコードのイメージは次のような感じになります。

登録時にバリデーションエラーがあった場合は、開いてしまったポップアップを閉じてやります。

流れとしては↓こんな感じ↓になります。

Demo
Demo

先にポップアップが開いてしまうのは少々格好悪いですが、一応目的は達成できました。WithPopupはこれと同じことをやってくれるrails用のgemです。

WithPopup

まずはインストールの仕方から。Gemfileに次のコードを追加します。

bundler使ってない人は gem install with_popupしてください。

次に app/assets/javascripts/application.jsを編集して、with_popupをjqueryより後に記述します。

使い方

クリックを伴うようなDOMを生成するForm用のヘルパー( link_toとか submit_tagとか)をラップしています。前段の登録後にプリント画面を開く例をコードにすると、次のような感じになります。

f.submit_with_popupという箇所が通常とは違うところ。これは f.submitと書くのと同じ(透過的に委譲している)で、submiと同時にポップアップを開いてくれます。

開いたポップアップの命運はコントローラが決めます。

基本的な使い方はこれだけです。Javascriptは一切書く必要はありません。簡単でしょ?

その他詳細はgithub上に記載しています。かなりニッチなニーズしかないと思いますが、何かの役に立てばと幸いです。

リンク

関連する記事


コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください