Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

browserifyでjQueryのプラグインを使用する方法

gulpでbrowserifyを使う際に、jQueryのプラグインをどうやって$にsetしようかなということを長い間なやんでいました。$をglobalにsetするのも気がひけるのでどうにか、ローカルだけで解決できないかと色々なjQueryのプラグインのソースをみたりした結果、下記の方法が一番しっくり来ましたので今回紹介します。

package.json

gulp-browserfiyおよび、jquery-browserifyをnpm installでダウンロードします。

{
	"name": "gulpfile_generator",
	"version": "1.1.0",
	"description": "This is a genarator for gulpfile and package.json",
	"author": "steelydylan",
	"url": "http://horicdesign.com",
	"license": "MIT License",
	"keywords": "gulp",
	"devDependencies":{
		"gulp": "*",
		"gulp-plumber": "*",
		"gulp-rename": "*",
		"gulp-browserify": "*",
		"gulp-uglify": "*",
		"gulp-concat": "*",
		"gulp-notify": "*",
               "jquery-browserify": "*"
	}
}

gulpfile.js

.pipe(browserify({jquery:'jquery-browserify'}))この記述により、var $ = require("jquery-browserify");できるようになります。

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var rename = require('gulp-rename');
var browserify = require('gulp-browserify');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var notify = require('gulp-notify');
gulp.task('js',function(){
	gulp.src(['components/timeline/js/src/timeline.js'])
		.pipe(plumber({
			handleError: function (err) {
				console.log(err);
				this.emit('end');
			}
		}))
  		.pipe(browserify({jquery:'jquery-browserify'}))
		.pipe(rename({
			suffix: '.min'
		}))
		.pipe(uglify())
		.pipe(gulp.dest('components/timeline/js/dist'))
  		.pipe(notify('js task finished'));
});

jQuery Plugin

今回の記事の肝はプラグイン側にあります。下のようなテンプレートにすることで、main.jsでプラグインをrequireして、呼び出す事が可能になります。

(function (factory) {
    if (typeof module === 'object' && module.exports){
        module.exports = factory;
    }else{
        factory(jQuery);
    }
}(function($){
	$.fn.autoAlign = function(opt){
            //普段通りjQueryに対する拡張内容を記述
        }
}));

main.js

先ほどのプラグインをvar autoAlign = require('./autoAlign.js');のようにして、呼び出し、autoAlign($)とすることで、console.log($.fn.autoAlign);としたときにちゃんと、$.fn.autoAlignに関数の内容がセットされているのが分かるかと思います。

(function(){
	var $ = require('jquery-browserify');
	var autoAlign = require('./autoAlign.js');
	autoAlign($);
        console.log($.fn.autoAlign);
})();

jquery.Photostack.jsを作りました.

写真をランダムな角度で重ねて、クリックすると順番を入れ替えるシンプルなjQueryプラグインを作りました。下のデモをご覧ください。
写真をクリックすると順番が入れ替わると思います。

使い方(例)

下記のソースのようにjquery.Photostack.cssおよび、jquery.Photostack.jsを読み込んでください。

<link rel="stylesheet" href="jquery.Photostack.css">
<script src="jquery.Photostack.js"></script>

その後、下のソースのように記述します。この際オプションはあってもなくても大丈夫です。

$(".photostack").Photostack({
    	top:40,
    	left:500,
    	degFrom:-20,
    	degTo:20
});

オプション

  • topアニメーション時の下方向への移動量
  • leftアニメーション時の左方向への移動量
  • degFrom写真を配置する角度の乱数の下限
  • degTo写真を配置する角度の乱数の上限

Github

Githubで公開していますので、是非ご利用下さい。



スクロール量に応じて要素を固定するjQueryプラグインを作った。

スクロール量に応じて要素を固定させるためのjQueryプラグインはいくつかあります。しかし、スクロールしたい要素の親要素や前の要素を指定したり、プラグインを有効にする条件を設定できるプラグインがなかったので今回自分でプラグインを作ってみました。
jquery.autoStick.jsです。

デモ

デモではスクロールするとキャラクターが親要素「.js-wrapper」内で固定されます。
また、ウィンドウサイズが768px以下だとキャラクターが固定されないように設定されています。
http://horicdesign.com/sample/autoStick

使い方(例)

$(".js-stick").autoStick({
	wrapperElement:".js-wrapper",
	beforeElement:".js-top",
	marginTop:20,
});

オプション

  • wrapperElementスクロール量を計測する親の要素
  • beforeElementスクロール量がbeforeElementの下限値とmarginTopを足した値を超えた所でfixedを開始する
  • marginTop親要素もしくはbeforeElementからの距離
  • marginBottom親要素の下限値からの距離
  • enableConditionこのプラグインを有効にする条件を指定

デフォルト値

var defaults = {
	wrapperElement:"body",
	beforeElement:null,
	marginTop:20,
	marginBottom:20,
	enableCondition:function(){
		return true;
	}
}

enableConditionの使い方

ウィンドウ幅が768px以下の時にプラグインを無効化したい場合、関数で返り値をfalseにしましょう。
有効にしたい場合はtrueです。

enableCondition:function(){
	if($(window).innerWidth() > 768){
		return true;
	}else{
		return false;
	}
}

githubで公開しています

是非使ってみてください。
https://github.com/steelydylan/jquery.autoStick.js


画面サイズに応じてカラムの高さを揃えてくれるjQueryプラグインを作った

作ったもの

今回は画面幅に応じて指定したカラム数ごとに高さを調整してくれるjQueryプラグインをつくりました。
たとえば、スマートフォンの時は2カラムずつ高さをそろえて、PCの時は4カラムずつ高さを揃えることができます。
また、画面幅を縮めた際にもその画面幅に応じてカラムの高さを揃えてくれます。

省エネ

$(window).resizeをイベントリスナーとして使用しているのですが、リサイズが終わった段階で、命令が発動するようにしています。
また複数メソッドが使用されても$(window).resizeは一度しか登録されません。

使い方

$(".js-autoAlign").autoAlign({
    columns:2,
    columnsTablet:[768,3],
    columnsDesktopSmall:[980,4],
    columnsDesktop:[1200,6]
});

Bootstrapなどを使っている人はピンと来る作りになっています。
上の場合だと、画面幅が768px未満の場合は2カラム、画面幅が768px以上980px未満なら3カラム、980px以上1200px未満なら4カラム、1200px以上だと6カラムずつカラムの高さを揃えます。

ソース

今回作ったプラグインはgithubで公開しています。みなさんよろしければ是非使ってみてください



堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド