読者です 読者をやめる 読者になる 読者になる

あざらし備忘録。

渋谷ではたらく音ゲー大好きウェッブエンジニアがいろいろ思った事やった事を書いていくブログです

どこかで埋めたフラッシュメッセージを特定のページに来たときに通知してあげる方法

f:id:shiro_goma:20161211150948p:plain

東京理科大学 Advent Calendar 2016 - Qiita の12日目のエントリです!

理科大野田キャンパスのOBです!

運河!なんもねーよな!神楽坂羨ましい!

今はVOYAGE GROUPというところでエンジニアやってます:) OB訪問的なのしたいみたいな理科大生さんいたらぜひぜひ!(番宣)

voyagegroup.com

さて、今回は、Rails小ネタみたいなのを書こうかなと思います。

どこかで埋めたフラッシュメッセージを特定のページに来たときに通知する

んーなるほどわからん感がありますね。

例えば、ログインボーナスのような機能を実装するとして、要件が

  • ログイン状態のユーザがどこかのページに訪れたらログインボーナスの条件を満たしたことにしたい
  • 訪れたページで通知するのではなく、TOPページへ行ったときに大々的に通知したい
  • 通知は一度だけにしたい
  • ログインボーナスの条件を満たした直後にTOPページに行ったときだけ通知するのではなく、関係ないページを回遊した後でも

という感じだったときに使えるtipsです!

やり方は色々と考えられますが、今回はおそらく一番手軽で簡単なRails標準のflashを利用した実装方法をご紹介します!

flash

flash - リファレンス - - Railsドキュメント

説明的にはこのあたりを見ていただければと思います。

flashのキーは noticealert だけではなく、任意の物を使うことができます。(中身はただのhashです)

実装

簡単3stepです。

  • 通知するところで普通にflashから情報を取り出し表示する
  • 条件を満たしたところで普通にflashに情報を入れる
  • flash内の情報を適宜保持して引き回す←ポイント

通知するところで普通にflashから情報を取り出し表示する

トップページのview(erb)
<p>top</p>
<% if flash[:login_bonus] %>
    <p><%= flash[:login_bonus]%> controllerでログインボーナス獲得したよ</p>
<% end %>

普通ですね! flash[:login_bonus] があればそれを出します。

条件を満たしたところで普通にflashに情報を入れる

class HogeController < ApplicationController
  def index
    flash[:login_bonus] = "hoge"
  end
end

普通ですね! flash[:login_bonus] に情報を入れてます。

これはリダイレクトしたいなーみたいなときでも同様で大丈夫です。

def index
  flash[:login_bonus] = "piyo"
  redirect_to fuga_path # リダイレクトでも
end

flash内の情報を適宜保持して引き回す←ポイント

今回のキモですね。

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  after_action :keep_flash_login_bonus

  # flashメッセージを各actionでは引き回して保持し続ける
  def keep_flash_login_bonus
    return if controller_name == 'top' # 例えばtop_controllerでは出したいから引き回さないとか
    flash.keep(:login_bonus) if flash[:login_bonus]
  end
end

flash.keep() の使い方がポイントで、 通知したいところでは情報を引き回さないので次のリクエスト時にはflashが削除され、それ以外では情報を引き回して次のリクエスト時にもflashが引き続き使えるようにする みたいなことをやっています。

この方法を用いているため、先程の 条件を満たしたところで普通にflashに情報を入れる 部分での flash[:login_bonus]flash.now[:login_bonus] でもどちらでも大丈夫です。

今回は簡単のためapplication_controllerに書いていますが必要に応じてmethod切り出しやmodule切り出しは行ったほうが見通しが良いですね。

実装としてはこれだけで良い感じに情報を引き回してくれます。

デモ

こんな感じです :)

f:id:shiro_goma:20161211144802g:plain

実装サンプル

今回用に作成したサンプルは以下から確認できます :)

github.com

おわりに

いかがでしたでしょうか?

ちょっとしたflashの活用法でした。ちょっとした一工夫でさらっと実装出来てなかなか良かったです :)

明日は stupid_student2 - Qiita さんが AtomでJavaの開発環境を整える エントリを出してくれるようです!

楽しみですね!Atomユーザもまだ使ってない人も必見!:)