※この記事はフロントエンドをちょっと触りたいなと思っているデザイナーさん向けの記事です。
先日、同僚のデザイナーに「『Swipebox』っていうjQueryプラグイン使ったんだけど、スマホでモーダル表示するとタイトルが出なくて困る」という、最近のライトノベルのタイトルになりそうな相談をされました。
1年くらい前から僕が『Swipebox』がお気に入りになっていて、違うブロジェクトにもそれを使っていましたので、僕ならわかるだろうという算段だったようです。
まあ、ここ数ヶ月Swipeboxを触ってなかったので、スマホのモーダル表示でタイトルが出なくなってるだなんて知らなかったんですけどね┐(´-`)┌
これまで僕が使っていた旧バージョンと機能が若干違っているようなので、何か機能が追加されていないか探します。
公式ドキュメントを見てもタイトルの表示関連のオプションがあるというようなことは書いていなかったので、GitHubで公開されてるリポジトリのコミットログを追って変更点を見て行きましょう。
以下、相談を受けてから実際に記述を見つけるまでの過程を実際にやっていった順に説明していきます。
バージョンの違いを確認してみる
僕が最後に実装したSwipeboxのバージョンは「1.2.8」でした。
同僚が使いたいと言ってきた(この記事の投稿当時の)最新版のバージョンは「1.3.0.2」です。
両者のバージョンでの実装の違い(モーダル表示)を見てみると…
なるほどvar.1.2.8ではタイトルが出ているのに1.3.0.2ではタイトルは出ていません。
さらに閉じる(✕)ボタンの位置も違います。
おそらくバージョンが上がる間にタイトルまわりの仕様が変更されたのでしょう。
ドキュメントには書いているのか
公式サイトを見てみてみる
公式サイト(http://brutaldesign.github.io/swipebox/)を見てみる。
optionsの項目には以下の記述。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script type="text/javascript"> ;( function( $ ) { $( '.swipebox' ).swipebox( { useCSS : true, // false will force the use of jQuery for animations useSVG : true, // false to force the use of png for buttons initialIndexOnArray : 0, // which image index to init when a array is passed hideCloseButtonOnMobile : false, // true will hide the close button on mobile devices hideBarsDelay : 3000, // delay before hiding bars on desktop videoMaxWidth : 1140, // videos max width beforeOpen: function() {}, // called before opening afterOpen: null, // called after opening afterClose: function() {} // called after closing loopAtEnd: false // true will return to the first image after the last image is reached } ); } )( jQuery ); </script> |
特にスマートフォンに関する記述はない。
GitHubのReadme.mdを見てみる
https://github.com/brutaldesign/swipebox
optionsの項目は公式ページとほぼ同じものだった。
リリースのバージョンログを見てみる
順番にログを見てみる
https://github.com/brutaldesign/swipebox/releases
どこで変更があったのかを確かめるために順番にログを見ていきます。
https://github.com/brutaldesign/swipebox/releases/tag/1.2.9
いきなりそれっぽいのを見つけました。
差分を見てみる
https://github.com/brutaldesign/swipebox/commit/793e645c596ff90449d60ae35ce7d0b7a2b52ea0
hideBarsOnMobile
というオプションが追加されてデフォルトがtrueになっているようです。
ここで実際にhideBarsOnMobile
をfalseにしてみたのですが、1.3.0.2では適用されませんでした。
コミットログを見てみる
どこかで置き換わってないか、また新たなオプションが追加されいないかを見てみます。
どうやらremoveBarsOnMobile
という記述に置き換わっているようです。
removeBarsOnMobile
の値もデフォルトがtrueですので、falseにすればいいようです。
ちなみに、この技術者ブログでもSwipeboxを使っていますが、画像にタイトルをつけていないので、モーダルのタイトルは表示されませんので悪しからず。
ちょっと待て
( ^o^) <やった!これでスマホでもタイトル表示ができるようになったぞ!
( ˘⊖˘) 。o(待てよ…?これ普通に最新版のソース見ればよかったんじゃ…)
|非圧縮ソース| ┗(☋` )┓三
( ◠‿◠ )☛ 最初に最新版のソースを見ないとはなんとおろかな
▂▅▇█▓▒░(’ω’)░▒▓█▇▅▂うわあああああああ
まとめ的な何か(まとめとは言っていない)
- まずドキュメントやReadmeを見よう
- ドキュメントやReadmeを見てわからなければ非圧縮のソースを見よう
- ソースのどこを見たらわからないなら差分やコミットログを見てみよう
コミットログを見ながら、どういう変更がどのタイミングでを加えられているかを見るのは、けっこう楽しいですよ。
( ◠‿◠ )☛ だが、無駄な時間を使ったという事実は変わりないぞ
▂▅▇█▓▒░(’ω’)░▒▓█▇▅▂うわあああああああ
おしまい。
ピンバック: スマホサイトに最適なスワイプに対応したライトボックス「swipebox.js」 | Web模様
ありがとう神様。これで帰宅できます。