編集パレットのタブに「専用スイッチ」
これまでのバージョンでは、「専用パレット」を表示するスイッチを「アメブロ絵文字」のタブ画面の中に置いていました。 このデザインをしばらく使って来て、「パレットを表示する 2ステップが面倒」と感じる様になりました。
で、「専用パレット」を直接開く「専用タブ」を作ることにしました。 JavaScriptはこういう事が比較的簡単にできます。
下は、編集パレットに追加した「専用パレット」を開くための「タブ」です。
「タブ」の旗のマーク「 」は「Font Awesome」のファビコンです。
この「タブ」を押すと、ワンタッチで「専用パレット」が開きます。 少しの手間を省いただけですが、ずいぶんと操作感覚が良くなりました。
「専用パレット」のカテゴリー整理
この間の使用で私自身が必要になり、「Fant Awesome 絵文字」をかなり追加しました。 必要な絵文字はユーザーにより異なるので、リストにないものはカスタマイズしてください。
絵文字の数が増えて来ると区分した方が探し易くなるので、今回「専用パレット」をカテゴリーに分けて整理しました。
私が適当に整理した結果ですが、このカテゴリ作りや分け方も、扱い易い様にカスタマイズする事が、比較的簡単にできます。
下は「FontAwesome Palette」ver. 0.4 のソースコード「17行以降」です。
カテゴリーの区切りは、以下の形のコードです。
この「🟦🟦🟦」で印した行をコピーして必要な場所に割り込ませると、そこがカテゴリーの区切りになります。 上の区切りの例では太字の「矢印」が、区切りのキャプションとして表示されます。 これを書き換えれば、任意の区切りの文字に出来ます。
他の印のない行は、各行が「Font Awesome 絵文字」のコードです。 絵文字コードの入手方法の詳細は、「FontAwesome Palette」の操作マニュアルを参照ください。
「FontAwesome Palette」の扱い方
このツールは、アメブロ絵文字と同じ操作で直感的に扱えますが、パレットのカスタマイズなど、詳細については以下の操作マニュアルを参照ください。
「FontAwesome Palette」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「+」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 FontAwesome Palette 〕 ver. 0.4
// ==UserScript== // @name FontAwesome Palette // @namespace http://tampermonkey.net/ // @version 0.4 // @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 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; } '+ '.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_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; } '+ '#faw_tab:hover svg { fill: #2196f3; }'; let menu_wrapp= '<div class="fap_menu_wrapp"><div class="fap_menu">'+ '<div class="fap_title">'+ '<b>FontAwesome </b>'+ '貼付:Click '+ '<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 faw= '<li class="p-accessoryTab__item">'+ '<button type="button" class="p-accessoryTab__button" id="faw_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('#faw_tab')){ accessoryTab.insertAdjacentHTML('beforeend', faw); } let faw_sw=document.querySelector('#faw_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(){ set_aw(aw_class); }); } function set_aw(aw_c){ 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); 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(); }}
「FontAwesome Palette」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「FontAwesome Palette」の最新バージョンのリンクは、以下のページのリンクリストから探せます。