GitHubのコミットログを追ってjQueryプラグインの機能追加のタイミングを探してみた

※この記事はフロントエンドをちょっと触りたいなと思っているデザイナーさん向けの記事です。

先日、同僚のデザイナーに「『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の項目には以下の記述。

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

;( 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を見てわからなければ非圧縮のソースを見よう
ソースのどこを見たらわからないなら差分やコミットログを見てみよう

コミットログを見ながら、どういう変更がどのタイミングでを加えられているかを見るのは、けっこう楽しいですよ。

( ◠‿◠ )☛ だが、無駄な時間を使ったという事実は変わりないぞ

▂▅▇█▓▒░(’ω’)░▒▓█▇▅▂うわあああああああ

おしまい。

GitHubのコミットログを追ってjQueryプラグインの機能追加のタイミングを探してみた

バージョンの違いを確認してみる