リンクカードの編集ツール「LinkCard Editor ⭐」（41） / JavaScript

「addEventListener」と「on…」は違う 

例えば「elem がクリックされた時に処理 ～ をする」という、ありふれたコードを書く場合に、JavaScriptでは 2通りの似た書式が、どこにも書かれています。

 

elem.onclick=function(e){ ～ }
elem.addEventListener('click', function(e){ ～ });

 

イベントを捉えて動作するこの二つのコードは、通常どちらも同じ結果になります。 しかし、この2種のコードが存在するには、ちゃんとした理由がある様です。

 

以下にあっさりと説明してくれていますが、「onclick」は動作を受け入れる窓口が1つで、新しい「onclick」が発行されると、その命令が以前の「onclick」の命令を上書きしてしまうという事です。

 

 

これは「addEventListener」の方が確実で万能かと思いそうですが、実はそうではありません。 以前の命令が消えてくれるのは、大変に使い易い場合があります。 一旦「addEventListener」を設定すると、これは常にイベントに反応して、プログラム上でそれをコントロール出来ずに誤動作に繋がる場面が、時々あります。 このコントロールは時として困難なものです。

 

 

 

 「LinkCard Editor ⭐」のバグ

前回から気付いていたのですが、記事上に複数のリンクカードがあり、リンクURLの書換えテストをくりかえしていると、想定外の動作が生じる事がありました。

 

この問題は、以下の「ver. 3.0」から内包していた様です。

 

 

 

症状 

① 片方のリンクカードを編集選択して、「URL入力枠」にキャレットを入れる。

➁「URL入力枠」の幅が拡張する

➂「Enter」キーを押す → 「URL入力枠」が閉じる

 

これは正常動作で、「URL入力枠」の内容と「カードのリンクURL」は、書換えていない「一致」なので、「Enter」で書換えコードがそれを判定して終了しています。

 

④ もう一方のカードを編集選択して、「URL入力枠」にキャレットを入れる。

➄「URL入力枠」の幅が拡張する

⑥「Enter」キーを押す → 「書き換えを確認するダイアログが出る」

 

この後の操作によっては動作が変になり、後のカードのリンクURLが書変わったりする場合があります。 上手く逃れて「元のリンクURL」になる事もありますが。

 

⑥以降は異常動作で、➂の様に「URLに入力枠」が閉じるのが正常です。

 

 

原因 

➂～④で編集対象のカードを変更しているのに、⑥の判定コードは、最初のカードの「リンクURL」のままで比較しているため。 

 

こういう事って時々あるなぁと思いながら、修正コードを色々と書いたのですが、なかなか出口が判りませんでした。

 

url_input.addEventListener('keydown', function(event){
    if(event.keyCode==13){
        event.stopImmediatePropagation();
        event.preventDefault();
        rewrite(); }});

 

「rewrite()」が書換えコードで、「Enter」キー入力で書換え（判定）コードを起動する簡単なものです。 この「rewrite()」が、最初の「リンクURL」が設定されたまで判定を続け、この更新されない状態から抜けられません。

 

で、最後に上手く行ったのは以下の修正コードでした。

 

url_input.onkeydown=function(event){
    if(event.keyCode==13){
        event.stopImmediatePropagation();
        event.preventDefault();
        rewrite(); }}

 

この違いは、最初に書いた事なのだと思います。

 

前者のコードは最初の判定を繰り返し、別のカードを扱い始めても、過去の判定を繰り返すのだと思います。 上手くこれをコントロールして、現在のカードの判定を可能にする方法はあると思いますが、実際は見つけられませんでした。

 

複雑な事をして「addEventListener」を使うより、「onkeydown」を使えば、その場だけの判定を毎回してくれるので、何の問題も生じない事が判りました。

 

 

 

テキスト編集の耐性を更に強化 

初期に比べると、テキスト部の編集で崩れる事はとても少なくなったのですが、デザイン崩れを生じる操作や、テキスト編集操作について、以下の事が判っています。

 

◎ 画像・アメブロ絵文字の挿入、テキストのペースト等は レイアウト崩れを生じる。

◎ テキストのペーストは「Ctrl+Shift+V」（プレーンテキストとして貼り付ける）で行うとレイアウト崩れを生じない。

◎ テキストでは「Shift+Enter」で改行ができる。

◎ HTML編集からテキスト部を編集すれば、アメブロ絵文字を記載できる。

 

編集に躊躇がなくなってテキスト部を弄る事が多くなり、最近気付いた問題が<br>タグが要素を分裂させる問題です。 これは、以下の様な表示になります。

 

 

DevToolsで調べると、欠けた部分の場所に <br>があり、空白行がひとつの表示項目の様に表示されています。

 

 

HTMLを見ると ❶「記事タイトル」 ❷「記事の出だし」 ❸「ドメイン表示」に割り込んで <br>タグが 1項目の扱いになっています。

 

 

この <br>タグは、❷「記事の出だし」のテキスト編集過程で、「Shift+Enter」で入れた改行が、たまたま記事の末尾に残っていたものです。

 

　　<span>▢▢▢▢▢▢▢▢▢▢▢<br>▢▢▢▢▢▢▢▢▢▢</span>

 

の形の改行の入り方では問題が無いのですが、

 

　　<span>▢▢▢▢▢▢▢▢▢▢▢▢▢▢▢▢▢▢▢▢▢<br></span>

 

と、末尾に<br>があると、下の様に自動的に<span>の外に出てしまいます。

 

　　<span>▢▢▢▢▢▢▢▢▢▢▢▢▢▢▢▢▢▢▢▢▢</span><br>

 

この様な自動処理は、編集画面の仕様と思われます。

 

その結果、「記事の出だし」の項目が、2個の項目に分裂した表示となるわけです。

 

以前に似た様な問題で、Firefox特有の改行コード生成の対策をしていたので、そのコードを拡張して、この <br>タグが生じたら削除する対策をしました。

 

以下が、対策コードです。

 

function moz(card){
    let wrap=card.querySelector('.ogpCard_wrap');
    let monitor_br=new MutationObserver(no_br);
    monitor_br.observe(wrap, {childList: true, subtree: true});

    no_br();

    function no_br(){
        let br_moz=wrap.querySelector('br[type="_moz"]');
        if(br_moz){
            br_moz.remove(); }
        let br_crm=wrap.querySelector('.ogpCard_content > br');
        if(br_crm){
            br_crm.remove(); }}}

 

このコードは、「ver. 3.6」以降に実装します。

 

デフォルトの「記事の出だし」は、あらかじめ「br要素」が削除されています。「記事の出だし」の記述が少し変だと気付いている方は多いでしょう。「記事タイトル」や「記事の出だし」を「Shift+Enter」で改行してアレンジすれば、ワンランク上のリンクカードになると思います。 

 

 

 

「LinkCard Editor ⭐」のマニュアル 

「LinkCard Editor ⭐」の基本操作の詳細は、以下のマニュアルを参照ください。

 

 

 

 

「LinkCard Editor ⭐」の導入手順  

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

 

● ページ文字数制限のため、「LinkCard Editor ⭐」ver. 3.6 のスクリプトコードは以下に置いています。

 

 

❶「Tampermonkey」を導入します

使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。 以下のページに簡単な導入の説明があるので参照ください。

 

 

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

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

 

 

 

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

 

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

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

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

 

● コード行数が多い場合のペースト操作は、「編集枠」の第1行目に「ゴミ文字」が混入していないかを確認してください。

 

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

 

 

 

もっと文字数を! 

特別なことをやっているので仕方がないのですが、コード行数が 1400行に近付き、「LinkCard Editor ⭐」のコードを掲載するのが困難になって来ました。

 

後は、コメント記述を削除したり、変数名を簡素にしたり、などという爪に火を灯す様な事が必要になります。 そんな事をすると、コードのメンテがし難くなるので、いっその事コードを分割掲載するのが良いのかも知れません。

 

「GitHub」を使って公開とか、「Chrome」の拡張機能に登録というのもありか？  なんだかな...

 

 

 

「LinkCard Editor ⭐」最新版について 

旧いバージョンの「LinkCard Editor ⭐」は、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。 最新バージョンへのリンクは、以下のページのリンクリストから探せます。