カスタム絵文字をゲタにするやつ

mastodon-custom-emoji-geta.user.js

// ==UserScript==
// @name        カスタム絵文字をゲタにするやつ
// @namespace   https://js4.in/ns/
// @include     https://*
// @version     1.0.5
// @grant       GM_setValue
// @grant       GM_getValue
// @author      Miyagi Hikaru
// @website     https://gist.github.com/hcmiya/26c4b3d966c6415179cea3176afc06e6
// @updateURL   https://gist.github.com/hcmiya/26c4b3d966c6415179cea3176afc06e6/raw/mastodon-custom-emoji-geta.user.js
// ==/UserScript==

// Copyright: © 2018 Miyagi Hikaru <https://mastodon.home.js4.in/@hcm>
// License: CC0 <https://creativecommons.org/publicdomain/zero/1.0/>

// ✨カスタム絵文字をゲタにするやつの設定✨
// 設定を変える場合は GM_setValue の行のコメントアウトを解除した上でその第2引数を編集します

// カスタム絵文字を置換する方法
// 指定値: 以下の整数
// 0: 置換しない / 1: 特定の文字(〓など)で置換 / 2: :shortcode:で置換
// 初期値: 1
// GM_setValue("replace_custom_emoji", 1);

// カスタム絵文字を特定の文字で置換する時のその文字列
// 指定値: 文字列
// 初期値: '〓'
// GM_setValue("replace_character", '〓');

// SVGに置換された絵文字をテキストに戻すかどうか
// 指定値: 真偽値
// 初期値: false
// GM_setValue("replace_svg_emoji", false);

// SVG絵文字のテキスト化時に一部絵文字修飾子・ZWJシーケンスを削除するかどうか
// ※ 対象: U+1F3FB–U+1F3FF / ZWJ+[♂♀]
// 指定値: 真偽値
// 初期値: false
// GM_setValue("remove_emoji_modifier", false);

// ✨設定ここまで✨

// 以下は設定の初期値が入った連想配列です。
// ここを直接編集するとスクリプト更新で変更が失われます。
const tobool = val => !!val;
const testint = val => typeof(val) === 'number' && (val | 0) === val;
const conf = {
  replace_custom_emoji: {value: 1, validate: val => testint(val) && val >= 0 && val <= 2 ? val : 1 },
  replace_character: {value: '〓', validate: val => typeof(val) === 'string' && !!val ? val : '〓' },
  replace_svg_emoji: {value: false, validate: tobool },
  remove_emoji_modifier: {value: false, validate: tobool },
};

const geta_emoji_click = ev => {
  const r = ev.target;
  const img = document.createElement('img');
  img.src = r.dataset.src;
  img.className = 'emojione';
  img.title = r.title;
  img.alt = r.title;
  r.parentNode.replaceChild(img, r);
  ev.stopPropagation();
};

const replacer = e => {
  Array.from(e.querySelectorAll('img.emojione')).forEach(img => {
    if (conf.replace_custom_emoji && img.alt && img.alt[0] === ':' && img.title === img.alt) {
      const r = document.createElement('span');
      r.textContent = conf.replace_custom_emoji === 2 ? img.title : conf.replace_character;
      r.dataset.src = img.src;
      r.title = img.title;
      r.addEventListener('click', geta_emoji_click, true);
      img.parentNode.replaceChild(r, img);
    }
    if (conf.replace_svg_emoji && img.alt && img.alt[0] !== ':') {
      let emojistr = img.alt;
      if (conf.remove_emoji_modifier) emojistr = emojistr.replace(/[\u{1f3fb}-\u{1f3ff}]|\u200d[♂♀]/ug, "");
      img.parentNode.replaceChild(document.createTextNode(emojistr), img);
    }
  });
};

const main_spa = spanode => {
  new MutationObserver(mrs => {
    mrs.forEach(mr => {
      Array.from(mr.addedNodes).forEach(e => {
        if (e.nodeName === 'ARTICLE' || e.nodeName === 'P' && e.parentNode.classList.contains('status__content')) {
          replacer(e);
        }
      });
    });
  }).observe(spanode, {childList: true, subtree: true});
};

const main_html = () => {
  Array.from(document.body.querySelectorAll('.emojify')).forEach(replacer);
};

const main = () => {
  // ローカルストレージから設定読み込みとバリデーション
  for (let k in conf) conf[k] = conf[k].validate(GM_getValue(k, conf[k].value));
  if (!conf.replace_custom_emoji && !conf.replace_svg_emoji) return;

  // Mastodon SPA判別
  const mastodon_spa = document.getElementById('mastodon');
  if (mastodon_spa && mastodon_spa.dataset.props) return main_spa(mastodon_spa);

  // Mastodon静的出力ページ判別
  if (document.body.querySelector('.powered-by > a[href="https://joinmastodon.org"]')) return main_html();
};

main();

version 1.0.4
SPAページだけでなく静的HTML出力にも絵文字置換がはたらくようにさせた

version 1.0.5
SVG絵文字をテキストに戻す時、肌色修飾子とZWJ+♂♀のシーケンスを削除するかのオプションを追加した