Swiper
はじめに
こんにちは！大ちゃんの駆け出し技術ブログです。
昨日の記事で複数の画像をアップロードできるように実装しました！
こちらは「パーフェクト Ruby on Rails」という本でActive Storageを実装した状態から改修するようにして実装しました。今回も現状の複数画像をアップロードできるようになった状態から改修するようにして実装を行いたいと思います！
今回は、複数アップロードした画像をスライダーで表示されるように実装します。スライダー表示とはなんぞやと思われるかもしれませんが、Amazon Prime Video の表示でおすすめの作品が順番にスライダーで表示されているかと思います。
Swiper
この画像をスライド表示させるための方法として、RUNTEQではSwiperというjQueryのプラグインを学習しました。
こちらの公式サイトでは以下のように説明されています。
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.
[日本語訳] Swiperは、ハードウェアで加速されたトランジションと驚くべきネイティブ動作を持つ、最もモダンな無料のモバイルタッチスライダーです。モバイルウェブサイト、モバイルウェブアプリ、モバイルネイティブ/ハイブリッドアプリでの使用を想定しています。 Swiperはすべてのプラットフォームと互換性があるわけではなく、最高のUXとシンプルさを提供するために、モダンなアプリ/プラットフォームのみに焦点を当てたモダンなタッチスライダーです。
「最もモダンな無料のモバイルタッチスライダー」、「最高のUXとシンプルさを提供する」とあるように、インストール方法も簡単であり、かなりシンプルにスライダー機能の実装を行うことができました。
今回はバッグエンドではなくフロントエンドの内容となるため、フロントエンドに慣れていない方は難しいと思われるかもしれません。しかし、公式にインストール方法、実装方法が詳しく載っていたので心配しなくても大丈夫です！
インストール手順
今回は公式のインストール方法に従い実装をしていきたいと思います。
There are few options on how to include/import Swiper into your project
[日本語訳] スワイパーをプロジェクトにインクルード/インポートする方法には、いくつかのオプションがあります。
インストール方法には方法がいくつかあるようですね。今回はCDNからSwiperをインストールする方法を採用します。下記参考サイトではCDNを以下のように説明しています。（今回引用多くてごめんなさい、、、）
CDNとは「Content Delivery Network（コンテンツデリバリーネットワーク）」の略で、ウェブコンテンツを効率的かつスピーディーに配信できるように工夫されたネットワークのことです。
https://www.kagoya.jp/howto/network/cdn/
なるほど。プログインを含んだウェブコンテンツを素早く導入できるようにしたシステムのようですね。より詳しく知りたい方は参考記事を熟読してみてください！
CDNからSwiperを使用する
If you don't want to include Swiper files in your project, you may use it from CDN. The following files are available
[日本語訳] プロジェクトにSwiperファイルを入れたくない場合は、CDNから使用することができます。以下のファイルが利用可能です。
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" /> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> <script src="https://unpkg.com/swiper/swiper-bundle.js"></script> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
上記のファイルをapp/views/layouts/application.html.erbに記述すればダウンロードできそうですね！しかし、erbファイルですので、erbの記法に則って記述しましょう！(試していないのですが、上記のHTMLのままでも大丈夫なはずです)
<%= stylesheet_link_tag 'https://unpkg.com/swiper/swiper-bundle.css' %> <%= stylesheet_link_tag 'https://unpkg.com/swiper/swiper-bundle.min.css' %> <%= javascript_include_tag 'https://unpkg.com/swiper/swiper-bundle.js' %> <%= javascript_include_tag 'https://unpkg.com/swiper/swiper-bundle.min.js' %>
スワイパーのHTMLレイアウトを追加
Now, we need to add basic Swiper layout to our app
[日本語訳] ここで、アプリに基本的なSwiperのレイアウトを追加する必要があります。
<!-- Slider main container --> <div class="swiper-container"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> <!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- If we need scrollbar --> <div class="swiper-scrollbar"></div> </div>
こちらもHTMLを例にしています。画像がどこで表示するかというと<!-- Slides -->の部分ですね。実際の画像は指定していませんが、Slide 1、Slide 2、Slide 3というように、複数のスライドがここに表示されていることを想定しているかと思います。
また、スライド以降のHTMLはスライダーのオプションのようですね。
<!-- ページネーション --> <div class="swiper-pagination"></div> <!-- ナヴィゲーションボタン --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- スクロールバー --> <div class="swiper-scrollbar"></div>
それでは実際にファイルに反映していきましょう。画像を表示しているユーザー詳細ページのビューファイルを編集します。現在のファイルは以下のとおりです。
# app/views/users/show.html.erb <strong>Portrait:</strong> <% @user.portraits.each do |portrait| %> <%= image_tag portrait.variant(resize_to_limit: [100, 100]) %> <% end %>
これを公式の指示通りに実装すると以下のようになります。
<strong>Portrait:</strong> <!-- Slider main container --> <div class="swiper-container"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <% if @user.portraits.present? %> <% @user.portraits.each do |portrait| %> <%= image_tag url_for(portrait), class: 'swiper-slide' %> <% end %> <% else %> <%= image_tag '/images/haikyu.jpg', class: 'swiper-slide' %> <% end %> </div> <!-- ページネーション --> <div class="swiper-pagination"></div> <!-- ナヴィゲーションボタン --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- スクロールバー --> <div class="swiper-scrollbar"></div> </div>
だいぶややこしいファイルになりましたが、公式のコメント部分をそのまま反映しています。画像がアップロードされていたら、画像の枚数だけimage_tagを使ってimgを生成します。逆にアップロードされている画像がなければ、一枚の画像を表示するようにしておきます。ですので、app/assets/images/配下に好きな画像を1枚格納しておいてください！
<% if @user.portraits.present? %> <% @user.portraits.each do |portrait| %> <%= image_tag url_for(portrait), class: 'swiper-slide' %> <% end %> <% else %> <%= image_tag '/images/sample.jpg', class: 'swiper-slide' %> <% end %>
Swiper CSS スタイル/サイズ
In addition to Swiper's CSS styles, we may need to add some custom styles to set Swiper size:
[日本語訳] SwiperのCSSスタイルに加えて、Swiperのサイズを設定するためにいくつかのカスタムスタイルを追加する必要があるかもしれません。
.swiper-container { width: 600px; height: 300px; }
画像を表示する部分のレイアウトを整理するためにCSSを記載します。CSSについては特に自由にかけると思うので、今回はこちらで用意したCSSを記載してください。(application.cssをapplication.scssにファイル名を変更してください！)
// app/assets/stylesheets/application.scss
.swiper-container {
width: 600px;
height: 300px;
}
スワイパーの実装
Finally, we need to initialize Swiper in JS:
[日本語訳] 最後に、SwiperをJSで実装する必要があります。
const swiper = new Swiper('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
このjavascriptファイルはこのまま記載してしまいましょう。
// app/assets/javascripts/application.js
const swiper = new Swiper('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
プリコンパイルするように実装
application.scssとapplication.jsを読み込む設定を追加していないので、現状のままでは両方のファイルを読み込めていません。ですので読み込めるように設定します。
app/views/layouts/application.html.erb
<%= stylesheet_link_tag 'application', media: 'all' %> <%= javascript_include_tag 'application' %>
config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( application.css application.js )
現状確認
これで公式のインストール方法と簡易的な実装方法に合わせた実装は終わりです。試しに画像をアップロードしてみましょう。プライムビデオを真似てみると面白いかなと思いますので、各々好きな作品の画像を3枚ダウンロードしてみてください！自分はアニメが好きなのでアニメ3作品を用意します！笑
スライド機能が実際に導入されていますね！
思ったよりも簡単に実装できたのではないでしょうか！
終わりに
今回はSwiperについて紹介しましたが、インストールと簡単な実装方法のみを公式にしたがって実装しただけですね。こんな簡単な方法だけでなく、swiperにはスライド方法は細かく指定する方法があるようですね。
他のスライド指定方法も発信したいので、次回はプライムビデオのような見た目にする方法を発信したいと思います！
以上、大ちゃんの駆け出し技術ブログでした！
