「Both-WH」ver. 0.2 絵文字対策の修正版 / JavaScript

自前の絵文字フィルターを装備

当初は「❶」という文字に絵文字フィルターが「過剰に働く」事を問題にしたのがきっかけです。それからサロゲートペアという技術を知り、更に異体字セレクタの存在と、現代の文字コードをとりまく多くの技術の事を知ることになりました。

今回の「Both-WH」は、それらの経験を新しい絵文字フィルターに統合しています。旧来のモノクロの記号や絵文字、カラーのWin10絵文字の約5/6では、それらを全く意識することなく「通常表示」⇄「HTML表示」の往復が可能になりました。

ユーザーは殆ど遭遇しないと思いますが、移動する行（p要素の段落）に、Win10絵文字の特異な1/6の文字が有った場合は、マーク文字の削除が行われません。

「Both-WH」について

●「Both-WH」は Chrome版またはFirefox版の「Tampermonkey」に登録することで、利用が可能なスクリプトです。

● アメブロの「最新版エディタ」で動作します。アメブロデフォルトデザインの編集画面でも、Stylus等でアレンジした編集画面でも、正常に動作します。

●「通常表示」のカーソル位置で「Ctrl + F8」を押すと、「HTML表示」を開いて、その箇所にカーソルを自動的に表示します。

●「HTML表示」で「Ctrl + F8」を押すと、ショートカットで最後に離れた「通常表示」の位置を表示します。但し、戻った通常表示枠にはカーソルを入れません。これは、ショートカット連打によるミスを防ぐためです。

● 通常の記事では、HTMLへ1sec以内に移動出来ます。ただし、アフィリエイト等のリンクを多く配置したページでは、文字数が見た目より異常に多く、HTML表示を開くのに数秒必要な場合があります。また、記事が長く、移動場所が文書の最後に近いほど「HTML表示」を開くタイミングが遅くなりますが、これは仕様です。

● 移動元の行中（正確にはp段落）に一部のWin10絵文字が使われている場合は、移動前に「マーク文字を手作業で消してください」と表示されます。移動後のHTML編集枠で、黒のマーク文字を削除してください。

● 特殊な配置構造のブロック等から移動した場合は、正常に移動出来ない可能性があります。その場合は黒のマーク文字が残り、周辺の1文字が不本意に削除されます。重要な文書でのトラブルは、自己責任とお考えください。

● 旧バージョンがある場合は、「Tampermonkey」の管理画面で旧バージョンのスクリプトを削除するか無効にしてください。

スクリプトのコード

以下のコードを「Tampermonkey」の編集画面にコピー&ペーストしてください。

〔 Both-WH 〕 ver. 0.2

// ==UserScript==
// @name         Both-WH
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  絵文字フィルター更新版
// @author       Ameba Blog User
// @match        https://blog.ameba.jp/ucs/entry/srventry*
// @grant        none
// ==/UserScript==


( window.onload = function() {
    'use strict';

var native_line; // 通常表示のスクロール位置

var target = document.getElementById('cke_1_contents'); // 監視 target は3箇所で共用される
var monitor1 = new MutationObserver( catch_key );
monitor1.observe(target, {childList: true}); // ショートカット待受け開始

catch_key();

function catch_key() {

if( document.querySelector('.cke_wysiwyg_frame') != null ){
var editor_iframe = document.querySelector('.cke_wysiwyg_frame');
var iframe_doc = editor_iframe.contentWindow.document;

iframe_doc.addEventListener("keydown", function (event) {
    if (event.which == 17 || event.ctrlKey == true ) {
    if (event.which == 119 || event.keyCode == 119) { set_mark(); }}} );

var set_mark = function() {

var selection = iframe_doc.getSelection();
var range = selection.getRangeAt(0);
var insert_node = iframe_doc.createTextNode("█"); // U+2588 Full Glock
range.insertNode( insert_node ); // カーソル位置にマーク文字を書き込む

var wysiwyg = iframe_doc.querySelector('html');
native_line = wysiwyg.scrollTop; // 通常表示のスクロール位置を記録

document.querySelector('button[data-mode="source"]').click( in_CodeMirror() ); // HTML表示に移動

function in_CodeMirror() {
    var monitor2 = new MutationObserver( task_CodeMirror );
    monitor2.observe(target, {childList: true});

function task_CodeMirror() {

function key_in( key_Code ) {
    var keyEvent = new KeyboardEvent("keydown", { keyCode: key_Code });
    document.querySelector('.CodeMirror textarea').dispatchEvent( keyEvent ); }

var activeline;
var mark_regex = RegExp( "█" );

var line_count=0;
for( var j=0; j<3000; j++ ) {
    activeline = document.querySelector('.CodeMirror-activeline pre');
    if( mark_regex.test( activeline.textContent ) != true ){ line_count +=1; key_in(40); }
    else { break; }} // アクティブ行を下方へ移動

var zero_pattern = [
    '\uD83C\uDFC3','\uD83C\uDFC4','\uD83C\uDFCA','\uD83C\uDFCB',
    '\uD83C\uDFCC','\uD83C\uDFF3','\uD83D\uDC31','\uD83D\uDC41',
    '\uD83D\uDC68','\uD83D\uDC69','\uD83D\uDC6E','\uD83D\uDC6F',
    '\uD83D\uDC71','\uD83D\uDC73','\uD83D\uDC81','\uD83D\uDC86',
    '\uD83D\uDC87','\uD83D\uDE45','\uD83D\uDE46','\uD83D\uDE47',
    '\uD83D\uDE4B','\uD83D\uDE4D','\uD83D\uDE4E','\uD83D\uDEA3',
    '\uD83D\uDEB4','\uD83D\uDEB5','\uD83D\uDEB6','\uD83E\uDD26',
    '\uD83E\uDD37','\uD83E\uDD38','\uD83E\uDD39','\uD83E\uDD3C',
    '\uD83E\uDD3D','\uD83E\uDD3E','\uD83E[\uDDD6-\uDDDF]',
    '\u0023\uFE0F\u20E3',
    '[\u002A]\uFE0F\u20E3',
    '[\u0030-\u0039]\uFE0F\u20E3',
    '\u26F9\uFE0F'
    ].join('|');

var zero_regex = RegExp( zero_pattern );
var zero_stop=0;
if( zero_regex.test( activeline.textContent ) == true ){
    alert("記入されたマーク文字 █ を手作業で削除してください");
    zero_stop=1; }

var real = activeline.textContent.match(/./ug);
var real_result =0;
for( var k=0; k <=real.length; k++) {
   if( real[k] !="█" ){ real_result += 1; }
   else if( real[k] =="█" ){ break;} }

real_result -= 3*( activeline.getElementsByClassName('cm-tab').length ); // タブ文字補正

for( var i=0; i <= real_result; i++) { key_in(39); } // アクティブ行内で右方へ移動

if( zero_stop ==1 ){ key_in(37); }
else{ key_in(8); }


var codemirror_scroll = document.querySelector('.CodeMirror-scroll');
var win_height = codemirror_scroll.clientHeight;
var styles = getComputedStyle( document.querySelector('.cm-bracket') );
var line_height = parseFloat( styles.lineHeight );
var scroll =0;
if( line_count*line_height >= 0.4*win_height ){
    if( line_count*line_height >= win_height ){ scroll = 0.6*win_height; }
    else { scroll = line_count*line_height - 0.4*win_height; } }
codemirror_scroll.scrollTop += scroll;

document.querySelector('.CodeMirror textarea').focus(); // 入力窓にカーソルを入れる

monitor2.disconnect(); } // task_CodeMirrorの終了で監視ループを抜ける
} // in_CodeMirror
} // set_mark
} // WYSIWYG表示での場合


else if( document.querySelector('.CodeMirror') != null ) {

document.querySelector('.CodeMirror').addEventListener("keydown", function (event) {
    if (event.which == 17 || event.ctrlKey == true ) {
    if (event.which == 119 || event.keyCode == 119) { to_native_line(); }}} );

var to_native_line = function() {

document.querySelector('button[data-mode="wysiwyg"]').click( in_wysiwyg() ); // 通常表示に移動

function in_wysiwyg() {
    var monitor3 = new MutationObserver( task_wysiwyg );
    monitor3.observe( target, { childList: true });

task_wysiwyg();

function task_wysiwyg() {

if( document.querySelector('.cke_wysiwyg_frame') !=null ) {
    editor_iframe = document.querySelector('.cke_wysiwyg_frame');
    iframe_doc = editor_iframe.contentWindow.document;
    var wysiwyg = iframe_doc.querySelector('html');

wysiwyg.scrollTop = native_line; // 記録された通常表示のスクロール位置に移動

if( wysiwyg.scrollTop ==native_line ) {
    monitor3.disconnect(); }} } // task_wysiwyg の終了で監視ループを抜ける

} // in_wysiwyg
} // to_native_line
} // HTML表示での場合

} // catch_key

})();

上記のコードは、ショートカットキーに「Ctrl + F8」を利用しています。

コード中の「2ヵ所の太字部」を以下のコードに差し替える事で、「Pause」キーをショートカットキーに変更出来ます。「19」が「Pause」キーの「KeyCode」です。

上側の太字部

if (event.which == 19 || event.keyCode == 19) { set_mark(); }} );

下側の太字部

if (event.which == 19 || event.keyCode == 19) { to_native_line(); }} );

「Both-WH ⭐」最新版について

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

●「Both-WH ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。