地球の皆さんこんにちは。
今回はこの私が何故かできなかった、Skipprとやらを使ってスライドショーの実装を始めていきましょう。
ですが、残念ながら、あなた方にはここで死んでもらいます。
喰らいなさい！！パンチ！！！
何！？効いていない！？まさか！貴様！
なるほど。そういうことですか。
それでは、やっていきましょう。
Skipprプラグイン
プラグイン！！〇ックマンEXEトランスミッション！！！
よし！まずは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をインストールしましょう。
それでは、ファイルの記述を続けていくぜ！！！
........
行きましょう。はい。
// 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()
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'
})
)
$(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
});
});
<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に名前変えてます。
.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;
}
これ以外の場所は変更してません。
追記
リロードしないと動かない方はこちら
$(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というのが関係しています。
画面遷移するときにデータのやり取りにつかわれるやつですね。
詳しい説明は割愛。哀悼。東京。協賛。サンタクロース。メリクリ。
これで私は実装できました。あなた方はどうですか？
な......その姿は！！！
貴様！！！
終わりに
地球の皆さん。今回は見逃してあげましょう。
ですが、あなた方に次はありません。
その時までにフフッ....
はい。