慣れたユーザー向け「絵文字コードのみ」の入力機能

 

「FantAwesome絵文字」の素性 

「FantAwesome絵文字」は Webフォントです。 ユーザーのPCやスマートフォンのOSにフォントがあるのではなく、ネット上の専用サーバーにフォントが用意されていて、文字が必要な時にブログ記事で画像を表示する時の様に、専用サーバーからフォントデータを呼び出して、絵文字を表示しています。(ブログ記事の画像は、ブログシステムの画像サーバーから呼び出して表示しています)

 

また、絵文字を他のフォント種(記事本文に指定されたフォント種)の間に挿入して表示するために、独自の絵文字ごとのHtmlコードを使っています。 例えば、良く使われるリンクマークは、下の様な「i要素」の形で埋め込んで表示します。

 

<i class="fas fa-external-link-alt fa-sm"></i>

 

実は、これだけで「FantAwesome絵文字」の絵文字を表示できるわけではなく、もうひとつ重要な「FantAwesomeの呼込み」の環境が必要です。 ブログサイトが最初からこの環境下にある場合は、「呼込み」の必要がありません。 ただ、アメブロの場合は「呼込み」を行う必要があります。 その方法は、以下のマニュアルページ   の最初の「環境構築」を参照ください。

 

 

アメブロ編集画面上での扱い注意 

「FantAwesome」の名誉のために書きますが、上記の「Html」コードは、自分のサイトを運営する様な場合の基本的な絵文字コードです。

 

しかし、ブログの編集環境は少々特殊です。 ユーザー編集の補助機能が動作し、絵文字コードを異物扱いにする傾向がり、絵文字の前後に「盾」を用意しないと、一般の文字の様には扱えない場合があります。

 

絵文字が消されない条件

◎行の先頭に絵文字を置かない

 ➔ つまり手前に「半角空白」以外の何か別の文字が必要。

◎「iタグ」の中に何かの文字が必要

 ➔ この文字は「半角空白」でもOK。

 

絵文字の後に文字を書き難い

◎絵文字をキャレットは絵文字の手前に入ってしまう

 ➔ 絵文字の後方に文字を書くと、「iタグ」の中に書き込まれ太字になる。

 

これらの扱い難さを改善するために「FontAwesome Palette ⭐」は、「半角空白」を「iタグ」の中に置き、前後に「盾」としての「ノーブレークスペース」を記入しています。「ノーブレークスペース」は外見上は「半角空白」と同じですが、コードが違い、異物扱いで消される事はありません。 

 

 

扱い難さの克服 

上記の運用の扱い難さを改善するため、前後の「ノーブレークスペース」の「盾」は判り易く、扱い易いと判断したものです。 とはいえ、最初に周囲の文字を書いてから「絵文字」を挿入すれば「盾」は不要なのです。

 

「FontAwesome」の扱い方が判って来ると、自然に周囲から記入する様になりますが、そうなると今度は「盾」を削除するのが不便です。

 

そこで慣れたユーザー向けに、「絵文字コードのみ」の入力機能を作りました。 先に周囲の文字を入力してから「絵文字」を入力するのに適した機能です。

 

 

 

 

 「Shift+左Click」で記入する

通常は「専用パレット」上の絵文字を「左Click」で記入します。

 

● 絵文字パレットを「左Click」した場合。

 

 

 

それに対して「Shift+左Click」すると、前後の「盾」の「半角空白」が無い「絵文字コード」が入力されます。

 

● 絵文字パレットを「Shift+左Click」した場合。

 

 

 

◎「Shift+左Click」を使う時の注意

▪他の文字の間に記入する場合のみの利用が推奨です。

▪周囲に文字が無い場合は、意図せず削除されたり、後方の入力で難儀します。

 

 

 

 ヘルプボタンを設置

「専用パレット」の上部にヘルプボタンを設置しました。「絵文字」の入力は、アメブロ絵文字と同様で説明不要ですが、「Shift+」の操作などはマニュアルでの説明が必要と判断しました。

 

 

 

 

「FontAwesome Palette」の扱い方

このツールは、アメブロ絵文字と同じ操作で直感的に扱えますが、パレットのカスタマイズなど、詳細については以下の操作マニュアルを参照ください。

 

 

 

 

「FontAwesome Palette」を利用するには

このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。

 

❶「Tampermonkey」を導入します

◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。

既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。 

拡張機能の導入については、以下のページに簡単な説明があるので参照ください。

 

 

❷「Tampermonkey」にスクリプトを登録します

◎「Tampermonkey」の「」マークの「新規スクリプト」タブを開きます。

 

 

 

◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。

 

〔コピー方法〕 軽量シンプルなツール「PreBox Button   」を使うと

  コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

  の操作で、掲載コードのコピーが可能になります。

 

◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。

 

 

〔 FontAwesome Palette 〕 ver. 0.5

// ==UserScript==
// @name          FontAwesome Palette
// @namespace  http://tampermonkey.net/
// @version      0.5
// @description  FontAwesome絵文字の記入ツール
// @author       Ameba Blog User
// @match        https://blog.ameba.jp/ucs/entry/srventry*
// @exclude      https://blog.ameba.jp/ucs/entry/srventrylist.do*
// @grant         none
// ==/UserScript==


pannel();

function pannel(){

    // 🟠🟠 以下のリストの行を編集・追加して、専用パネルのリストをカスタマイズできます。

    let FontAwesome_list=
        '<li class="fap_category">矢印</li>'+ // 🟦🟦🟦
        '<li><i class="fa-solid fa-arrow-rotate-right"></i></li>'+
        '<li><i class="fa-solid fa-arrows-rotate"></i></li>'+
        '<li><i class="fas fa-external-link-alt fa-sm"></i></li>'+
        '<li><i class="fa-solid fa-arrow-up-right-from-square"></i></li>'+
        '<li><i class="fa-solid fa-arrow-right-to-bracket fa-rotate-90"></i></li>'+
        '<li><i class="fa-solid fa-share-from-square"></i></li>'+
        '<li><i class="fa-solid fa-share fa-rotate-90"></i></li>'+
        '<li><i class="fa-solid fa-arrow-left"></i></li>'+
        '<li><i class="fa-solid fa-arrow-right"></i></li>'+
        '<li><i class="fa-solid fa-arrow-up"></i></li>'+
        '<li><i class="fa-solid fa-arrow-down"></i></li>'+
        '<li><i class="fa-solid fa-up-right-and-down-left-from-center fa-rotate-90"></i></li>'+
        '<li><i class="fa-solid fa-up-down-left-right"></i></li>'+

        '<li class="fap_category">円形のデザイン</li>'+ // 🟦🟦🟦
        '<li><i class="fa-solid fa-circle-info"></i></li>'+
        '<li><i class="fa-regular fa-circle-question"></i></li>'+
        '<li><i class="fa-solid fa-circle-question"></i></li>'+
        '<li><i class="fa-solid fa-circle-xmark"></i></li>'+
        '<li><i class="fa-regular fa-circle-xmark"></i></li>'+
        '<li><i class="fa-solid fa-circle-user"></i></li>'+
        '<li><i class="fa-regular fa-face-smile"></i></li>'+

        '<li class="fap_category">汎用</li>'+ // 🟦🟦🟦
        '<li><i class="fa-solid fa-ellipsis-vertical"></i></li>'+
        '<li><i class="fa-solid fa-bars"></i></li>'+
        '<li><i class="fa-solid fa-gear"></i> </li>'+
        '<li><i class="fa-solid fa-house"></i></li>'+
        '<li><i class="fa-solid fa-magnifying-glass"></i></li>'+
        '<li><i class="fa-solid fa-pen"></i></li>'+
        '<li><i class="fa-solid fa-pen-to-square"></i></li>'+
        '<li><i class="fa-solid fa-tag"></i> </li>'+
        '<li><i class="fa-solid fa-palette"></i></li>'+
        '<li><i class="fa-solid fa-chart-simple"></i></li>'+
        '<li><i class="fa-solid fa-user"></i> </li>'+
        '<li><i class="fa-solid fa-image"></i> </li>'+
        '<li><i class="fa-solid fa-music"></i> </li>'+
        '<li><i class="fa-solid fa-microphone"></i></li>'+
        '<li><i class="fa-solid fa-quote-left"></i></li>'+
        '<li><i class="fa-solid fa-lock"></i> </li>'+
        '<li><i class="fa-solid fa-unlock"></i> </li>'+
        '<li><i class="fa-solid fa-camera"></i></li>'+
        '<li><i class="fa-solid fa-video"></i></li>'+
        '<li><i class="fa-solid fa-triangle-exclamation"></i></li>'+
        '<li><i class="fa-solid fa-wifi"></i></li>'+
        '<li><i class="fa-solid fa-crop-simple"></i></li>'+
        '<li><i class="fa-solid fa-expand"></i></li>'+
        '<li><i class="fa-solid fa-compress"></i></li>'+
        '<li><i class="fa-solid fa-toggle-on"></i></li>'+
        '<li><i class="fa-solid fa-toggle-off"></i></li>'+
        '<li><i class="fa-solid fa-power-off"></i></li>'+
        '<li><i class="fa-solid fa-mug-hot"></i></li>'+
        '<li><i class="fa-solid fa-utensils"></i></li>'+
        '<li><i class="fa-solid fa-mobile-screen-button"></i></li>'+
        '<li><i class="fa-solid fa-desktop"></i></li>'+
        '<li><i class="fa-solid fa-computer-mouse"></i></li>'+

        '<li class="fap_category">ファイル フォルダ 文具</li>'+ // 🟦🟦🟦
        '<li><i class="fa-solid fa-file"></i></li>'+
        '<li><i class="fa-regular fa-file"></i></li>'+
        '<li><i class="fa-regular fa-copy"></i></li>'+
        '<li><i class="fa-regular fa-clone"></i></li>'+
        '<li><i class="fa-regular fa-folder"></i></li>'+
        '<li><i class="fa-regular fa-folder-open"></i></li>'+
        '<li><i class="fa-solid fa-thumbtack"></i></li>'+
        '<li><i class="fa-solid fa-paperclip"></i></li>'+

        '<li class="fap_category">ファビコン カンパニー固有</li>'+ // 🟦🟦🟦
        '<li><i class="fa-brands fa-github"></i> </li>'+
        '<li><i class="fa-brands fa-facebook-f"></i></li>'+
        '<li><i class="fa-brands fa-twitter"></i> </li>'+
        '<li><i class="fa-brands fa-instagram"></i> </li>'+
        '<li><i class="fa-brands fa-youtube"></i></li>'+
        '<li><i class="fa-brands fa-wordpress"></i></li>'+
        '<li><i class="fa-brands fa-apple"></i> </li>'+
        '<li><i class="fa-brands fa-amazon"></i></li>'+
        '<li><i class="fa-brands fa-cc-amazon-pay"></i></li>'+
        '<li><i class="fa-brands fa-line"></i></li>'+
        '<li><i class="fa-brands fa-chrome"></i></li>'+
        '<li><i class="fa-solid fa-street-view"></i></li>'+
        '<li><i class="fa-brands fa-edge"></i></li>'+
        '<li><i class="fa-brands fa-firefox"></i></li>'+
        '<li><i class="fa-brands fa-windows"></i></li>'+
        '<li><i class="fa-brands fa-square-font-awesome"></i></li>';



    // システムコード ========================================

    let help_url=
        'https://ameblo.jp/personwritep/entry-12823817692.html';

    let FA_help=
        '<a class="fap_help" href="'+ help_url +'" target="_blank">'+
        '<svg width="20" height="20" viewBox="0 0 150 150">'+
        '<path  fill="#fff" d="M66 13C56 15 47 18 39 24C-12 60 18 146 82 137C92 '+
        '135 102 131 110 126C162 90 128 4 66 13M68 25C131 17 145 117 81 '+
        '125C16 133 3 34 68 25M69 40C61 41 39 58 58 61C66 63 73 47 82 57C84 '+
        '60 83 62 81 65C77 70 52 90 76 89C82 89 82 84 86 81C92 76 98 74 100 66'+
        'C105 48 84 37 69 40M70 94C58 99 66 118 78 112C90 107 82 89 70 94z">'+
        '</path></svg></a>';

    let css=
        '.fap_menu_wrapp { position: fixed; top: 15px; left: calc(100% - 310px); '+
        'z-index: 20; box-shadow: 20px 20px 60px 0 rgb(0 0 0 / 20%); display: none; } '+
        '.fap_menu { '+
        'font-family: Meiryo; font-size: 16px; line-height: 1.6; width: 276px; '+
        'padding: 8px; border: 1px solid #009688; border-radius: 4px; '+
        'background: #fff; box-shadow: inset 0 0 0 8px #eee; user-select: none; } '+
        '.fap_title { display: flex; justify-content: space-between; align-items: center; '+
        'padding: 4px 12px 2px; border-bottom: 8px solid #eee; '+
        'color: #fff; font: 16px Meiryo; background: #2196f3; } '+
        '.fap_help svg { vertical-align: -5px; } '+
        '.fap_close { display: inline-block; border: 1px solid #fff; border-radius: 2px; '+
        'height: 19px; line-height: 21px; padding: 0 3px; margin-bottom: 1px; '+
        'cursor: pointer; } '+
        '.fap_close:hover { color: #2196f3; background: #fff; } '+
        '.fap_ul { display: flex; flex-wrap: wrap; padding: 4px 0 4px 2px; } '+
        '.fap_ul li { width: 30px; margin: 4px 2px; padding: 4px 0 0; text-align: center; '+
        'font-size: 20px; line-height: 26px; } '+
        '.fap_ul li:hover { cursor: pointer; outline: 1px solid #2196f3; } '+
        '.fap_ul li.fap_category { display: flex; align-items: center; font-size: 14px; '+
        'width: 100%; margin: 4px -2px; padding: 3px 15px 0; background: #eee; '+
        'outline: none; cursor: unset; } '+
        '.fap_ul li.fap_category:first-child { margin: -10px -2px 4px; } '+
        '#fap_tab { box-shadow: none; } '+
        '#fap_tab:hover svg { fill: #2196f3; }';

    let menu_wrapp=
        '<div class="fap_menu_wrapp"><div class="fap_menu">'+
        '<div class="fap_title">'+
        '<b>FontAwesome</b>   '+
        FA_help +
        '<span class="fap_close">✖</span>'+
        '</div>'+
        '<div>'+
        '<ul class="fap_ul">'+
        FontAwesome_list +
        '</ul>'+
        '</div></div>'+
        '<style>'+ css +'<.style></div>';

    if(!document.querySelector('.fap_menu_wrapp')){
        document.body.insertAdjacentHTML('beforeend', menu_wrapp); }

} // pannel()




function disp_pannel(){
    let fap_menu_wrapp=document.querySelector('.fap_menu_wrapp');
    if(fap_menu_wrapp){
        fap_menu_wrapp.style.display='block';

        let tab_svg=document.querySelectorAll('.p-accessoryTab__list svg');
        for(let k=0; k<tab_svg.length; k++){
            tab_svg[k].style.outlineColor='transparent'; }}}


function hide_pannel(){
    let fap_menu_wrapp=document.querySelector('.fap_menu_wrapp');
    if(fap_menu_wrapp){
        fap_menu_wrapp.style.display='none';

        let tab_svg=document.querySelectorAll('.p-accessoryTab__list svg');
        for(let k=0; k<tab_svg.length; k++){
            tab_svg[k].style.outlineColor=''; }}}


let accessoryTab=document.querySelector('.p-accessoryTab__list');
if(accessoryTab){
    let FA_tab=
        '<li class="p-accessoryTab__item">'+
        '<button type="button" class="p-accessoryTab__button" id="fap_tab">'+
        '<span class="p-accessoryTab__icon">'+
        '<svg width="24" height="24" viewBox="-50 -50 540 600" fill="currentColor">'+
        '<path d="M385 33h-320c-35 0-64 29-64 64v320c0 35 29 64 64 64h320c35 0 '+
        '64-29 64-64v-320 C449 61 420 33 385 33z M337 313c-32 11-41 16-60 16c-3'+
        '1 0-43-16-75-16c-10 0-18 2-26 4v-32 c7-2 15-4 26-4c31 0 43 16 75 16c10'+
        ' 0 18-1 28-5v-96c-10 3-18 5-28 5c-31 0-43-16-75-16 c-25 0-37 10-58 14v'+
        '154c0 9-7 16-16 16c-9 0-16-7-16-16v-192c0-9 7-16 16-16c9 0 16 7 16 16v'+
        '6 c20-4 32-14 58-14c31 0 43 16 75 16c19 0 28-5 60-16V313z"></path></svg>'+
        '</span></button></li>';

    if(!accessoryTab.querySelector('#fap_tab')){
        accessoryTab.insertAdjacentHTML('beforeend', FA_tab); }

    let faw_sw=document.querySelector('#fap_tab');
    if(faw_sw){
        faw_sw.onclick=function(event){
            event.preventDefault();
            disp_pannel(); }}}


let editor_iframe=document.querySelector('.cke_wysiwyg_frame');
let iframe_doc;
if(editor_iframe){
    iframe_doc=editor_iframe.contentWindow.document;
    iframe_doc.addEventListener("keydown", menu_key_1); }

document.addEventListener("keydown", menu_key_1);


function menu_key_1(event){
    let fap_menu_wrapp=document.querySelector('.fap_menu_wrapp');
    if(event.keyCode==27 && fap_menu_wrapp){ //「Esc」
        event.preventDefault();
        hide_pannel(); }}


let fap_close=document.querySelector('.fap_close');
if(fap_close){
    fap_close.onclick=function(event){
        event.preventDefault();
        hide_pannel(); }}




let aw_li=document.querySelectorAll('.fap_ul li:not(.fap_category)');
for(let k=0; k<aw_li.length; k++){
    let aw_class=aw_li[k].querySelector('i').className;
    aw_li[k].addEventListener("click", function(event){
        if(event.shiftKey){
            set_aw(aw_class, 1); }
        else{
            set_aw(aw_class, 0); }}); }


function set_aw(aw_c, n){
    let selection;
    let range;
    let insert_node;

    editor_iframe=document.querySelector('.cke_wysiwyg_frame');
    if(editor_iframe){
        iframe_doc=editor_iframe.contentWindow.document;
        iframe_doc.body.focus(); // キャレットを表示

        selection=iframe_doc.getSelection();
        range=selection.getRangeAt(0);

        if(n==0){
            let insert_node_b=iframe_doc.createTextNode('\u00A0');
            range.insertNode(insert_node_b);
            range.setStartAfter(insert_node_b);

            insert_node=iframe_doc.createElement('i');
            insert_node.appendChild(iframe_doc.createTextNode('\u0020'));
            insert_node.setAttribute('class', aw_c);
            range.insertNode(insert_node);

            let insert_node_a=iframe_doc.createTextNode('\u00A0');
            insert_node.parentNode.insertBefore(insert_node_a, insert_node.nextSibling);
            range.setStartAfter(insert_node_a);
            range.collapse(); }

        if(n==1){
            insert_node=iframe_doc.createElement('i');
            insert_node.appendChild(iframe_doc.createTextNode('\u0020'));
            insert_node.setAttribute('class', aw_c);
            range.insertNode(insert_node);
            range.setStartAfter(insert_node);
            range.collapse(); }

    }}

 

 

 

「FontAwesome Palette」最新版について 

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

 

●「FontAwesome Palette」の最新バージョンのリンクは、以下のページのリンクリストから探せます。