JSライブラリをちょっとだけいじりたい・・・そんなとき
PSVRゲーム『Skyrim（スカイリム）』では、酔いのせいで相変わらず１日のプレイ時間は15分程度、
「これが歳をとったということか・・・」
なんてつくづく思ってしまう今日この頃。みなさんおはこんばんちわ、kouraku です。
さて今回は、JSライブラリを使用するときに、「あぁ、そうだ、これをちょっといじれば同じことできるんだ」と今更ながら思ったことを、ざっくりと書こうかなと思います。
何がしたいか、というと・・・
例えば、『slick』というプラグイン。使っている方も多いはず。
このプラグインを使っていて便利だな、と思うのは、イベントに合わせた処理を追加することが簡単にできるところです。 例えば、slick 公式の下の方にあるサンプルでいうと・・・
// On swipe event
$('.your-element').on('swipe', function(event, slick, direction){
console.log(direction);
});
// On edge hit
$('.your-element').on('edge', function(event, slick, direction){
console.log('edge was hit')
});
// On before slide change
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
console.log(nextSlide);
});こんな感じで、何かしらのイベントが起こる時、起こる前などに処理を入れたい場合に、上記で対応が可能だったりします。こうしたオプションは、特に slick の様に clone を使って複製を行っているプラグインなんかでは、絶対に欲しいものです。
すごくいい感じのプラグイン発見！
でもイベントオプションが見当たらない・・・
クライアントさんからの要望を実現するために色々とググってみて、
「あ、これいい！使いやすそう！・・・だけど、オプション少ないなぁ。他探してみるか・・・」
定番以外の機能をサクッと実装したい場合、割とこんな感じの繰り返しで、条件にあったものがないか探したりします。でも結局、最初に「これ！」と思った以上のいい感じのものが見つからない・・・なんてこともよくある話です。
こんなとき、slickにあるようなイベントオプションを自分で追加できれば、なんだか色々と解決できそうな気がしてきますよね。
どうやってるんだろう？
ということで、例えば slick がどのように 'beforeChange' を実装しているか、実際にコードを見てみます。すると・・・
Slick.prototype.slideHandler = function(index, sync, dontAnimate) {
var targetSlide, animSlide, oldSlide, slideLeft, targetLeft = null,
_ = this, navTarget;
:
_.animating = true;
_.$slider.trigger('beforeChange', [_, _.currentSlide, animSlide]);
oldSlide = _.currentSlide;
_.currentSlide = animSlide;
:
'beforeChange' に関する内容はここだけにしか登場しません。'beforeChange' の処理を行わせたい場所で trigger で実行させる、たったこれだけです。
では実践
では、これをイベントオプションのないライブラリにいれて見ましょう。今回は、コンテンツをエンドレスに流してくれるスライダー『endress-river』をみてみましょう。
このライブラリはとてもシンプルな作りなのでわかりやすいと思いますが、オプションがスピード調節、停止機能、再生停止ボタン表示の３つしかありません。
では、このライブラリに、clone してスライダーの準備ができた後に、イベントオプション 'test' を実行させるようにしてみます。HTML、CSS、JSは公式のものを使用します。
公式JSの49行目、「//BOOT」のコメント行の前に、「$line.trigger('test');」といれて見ます。
※このライブラリでは、$(this) に該当するものが $line です。
:
function scrollnews(spazio, tempo) {
$line.animate({ left: "-=" + spazio }, tempo, "linear", function() {
$line.children("li:first").appendTo($line);
$line.css("left", 0);
currentSpazio = $line.children("li:first").outerWidth(true);
currentTempo = tempo / spazio * currentSpazio;
if (run) scrollnews(currentSpazio, currentTempo);
});
}
$line.trigger('test'); // ←これを追加
//BOOT
currentSpazio = $line.children("li:first").outerWidth(true);
currentTempo = currentSpazio / settings.speed * 1000;
:
そして、以下のような感じで 'test' のタイミングで console.log('TEST!!!!!') が呼ばれることを確認して見ましょう。
$("#myUl").on('test',function() {
console.log('TEST!!!!!');
$(this).after('<p>追加してみたよ！</p>')
}).endlessRiver();サンプルをCODEPENに置いて見ました。「追加してみたよ！」の文字列が入っているのと、本ページを開発者ツールで開き、コンソールを確認すると、「TEST!!!!!」が表示されていますね。
See the Pen KQrvLG by bashalog (@bashalog) on CodePen.
しめ
ライブラリをあまりガシガシいじりたくない、でもカスタマイズしないと求めているものが得られない・・・そんな時に使うこともできますね。
ということで、これからもVR酔いの耐性をつけるために、日々トレーニング（＝『Skyrim』をプレイすること）に励みたいと思います！
