ポップアップというかフラッシュというか・・。

さて、今回はやることを見失ってしまいかけてたところだったので 前に紹介したトレロで確認してから何ができそうか検討してみよう。スクリーンショット 2017-08-10 23.09.31.png

んー。この中から手っ取り早くできそうなのといえばログインとかの確認ポップアップか。

多分セッション系統のアクションになると思うので 一旦deviseのあたりで何かできるか探してみよう。

前に参考にしてたGithubで確認してみると スクリーンショット 2017-08-10 23.14.26.png

めっちゃ見落としやすい感じでそれっぽいことが書いてあった。。 これちゃんと引用文みたいな感じでまとめてくれよ・・。

要は何が言いたいかというと deviseのフラッシュメッセージを利用してユーザに対して ちゃんとログインできてるかできてないかを知らせることができるらしい。

うむ、これはやりたいことの一部。 これをやってしまえばリストが一つ達成できるというわけですな。

ってことで早速やってみる。 とは、言ったものの、この状態ではなんのソースもないので どうやればいいかわからんぞよ・・。 一旦ググる

んで、出てきて一番参考になりそうなものがあったので Deviseを用いたユーザーログイン機能の実装ここの通りにやってみる。

ただ、railsのバージョンが違うのでどうかなぁとも思いながら 半信半疑で作業開始。

まぁ前半部分はすでにやってたことなので飛ばしておいて フラッシュメッセージフラッシュメッセージの設定のところを確認。

ふむ。application.html.erbをいじるのか。

<% if notice %>
  <p class="alert alert-notice"><%= notice %></p>
<% end %>
<% if alert %>
   <p class="alert alert-error"><%= alert %></p>
<% end %>

このコードは多分yieldの下あたりかな? しかし、このコードでif文にする必要あるんかな・・。 もっと簡素化できそう。

ってことでスリムにしてみる。

<p class="notice"><%= notice %></p> <p class="alert"><%= alert %></p>

多分これでもいけるはず。 一旦確認。

スクリーンショット 2017-08-10 23.36.57.png

あれ?なんか微妙な感じでサインアウトに成功しましたって出てきただけやん。。 これはいかん。。

もっとかっこよく出したいやん! などとわがままをほざきながらググってみたら なんとも便利そうなGemに遭遇。

toastr←これでトースターと読むらしい。 デモがあったので実際の挙動を確認したら 『こういうの探してた!』って感じのフラッシュの出方をしてくれたので 早速導入。

クイックスタートなるところを見てみると どうやら3ステップでできるらしい。 なんとも親切設計。ありがたや、ありがたや。

とりあえずGemなので当然インストールしないと動いてくれないので gemfileにgem 'toastr-rails'をぶっこんでアップデート。

Fetching toastr-rails 1.0.3 Installing toastr-rails 1.0.3 Using web-console 3.5.1 Using rails 5.0.4 Using sass-rails 5.0.6 Using devise 4.3.0 Bundle complete! 19 Gemfile dependencies, 74 gems now installed. Use `bundle info [gemname]` to see where a bundled gem is installed.

無事に更新できたみたい。 次にapplication.cssとapplication.jsでtoastrを要求するように しないといけないらしいので

*= require toastr ←cssの方 //= require toastr ←jsの方

それぞれ追加。 と思ったけどcssの方はすでにscssに拡張子を変えてしまってるので このままではちゃんと動作してくれなさそうなので

@import "toastr";

これに置き換えてから一番上の方にコードする

@import "bootstrap-sprockets"; @import "bootstrap"; @import "toastr";

こんな感じ。

jsの方はbootstrapの下に設置。

//= require jquery //= require bootstrap-sprockets //= require toastr //= require jquery_ujs //= require turbolinks //= require_tree .

これでいいか。

とりあえずtoastrはjavascriptの内容で動いてくれるようなので 最初にnoticeとかを書いたapplicaion.html.erbに jsのコードを書いてみることに。

<!-- flashメッセージを表示させる --> <% unless flash.empty? %> toastr['']('') <% end %>

gsubのメソッドを使うことによって 文字列の中で正規表現のパターンと同じ部分を 全ての文字列に置き換えることが可能になる。 (正直何が言いたいねんとは自分でも思ってる。うん。)

とりあえず、ブラウザで確認したいところではあるが Gemを更新してるので、サーバを再起動させてから確認。

一旦ログインした状態にして (フラッシュとアドレスが被ってしまって修正するとわけがわからなくなるので ログインした状態にしてる)

そこからログアウトしてみる。スクリーンショット 2017-08-11 0.23.23.png

おおぉっ!! 右上にちゃんとフラッシュが出てくれてるやないか!

ちなみにログインの状態でも確認はできた。

よっっっしゃぁぁ! 一個やることリスト片付いたぞ!

ってことでトレロのカードも 作業完了リストに追加。スクリーンショット 2017-08-11 0.28.41.png

ん〜。なんとも言えん達成感。

これはクセになるぞ・・。

あ、多分アカウント作るときのエラー表示も なんかどうしようもないくらいしょうもなかった気がする。。 ついでにそこのとこもフラッシュで表示するようにしよ。

とりあえず今回はキリいいしここまで!

ではー。

この記事をシェアする