Win10のタッチキーボードで入力出来ない「異体字」の絵文字
アメブロの記事を見て歩いていたら、警告マークの「⚠️」を使っている方がいました。 私は「エッ！」と思ったのですが、Win10タッチキーボードで入力すると文字に色が無い「⚠」が表示され、これまで何度も使うのを諦めていたからです。
画像を使ったアメブロ絵文字の場合も有り得るので DevToolsで調べると、これは真正の「絵文字」（フォント）でした。 アメブロの「編集画面」にコピーすると、ちゃんとこの記事の通りにカラーで表示されます。
のページに持ち込んで調べると、この絵文字の正体が判って来ました。
文字の基本コードは両方「\u26A0」ですが、カラー絵文字の方は「\uFE0F」という「異字体セレクタ」が付いて、これが「1文字」として扱われています。
Win10で表示される「異字体」で、絵文字のものを私が確認したのは、これが3個目です。 他の2個は男女のバスケ選手の絵文字で、以下のページに載せています。
「異字体」の絵文字は他にも有るかも知れませんが、Win10の環境では直接入力が出来ず、簡単に表示させるにはコピー&ペーストするしかありません。 これを使っていた方は、Macなどのユーザーでしょうか。「⚠️」の絵文字はIMEに辞書登録できるので、私は登録しておきました。
HTMLに文字コードを書き込んで「異体字」を表示
HTML編集画面で文字コードを入力する事で「異体字」も表示可能でした。 上記の「Unicode文字ツール」でエンコードの種類に「HTML数値文字参照(16進数表記)」を選択すると
⚠️ ➔ 「 ⚠️ 」
という16進数表記が得られ、これをHTML編集枠にペーストすると、「異体字」のこの絵文字も表示させる事が出来ました。 面白いのは「通常表示」から「HTML表示」に戻ると、16進数表記は無くなり絵文字に入れ替わっています。 素粒子みたい。
「Both-WH」の絵文字フィルターを修正しました
そもそも「異体字」の文字を知ったのは、編集ツール「Both-WH」の制作が契機です。 Win10絵文字の一部の文字が行内にあると、スクリプトが「通常表示」「HTML表示」を繋ぐマーク文字の位置を誤ります。 このため、特殊な一部の絵文字が含まれていると警告する仕組みです。 この特殊絵文字フィルターに「⚠️」を追加しました。
「Both-WH」は、「通常表示」で編集中のカーソル位置から、「HTML表示」の編集位置へジャンプを可能にするツールです。 HTML編集を頻繁に使う場合には大変に便利なツールで、パワーユーザーにはお勧めです。
この機会に「Both-WH」を改めて紹介しておきます。
「Both-WH」について
●「Both-WH」は Chrome版またはFirefox版の「Tampermonkey」に登録することで、利用が可能な編集ツールです。
● アメブロの「最新版エディタ」で動作します。 アメブロデフォルトデザインの編集画面でも、Stylus等でアレンジした編集画面でも動作します。
●「通常表示」のカーソル位置で「Ctrl + F8」を押すと、「HTML表示」を開いて、編集していた箇所にカーソルを自動的に表示します。
●「HTML表示」で「Ctrl + F8」を押すと、ショートカットで最後に離れた「通常表示」の位置を表示します。 但し、戻った通常表示枠にはカーソルを入れません。 これは、ショートカット連打によるミスを防ぐためです。
● 通常の記事では、HTMLへ1sec以内に移動出来ます。 ただし、アフィリエイト等のリンクを多く配置したページでは、文字数が見た目より異常に多く、HTML表示を開くのに数秒必要な場合があります。 また、記事が長く、移動場所が文書の最後に近いほど「HTML表示」を開くタイミングが遅くなりますが、これは仕様です。
● 移動元の行中（正確にはp段落）に一部のWin10絵文字が使われている場合は、移動前に「マーク文字を手作業で消してください」と表示されます。 移動後のHTML編集枠で、全角黒のマーク文字を削除してください。
● 特殊な構造のブロック等から移動した場合は、正常に移動出来ない場合があります。 その場合は全角黒のマーク文字が残り、周辺の1文字が不本意に削除されます。 重要な文書でのトラブルは、自己責任とお考えください。
スクリプトのコード
以下のコードを「Tampermonkey」の編集画面にコピー&ペーストしてください。
〔 Both-WH 〕 ver. 0.3
// ==UserScript==
// @name Both-WH
// @namespace http://tampermonkey.net/
// @version 0.3
// @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", check_key);
function check_key(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','\u26A0\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ヵ所の太字部」のコードを書き換える事で、ショートカットキーを変更出来ます。
「Both-WH ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Both-WH ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
