2021年になって初めてjqueryプラグイン（っぽいもの）を作ったのでメモ。
作ったもの
Androidで7.1くらいまで使用されていた黄色い顔の絵文字（通称：黄色スライムくん）をWebフォント化してアイコンピッカーで選べるようにしたプラグインです。
全工程のメモ
Noto-emojiのリポジトリからソースダウンロード
黄色スライムくんは上記リポジトリの古いソースに含まれます。
ソースをダウンロードし、展開した中身のpngディレクトリに存在する黄色スライムくんを抽出。
黄色スライムくんのファイル名のリストを作成し、そこから対応するsvgファイルを抽出。
理由は分かりませんがいくつかの黄色スライムくんのsvgファイルが見つかりませんでした。。
IcoMoonでWebフォント化
IcoMoonというWebサービスを使用してWebフォント化しました。
ここでもいくつかのファイルはそのままでは変換が出来なく、脱落しました。。
具体的にはsvgデータ内でlinearGradientグラデーションが使用されているものは色が適用されずに真っ黒となり、ストロークが使用されているものは塗りつぶされてしまうようでした。。
グラデーションが使用されているアイコンは黄色スライムくんの単色（#fcc21b）で塗りつぶす修正を行ってからWebフォント化しました。
ストロークの件はsvg自体を編集すればいいみたいですが、その辺明るくないので除外しました。。；；
IcoMoonで生成されたアイコンについて
ダウンロードしたファイル内にデモ用のhtmlがあるため、そこで表示を確認したところマルチカラーを実現するために複数のhtml要素を使用していることが分かりました。
↑で選択中のアイコンは<i>要素の中に5つの<span>要素が並んでいます。
2個目以降のパスはmargin-left: -1em;の設定によって一つ前の要素に重なることでマルチカラーのフォントを実現していました。
アイコンピッカー（jqueryプラグイン）化
(function($){
var methods = {
init : function(options) {
var elements = this
var settings = $.extend(true, $.fn.test.defaults, options);
console.log(settings)
elements.each(function() {
// 処理をここに記述する
});
return this;
}
};
$.fn.test = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || ! method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.test');
}
};
$.fn.test.defaults = {
default: true,
};
})(jQuery)
上記参考リンクよりコピー
いきなりアイコンピッカー自体を自作するのは難易度高そうだったので↑のプラグインテンプレートを元に、既存のfontIconPickerというアイコンピッカープラグインに処理を渡す形で作成しました。
/*global require */
import '@fonticonpicker/fonticonpicker/dist/js/jquery.fonticonpicker.min';
(function($){
"use strict";
const yellowBlobIconsPathCountMap = require('../icomoon_json/converted_selection.json');
let methods = {
init: function(options) {
let staticFontIconPickerSettings = {
source: Object.keys(yellowBlobIconsPathCountMap),
iconGenerator: icon => {
return $.createYellowBlobIcon(icon);
}
};
this.fontIconPicker($.extend(options, staticFontIconPickerSettings));
return this;
}
};
$.fn.yellowBlobPicker = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || ! method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.yellowBlobPicker');
}
};
$.extend({
createYellowBlobIcon: icon => {
if (!(icon in yellowBlobIconsPathCountMap)) {
return null;
}
let html = `<i class='${icon}'>`;
for (let path = 1; path <= yellowBlobIconsPathCountMap[icon]; path++) {
html += `<span class=\'path${path}\'></span>`;
}
html += '</i>';
return html;
}
});
})(jQuery);
initメソッド内で上書きしているsource、iconGeneratorがfontIconPickerプラグインで黄色スライムくんを表示するのに必要な設定になります。
jqueryのextendメソッドを使用し、渡されたオプションに対して後からsourceとiconGeneratorを上書きしています。
ソース内でyellowBlobIconsPathCountMapという名前で読み込んでいるjsonにはアイコン名と↑の方に書いた<span>要素の数をマッピングしたデータが格納されています。
このプラグインを実際に使用する場合、アイコンピッカー外にアイコンを表示したいケースが多々あると思われるので表示用の関数をjqueryオブジェクトに追加しています。
webpackビルドの辺りは省略。
動作確認する
demo_iconpicker.htmlから抜粋
<head>
<link rel="stylesheet" href="css/jquery.yellow-blob-picker.css">
</head>
<body>
<input type="text" id="icon-picker" name="picker1" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="js/jquery.yellow-blob-picker.js"></script>
<script type="text/javascript">
$(() => {
let $picker = $('#icon-picker').yellowBlobPicker({
iconsPerPage: 30,
emptyIcon: false,
});
$picker.on('change', e => {
$('.display-icon').html($.createYellowBlobIcon(e.target.value));
});
$picker.trigger('change');
});
</script>
</body>
</html>
yellowBlobPickerという関数を実行することでfontIconPickerのアイコンピッカーが画面表示されることが確認できました。
また、fontIconPickerプラグインのオプションがそのまま設定できることも確認できました。
npmjsへの公開について
今のところnpmjsで公開はしていません。
以下のコマンドでインストールは可能です。
npm install git+https://github.com/imo-tikuwa/yellow-blob-picker.git
WYSIWYGエディタプラグインに組み込み
summernoteというWYSIWYGテキストエリアプラグイン内で使用できるようにしたかったのですが、Webフォントが複数のHTMLタグで構成されているためエディタ内の改行などのタイミングで崩れてしまうのをうまく解決できませんでした。。
↑アイコン1個表示するだけならギリギリ何とかなる。
↑カーソルが動かなくなったり改行したタイミングで黄色スライムくんの目が取れたりします。。
ブランチ切って作業してたので一応以下から残骸が確認できます。。
https://github.com/imo-tikuwa/yellow-blob-picker/tree/demo-wysiwyg