「Edit Yahoo Img」の使用方法
「Edit Yahoo Img」は「Search Yahoo Img」で作成した該当記事のリストを使い、Yahoo画像を検出した記事をワンタッチで呼び出せます。
◎ ユーザー自身の目でページの状態を確認します。 運良く救出できる画像があった場合は、それをユーザーの手作業でデスクトップなどに取得してください。
◎ このツールは即座に再編集画面を開くことができます。 編集画面で画像をアップロードし、記事から不要な無効リンクを削除し、取得した画像の貼付けを行います。
該当記事を順に調べないと、実際に救出できる画像が有るかどうかは判りません。 画像の取得は少々スキルが必要かもしれません。 アメーバ告知に書かれている様に、「リンクが無効だが画像が表示されている」状態なら、画像をデスクトップにドラッグすれば画像を取得できます。
しかし、私の調べた範囲では、画像のSRCを書換えて初めて画像が表示される場合があります。 ツールには、このSRC修正の機能を組み込みましたが、どの程度有効かは判りません。
また、現在の初期バージョンは、ページ上で画像を探すのを手伝う機能がないので、これは可能であれば、今後に機能を追加したいと思います。
❶ ツールの起動
「Search Yahoo Img」を「ON」にしていた場合は、「Tampermonkey」のダッシュボードを開き、必ず「OFF」にしてください。
◎「Edit Yahoo Img」を「ON」にします。 このツールは自動処理を行わないので、他のツールや拡張機能と一緒に動作をさせても、問題は生じ難いと思います。 通常のブログ編集をする環境で「Edit Yahoo Img」を「ON」にしてください。
◎ ユーザー自身の任意のブログページを開きます。ブラウザの「 」ボタンでページをリロードすると、「アメーバヘッダー」上にコントロールパネルが表示されます。
▪ 説明は後半に書いていますが、最初に起動した時に「♻ Sort」のボタンを押して、調査データのソートを1度だけ行ってください。 特に、後から追加のスキャンをした場合は、ソートが必要です。
▪「アメンバー記事」をスキャンした場合、「通常の記事の調査データ」と、「アメンバー記事の調査データ」は、分けられて保存されています。「アメンバー記事」を開いて「Edit Yahoo Img」を起動すると、その調査データを扱えます。
パネルの機能
以下は「Edit Yahoo Img」のパネルです。 横にスクロールして見てください。
❶ 処理済マークの記事数
「メモボタン」❹ で処理済の「青」マークを付けた記事数の表示
❷ 検出した該当記事数
「Search Yahoo Img」で検出した該当記事数の表示で、これは変わりません。
❸ 新しい該当記事へ移動
現在 該当記事を表示している場合、リストのひとつ新しい該当記事に移動します。
現在 該当記事以外を表示している場合は、側近の日付の該当記事に移動します。
❹「メモボタン」
該当記事は初期設定は「赤」マークが表示されます。「メモボタン」を押すと、処理済を意味する「青」マークになり、もう一度ボタンを押すと「赤」に戻せます。
▪ メモ内容は調査データに記録され、調査データを削除しない限り保持されます。
▪ ❸ ❻ の移動ボタンは常に該当記事を開きますが、「青」マークを付けた記事は移動先の対象から外れます。 対象に戻したい時は ➐のリストで記事を探して戻します。
▪ ブログページの「ページャー」「記事一覧」などを使い、該当記事以外を表示できます。 該当記事以外を表示している時は、ボタン❹は「グレー」の表示です。
➎「記事のデータ表示枠」
この枠内に、現在開いている記事のデータが表示されます。
▪左端は記事上の検索されたYahoo画像数です。 画像数が1個の場合は表示されませんが、2個なら「2*」3個は「3*」と表示されます。 この表示は、画像が複数ある場合に見落としを避けるためです。
▪記事IDは、記事ごとに付けられた固有の11桁の番号です。 この数はブラウザのURL窓に「entry-XXXX」として表示されています。
▪記事日付は投稿日時です。 記事タイトル下に表示される日時の部分です。
▪ この「データ表示枠」を「左クリック」すると、別タブにこの記事の再編集画面が開きます。「Shift+左クリック」では別ウインドウに再編集画面が開きます。 表示中の記事を即時に編集でき、画像の貼り付けや記事修正がはかどります。
❻ 旧い該当記事へ移動
現在 該当記事を表示している場合、リストのひとつ旧い該当記事に移動します。
現在 該当記事以外を表示している場合は、側近の日付の該当記事に移動します。
➐ リスト表示 機能
このツールのページャー ❸ ❻ では、リストの隣の記事にしか移動できません。 離れた日付の該当記事を探したり表示したい場合は、リスト表示機能を使います。
▪「▽ List」のボタンを押すと、下の様な該当記事の全てをスクロール表示するリストが表示されます。 該当記事数が多いと、リストは更に下方に延びます。
▪ リスト表示は ➎の「データ表示枠」と同内容です。 リスト行を「左クリック」すると、その行の記事を表示できます。 この機能で ❸ ❻ では移動し難い離れた記事へ、簡単に移動できます。
▪ メモボタン❹ で処理済にした記事は ❸ ❻ で探せなくなります。 処理済の記事を探したいたい時や、処理済を未処理に戻したい時は、このリストで記事を探し、行をクリックして記事を呼び出すのが最短です。
❽ Trial 機能
「❖ Trial」ボタンは、画像のSRCを試験的に書換えます。 表示されない画像の表示を試す手段で、他の方法で表示させる事が可能かも知れません。 PCが読み取ったSRCを書換えるだけで、ページをリロードすると元に戻ります。
「blog-001.west.edge.storage-yahoo.jp」の画像データで、SRC中の「other-」の文字列を削除すると、画像が表示される場合があります。
この「other-」や「OTHER-」の文字は、引っ越し時に追加されたものらしく、これを省くと画像が表示できる場合があります。「❖ Trial」は、この書換を試す機能で、画像が表示されれば、デスクトップにドラッグする事で画像を取得できます。 これまで「OTHER-」の削除では成功した例はなく、成否はサーバーに拠るのかも知れません。 ダメ元で押してみるボタンです。
➒ ソート
「♻ Sort」のボタンを押すと、「Search Yahoo Img」が作成した調査データを、記事の日付順に並べ直します。
▪ 過去記事からスキャンを一回で行った場合は、ソートは不要です。
▪ 先に新しい範囲をスキャンし、後で旧い範囲のスキャンを行うと、調査データの記事日付が新旧の順ではなくなります。 下はその例で、上側はデータが日付け順ではなく、下がソートを実行後です。
調査データが新旧順でない場合、「ページャー」❸ ❻ の移動で、記事の表示が時系列の順でなくなり、移動時に混乱します。「Edit Yahoo Img」で調査データを開いた最初の1回だけ、ソートを実行してください。
➓ 調査データの削除
「🔅」ボタンは、ローカルストレージを初期化するボタンです。 調査データは軽量で、残しておく方が良いと思います。 しかし、複数のブログを引っ越している場合、調査や修正は1つのブログ毎に行う必要があります。
「Edit Yahoo Img」で確認や修正を済ませ、調査データを削除してから、別のブログをスキャンする必要があります。 その調査データの削除に、このボタンが必要です。
▪「🔅」ボタンを押すと「データ削除の確認ダイアログ」が表示され、「OK」を押すと削除が実行されます。
▪ DevToolsを扱える場合は、手作業で調査データをテキスト保存できます。 また、ストレージに戻す事も可能です。 複数ブログの調査を同時に行う必要がある場合は、コメントください。
「Edit Yahoo Img」を使用するには
「Edit Yahoo Img」は Chrome/Edge/Firefox の拡張機能「Tampermonkey」上で動作するスクリプトツールです。 上記のブラウザで動作を確認していますが、他のブラウザでの動作は未確認です。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「+」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初から「新規のテンプレート」が記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔追記〕2021.10.26
以下は初期バージョン 0.1 ですが、次ページに ver. 0.2 があります。 ver. 0.2 は、ページ上の該当画像の位置を「▲」マークの点滅で表示する機能を追加しています。 明らかに ver. 0.2 が使い易く、インストールは ver. 0.2をお勧めします。
〔 Edit Yahoo Img 〕 ver. 0.1
// ==UserScript== // @name Edit Yahoo Img // @namespace https://ameblo.jp/ // @version 0.1 // @description Yahoo由来の画像検索と編集 // @author Ameblo User // @match https://ameblo.jp/* // @match https://secret.ameba.jp/* // @grant none // ==/UserScript== let ua=0; // Chromeの場合のフラグ let agent=window.navigator.userAgent.toLowerCase(); if(agent.indexOf('firefox') > -1){ ua=1; } // Firefoxの場合のフラグ let target=document.querySelector('head'); // 監視 target let monitor=new MutationObserver(do_task); monitor.observe(target, { childList: true }); // 監視開始 do_task(); function do_task(){ let entry_id=0; let entryWrapper=document.querySelector('.js-entryWrapper'); if(entryWrapper){ entry_id=entryWrapper.getAttribute('data-unique-entry-id'); } // 現在のページID let pageDB; // 主データ配列 [entry-ID, 対象数, 処理フラグ, 投稿日付, 起動コントロール] let idDB=[]; // 記事idの配列 let read_json=localStorage.getItem('CKIMG_DB'); // ローカルストレージ 保存名 pageDB=JSON.parse(read_json); for(let k=0; k<pageDB.length; k++){ idDB.push(pageDB[k][0]); } // 記事id検索用の配列を作る envi_0(); envi_1(); now_entry(); function now_entry(){ let done=document.querySelector('#done'); let page_edit=document.querySelector('#page_edit'); let entry_date; let time=document.querySelector('time'); if(!time){ entry_date=' '; } else{ entry_date=time.getAttribute('datetime'); } if(entry_id!=0){ let index=idDB.indexOf(entry_id); if(index!=-1){ if(pageDB[index][2]==0){ done.style.boxShadow='inset 0 0 30px red'; // 未処理 if(pageDB[index][1]>1){ page_edit.value=pageDB[index][1] +'*'+ entry_id +' date: '+ entry_date; } else{ page_edit.value=' '+ entry_id +' date: '+ entry_date; }} else{ done.style.boxShadow='inset 0 0 30px #00e2ff'; // 処理済 if(pageDB[index][1]>1){ page_edit.value=pageDB[index][1] +'*'+ entry_id +' date: '+ entry_date; } else{ page_edit.value=' '+ entry_id +' date: '+ entry_date; }}} else{ done.style.boxShadow='none'; page_edit.value=' '+ entry_id +' date: '+ entry_date; }} // 対象外 else{ page_edit.value=' '; }} let done=document.querySelector('#done'); done.onclick=function(event){ // マニュアルでマークを変更 event.preventDefault(); let index=idDB.indexOf(entry_id); if(index!=-1){ if(pageDB[index][2]==0){ pageDB[index][2]=1; // 処理済に変更 done.style.boxShadow='inset 0 0 30px #00e2ff'; } else{ pageDB[index][2]=0; // 未処理に変更 done.style.boxShadow='inset 0 0 30px red'; } panel_color(index); } // リストパネルの配色を変更 let write_json=JSON.stringify(pageDB); localStorage.setItem('CKIMG_DB', write_json); } // ローカルストレージ 保存 function get_date_n(){ let time=document.querySelector('time'); if(time){ let n_time=time.getAttribute('datetime'); if(n_time){ let m_time=n_time.replace(/-/g, ''); return parseInt(m_time, 10); }} else return 0; } let go_next=document.querySelector('#go_next'); go_next.onclick=function(){ let active_arr=[]; for(let k=1; k<pageDB.length; k++){ if(pageDB[k][2]==0){ // 未処理の [記事ID,日付] 配列を作る active_arr.push([pageDB[k][0], pageDB[k][3]]); }} if(entry_id!=0){ // 記事一覧を開いている場合などを除外 let now_index=active_arr.findIndex(item=> item[0]==entry_id); if(now_index!=-1){ // 現在 リスト中の記事ID if(now_index==active_arr.length-1){ alert("これより最近の未処理ページはありません"); } else{ goto(active_arr[now_index+1][0]); }} else{ // 現在 リスト外の記事ID 日付から次の記事を探す let entry_date=get_date_n(); let next_index=active_arr.findIndex( item=> item[1] >= entry_date ); if(next_index==-1){ alert("これより最近の未処理ページはありません"); } else{ goto(active_arr[next_index][0]); }}}} let go_back=document.querySelector('#go_back'); go_back.onclick=function(){ let active_arr=[]; for(let k=pageDB.length-1; k>=1; k--){ if(pageDB[k][2]==0){ // 未処理の [ページID,日付] 配列を作る(降順) active_arr.push([pageDB[k][0], pageDB[k][3]]); }} if(entry_id!=0){ // 記事一覧を開いている場合などを除外 let now_index=active_arr.findIndex(item=> item[0]==entry_id); if(now_index!=-1){ // 現在 リスト中の記事ID if(now_index==active_arr.length-1){ alert("これより以前の未処理ページはありません"); } else{ goto(active_arr[now_index+1][0]); }} else{ // 現在 リスト外の記事ID 日付から次の記事を探す let entry_date=get_date_n(); let back_index=active_arr.findIndex( item=> item[1] <= entry_date ); if(back_index==-1){ alert("これより以前の未処理ページはありません"); } else{ goto(active_arr[back_index][0]); }}}} let page_edit=document.querySelector('#page_edit'); page_edit.onclick=function(event){ let article=document.querySelector('.js-entryWrapper'); let path= 'https://blog.ameba.jp/ucs/entry/srventryupdateinput.do?id='+entry_id; if(event.shiftKey){ window.open(path, 0,'top=100, left=200, width=1020, height=900'); } else if(event.ctrlKey){ window.location.href=path; } else{ window.open(path, "_blank"); }} page_edit.onchange=panel_act(); // 記事一覧による移動に対応する let trial=document.querySelector('#trial'); // SRCの書換えで画像表示を試す trial.onclick=function(){ let entryBody=document.querySelector('#entryBody'); if(!entryBody){ entryBody=document.querySelector('.skin-entryBody'); } // アメンバー記事 let imgs=entryBody.querySelectorAll('img'); for(let k=0; k<imgs.length; k++){ if(search_img(imgs[k])==1){ trial_do(imgs[k]); }} function search_img(target_img){ let pattern=[ 'yahoo.co.jp/IMG/ybi', 'c.yimg.jp/res/blog', 'west.edge.storage-yahoo.jp'].join('|'); let url_regex=RegExp(pattern); let img_src=target_img.getAttribute('src'); if(url_regex.test(img_src)==true){ return 1; }} function trial_do(target_img){ let img_src=target_img.getAttribute('src'); let new_src=img_src.replace('://other-', '://'); target_img.setAttribute('src', new_src); }} function envi_0(){ let css= '#disp_yimg0 { position: absolute; top: 0; left: 0; font: 16px Meiryo; z-index: 1; '+ 'padding: 8px 0 6px; color: #000; background: aliceblue; width: 100%; } '+ '#disp_yimg0 span { font: 16px Meiryo; color: #000; } '+ '#num1, #num2 { width: 40px; margin-left: 4px; font: 16px Meiryo; '+ 'height: 18px; padding: 3px 8px 0; } '+ '#go_next, #go_back { height: 26px; font-size: 16px; width: 60px; '+ 'box-shadow: inset 0 0 40px #87caff; } '+ '#go_next { margin-left: 40px; } '+ '#done { font: 16px Meiryo; width: 15px; margin-left: 15px; height: 26px; } '+ '#page_edit { font: 16px Meiryo; height: 26px; width: 310px; text-align: left; '+ ' padding-left: 6px; margin: 0 15px 0 2px; box-shadow: inset 0 0 30px #fff; } '+ '#list_panel { margin-left: 30px; box-shadow: inset 0 0 40px #87caff; } '+ '#trial { margin-left: 50px; box-shadow: inset 0 0 50px #5fd1c1; } '+ '#page_sort { margin-left: 8px; box-shadow: inset 0 0 40px #5fd1c1; } '+ '#storage { margin-left: 8px; padding: 0; line-height: 25px; vertical-align: 1px;'+ 'box-shadow: inset 0 0 20px #5fd1c1; } '+ '.exe { font: 16px Meiryo; height: 26px; font-size: 16px; } '+ '#i_panel { position: fixed; top: 50px; right: 10px; width: 300px; '+ 'font: 16px Meiryo; color: #000; background: #fff; z-index: 4000; } '+ '#items_ul { max-height: 60vh; overflow-y: scroll; list-style: none; '+ 'padding: 0px 0 0 22px; } '+ '.item_li { margin: 6px 0; padding: 4px 0 1px 6px; line-height: 14px; cursor: pointer; } '+ '.raw { box-shadow: -12px 0 0 red; } .dev { box-shadow: -12px 0 0 #00e2ff; } '+ '.item_li:hover { background: #eee; } '; if(ua==1){ css+='input[type="submit"] { background: unset; }'; } let style=document.createElement('style'); style.setAttribute('id', 'style_yimg0'); style.insertAdjacentHTML('afterbegin', css); if(!document.querySelector('#style_yimg0')){ document.body.appendChild(style); } // CSSのセット let insert_div0; insert_div0=document.createElement('div'); insert_div0.setAttribute('id', 'disp_yimg0'); let ambHeader=document.querySelector('#ambHeader'); if(!ambHeader.querySelector('#disp_yimg0')){ ambHeader.appendChild(insert_div0); } insert_div0.innerHTML= '<span> 処理済</span>'+ '<input id="num1" type="text" readonly>'+ '<span> リスト</span>'+ '<input id="num2" type="text" readonly>'+ '<input id="go_next" type="submit" value="◀">'+ '<input id="done" type="submit" value=" ">'+ '<input id="page_edit" type="submit" value=" ">'+ '<input id="go_back" type="submit" value="▶">'+ '<input id="list_panel" class="exe" type="submit" value="▽ List">'+ '<input id="trial" class="exe" type="submit" value="❖ Trial">'+ '<input id="page_sort" class="exe" type="submit" value="♻ Sort">'+ '<input id="storage" class="exe" type="submit" value="🔅">'; } // envi_0() function envi_1(){ // 処理済・リスト数を表示 let num1=document.querySelector('#num1'); let num2=document.querySelector('#num2'); let undone=0; for(let k=0; k<pageDB.length; k++){ if(pageDB[k][2]==1){ undone+=1; }} num1.value=undone; num2.value=pageDB.length -1; } let page_sort=document.querySelector('#page_sort'); page_sort.onclick=function(){ // 主配列を末尾の entry-date でソートする let conf_str=' 🟢 Yahoo画像の調査ツール「Search Yahoo Img」で\n'+ ' 調査や追加の調査を行った後は、データのソートを\n'+ ' 行ってください。\n'+ ' ソートにより「Edit Yahoo Img」のページ送り順が\n'+ ' ブログのページ順と同じになります。\n\n'+ ' ソートする場合は「OK」を押してください'; let ok=confirm(conf_str); if(ok){ pageDB.sort((a, b)=>{ // 日付が若い順にソート if(a[3] > b[3]) return 1; if(a[3] < b[3]) return -1; return 0; }); let write_json=JSON.stringify(pageDB); localStorage.setItem('CKIMG_DB', write_json); // ローカルストレージ 保存 window.location.reload(); }} let list_panel=document.querySelector('#list_panel'); list_panel.onclick=function(){ let i_panel=document.querySelector('#i_panel'); if(!i_panel || i_panel.style.display=='none'){ disp_itemes(1); } else{ disp_itemes(0); }} function disp_itemes(n){ if(n==1){ let i_panel=document.querySelector('#i_panel'); if(!i_panel){ // リスト未作成 let panel=document.createElement('div'); panel.innerHTML= '<ul id="items_ul"></ul>'; panel.setAttribute('id', 'i_panel'); document.querySelector('body').appendChild(panel); let items_ul=document.querySelector('#items_ul'); if(items_ul){ items_ul.innerHTML=''; for(let k=1; k<pageDB.length; k++){ let item_li=document.createElement('li'); item_li.setAttribute('class', 'item_li'); if(pageDB[k][2]==0){ item_li.classList.add('raw'); } else if(pageDB[k][2]==1){ item_li.classList.add('dev'); } if(pageDB[k][1]>1){ item_li.innerHTML=pageDB[k][1] +'*'+ pageDB[k][0] + m(pageDB[k][3]); } else{ item_li.innerHTML='  '+ pageDB[k][0] + m(pageDB[k][3]); } items_ul.appendChild(item_li); }}} else{ // リスト作成済 i_panel.style.display='block'; } panel_act(); panel_get(); } else{ let i_panel=document.querySelector('#i_panel'); if(i_panel){ i_panel.style.display='none'; }} function m(da){ let d=da.toString(); return ' '+ d.slice(0, 4) +'-'+ d.slice(4, 6) +'-'+ d.slice(6, 8); } } // disp_itemes() function panel_act(){ // 日付の近いリスト行を表示 let entry_date=get_date_n(); if(entry_date!=0){ let next_index=pageDB.findIndex( item=> item[3] >= entry_date ); if(next_index==-1){ next_index=pageDB.length-1; } let list_items=document.querySelectorAll('.item_li'); if(list_items.length>0){ list_items[next_index-1].scrollIntoView({block: "center"}); }}} function panel_get(){ let list_items=document.querySelectorAll('.item_li'); for(let k=0; k<list_items.length; k++){ list_items[k].onclick=function(){ goto_(k); }} function goto_(k){ goto(pageDB[k+1][0]); }} function goto(entry){ let path=location.pathname; // 現在のパス名 let user_id=path.split('/')[1]; let goto_url= 'https://ameblo.jp/'+ user_id +'/entry-'+ entry +'.html'; window.location.href=goto_url; } function panel_color(index){ let list_items=document.querySelectorAll('.item_li'); if(list_items[index-1]){ list_items[index-1].classList.toggle('raw'); list_items[index-1].classList.toggle('dev'); }} let storage=document.querySelector('#storage'); storage.onclick=function(){ let conf_str= ' 🔴 全ての調査データを削除します\n\n'+ ' 調査データは 70kB/1000件で、ローカルストレージ\n'+ ' の容量を心配する必要はありません。\n'+ ' 再調査の目的でデータをリセットする場合を除いて\n'+ ' 調査データを削除せずにしておく事をお勧めします。\n\n'+ ' データを全削除する場合は「OK」を押してください'; let ok=confirm(conf_str); if(ok){ pageDB=[['', 0, 0, 0, 1]]; let write_json=JSON.stringify(pageDB); localStorage.setItem('CKIMG_DB', write_json); // ローカルストレージ 保存 window.location.reload(); }} } // do_task()