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

Amazon等の長いリンク表記を整形する 

「SVG」導入で文字数のカウントに敏感になってますが、前記事で「Amazon」のリンクの長ったらしい記述について書いていて、これをワンタッチで短縮する機能を組み込む事を思い着きました。

「Amazon」以外にも、こういうURLを使うサイトはあるかも知れませんが、URLの途中の「?」の文字以降は「クエリ文字列」で、リンクとは別目的の記述です。 クエリ文字列は、「Webアクセス」の解析に用いられたり、参照者に対して適切な商品を紹介する事に用いられたりする様です。

従って、一般的には「?」以降の部分を削除しても、リンクは有効と思われます。

更に、Amazonは特別な方法でキーワードを抽出して、更に短縮できる事が色々なページで書かれています。 実装する機能は、Amazonのリンクが主な対象ですが、他のサイトでも使える様に考慮しました。

Amazonの実例 

下は、私も良く掲載する「Amazon」のリンクのサンプルです。

Amazon.co.jp: Fire TV Stick - Alexa対応音声認識リモコン(第3世代)付属 | ストリーミングメディアプレーヤー : Amazonデバイス・アクセサリ

上はデフォルトの「リンクカード」ですが、このリンクのURLは以下です。

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

文字数を計測すると「521文字」でした。

このURLの中で「?」の文字以降がクエリ文字列で、リンクには不要です。 この文字数は「205文字」で、約40%が不要だという事です。

更に、Amazonは「/bp/」もしくは「/gp/」の直後の10文字程度の文字列が、商品コードになっているそうで、その後の「/ref=」が続いていると、それ以降は削除できる様です。 上の例では「/dp/」「?」が商品コードを挟んで「/ref=」の区切りはありません。

これから、上のリンクの不要部分を全て削除すると、下のリンク文字列が得られます。 実に「38文字」まで減らす事ができました。

https://www.amazon.co.jp/dp/B08C1LR9RC

これはリンクカードの文字数のダイエットには大いに有効です。 2000文字～2500文字程度になるカードの文字数が、Amazonのリンクの場合は400～500文字程度減らせます。

〔参考〕

この記事で文字数の計測を行っていますが、以下のツールを使っています。

「BR Checker+Outro Style ⭐」起動方法を変更 / JavaScript

厳密な文字数を、アメーバブログの様なエディタ上で計測するのは、結構難しいのですが、計測方法を工夫すれば精度を高める事が可能です。 計測の前後で改行を生じさせない事が肝心で、測る文字列を挟む様に適当な文字列を追加し、対象の文字列を削除して、文書の全文字数の減少値から割り出します。

コード 

カードのリンク文字列を省略した文字列に入れ替えるコードです。

function query_cut(card){
    let link=card.querySelector('.ogpCard_link');
    let url_input=document.querySelector('#url_input');

    let am_url=document.querySelector('#am_url');
    if(am_url){
        am_url.onclick=function(){
            let def_url=link.getAttribute('href');
            let smart_url=def_url.split('?')[0];
            let product;
            if(smart_url.indexOf('/dp/')!=-1){
                product=smart_url.split('/dp/')[1];
                smart_url='https://www.amazon.co.jp/dp/'+ product; }
            else if(smart_url.indexOf('/gp/')!=-1){
                product=smart_url.split('/gp/')[1];
                smart_url='https://www.amazon.co.jp/gp/'+ product; }

            if(card.classList.contains('edit_card')){
                link.setAttribute('href', smart_url);
                let data_cke_saved_href=
                    link.getAttribute('data-cke-saved-href');
                if(data_cke_saved_href){
                    link.setAttribute('data-cke-saved-href', smart_url); }

                url_input.style.background='#80deea';
                setTimeout(()=>{
                    url_input.style.background='';
                }, 1500); }}}}

◎ 原則として「?」以降は削除します。

◎ 更に、Amazonの場合は「/db/」「/gp/」の文字が含まれるので、それ以降の部分を「https://www.amazon.co.jp/dp/」「https://www.amazon.co.jp/gp/」に繋げてリンクを生成しています。

◎ その後は、リンクカードに生成したリンクを書き込んでいます。

操作と機能の性能 

●「URL入力枠」の横に、新しく「 」のマークのボタンを作りました。 この機能の操作は単純で、このボタンを押すだけです。 リンクのURLに「?」「/bp/」「/gp」が無い場合も短縮書換え処理が行われますが、URLが変更される事はありません。

● 色々とテストをすると、「Amazon」の複数の商品のリストを表示する画面などは、「?」以下にデータベースの抽出内容を持たせるらしく、この短縮操作をすると目的ページが表示されませんでした。 商品単体のページは問題ない様です。

短縮操作はこの様な例があるので、必ずしも万能ではありません。 短縮操作をした場合は、それが目的のリンク先を開けるかを、テストをする事が必須です。

テキスト編集操作を更に最適化 

前回に続いて、テキスト部分の選択操作に関係するコードを再調整しました。 主な変更は、下のオレンジの部分は「Click」では編集解除にならない様にした事です。 オレンジ部分は、現在の編集範囲以外で「テキスト編集の対象になりうる範囲」です。

前コードはこの部分の「Click」で編集解除できましたが、編集操作の最中に不本意に編集解除が生じる場合があり、デリケートなマウス操作が必要でした。「Click」では解除しない様にすると、落ち着いた編集が出来る事が判り、変更したわけです。

オレンジ部分の「Cit+Click」「Shift+Click」では、テキスト編集部分を現在の選択から移動する操作になり、これも選択操作がし易くまとまりました。 ほぼ、目標にしていたテキスト編集の環境になったと思います。

なお、以前は「リンクマーク」の部分はテキスト編集可能な範囲でしたが、「SVG」の導入で、対象部分から外しています。

 「デザイン登録」に確認ダイアログ

カードデザインの登録は「+」のシンプルなボタンで行いますが、間違って押して、登録を上書きしてしまう事がたまにありました。 そこで、このボタンを押した後、登録するか否かの確認ダイアログを出す様にしました。 これで、間違って登録を消してしまう事がなくなると思います。

「LinkCard Editor ⭐」のマニュアル 

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

「LinkCard Editor ⭐」 操作マニュアル

「LinkCard Editor ⭐」の導入手順  

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

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

❶「Tampermonkey」を導入します

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

⭕「Tampermonkey」の導入方法

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

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

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

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

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

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

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

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

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

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

スクリプトツール 　最新バージョン・リンク一覧表 （ツール名順）