Ruby on Rails開発のインターン （Day 20）
こんにちは、皆さん！
これは職場で起きた最も恥ずかしいことだと思う．．．。寝坊して、勤務開始時間を越してから起きてしまったという。なんとまあ．．．。自分の不注意さに関しては本当にマネージャーに申し訳ないなと感じてるところ。遅くまで起きているのはいつでも悪いことだね(笑)
今後は、もう少し自分に寝る時間を与えてあげたいね(笑)。
- トピック：
- 疑問：
- OwlCarouselでCarouselのように自動で写真をスライドするにはどうすればよいのか？
- 問題：
- 学習した内容：
- OwlCarousel はスマホ対応のCarouselを提供してくれるジェムである
- 今後やってみたいこと：
- OwlCarouselを自分のアプリケーションで使う
- リソース：
OwlCarouselとは何か？
OwlCarouselはルビージェムの一つでスマホ対応のCarouselを提供するものである。まあ、通常のBootstrapのCarouselとは少し違う部分もあるけど．．．。
ここにあるのがOwlCarouselのデモサイト。ぜひ、どんなものなのか試してみてください。
おそらく、スマホでも扱いやすいドラッグとスワイプ機能が見受けられるでしょう。これらはBootstrapのCarouselでは実行されていないので、スマホにやさしいウェブにしたいのなら検討したいところかと思われる。
OwlCarouselで簡単なアプリを作る
完成品がこちら↓↓
Railsにおいてowlcarouselを使った簡単なデモ
まとめると、すごいシンプルなものだった。でも、とりあえず、始める前にjquery-railsジェムがしっかりインストールされていることを確認しよう。(リンク)
まずはGemfileにジェムを追加
gem 'owlcarousel-rails'
そして、bundle install.。で、ここで以下の二つのファイルに必要なコンテンツが含まれるように設定したいので下記のコードを追加していく。
まずは、下記のをapp/assets/javascript/application.jsに追加
//= require owl.carousel
そしたら、今度は下記の2行をapp/assets/stylesheets/application.cssに追加
*= require owl.carousel *= require owl.theme
これでセットアップは完了！
あとは、以下のように簡単にスライドを作ることができる。（内容は自分の好きなものにしましょう）
<div class="owl-carousel"> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> ... </div>
それで最後に内容を定義した直後に下記のjQueryコードを入れれば動きは完成！！
<%= javascript_tag do %> $(".owl-carousel").owlCarousel(); <% end %>
そしたら、ローカルでテストしてみよう（これでうまく機能するはず）。
まとめ
Gemfileにも入っていたが、まだ実装していないようだが、おそらく写真を表示するときに使うのではないかと思っている。とりあえず、新しくて面白そうなもの見つけた気がするので、試していこうかな(笑)。ご精読ありがとうございました。では、また次回まで✌
