Flashメッセージを実装する

 

こんにちは。今日も天気が悪いですね。

今週末にはまた台風がくるみたいです。最近は台風も人々の生活を及ぼすまでの自然災害になってきているので、怖いです、、、。

 

突然ですがブログ を見返してみて、

ふと自分のブログ 見にくいな〜と思いました。

そしてブログ の書き方も改善が必要だと感じました。

今までは学習のまとめとしてここにその日習ったことを書いていこうと思ってましたが、学習したカテゴリーごとに記事を書いていこうと思います。

 

 

なので今日は「Flashメッセージの実装方法」について書いていきます。

 

Flashメッセージとは

Flashメッセージとは、webページの一番上に表示されるお知らせみたいなものです。

ログインしたときに「ログインしました!」と書かれたりします。

 

下に例として画像を載せておきます。

(私はいまチャットアプリを作成しているので、Flashメッセージには「チャットグループが作成されました」と表示されるように設定してます。)

 

f:id:lilybelly:20181005154720p:plain

 

この水色の部分が、Flashメッセージです。

なんとなく理解できたでしょうか?

 

実装方法

では実際にどういう実装方法をたどると、このFlashメッセージが表示されるようになるのでしょうか。

 

まずFlashメッセージを生成させるためには、

Railsにもともと設定されてあるFlashというオブジェクトを使います。

このFlashハッシュ型のオブジェクトで、

Flashを使用すると「キーと値」がセットになって自動的にハッシュオブジェクトを生成してくれます。

 

 

今回はサインアップ・ログイン・ログアウトをした時にFlashメッセージが出てくるようにします。

(ちなみに現状の環境としては、deviseのgemをインストールしてあります。)

 

 

またFlashの特徴として、

  1. deviseを導入した状態でflashオブジェクトを使用すると、deviseに関する通知(ログイン・ログアウトなど)が発生した時のみ、keyとvalueのハッシュを生成してくれるようになっています。
  2. flashはデフォルトで notice(動作成功時)とalert(動作失敗時)の2つのキーを生成してくれるようになっています。

 

うーん、なんとなくわかるけど、よくわからない、、、。

簡単に言うと、deviseを導入しちゃえば、

flashを使ったときに勝手にFlashメッセージ出してくれるよ!ってことの解釈でいいんでしょうか?

 

ちょっとこの段階だとよくわからないですが、とりあえず進めて行きます。(笑)

 

Flashメッセージを実装したい = ログインなどの特定のアクションを行なった時のみこのタグを表示させたい

つまり特定の時にwebページにFlashメッセージを表示させたいということです。

なのでビューに表示させたい場合は、HTMLのなかに特定の時のみFlashメッセージを表示するタグを作るようにすればいいです。

 

 

まず全体のHTMLにタグを入れるんですが、

私はログイン・ログアウト・サインアップ以外にもこのFlashメッセージを使うかもしれないので一応部分テンプレ化して入れておきます。

 

部分テンプレ化するもとのところに、

renderで記述して、、、、

 

部分テンプレの中身はlayoutディレクトリのnotificationsというファイル に記述していこうと思います。(部分テンプレは_アンダーバーから始めます)

 

f:id:lilybelly:20181005164658p:plain

f:id:lilybelly:20181005165113p:plain

 

そしてnotificationというFlashメッセージを表示させるためのタグを作ります。

「.notification」でクラス名が「notification」のdivタグを作ってます。

(%divは省略できます)

(1行目)

f:id:lilybelly:20181005170253p:plain

2行目以降で、

 

ここでFlashオブジェクトを呼び出します。

f:id:lilybelly:20181005170553p:plain

 

ここで、さっきFlashの特徴として書いた

  1. deviseを導入した状態でflashオブジェクトを使用すると、deviseに関する通知(ログイン・ログアウトなど)が発生した時のみ、keyとvalueのハッシュを生成してくれるようになっています。
  2. flashはデフォルトで notice(動作成功時)とalert(動作失敗時)の2つのキーを生成してくれるようになっています。

が今ここで実際行われているということです。

つまりkeyとvalueが入ったハッシュオブジェクトが作られているらしいです。

 

これをconten_tagというHTMLタグを作ってくれるメソッドを使って、

キーをクラス名としたバリューを表示させるdivタグを作成します。

  (ちなみにcontent_tagはHTMLタグを生成することができ、第一引数にタグの種類、第二引数に表示内容、第三引数にオプション( classなど)を設定できる

 

f:id:lilybelly:20181005165325p:plain

 

keyとvalueをハッシュから取り出したいので、

eachメソッドで取り出してあげます。

 

これで、ログイン・ログアウト・サインアップが行われた時だけ

Flashオブジェクトがよばれて

生成されたハッシュからcontent_tagでdivタグを作るようにしました!!

 

うーん、ここまできてやっとflashオブジェクトが理解できました。

 

サーバーを立ち上げてみると、ちゃんと表示されてます。

が、ここで表示言語が英語なことに気づきます!!

 

f:id:lilybelly:20181005173132p:plain

 

Flashメッセージの表示言語を英語から日本語にする

このFlashメッセージってデフォルトは英語表記になっているみたいです。

 

そこで英語表記から日本語表記へと変換させます。

 

これはローカルディレクトリにあるdevise.en.ymlが英語表記になってるためにこの現象が起こるらしいです。

f:id:lilybelly:20181005174813p:plain

 

なので

gitで日本語のファイルを検索して

devise.ja.yml

ja.yml

をconfig/localesに配置します。

 

そしてconfig/application.rbの20行目で

英語版のファイル を読まずにダウンロードした日本語ファイル を読むように指定することで日本語化がキチンと行われるようになりました。

 

f:id:lilybelly:20181005175313p:plain

 

完成したフラッシュメッセージは以下の通りです。

 

f:id:lilybelly:20181005182923p:plain

 

ちなみに以下のサイトも読んで参考にしたので、

読んでみてください。

 

 


ruby-rails.hatenadiary.com