【Ruby on Rails】Skipprでスライドショー【Rails6】

地球の皆さんこんにちは。
今回はこの私が何故かできなかった、Skipprとやらを使ってスライドショーの実装を始めていきましょう。
ですが、残念ながら、あなた方にはここで死んでもらいます。
喰らいなさい！！パンチ！！！

何！？効いていない！？まさか！貴様！

なるほど。そういうことですか。

それでは、やっていきましょう。

# Skipprプラグイン

プラグイン！！〇ックマンEXEトランスミッション！！！
よし！まずはSkipprをインストールするよ！熱斗くん！！

[Skipprサイト](http://austenpayan.github.io/skippr/)

まずは、上記サイトに遷移。そしてGithubのリンクをクリックです。Gitのリポジトリに移動するはずです。

移動したら、「Clone or download」をクリックそして「Download ZIP」をクリックしましょう。zipファイルがダウンロードされるはずです。

ダウンロードしたZIPファイルを解凍しましょう。***炎の呼吸　奥義　玖ノ型　煉獄！！***
あ、できない方は普通に解凍しましょう。


解凍されたファイルに、skippr.cssファイルとskippr.min.jsがあることを確認しましょう。

# RailsでJavaScriptを使用

それでは、Railsでの作業に入ります。

お気づきかもしれませんが、私には画像を貼る技術はありません。
わからない場合は、そこまでの人間だったということですね。

すまん。

まずは、app/javascriptにscript.jsを作りましょう。
そして先ほどダウンロードした二つのファイルを二つアプリケーションのとある場所に配置します。

それではここでクエスチョンです。その場所とはいったいどこでしょう？？

正解は、

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

***教えなーーーい！！！***


はい。skippr.min.jsファイルは、app/javascriptフォルダに保存。
skippr.cssファイルは、app/assets/stylesheetsフォルダに保存ですすいません。

~~~ruby
yarn add jquery
~~~

このコマンドでjqueryをインストールしましょう。

それでは、ファイルの記述を続けていくぜ！！！

<br>
<br>
<br>
........
<br>
<br>
<br>
 

行きましょう。はい。

```ruby:app/javascript/packs/application.js
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "jquery";
import "popper.js";
import "bootstrap";
import "skippr.min";
import "script.js";
import "../stylesheets/application"
import '@fortawesome/fontawesome-free/js/all'

Rails.start()
Turbolinks.start()
ActiveStorage.start()


```

```ruby:config/webpack/enviroments.js
const { environment } = require('@rails/webpacker')

module.exports = environment

const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: 'popper.js'
  })
)

```
```ruby:app/javascript/script.js
$(document).ready(function () {
  $("#theTarget").skippr({
    // スライドショーの変化 ("fade" or "slide")
    transition : 'slide',
    // 変化に係る時間(ミリ秒)
    speed : 1000,
    // easingの種類
    easing : 'easeOutQuart',
    // ナビゲーションの形("block" or "bubble")
    navType : 'bubble',
    // 子要素の種類('div' or 'img')
    childrenElementType : 'div',
    // ナビゲーション矢印の表示(trueで表示)
    arrows : false,
    // スライドショーの自動再生(falseで自動再生なし)
    autoPlay : true,
    // 自動再生時のスライド切替間隔(ミリ秒)
    autoPlayDuration : 3000,
    // キーボードの矢印キーによるスライド送りの設定(trueで有効)
    keyboardOnAlways : true,
    // 一枚目のスライド表示時に戻る矢印を表示するかどうか(falseで非表示)
    hidePrevious : false
  });
});

```


```ruby:viewファイル
<div id="tall">
  <div id="theTarget">
    <div class="image1"></div>
    <div class="image2"></div>
    <div class="image3"></div>
    <div class="image4"></div>
    <div class="image5"></div>
    <div class-"image6"></div>
    <div class="image7"></div>
  </div>
</div>

```
cssからscssに名前変えてます。
```ruby:app/assets/stylesheets/application.scss
.image1 {
  background-image: url(sunday.jpg);
  height: 800px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

.image2 {
  background-image: url(monday.jpg);
  height: 800px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

.image3 {
  background-image: url(tuesday.jpg);
  height: 800px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

.image4 {
  background-image: url(wednesday.jpg);
  height: 800px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

.image5 {
  background-image: url(thursday.jpg);
  height: 800px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

.image6 {
  background-image: url(friday.jpg);
  height: 800px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

.image7 {
  background-image: url(saturday.jpg);
  height: 800px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

#tall {
  height: 800px;
}

```
これ以外の場所は変更してません。

追記

リロードしないと動かない方はこちら

```ruby:app/javascript/script.js
$(document).on('turbolinks:load', function() {
  $(document).ready(function () {
    $("#theTarget").skippr({
      // スライドショーの変化 ("fade" or "slide")
      transition : 'slide',
      // 変化に係る時間(ミリ秒)
      speed : 1000,
      // easingの種類
      easing : 'easeOutQuart',
      // ナビゲーションの形("block" or "bubble")
      navType : 'bubble',
      // 子要素の種類('div' or 'img')
      childrenElementType : 'div',
      // ナビゲーション矢印の表示(trueで表示)
      arrows : false,
      // スライドショーの自動再生(falseで自動再生なし)
      autoPlay : true,
      // 自動再生時のスライド切替間隔(ミリ秒)
      autoPlayDuration : 3000,
      // キーボードの矢印キーによるスライド送りの設定(trueで有効)
      keyboardOnAlways : true,
      // 一枚目のスライド表示時に戻る矢印を表示するかどうか(falseで非表示)
      hidePrevious : false
    });
  });
});

```
turbolinksというのが関係しています。
画面遷移するときにデータのやり取りにつかわれるやつですね。
詳しい説明は割愛。哀悼。東京。協賛。サンタクロース。メリクリ。
<br>
<br>
<br>
<br>

これで私は実装できました。あなた方はどうですか？

な......その姿は！！！

貴様！！！

# 終わりに

地球の皆さん。今回は見逃してあげましょう。
ですが、あなた方に次はありません。
その時までにフフッ....

はい。