箱のプログラミング日記。

渋谷の自社開発企業でRails書いてます。

「ログアウトしてよろしいですか?」のアラートを出したい【Rails】

f:id:y_hakoiri:20191102121704j:plain

 

Railsでdeviseを使ってアプリを作成しています。

 

ユーザーがログインやログアウトした際に「ログインしました」「ログアウトしました」というフラッシュメッセージを出すのは比較的簡単ですが、

例えばログアウトボタンを押したら「ログアウトしてよろしいですか?」的なアラートが出て、

OKを押すと初めてログアウトする、みたいな挙動を実現したくなりました。

 

https://i.gyazo.com/962832f4ab1633ae7b0ac9b9b77bc048.jpg

 

今の段階だと、右上のログアウトボタンを押した段階ですぐにログアウトされてしまいます。

= link_to 'ログアウト', destroy_user_session_path, method: :delete, class: 'header-link'

 

これを実現するために自分で思い浮かべたのは、以下の二つの方法

  1. JavaScriptでアラートを出す
  2. CSS + JavaScriptで手作りのアラートを出す

 

まずはJSのみ使う方法から調べました

 

techacademy.jp

 

 

指定したセレクタが押されたら、windowを出すことができます

大きく分けて3種類かな?

 

  • alert・・・警告(OKボタンのみ)が出現
  • confirm ・・・確認(キャンセル、OKボタン)が出現
  • prompt・・・入力ダイアログが出現

 

今回の私の用途だと、confirmが使えそうですね

ただ、OKボタンが押された時にログアウトするとなると

OKボタン自体をdeleteメソッドのリンクにする必要があり、

 

そうなるとwindowのいじり方が分からないな・・・と

 

 

次に、二つ目の選択肢である

CSSとJavaScriptで手作りのアラートを作る方法。

 

あらかじめHTMLとCSSでアラートのスタイルを作っておいて、

普段は非表示にしておいて、ログアウトボタンが押されたら

JSでDOMを操作しdisplay:noneのスタイルを外す、みたいなイメージです

 

実際に私たちが使うようなおしゃれなアプリとかは

こうやってきちんとスタイルを当てて作られているんだろうけど、

今回は最小限のユーザービリティだけ確保して、

あまりフロントにこだわりすぎたくないな・・・と言う本音。

 

どうしようかな・・・と色々調べていたところ、

便利すぎる方法を見つけてしまいました

 

= link_to 'ログアウト', destroy_user_session_path, method: :delete, class: 'header-link', data: { confirm: 'ログアウトしますか?' }

 

なんとRailsのヘルパーのオプションであるらしい!!

 

data: { confirm: 'ログアウトしますか?' }

これを追加すると、先ほど説明したように

confirmのwindowが出てくれるんだそう。

 

これならわざわざJSを使う必要もなく、

ログアウトさせるためにパスを指定する必要もない、簡単すぎ・・・!

 

https://i.gyazo.com/eabdefdd8d36a138eb28ab6336d7703c.jpg

 

実際使ってみるとこんな感じ

便利すぎる・・・!

 

今回もRailsに感動した私でした。

 

 

以下一部参考にしました。

inter-arteq.com