Amazon商品リンクを短縮する「Amazon ItemURL」（6）/ JavaSc

カード生成コードの分化

これまで、プライムビデオのコンテンツタイトルは通常商品タイトルと全く別要素なので、カード生成の対象外にしていました。 しかし、リンクカードがあれば動画紹介などに使う事も可能になります。 そこで、カード生成のプロセスを、通常商品と別個にする事にしました。 これまで書籍と通常商品を一緒に扱って無理があったので、これも独立させて、それぞれのカード生成のプロセスを最適化しました。

下は、Amazonページの内容を、3種類に区別するコードです。

「Amazon ItemURL」ver.0.6    173行

function page_check(){
    let productTitle=document.querySelector('#productTitle');
    let tmmSwatches=document.querySelector('#tmmSwatches');
    let videoTitle=document.querySelector('h1[data-automation-id="title"]');
    if(productTitle){
        if(!tmmSwatches){
            return 1; } // 通常商品
        else{
            return 2; }} // 書籍・eBook
    else if(videoTitle){
        return 3; } // Prime Video
    else{
        return 0; }} // カード作成不可

太字の要素がページ上にあるか無いかで 3種を判別し、カード生成を別コードで行います。

プライムビデオのカード 

下は、プライムビデオのページの例ですが、赤枠の部分の情報を取得して、カードにしています。

岸辺露伴は動かない

プライムビデオは会員制で価格表示はありせん。 そこで、通常商品の商品価格に相当する部分に〔Prime video〕を表示しました。 その後に、動画のイントロダクションを取り込み繋いでいます。（上限は300文字）

上のカードは「Amazon ItemURL」で生成したカードを「LinkCard Editor」でアレンジしたものです。 現在の「Amazon ItemURL」のバージョンで生成したカードは、説明文が1行で情報が乏しくなります。

岸辺露伴は動かない

これは、アメーバのカードデサインを踏襲した結果ですが、このデザインでは 300文字を取込む意味がありません。「Amazon ItemURL」を使うユーザーが「LinkCard Editor」を導入するとは限らないので、ここは今後に行数を増やす予定です。

画像はワイドサイズで上下に余白が出来ますが、左右が欠けるより良しとします。

 書籍・eBook のカード

書籍関連の情報の取得方法を精密にしました。 書籍タイトル・著者・電子版と紙版の全価格、更に書籍の説明を取得する様にしました。

花嫁 (幻冬舎文庫)

生成コードを独立させた事で、良好なデータを表示できる様になったと思います。

通常商品の情報取得 

通常商品は、下の赤枠の情報を「商品の説明」として取得していましたが、商品によってはこれが省かれている場合があります。 その場合は、下側の「この商品について」の部分の情報を取得する様にしました。

また、家庭用品などの消耗品は、価格表示の構成が異なるものがあるのが判ったので、これに対応しました。

 リンクカードの生成とHTML貼付けの方法

「Amazon ItemURL」で商品のリンクカードを作る方法は、下のページに整理していますので参照ください。

Amazon商品リンクを短縮する「Amazon ItemURL」（4）

リンクカードを扱う上での関連ツール 

「LinkCard Editor」を使うと、カード上の文字の修正、独自のカバー画像、配色のカスタマイズなど、より見栄えの良いカードに編集ができます。

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

「Both-WH」は「通常表示」のキャレット位置から、「HTML表示」の同じ位置へのジャンプを可能にします。「通常表示」でカードの貼り付け位置にキャレットを入れて「Ctrl+F8」を押すと、「HTML編集画面」の貼付け位置にキャレットが移動するので、そこでペーストをするだけです。 HTML編集操作一気に簡単になります。

「Both-WH ⭐」ver. 3.2 / JavaScript

「Amazon ItemURL」を利用するには

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

❶「Tampermonkey」を導入します

◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。 既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。 拡張機能の導入については、以下のページに簡単な説明があるので参照ください。

⭕「Tampermonkey」の導入方法

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

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

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

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

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

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

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

〔 Amazon ItemURL 〕 ver. 0.6

// ==UserScript==
// @name         Amazon ItemURL
// @namespace    http://tampermonkey.net/
// @version      0.6
// @description  アマゾンの商品ページのURLを短縮
// @author       You
// @match        https://www.amazon.co.jp/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=amazon.co.jp
// @grant        none
// ==/UserScript==


let panel_disp=0; // パネルの表示フラグ
let action; // Textリンク Cardリンク の選択フラグ
let action_type=0; // 出力されるリンクタイプ

action=localStorage.getItem('AIURL_Link_action');
if(!action){
    action=0; // Textリンクが初期値
    localStorage.setItem('AIURL_Link_action', action); } // 🔵ストレージ記入



let retry=0;
let interval=setInterval(wait_target, 20);
function wait_target(){
    retry++;
    if(retry>20){ // リトライ制限 20回 0.4secまで
        clearInterval(interval); }
    let target=document.body; // 監視 target
    if(target){
        clearInterval(interval);
        env(); }}


function env(){

    let panel=
        '<div id="tr_panel">'+
        '<div id="tr_url"></div>'+
        '<button id="tr_test" class="color_sw">Test</button>'+
        '<button id="tr_select" class="color_sw">'+
        '<span class="t1">Text</span> <span class="t2">Card</span></button>'+
        '<button id="tr_copy" class="color_sw">Copy</button>'+
        '<button id="tr_close" class="color_sw">✖</button>'+
        '</div>'+
        '<style>#tr_panel { position: fixed; top: 0px; left: 0; z-index: 5000; '+
        'font: normal 16px/24px Meiryo; padding: 14px 20px 12px; '+
        'background: #fff; border: 1px solid #aaa; align-items: center; display: none; } '+
        '#tr_url { padding: 4px 15px 2px; border: 1px solid #aaa; '+
        'max-width: 80vw; word-break: break-word;} '+
        '#tr_select { width: 90px; } '+
        '#tr_panel .t1 { opacity: 1; font-size: 16px; } '+
        '#tr_panel .t2 { opacity: .3; font-size: 12px; } '+
        '#tr_panel.card .t1 { opacity: .3; font-size: 12px; } '+
        '#tr_panel.card .t2 { opacity: 1; font-size: 16px; } '+
        '#tr_panel .color_sw { margin-left: 15px; padding: 2px 10px 0; height: 32px; '+
        'border: 1px solid #aaa; background: linear-gradient(transparent, #c3e0ee); } '+
        '#tr_panel .color_sw:hover { background: linear-gradient(#c3e0ee, transparent); } '+
        '#tr_panel.card .color_sw { background: linear-gradient(transparent, #ffe082); } '+
        '#tr_panel.card .color_sw:hover { background: linear-gradient(#ffe082, transparent); } '+
        '</style>';

    if(!document.querySelector('#tr_panel')){
        document.body.insertAdjacentHTML('beforeend', panel); }}



let target=document.head; // 監視 target
let monitor=new MutationObserver(item_page);
monitor.observe(target, {childList: true}); // 監視開始

function item_page(){
    let nav_a=document.querySelector('#nav-logo a');
    if(nav_a){
        nav_a.style.outline="2px solid red"; }

    let nav=document.querySelector('#nav-logo');
    if(nav){
        nav.onclick=function(event){
            if(!event.ctrlKey && !event.shiftKey){
                event.preventDefault();
                tr_short(); }}}}



function tr_short(){
    let tr_panel=document.querySelector('#tr_panel');
    if(tr_panel){
        if(panel_disp==0){
            panel_disp=1;
            tr_panel.style.display='flex';
            main(); }
        else{
            panel_disp=0;
            tr_panel.style.display='none'; }}}



function main(){
    let url_input=document.querySelector('#tr_url');
    if(url_input){
        let def_url=location.href;
        let smart_url;
        let product;

        if(def_url.indexOf('www.amazon.co')==-1){ // Amazon以外
            smart_url=cut_after(def_url, '?'); }
        else{ // Amazonの場合
            if(def_url.indexOf('/b/')==-1 && def_url.indexOf('/b?')==-1 &&
               def_url.indexOf('/s/')==-1 && def_url.indexOf('/s?')==-1 &&
               cut_before(def_url, '?').indexOf('node=')==-1){
                if(def_url.indexOf('/gp/')!=-1){
                    product=cut_after(cut_before(cut_after(def_url, '?'), '/gp/'), '/ref=');
                    smart_url='https://www.amazon.co.jp'+ product; }
                else if(def_url.indexOf('/dp/')!=-1){
                    product=cut_after(cut_before(cut_after(def_url, '?'), '/dp/'), '/ref=');
                    smart_url='https://www.amazon.co.jp'+ product; }
                else{
                    smart_url=cut_after(def_url, '?'); }}
            else{
                smart_url=def_url; }}

        url_input.textContent=smart_url;

        act_limit();
        test();
        select_act();
        copy();
        close(); }



    function cut_before(row, string){ // 前方を削除
        let rs;
        if(row.indexOf(string)!=-1){
            rs=row.substring(row.indexOf(string));
            return rs; }
        else{
            return row; }}

    function cut_after(row, string){ // 以降を削除
        let rs;
        if(row.indexOf(string)!=-1){
            rs=row.substring(0, row.indexOf(string));
            return rs; }
        else{
            return row; }}



    function test(){
        let tr_test=document.querySelector('#tr_test');
        if(tr_test){
            tr_test.onclick=function(){
                if(panel_disp==1){
                    let url_input=document.querySelector('#tr_url');
                    if(url_input.textContent){
                        window.open(url_input.textContent, '_blank'); }}}}}



    function act_limit(){
        let tr_select=document.querySelector('#tr_select');
        if(tr_select){
            if(page_check()==0){
                tr_select.style.display='none'; }
            else{
                tr_select.style.display='inline'; }}}



    function page_check(){
        let productTitle=document.querySelector('#productTitle');
        let tmmSwatches=document.querySelector('#tmmSwatches');
        let videoTitle=document.querySelector('h1[data-automation-id="title"]');
        if(productTitle){
            if(!tmmSwatches){
                return 1; } // 通常商品
            else{
                return 2; }} // 書籍・eBook
        else if(videoTitle){
            return 3; } // Prime Video
        else{
            return 0; }} // カード作成不可



    function select_act(){
        let tr_panel=document.querySelector('#tr_panel');
        let tr_select=document.querySelector('#tr_select');
        if(tr_panel && tr_select){
            sel_disp();

            tr_select.onclick=function(){
                if(action==0){
                    action=1;
                    localStorage.setItem('AIURL_Link_action', action); // 🔵ストレージ記入
                    sel_disp(); }
                else{
                    action=0;
                    localStorage.setItem('AIURL_Link_action', action); // 🔵ストレージ記入
                    sel_disp(); }}

            function sel_disp(){
                if(action==1 && page_check()!=0){
                    action_type=page_check();
                    tr_panel.classList.add('card'); }
                else{
                    action_type=0;
                    tr_panel.classList.remove('card'); }}}}



    function creat_card(type){
        let item_title;
        let item_price;
        let item_overview;
        let item_img;
        let item_img_src;

        if(type==1){ // 通常の商品
            item_title='Amazon 商品 タイトル';
            let productTitle=document.querySelector('#productTitle');
            if(productTitle){
                item_title=productTitle.textContent; }

            item_price='Amazon価格';
            let PriceDisplay=
                document.querySelector('#corePriceDisplay_desktop_feature_div .a-offscreen');
            if(PriceDisplay){
                item_price=PriceDisplay.textContent; }
            else{
                PriceDisplay=document.querySelector('#sns-base-price');
                if(PriceDisplay){
                    item_price=PriceDisplay.textContent; }}

            item_overview='商品説明';
            let productOverview=document.querySelector('#productOverview_feature_div table');
            if(productOverview){
                item_overview=productOverview.textContent; }
            else{
                productOverview=document.querySelector('#feature-bullets');
                if(productOverview){
                    item_overview=productOverview.textContent; }}

            if(item_overview.length>300){
                item_overview=item_overview.substr(0, 300); }

            let sam_selector=[
                '#main-image-container li.selected img',
                '#ebooks-img-wrapper img',
                '#imageBlockCommon img',
                '#leftCol img'];
            for(let k=0; k<sam_selector.length; k++){
                item_img=document.querySelector(sam_selector[k]);
                if(item_img){
                    item_img_src=item_img.getAttribute('src');
                    break; }}
        } // type==1


        if(type==2){ // 書籍・eBook
            item_title='Amazon 書籍 タイトル';
            let productTitle=document.querySelector('#productTitle');
            if(productTitle){
                item_title=productTitle.textContent; }

            item_price=''; // 著者・価格

            let bylineInfo_a=document.querySelector('#bylineInfo .author');
            if(bylineInfo_a){
                item_price=bylineInfo_a.textContent +'　'; }

            let PriceDisplay=document.querySelectorAll('#tmmSwatches .a-button-text');
            for(let k=0; k<PriceDisplay.length; k++){
                if(PriceDisplay[k].innerText){
                    let price_str=PriceDisplay[k].innerText;
                    if(price_str.indexOf('獲得ポイント')!=-1){
                        price_str=price_str.substring(0, price_str.indexOf('獲得ポイント')); }
                    price_str=price_str.replace(/\s￥/g, '￥');
                    item_price+=price_str; }}

            item_overview='書籍説明';
            let productOverview=document.querySelector('#bookDescription_feature_div');
            if(productOverview){
                item_overview=productOverview.textContent; }

            item_price+=item_overview;

            if(item_price.length>300){
                item_price=item_price.substr(0, 300); }
            item_overview='';

            let sam_selector=[
                '#img-canvas>img',
                '#ebooks-img-wrapper img',
                '#imageBlockCommon img',
                '#leftCol img'];
            for(let k=0; k<sam_selector.length; k++){
                item_img=document.querySelector(sam_selector[k]);
                if(item_img){
                    item_img_src=item_img.getAttribute('src');
                    break; }}
        } // type==2


        if(type==3){ // Prime Video
            item_title='Amazon Prime Video タイトル';
            let videoTitle=document.querySelector('h1[data-automation-id="title"]');
            if(videoTitle){
                item_title=videoTitle.textContent; }

            item_price='〔Prime Video〕';

            item_overview='商品説明';
            let videoOverview=document.querySelector('.e8yjMf');
            if(videoOverview){
                item_overview=videoOverview.textContent;
                if(item_overview.length>300){
                    item_overview=item_overview.substr(0, 300); }}

            item_img=document.querySelector('#main picture img');
            if(item_img){
                item_img_src=item_img.getAttribute('src'); }
        } // type==3


        if(!item_img_src){
            item_img_src=
                "https://m.media-amazon.com/images/I/01RmK+J4pJL._AC_UL150_.gif"; }


        let card_tx=
            '<div class="ogpCard_root">'+
            '<article class="ogpCard_wrap" '+
            'contenteditable="false" style="display:inline-block;max-width:100%">'+
            '<a class="ogpCard_link" data-ogp-card-log="" href="'+ url_input.textContent +
            '" rel="noopener noreferrer" style="display:flex;justify-content:space-between;'+
            'overflow:hidden;box-sizing:border-box;width:620px;max-width:100%;'+
            'height:120px;border:1px solid #e2e2e2;border-radius:4px;background-color:#fff;'+
            'text-decoration:none" target="_blank">'+
            '<span class="ogpCard_content" style="display:flex;flex-direction:column;'+
            'overflow:hidden;width:100%;padding:16px">'+
            '<span class="ogpCard_title" style="-webkit-box-orient:vertical;'+
            'display:-webkit-box;-webkit-line-clamp:2;max-height:48px;line-height:1.4;'+
            'font-size:16px;color:#333;text-align:left;font-weight:bold;overflow:hidden">'+
            item_title +'</span>'+
            '<span class="ogpCard_description" style="overflow:hidden;text-overflow:ellipsis;'+
            'white-space:nowrap;line-height:1.6;margin-top:4px;color:#757575;text-align:left;'+
            'font-size:12px">'+ item_price +'　'+ item_overview +'</span>'+
            '<span class="ogpCard_url" style="display:flex;align-items:center;margin-top:auto">'+
            '<span class="ogpCard_iconWrap" style="width: 20px;height:20px;flex-shrink:0">'+
            '<img src="https://www.google.com/s2/favicons?domain=https://www.amazon.co.jp" '+
            'style="vertical-align: 0; margin-right: 4px; min-width: 16px;"></span>'+
            '<span class="ogpCard_urlText" style="overflow: hidden; text-overflow: ellipsis; '+
            'white-space: nowrap; font-size: 13px; text-align: left; font-weight: bold; '+
            'color: rgb(34, 34, 34);">www.amazon.co.jp</span></span></span>'+

            '<span class="ogpCard_imageWrap" style="position:relative;width:120px;'+
            'height:120px;flex-shrink:0">'+
            '<img alt="card image" class="ogpCard_image" '+
            'data-ogp-card-image="" height="120" loading="lazy" src="'+ item_img_src +
            '" style="position:absolute;top:50%;left:50%;object-fit:contain;height:100%;'+
            'width:100%;transform:translate(-50%,-50%)" width="120"></span></a>'+
            '</article></div>';

        return card_tx;
    } // creat_card()



    function copy(){
        let copy_text;
        let tr_copy=document.querySelector('#tr_copy');
        if(tr_copy){
            tr_copy.onclick=function(){
                if(panel_disp==1){
                    if (navigator.clipboard){ // copyToClipboardを実行
                        if(action_type==0){
                            copy_text=url_input.textContent; }
                        else{
                            copy_text=creat_card(action_type); }
                        navigator.clipboard.writeText(copy_text);

                        tr_copy.textContent='copied';
                        setTimeout(()=>{
                            tr_copy.textContent='Copy'; }, 1000); }}}}}



    function close(){
        let tr_panel=document.querySelector('#tr_panel');
        let tr_close=document.querySelector('#tr_close');
        if(tr_panel && tr_close){
            tr_close.onclick=function(){
                panel_disp=0;
                tr_panel.style.display='none'; }}}

} // main()

「Amazon ItemURL」最新版について 

旧いバージョンの JavaScriptツールは、Amazonサイトのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

●「Amazon ItemURL」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。

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