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

18428 ワード
RubyonRails6.0 Rails skippr Ruby Ruby テキストリンク

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

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

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

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

Skipprプラグイン

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

Skipprサイト

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

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

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

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

RailsでJavaScriptを使用

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

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

すまん。

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

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

正解は、












教えなーーーい！！！

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

yarn add jquery

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

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




........


行きましょう。はい。

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()
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'
  })
)
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
  });
});
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に名前変えてます。

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;
}

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







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

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

貴様！！！

終わりに

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

はい。