先日初めてjQueryプラグインを作成しました。
作成したものは以下のマーカーで塗るようなアニメーションを行うプラグインです。
表示されるとマーカーで線を引くようなアニメーションが開始されます。
一度画面から外れた後に再び表示されたときに再度アニメーションを行うようにもできます。
マーカーの色も自由に設定できます。
マーカーの色も自由に設定できます。
文字を太くしないことも可能です。
ゆっくり塗ることもできますし、少し遅れてアニメーションを開始することもできます。
ストライプデザインのマーカーも追加しました。
作成するにあたっての手順のメモです。
環境はmacです。
最終的な成果物
最初に今回作成したもの一式を置いておきます。
構成
- npmパッケージ化 (npm v6.4.1, node v11.3.0)
- jQueryはnpmではなく外部（別途読み込まれているものを使用）
- 表示されたらアニメーションを開始する機能はnpmの「jquery-inview」を使用
- Babalでトランスパイル
- webpackでBabelやUglifyJSによるトランスパイルや最適化の実行
npmパッケージ作成
npm init
コマンドを実行
パッケージ名などを適宜入力します。
パッケージのインストール
テストやトランスパイルを行うためのパッケージをインストールしました。
- webpack（タスクランナー）
- Babel（トランスパイル）
- ESLint（構文チェック）
- Mocha（テストフレームワーク）
- istanbul（コードカバレッジ計測ツール）
- jsdom（DOMを使用したテスト用）
最終的に「package.json」は以下のようなものになりました。
{
"name": "jquery.marker-animation",
"version": "1.1.1",
"description": "Marker animation jQuery plugin",
"main": "jquery.marker-animation.min.js",
"scripts": {
"test": "npm run lint && npm run cover",
"lint": "eslint src/*.js",
"cover": "NODE_ENV=test istanbul cover --report text _mocha",
"mocha": "NODE_ENV=test mocha",
"develop": "webpack --mode development",
"build": "webpack --mode production"
},
"repository": {
"type": "git",
"url": "https://github.com/technote-space/jquery.marker-animation.git"
},
"keywords": [
"jquery-plugin",
"marker animation"
],
"author": "technote",
"bugs": {
"url": "https://github.com/technote-space/jquery.marker-animation/issues"
},
"homepage": "https://github.com/technote-space/jquery.marker-animation#readme",
"license": "GPL-3.0",
"dependencies": {
"jquery-inview": "^1.1.2"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-register": "^6.26.0",
"eslint": "^5.9.0",
"istanbul": "^0.4.3",
"jquery": "^3.3.1",
"jsdom": "13.0.0",
"mocha": "^5.2.0",
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2"
}
}
npmのversionコマンドで連携されるようにgitの設定を追加しました。
npm version patch
上記コマンドでパッケージのバージョンアップとコミット、タグの作成を行ってくれるようになります。
テストと構文チェックは以下を参考にしました。
webpackの設定
対象のJSファイルの指定や複数のモジュールパターンへの対応（umd）を行うための設定などを行いました。
const webpack = require('webpack');
const p = require('./package');
const banner = `${p.name} ${p.version} - ${p.description}\nCopyright (c) ${ new Date().getFullYear() } ${p.author} - ${p.homepage}\nLicense: ${p.license}`;
const webpackConfig = {
'context': __dirname + '/src',
'entry': './index.js',
'output': {
'path': __dirname,
'filename': `${p.name}.min.js`,
'library': `markerAnimation`,
'libraryTarget': 'umd'
},
'module': {
'rules': [{
'test': /\.js$/,
'exclude': /node_modules/,
'loader': 'babel-loader'
}]
},
externals: {
jquery: {
root: 'jQuery',
commonjs2: 'jquery',
commonjs: 'jquery',
amd: 'jquery'
}
},
'plugins': [
new webpack.BannerPlugin(banner)
]
};
module.exports = webpackConfig;
package.jsonの値を使用してコピーライトやライセンス情報も出力されるようにしています。
モジュールパターンに関しては以下のページで理解しました。
「externals」は外部のjQueryを使用するために必要な設定です。
その他の設定
BabelやESLintのための設定も必要です。
ここまででようやく実装前に必要な設定が終わりです。
PHPに比べてテストフレームワークなどで取りうる選択肢が多く、準備までが大変だと感じました。
実際の機能を実装
実装のときにはumdパターンなどを気にする必要はありません。
それはwebpackがやってくれます。
jQueryプラグインなのでjQueryを使用できるようにする必要がありますが、外部のjQueryを使用する際も
import $ from 'jquery';
でimportするだけです。
webpackで設定されたlibraryTargetやexternalsによって、npmパッケージとして使用される場合や
<script type="text/javascript" src="/assets/jquery.marker-animation.min.js"></script>のように読み込まれて使用される場合などでもいい感じにjQueryが使用されるようにビルドしてくれます。
今回は別のjQueryプラグインを使用してjQueryに機能を追加したため、以下のようなコードになりました。
require('jquery-inview');
import $ from 'jquery';
$.fn.markerAnimation = function (...args) {
return this.each(function () {
const target = $(this);
....
});
};
ビルド
npm run build
でpackage.jsonに設定したbuildスクリプトが実行されます。
webpack --mode production
パッケージの登録
不要なファイルの除外設定
.npmignoreファイルでパッケージに不要なファイル（node_modulesなど）を除外しておきます。
npmユーザの登録
npm set init.author.name "名前" npm set init.author.email "メールアドレス" npm set init.author.url "URL"
npm adduser
パッケージ登録
npm publish
これだけでパッケージが登録され公開状態になりました。
コマンドだけでユーザ登録とパッケージ登録が完了するのは少し驚きました。
まとめ
「jQueryプラグインの作成」「npmパッケージ」のどちらも今回初めて行いました。
普段はサーバサイドの開発ばかりなので、実装までの準備で結構時間を使ってしまいました。
ただ、自分で作ったものが普段利用しているサービスで公開されるのはモチベーションアップに繋がると感じました。
今後もいろいろ作っていきたいと思います。
コメント