人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

拡張機能「Tampermonkey」を使って編集補助ツールを作る

2019年 09月 27日

「FontAwesome」のアイコンを記入するツールを作りました 


ブログ記事でWebフォントの「FontAwesome」を利用する場合、アイコンの指定コードをIMEに単語登録して利用するのが普通ではないでしょうか。

例えば頻繁に使うリンクアイコン「  」を表示させるには、編集時に「HTML編集」を開き「<i class="fa fa-external-link" style="margin-left: .5em"> </i>」といった定型コードを記入する必要があります。 この定型コードを毎回書くのは手間で間違いも生じます。 そこで「りんく」などの読みで単語登録して書き込むわけです。

この操作で、いちいち「HTML編集」を開くのはおっくうです。 再編集などで記事の途中にアイコンを入れるのは、記入する場所を探す必要があり更に手間です。 そこで、「通常編集」の画面からコードをワンタッチで入力できるツールを作りました。

このページで紹介するツールは、名前を「Elements Palette for Excite」としていますが、カーソルを置いた場所でショートカットキーを押せばコードが書き込まれるシンプルなツールです。 しかし、使い始めると便利で手放せなくなります。「Tampermonkey」を利用できるブラウザでは、以下の手順でこのツールを利用出来ます。



 ❶ ユーザースクリプトを可能にする「Tampermonkey」の導入


こういう事を実現するには、JavaScriptを使います。 JavaScript はブログシステムを提供する側では、大量に日常的に使用されるブラウザに直結した機能です。 これを私達ユーザー側で使える様にするのが「Tampermonkey」などのユーザースクリプト拡張機能です。 これは定番の拡張機能で、簡単なツールを作って実用化するのに向いています。 このページのスクリプトツールを使用するには、最初に「Tampermonkey」を導入します。


「Tampermonkey」を入手する 


拡張機能「Tampermonkey」は、Chrome版 Firefox版 Edge版 Opera版 など、各ブラウザごとに用意されています。 ありがたい事に、JavaScriptのコードはブラウザ間で共用できる場合が多く、今後は更にその傾向が増すと思います。 私は、基本的に Chrome版 および Firefox版 の「Tampermonkey」で動作をテストしています。

Chrome版の「Tampermonkey」は以下のリンク先で入手できます。

リンク先は下の様なページで、右上の「Chromeに追加」を押してインストールします。

拡張機能「Tampermonkey」を使って編集補助ツールを作る_a0349576_23244085.png



 ❷ スキンCSSに「@import」指定を記入する


エキサイトの編集システムには、最初から「FontAwesome/4.0.3」が導入されています。 このためアイコン指定のコードを書き込むだけで、「通常編集」の画面上にアイコンが表示されます。

しかしブログページにはこのフォントが導入されていません。「FontAwesome」をブログページで表示させるには、「@import」指定をする必要があります。 これは、ウェブフォントを呼び込む指定で、一般にはスキンCSSの先頭で指定します。「@import」指定は以下で、この1行をブログスキンの先頭に追加記入してください。(かならず先頭という規則があります)

@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css");



❸ スクリプトコードを「Tampermonkey」に登録する 


「Tampermonkey」の「+」マークの「新規スクリプト」のタブを開き、最初から書き込まれている内容は全てクリアーします。

拡張機能「Tampermonkey」を使って編集補助ツールを作る_a0349576_11000531.png

「エディター」の画面内が全く空白の状態で以下のコードを貼り付け、「ファイル」メニューの「保存」を押します。 これで「Tampermonkey」にツールが登録され、スクリプトコードが有効になります。


〔 Elements Palette for Excite 〕ver. 1.0

// ==UserScript==
// @name Elements Palette for Excite
// @namespace http://tampermonkey.net/
// @version 1.0
// @description 編集枠に各種要素を自動記入するツール
// @author Excite Blog User
// @match https://userconf.exblog.jp/editor/*
// @grant none
// ==/UserScript==


window.addEventListener('load', function(){

let target=document .querySelector('.editor'); // 監視 target
let monitor=new MutationObserver(catch_key);
monitor.observe(target, {childList: true, subtree: true}); // ショートカット待受け開始

catch_key();

function catch_key(){
let editor=document .querySelector('div[contenteditable]');
if(editor.style.display=='block'){ //「通常編集」の場合にのみ実行
editor.addEventListener('keydown', check_key);

let gate;
function check_key(event){
let send=-1;
if(event.shiftKey==true){ gate=1; }

if(event.keyCode==112){
if(gate==1){ event.preventDefault(); send=112; }}
if(event.keyCode==113){
if(gate==1){ event.preventDefault(); send=113; }}
if(event.keyCode==114){
if(gate==1){ event.preventDefault(); send=114; }}
if(event.keyCode==115){
if(gate==1){ event.preventDefault(); send=115; }}
if(event.keyCode==116){
if(gate==1){ event.preventDefault(); send=116; }}
if(event.keyCode==117){
if(gate==1){ event.preventDefault(); send=117; }}
if(event.keyCode==118){
if(gate==1){ event.preventDefault(); send=118; }}
if(event.keyCode==119) {
if(gate==1){ event.preventDefault(); send=119; }}
if(event.keyCode==120){
if(gate==1){ event.preventDefault(); send=120; }}
if(event.keyCode==121){
if(gate==1){ event.preventDefault(); send=121; }}
if(event.keyCode==122){
if(gate==1){ event.preventDefault(); send=122; }}
if(event.keyCode==123){
if(gate==1){ event.preventDefault(); send=123; }}

if(event.shiftKey!=true){ gate=-1; }
if(send !=-1){
event.stopImmediatePropagation();
set_mark(send); }
} // check_key
}} // catch_key


function set_mark(sender){
let editor;
let selection;
let range;
let ac_node;
let insert_node;

editor=document .querySelector('div[contenteditable]');
selection=document .getSelection();
range=selection.getRangeAt(0);
ac_node=selection.anchorNode;

if(sender==112){ // F1 FontAwesomeアイコンの自動記入
let insert_node_z;

insert_node=document .createElement('i');
insert_node.appendChild(document .createTextNode('\u00A0'));
insert_node.setAttribute('class', 'fa fa-external-link');
insert_node.setAttribute('style', 'margin-left: .5em');
range.insertNode(insert_node);

insert_node_z=document .createTextNode('\u200A');
insert_node.parentNode.insertBefore(insert_node_z, insert_node.nextSibling);
range.setEnd(insert_node_z.nextSibling, 0);
range.collapse(); // フォーカスを失わないでrangeを閉じる
}
} // set_mark
})



● このコードは、今期の新編集画面に対応したものです。 従来の編集画面では動作しません。

● ショートカットキーは「Shift → F1」です。「Shift」キーを押して直後に「F1」を押すか、同時に押しても動作しますが、「Fn」キーを先に押すと無効になります。

● 今後に複数の編集ツールを追加できる様に、「F1」~「F12」 のショートカットキーを予備に用意しています。 今後、幾つかの便利なツールを紹介する予定です。

● 太字の部分が「  」アイコンを指定する「FontAwesome」の指定コードです。 これを書換えれば、任意のアイコンを書き込むコードに変更出来ます。

● 指定コードは「FontAwesome/4.0.3」のバージョンに則しています。「FontAwesome」は新バージョンを提供していますが、新バージョンの指定コードはエキサイト編集画面で表示されないので、あえて「4.0.3」のコードを使用しています。「FontAwesome/4.0.3」の指定コードは、以下のリンク先で調べる事が出来ます。



by Ataron2 | 2019-09-27 22:25 | JavaScript