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

Ruby好き非エンジニアのブログ

〜Ruby on Railsの学習記録〜

toastrの導入

前回まで開発の流れをひとつひとつ備忘録として残してきましたが、細かくブログに書こうとするとかなり時間がかかるので、今回からは開発の過程で触れたコトを切り取って記していきます。



今回はtoastrの導入。

検索エンジンで、

toastr gem

と入力していただくと、下記GitHubのページが出てくるので、クリックしてください。
github.com


クリックするとこんな画面に飛びます。
f:id:Jyoko:20170113233501g:plain


そもそもtoastrって何?という方は、まずは見てみるのが一番!
画面を少し下にスクロールしていただくと、

Demo
Demo can be found at http://CodeSeven.github.com/toastr

と書いてあるところがあるので、この
http://CodeSeven.github.com/toastr
をクリック。

クリックするとまたまた同じような内容で、

Demo
Demo can be found at http://codeseven.github.io/toastr/demo.html

と書いてある画面が出てくるので、
今度はこの中のリンクをクリック。
http://codeseven.github.io/toastr/demo.html


そして画面内の「Show Toast」ボタンをクリックすると、
f:id:Jyoko:20170113234029g:plain
上記のように画面右上にメッセージが浮かび上がってきます。
これがtoastr。

これは、ログイン機能を実装した際、
「ログインしました」
「ログアウトしました」
など、その時々の状態を知らせるためのメッセージを表示させる際に使用します。


それでは早速導入していきます。
先ほどのtoastrのGitHubページに戻っていただいて
下記Quick Start部分を見てください。
f:id:Jyoko:20170113235400g:plain

まずは、この流れにそって

gem 'toastr-rails'

をコピーして、Gemfileに貼付け。

続いてターミナルで

bundle

を実行。

次に、下記を見てみると、
f:id:Jyoko:20170114000118g:plain
application.css と application.jsに、

*= require toastr

//= require toastr

を追加と書いてあります。

これを参考に、app/assets/stylesheets/application.scssに

@import "toastr";

を追加。
※今回は拡張子がscssなので、scss用に書き換えています。

続いて、app/assets/javascripts/application.jsに

//= require toastr

を追加。


あとはjavascriptでtoastrを呼び出せば完了。
f:id:Jyoko:20170114005702g:plain
上記GitHubのドキュメントを参考に、

app/views/layouts/application.html.erb

<% unless flash.empty? %> //flashにメッセージがある時
    <script type="text/javascript">
      toastr.info('更新しました')
    </script>
<% end %>

などと書いて終了です。
これで、何かを保存した際などに
「更新しました」の文字が浮かびあがってきます。
上記はあくまで一例ですので、表示させたい内容により書き換えてみてください。



今回は以上です。

自分が学習する中でGitHubのドキュメントの見方がわかることで理解が進んだので、少しですがその流れも書いてみました。

記事内で間違っている部分やもっと良い方法をご存知の方がいらっしゃれば是非教えてください。

では今日はこの辺で。