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

テキスト編集環境のブラシュアップ 

カード上のテキスト編集を「要素単位」で編集する事で、飛躍的に安定したテキスト編集が可能になりました。 今回は、テキスト編集に係るコード構成を更にブラシュアップしました。

 

要点は、テキスト部分の選択解除、別のテキスト部分への移動などの処理です。 これまでの選択解除はカード上の他の場所を「Ctrl+Click」「Shift+Click」を押す仕様でした。 この操作をスマートに改めました。

 

●対象カードの選択した部分以外の場所を「Click」「Ctrl+Click」「Shift+Click」する事で選択解除になります。

 

これ以外にも、「Ctrl+F6」でツールを終了する、他のカードを「Ctrl+Click」で選択する、などの方法でもテキスト編集を終了できます。

 

とにかく、カードの選択範囲（青枠）の外をクリックすればテキスト編集を終了できます。 これは、すぐに慣れる事が出来る操作方法です。 

 

▪ 編集中カードの全体の青枠外をクリックしても選択解除になりません。

▪ カバー画像、他のテキスト部分などをクリックするのが確実です。

 

 

 

 

テキスト編集で微妙にズレる現象  

「記事タイトル」で顕著ですが、編集をしたテキストが数px上方にズレる事があります。 投稿結果は正常になる軽微な問題ですが、独特の方法で対策していました。

 

 

この原因が「overflow」指定に関連するものと漸く判りました。「overflow」を指定された「インライン要素」の独特の振舞いは、とても不可解な部分があります。 説明が長くなるので、興味のある方は以下を参照ください。

 

 

結局、編集するテキスト部分に「overflow: visible」を指定すれば改善する事が判りました。 テキスト編集時に微妙にスクロールする様なズレが無くなりました。

 

 

 

「URL枠」の「ドメイン表示」の編集機能を廃止 

「URL入力枠」に書き込んだテキストを「リンクのドメイン表示」の行に表示する機能が、これまでのバージョンにありました。

 

 

初期に組み込んだ機能ですが、「テキスト編集」が安定して行える様になった現在は不要な機能です。 本来「URL入力枠」はカードのリンクURLを書換える場所で、余計な機能で判り難くするのは愚かです。 操作を判り易くする事が重要と判断しました。

 

ただ、「書き込み」ボタンを「Shift+Click」する事で、「リンクのドメイン表示」と「リンクのURL表示」を交互に選択できる機能は残します。 これは、カードのリンクを全く別のリンク先に変更した場合に、ドメイン表示を改めるのに必要ですから。

 

 

 

「リンクマーク」 をSVG化

元の「リンクマーク」は「SVG」ですが、通常の「img要素」の様に「SRC」で読み込んで表示しています。 このためにマークに着色ができません。

 

これは面白くないので、通常フォントの「無限」マークを回転させて代用し、文字色を指定してカラー化していました。「SVG」の扱いに慣れたので、今回はマークを自製して使用しました。 このページのリンクカードは、自製の「SVG」です。

 

データも絞り込んで、以下の様にかなりダイエットしています。（約440字）

 

<svg height="14" viewbox="0 0 200 240" width="20"><path d="M27 182 c-22 -24 -21 -44 2 -73 23 -29 39 -19 23 15 -9 19 -8 27 4 37 23 19 57 -17 50 -53 -7 -35 11 -37 24 -2 11 28 8 37 -23 72 -25 27 -58 28 -80 4zM70 104 c-11 -28 -8 -37 23 -72 25 -27 58 -28 80 -4 22 24 21 44 -2 73 -23 28 -41 17 -22 -13 11 -17 10 -23 -3 -36 -14 -14 -17 -14 -36 3 -16 14 -20 27 -16 47 7 35 -11 37 -24 2z"></path></svg>

 

デフォルトのマーク部のコードは以下です。（約250字）

 

<img alt="リンク" class="ogpCard_icon" height="20" loading="lazy" src="https://c.stat100.ameba.jp/ameblo/symbols/v3.20.0/svg/gray/ editor_link.svg" style="position:absolute;top:0;bottom:0;right:0; left:0; height:100%; max-height:100%" width="20">

 

Amazonの製品ページのリンクなどは、余計なクエリ文字列が追加されて、無駄に文字数が多いものです。

 

https://www.amazon.co.jp/Fire-TV-Stick---Alexa%E5%AF%BE%E5%BF%9C%E9%9F%B3%E5%A3%B0%E8%AA%8D%E8%AD%98%E3%83%AA%E3%83%A2%E3%82%B3%E3%83%B3%E4%BB%98%E5%B1%9E---%E3%82%B9%E3%83%88%E3%83%AA%E3%83%BC%E3%83%9F%E3%83%B3%E3%82%B0%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E3%83%97%E3%83%AC%E3%83%BC%E3%83%A4%E3%83%BC/dp/B08C1LR9RC?smid=AN1VRQENFRJN5&pf_rd_r=0XTFW2D8Z0N962F39RK6&pf_rd_p=64fcf657-a5c2-4156-a9aa-9a8f390d2429&pd_rd_r=d8446576-681c-4e79-a4c4-c8faec7262ea&pd_rd_w=JVKyN&pd_rd_wg=KxGAw&ref_=pd_gw_unk

 

このサンプルのリンクの文字数は 約520文字です。

 

これらと比較しても、「SVG」の文字数の増加は許容範囲だと思います。

 

 

 

仕様の継承について 

過去の「LinkCard Editor」で編集したリンクカードは「通常フォント」になっていますが、そのカードを過去記事の再編集などで新バージョンの「LinkCard Editor」で編集した場合、「リンクマーク」は変更しない様にしました。 これは「マーク」の配色等を継承するとコードが複雑になるのを嫌ったからです。

 

カードを再アレンジするより、作り直して入れ替えるのは大変ではないので、過去の「リンクマーク」はアレンジしないという仕様にしました。

 

 

 

「LinkCard Editor ⭐」のマニュアル 

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

 

 

 

 

「LinkCard Editor ⭐」の導入手順  

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

 

● ページの文字数制限のため、スクリプトコードは前ページに置いています。

 

❶「Tampermonkey」を導入します

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

 

 

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

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

 

 

 

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

 

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

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

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

 

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

 

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

 

 

 

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

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