「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()