先日初めて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パッケージ」のどちらも今回初めて行いました。
普段はサーバサイドの開発ばかりなので、実装までの準備で結構時間を使ってしまいました。
ただ、自分で作ったものが普段利用しているサービスで公開されるのはモチベーションアップに繋がると感じました。
今後もいろいろ作っていきたいと思います。
コメント