PersonWriter′s Room

リンクカードとFontAwesomeをコピーする「LinkCard-FA Copy」/ JS

「リンクカード」のコピー機能は便利です

「他のブログ記事」➔「ブログ編集画面」の間でリンクカードをコピーするために作ったツールが「LinkCard Copy」です。

◎ リンク対象のサイトやページの構成により、リンクガードが作れない場合があります。「LinkCard Editor」を使えばどんな場合もリンクカードを作れますが、少し手間です。

「LinkCard Editor ⭐」操作マニュアル▪このページの説明や画像は「Ameblo Writer Compact」を編集画面に適用したものですが、このアレンジ適用が無い通常の画面でも、ツールは機能しま…

ameblo.jp

◎ 急いでいる場合や、全く同じデザインのカードが欲しい場合、特に手作りのリンクカードでないとリンクが作れない場合は、リンクカードのコピーができると有難い。

◎ しかし、通常は記事の再編集でHTML編集画面を開いてコピー操作が必要です。そんな事をするなら、最初からリンクカードを作った方が早いかも知れません。

以上の様な必要から作ったツールですが、私はけっこう稼働率が高いです。

「画像」のコピー機能は不要でした

変に難しく考えて、前バージョンでは「ブログ掲載画像」のコピー機能を追加しました。しかし先日、この機能は要らないという当たり前の事に気付きました。自分のブログ記事でも、他の方のブログ記事や他のサイトでも、必要な画像を反転選択してコピーすれば、編集画面にペーストできます。（中にはコピーガードをしているサイトもありますが）アメーバーブログの記事から掲載画像をコピーすると、画像データベースのリンクごとコピーが可能です。

そんな事で今回のバージョンは「掲載画像のコピー」の機能は削除し、ツール名を変更しました。

「HTMLコピー」が必要な表示パーツ

「LinkCard Copy」は、ブログ閲覧の状態で、記事上のリンクカードを「HTMLコピー」する機能です。このツールが必要な理由は、リンクカードが特殊な表示パーツで、「普通にはコピーできない」からです。このツールを拡張して、コピー対象に新しく加えるのは、そういう種類の表示パーツでないと意味がありません。

それで、一番最初に思い当たるのが「FontAwesome」の絵文字です。この絵文字は閲覧中のブログ記事からはコピーできません。やはり記事の編集画面を開けば、コピーが出来るのですが。今回、この絵文字のコピー機能を追加しました。ツール名もそれに沿った「LinkCard-FA Copy」に改めました。

「FontAwesome」の絵文字とそのコピー

このブログでは「FontAwesome Palette」を常駐してこの絵文字を頻繁に利用しています。

「FontAwesome Palette」操作マニュアルWebフォントの絵文字フォントの老舗「FontAwesome」は、SVGには無い利点があり、現在でもその有効さは失われていません。「FontAwesome …

ameblo.jp

パレットから良く使う絵文字はすぐに入力できますが、時々パレットに無い絵文字が必要になり、本家サイトで探して使う事があります。そういう絵文字はパレットに無いので、目の前に他の記事で使っている絵文字がある場合は、直接コピーしたくなります。

通常のコピーでは抜け落ちる

ブログ記事に下の様な一行があったとします。

この絵文字「  」は FontAwesomeの絵文字です。

これを普通にコピーして編集画面（通常表示）に貼り付けると、下の様に絵文字が抜け落ちます。

この絵文字「 」は FontAwesomeの絵文字です。

この絵文字は、記事に書込んだ「特殊な iタグ」を使って表示しています。

この絵文字「 <i class="fa-solid fa-gear"> </i>」は FontAwesome ～～

画面環境には FontAwesomeを呼込む指定が必要ですが、問題はこの「iタグ」をコピーできない事で、その結果で抜け落ちてしまうのです。

「LinkCard-FA Copy」の処理

そこでツールとしては、記事上で「Alt+右Click」した時に、その時のマウスがポイントした場所の要素を調べ、FontAwesomeのクラス名の「i要素」の場合は、その要素をクリップボードにコピーする操作をします。

以下は、今回に追加した FontAwesomeをコピーするためのコードです。

「LinkCard-FA Copy」ver.0.4 53行～

let elem=document.elementFromPoint(event.clientX, event.clientY);
if(elem){
    let card_root=elem.closest('.ogpCard_root');
    let f_awesome=elem.closest('i[class*="fa-"]');
    if(card_root){ // リンクカードの場合
        if(event.altKey){
            event.preventDefault();
            event.stopImmediatePropagation();
            lc_copy.style.display='block';
            lc_copy.style.left=(event.pageX)/zoom_f +"px";
            lc_copy.style.top=((event.pageY)/zoom_f -34) +"px";
            get_copy(card_root, lc_copy); }}
    else if(f_awesome){ // FontAwesome絵文字の場合
        if(event.altKey){
            event.preventDefault();
            event.stopImmediatePropagation();
            lc_copy.style.display='block';
            lc_copy.style.left=(event.pageX)/zoom_f +"px";
            lc_copy.style.top=((event.pageY)/zoom_f -34) +"px";
            get_copy(f_awesome, lc_copy); }}
}