ナラベルWebサービス2.0 ブログ

ナラベル Webサービスに関する情報発信

Swiper(スライダー機能)関係の改善など

 ずっと手をつけていないかったSwiper(スライダー)部分を修正した。やはり開発テストだけでは判明しない修正箇所が使われることによって炙りだされてきた。システムは使い始めて,ユーザーと共に成長していくことが重要という,諸先輩方の教えを再認識した。

 

swiperjs.com

 Swiperでの問題は,ユーザーがアップロードした画像がシステム側で想定したサイズでない場合,大きくレイアウトが崩れてしまっていたことだ。Swiperでは,書影かもしくは展示イメージ画像をスライダーの要素として利用しているのですが,この2つともサイズは固定でなくバラつきがあることから,画像の縦横比を変更せずに表示エリアに収めるのが難しかった。各エントリーの表示は,Bootstrapのカードを使っているのですが,Card-Deckスタイルがよしなに画像サイズを変更してくれるので問題なしだったのですが,Swiperは自力で対応する必要がありました。

 

 いろいろ試したのですが,結局,以下の方法を採用しました。

 1)画像を表示するエリアをpxでCSSで指定する(width,height共)

 2)CSSで画像にobject-fit: scale-down を設定

この2つの設定で,表示エリアよりも大きいサイズの画像は,自動的に縦横比を変更せずに縮小されます。表示エリアより小さい画像は,何も変更されません。

最初は,width:100%; height:auto としていたのですが,表示エリアより大きい画像はこれでもよいのですが,表示エリアより小さい画像が表示エリアと同等い拡大されてしまうのが,問題でした。object-fitを使うことにより,縮小しか行われなくなったので,問題は解決です。コツは,ちゃんと明示的に表示エリアを設定することです。単純にobject-fitだけでは想定どおりの動きはしません。表示エリアは本来であればレスポンシブルとして拡大・縮小するのがよいですが,object-fit:を使う場合には,自動的に算出された表示エリアでは正しく効果を発揮しないようです。(もしうまく動く方法があれば,どなたかお教えいただければと思います。)

 

次の課題は,IEへの対応です。すでにMSのIE非推奨を受けて,ユーザーも減っていくと考えて,IEへの対応はあまり気にしていなかったのですが,そもそもobject-fitはCSS3でIE11非対応なので,これを機にSwiperをIE対応させようと思ったのですが,抜本的にソースに手をいれないと行けないような情報が多々流れていたので,ちょっと方向性を変えて,IEの場合は,Swiperによるスライダーを非表示になるようにしました。Swiperによるスライダーは視覚効果のためなので,なくても全体の機能には影響ありません。

 

少しづつテスト&修正を行っているので,思いの外時間がかかりましたが,少しづつ改善していると思います。商業ベースのシステムのようにはいきませんが,粘り強くシステム改修をしていきたいと思います。

 

naraberu.info