hoz blog

営業からSEに転職した文系エンジニアです。プログラミングと趣味の株に関してブログを書いていこうと思います。

【Ruby】toastrを導入し、かっこいいログインメッセージを表示する

トースターをアプリに適用してみます。

以下のサイトでトースターのでもが見れます。

toastr examples


f:id:takanori5:20171103140310p:plain
右上に出ているやつです。

導入して使って見ます。

quick startをみると以下のステップで導入ができるようです。
f:id:takanori5:20171103140803p:plain


まずはgemを入れます。
gemを編集し追記
f:id:takanori5:20171103141410p:plain


ターミナルでコマンドを入力
f:id:takanori5:20171103141443p:plain


続いてCSSファイルを編集します。
f:id:takanori5:20171103141516p:plain

jsも同様に編集
f:id:takanori5:20171103141641p:plain


最後に実際に呼び出す処理を書きます。
・トップページのアラートにtoastrを適応したい時

 app/views/layouts/application.html.erb

<% unless flash.empty? %>
 
<% end %>


以上で完了です。

f:id:takanori5:20171103145850p:plain