「記事の編集・削除」で、特定の年月にジャンプする機能
「記事の編集・削除」には、ブログ投稿した記事が年月別にリスト表示され、「投稿年月」を選択して記事データにアクセスできます。 ここでは、記事の再編集、公開記事の下書き化や削除・複製が可能で、ブログ記事全体の管理中枢といえます。
「Quick EntryList」は、この「記事の編集・削除」での操作を拡張するツールです。
① 年度変更がプルダウンメニューで一瞬に出来る。(デフォルトは1年ずつ移動)
➁ ユーザーが設定した年月に、ボタンひとつで移動できる。
➁は、このツールの主要な機能です。 特別に何度も参照する過去記事がある場合、参照する度に記事を探すのは不便です。 そういった記事のリンクを、デスクトップ等に置く方は多いかも知れませんが、余りスマートではない様に思います。
そんな記事が増えて来た場合は、それらの記事を「複製」し、投稿年月を適当な「同じ特定の年月」に書換えて保存すると便利です。 これは「ブログの書庫利用」で、「複製」時に「下書き」「公開」「アメンバー」などを必要に応じて指定します。 書庫を「公開」して、関連記事を纏めてプレゼンテーションに使えます。(同等の事はテーマを作って「複製」記事を纏めても出来ますが)
以上は一例ですが、「記事の編集・削除」で、特定の年月のページをメモして、簡単に開けられる様すれば、過去記事データの有効な使い方が色々と増えて来ます。
ジャンプ先のボタンを 6個にしました
これまでの「Quick EntryList」は、ジャンプ先のボタンが 4個でした。 制作の当初は 4ヵ所で充分に思えたのですが、私の利用方法では足りなくなって来たのです。 登録ポイントは、使い方により充分な場合も、もっと必要という場合もあり得ると想像しますが、こればかりは私自身の使い方から類推しています。
その気になれば、プログラム上でジャンプポイントは何個でも作れますが、その場合はスイッチの区別をする工夫と、コンパクトなボタンデザインが必要でしょう。
これまでの登録の継承
既に 4個の登録がある場合、その登録をリセットせずに、継承しながら登録上限を6個にする必要があります。 登録の本体はローカルストレージに保存している配列データですが、それを 2個増す操作です。
この様な継承コードはこれまでにも作って来ましたが、以下のコードです。
「Quick EntryList」 ver.1.1 24行
「push()」は、配列の子要素を追加するメソッドで、「'?'」の初期値の子要素を、ループで追加しています。 簡単にループ「2回」で良いのですが、更に増やす必要が出て来た場合を考えて、期待数まで増やす万能のコードにしています。
実際の表示
下は、新しい「Quick EntryList」のインターフェイスで、スイッチの数が6個になっています。
最後の2個は追加されたボタンで、私の場合は、現在は未登録です。
この段階まで更新をして、一番最近のページを開くボタンが無いので、「管理トップ」を表示して「記事の編集・削除」を開き直していたのを、思い出しました。 未登録のボタンを「Click」するとリストの先頭を表示できるのですが、これが埋まってしまうとその手が使えません。
そこで、リストのトップ(現在の日付のページ)を開くボタンを追加する事にしました。 この「Top」のボタンは、6個のボタンと並びますが、コードは独立した簡単なリストのトップを開くボタンです。
基本的な操作方法
操作方法は、これまでと変わりはありません。
●「表示年月」の部分にマウスポインタを乗せると、操作方法の説明が出ます。
▪ ボタンを「Ctrl+Click」すると、現在に表示している「記事の編集・削除」のページ(記事リスト)が、ボタンに登録されます。
▪ ボタンを「Click」すると、登録したページ(記事リスト)へジャンプします。
これまでのボタンのデザインは、ブラウザデフォルトの「button」デザインを利用していたので、背景がグレーでした. 今回、背景を白にして少し見易くし、マウスポインターを乗せるとブルーのアウトラインが表示されるデザインに改めました。
「Quick EntryList」 のマニュアル
「Quick EntryList」の全ての機能や扱い方の詳細は、マニュアルを参照ください。
「Quick EntryList」を利用するには
このツールは Chrome / Edge / Firefox の拡張機能「Tampermonkey」上で動作します。 このツールは常駐型のツールで、Tampermonkey上で常に「ON」にしておくと、「記事の編集・削除」の画面を開いた時に起動します。
以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。 以下のページに簡単な導入の説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
●「Tampermonkey」の「+」マークの「新規スクリプト」タブを開きます。
●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Quick EntryList 〕 ver. 1.1
// ==UserScript== // @name Quick EntryList // @namespace http://tampermonkey.net/ // @version 1.1 // @description 記事の編集・削除の機能拡張 // @author Ameba Blog User // @match https://blog.ameba.jp/ucs/entry/srventrylist* // @match https://blog.ameba.jp/ucs/entry/srventry*draft* // @match https://blog.ameba.jp/ucs/top.do // @grant none // ==/UserScript== if(location.pathname.includes('srventrylist')){ // 記事の編集・削除の場合 let help_url='https://ameblo.jp/personwritep/entry-12742971012.html'; let year_list=[]; // 選択年度の配列 let point_ym; // ユーザーの指定年月のクエリー文字 let qe_ym=[]; // Quick EntryList 復帰ポイントのユーザー設定 let read_json=localStorage.getItem('QE_Point'); // ローカルストレージ 保存名 qe_ym=JSON.parse(read_json); if(qe_ym==null){ qe_ym=['', '?', '?', '?', '?', '?', '?']; } else{ for(let k=qe_ym.length +1; k<8; k++){ // 配列の数を7個にする qe_ym.push('?'); }} let write_json=JSON.stringify(qe_ym); localStorage.setItem('QE_Point', write_json); // ローカルストレージ 保存 let help_SVG= '<svg class="qe_h" height="20" width="24" viewBox="0 0 210 220">'+ '<path d="M89 22C71 25 54 33 41 46C7 81 11 142 50 171C58 177 '+ '68 182 78 185C90 188 103 189 115 187C126 185 137 181 146 175'+ 'C155 169 163 162 169 153C190 123 189 80 166 52C147 30 118 18'+ ' 89 22z" style="fill:#999;"></path>'+ '<path d="M67 77C73 75 78 72 84 70C94 66 114 67 109 83C106 91'+ ' 98 95 93 101C86 109 83 116 83 126L111 126C112 114 122 108 1'+ '29 100C137 90 141 76 135 64C127 45 101 45 84 48C80 49 71 50 '+ '68 54C67 56 67 59 67 61L67 77M85 143L85 166L110 166L110 143L'+ '85 143z" style="fill:#fff;"></path>'+ '</svg>'; let disp_qe= '<div id="disp_qe">'+ '<span class="qe_s">表示年月:</span>'+ '<button class="qe_button" id="qe_b1"></button>'+ '<button class="qe_button" id="qe_b2"></button>'+ '<button class="qe_button" id="qe_b3"></button>'+ '<button class="qe_button" id="qe_b4"></button>'+ '<button class="qe_button" id="qe_b5"></button>'+ '<button class="qe_button" id="qe_b6"></button>'+ '<button class="qe_button" id="qe_top">Top</button>'+ '<a href="'+ help_url +'" target="_blank" rel="noopener">'+ help_SVG + '</a></div>'; let Main_h1=document.querySelector('#ucsMainLeft h1'); if(!document.querySelector('#disp_qe') && Main_h1){ Main_h1.insertAdjacentHTML('beforeend', disp_qe); } let ym_select= '<select id="ym_select_box"></select>'; let entrySort=document.querySelector('#entrySort'); if(!document.querySelector('#ym_select_box') && entrySort){ entrySort.insertAdjacentHTML('beforeend', ym_select); } let qe_style= '<style id="qe_style">'+ '#disp_qe { float: right; margin-top: -2px; background: #fff; } '+ '.qe_s { position: relative; font: normal 14px Meiryo; cursor: default; } '+ '.qe_s:hover::before { '+ 'content: "▼ Ctrl+Click:現在の表示年月を登録 Click:登録ページを表示"; '+ 'position: absolute; top: -28px; left: 93px; display: block; white-space: nowrap; '+ 'height: 19px; padding: 0 6px; background: #fff; border: 1px solid #aaa; } '+ '.qe_button { height: 25px; max-width: 72px; font-size: 15px; '+ 'margin: 0 3px; padding: 2px 6px; border: 1px solid #aaa; border-radius: 3px; '+ 'background: #fff; vertical-align: -1px; cursor: pointer; } '+ '.qe_button:hover { outline: 1px solid #2196f3; } '+ '.qe_h { vertical-align: -6px; } '+ '#entrySort { position: relative; padding: 1px 0 0; } '+ '#entryYear { display: flex; justify-content: space-between; '+ 'align-items: center; width: 120px; margin: 0 5px; } '+ '#yearText { position: absolute; top: 6px; left: 84px; width: 16px; '+ 'padding: 0 1px; font-size: 14px; color: #1976d2; z-index: 1; } '+ '#ym_select_box { position: absolute; top: 0; left: 24px; height: 29px; '+ 'width: 81px; padding: 1px 11px 0 0; font: bold 18px Meiryo !important; '+ 'text-align: center; border: 1px solid #ccc; outline: none; background: #fff; '+ 'appearance: none; scrollbar-width: none; cursor: pointer; } '+ '#ym_select_box::-webkit-scrollbar { display: none; } '+ '#ym_select_box option { font: bold 18px Meiryo; } '+ '#entryMonth { margin-right: -10px; } '+ '#ucsContent { margin-bottom: 0; } '+ '#ucsMain { padding-bottom: 0; } '+ '#sorting .pagingArea { float: left; margin: -3px -10px -3px 20px; '+ 'background: #fff; } '+ '#sorting .pagingArea ul { padding: 3px 2px 2px; } '+ '#sorting .pagingArea li { margin: 0; padding: 0;border-right: none; }</style>'; if(!document.querySelector('#qe_style')){ document.documentElement.insertAdjacentHTML('beforeend', qe_style); } for(let k=1; k<7; k++){ disp_button(k)} set_year_list(); disp_select(); select_year(); point_set(1); point_set(2); point_set(3); point_set(4); point_set(5); point_set(6); point_top(); paging(); feature(); function disp_button(n){ let button=document.querySelector('#qe_b'+n); if(button){ let date_raw; let ny; let nm; if(qe_ym[n].indexOf("&so=")!=-1){ // 古い順表示の場合 date_raw=qe_ym[n].substring(0, qe_ym[n].indexOf("&so=")); } else{ date_raw=qe_ym[n]; } ny=date_raw.slice(-6, -2); nm=date_raw.slice(-2); if((ny>1999 && ny<2100) && (nm>0 && nm<13)){ button.textContent=ny+'-'+nm; } else{ // 未登録の場合 button.textContent='┄┄┄'; }}} function select_year(){ let set_year; let ym_select_box=document.querySelector('#ym_select_box'); if(ym_select_box){ ym_select_box.onchange=function(){ set_year=ym_select_box.options[ym_select_box.selectedIndex].value; location.href= "https://blog.ameba.jp/ucs/entry/srventrylist.do?entry_ym="+ set_year +"01"; }}} function set_year_list(){ let currentTime=new Date(); let year=currentTime.getFullYear(); for(let k=2000; k<year+1; k++){ year_list.push(k); } year_list.reverse(); } function disp_select(){ let page_year; let query; let input_year=document.querySelector('input[name="urlParam"]'); if(input_year){ query=input_year.value; page_year=query.slice(-6, -2); } if(!page_year){ let currentTime=new Date(); let current_year=currentTime.getFullYear(); page_year=current_year; } let ym_select_box=document.querySelector('#ym_select_box'); if(ym_select_box){ for(let k=0; k<year_list.length; k++){ let option=document.createElement('option'); option.text=year_list[k]; option.value=year_list[k]; ym_select_box.appendChild(option); if(page_year==year_list[k]){ option.selected=true; }}}} function point_set(n){ let point_button=document.querySelector('#qe_b'+n); if(point_button){ point_button.onclick=function(event){ if(!event.ctrlKey){ // 登録ページの表示 location.href= "https://blog.ameba.jp/ucs/entry/srventrylist.do"+ qe_ym[n]; } else{ // ページを登録 let date_raw; let ny; let nm; let current_search; // 現在のクエリー文字列 if(!location.search){ //「記事の編集・削除」の初期表示の場合 let currentTime=new Date(); ny=currentTime.getFullYear(); nm=('0'+(currentTime.getMonth()+1)).slice(-2); } else{ if(location.search.indexOf("&so=")!=-1){ // 古い順表示の場合 date_raw=location.search.substring(0, location.search.indexOf("&so=")); } else{ date_raw=location.search; } ny=date_raw.slice(-6, -2); nm=date_raw.slice(-2); } if((ny>1999 && ny<2100) && (nm>0 && nm<13)){ let ok=confirm( " 💢 Quick指定年月の登録を変更します\n\n"+ "「OK」を押すと現在選択している "+ny+"年 "+nm+"月 のページを登録します" ); if(ok){ current_search=location.search; if(!current_search){ current_search='?entry_ym='+ny+nm; } qe_ym[n]=current_search; let write_json=JSON.stringify(qe_ym); // ローカルストレージ 保存 localStorage.setItem('QE_Point', write_json); disp_button(n); }} else{ // クエリーの値が不正値の場合 let ok=confirm( " 💢 クエリー文字列が異常値で登録できません\n\n"+ " 「OK」を押すと先頭ページに移動します" ); if(ok){ location.href= "https://blog.ameba.jp/ucs/entry/srventrylist.do"; }}} }}} // point_set() function point_top(){ let point_top=document.querySelector('#qe_top'); if(point_top){ point_top.onclick=function(event){ location.href= "https://blog.ameba.jp/ucs/entry/srventrylist.do"; }}} function paging(){ let paging_area=document.querySelector('.pagingArea'); if(paging_area){ let sorting=document.querySelector('#sorting'); let s_theme=document.querySelector('#selectTheme'); let clone_paging=document.querySelector('#sorting .pagingArea'); if(!clone_paging){ if(sorting && s_theme){ let clone=paging_area.cloneNode(true); sorting.insertBefore(clone, s_theme.nextElementSibling); }}}} function feature(){ let currentDate = new Date(); let year=currentDate.getFullYear(); let month=currentDate.getMonth() + 1; let date=currentDate.getDate(); let hour=currentDate.getHours(); let minute=currentDate.getMinutes(); function formatTime(val) { return ("0" + val).slice(-2); } //「0」付きで2桁テキストに変更 let now=year + formatTime(month) + formatTime(date) + formatTime(hour) + formatTime(minute) now=parseInt(now, 10); let page_year=document.querySelector('#entryYear #year'); if(page_year){ page_year=page_year.textContent; } else{ page_year='2000'; } let p_time=document.querySelectorAll('#entryList .date'); for(let k=0; k<p_time.length; k++){ let p_date=p_time[k].textContent; p_date=page_year + p_date.replace(/[^0-9]/g, ''); p_date=parseInt(p_date, 10); // 文字列を10進数に変換 if(p_date>now){ p_time[k].style.color='#fff'; p_time[k].style.background='#2196f3'; }} } // feature() } // 記事の編集・削除の場合 if(location.pathname.includes('top.do')){ // 管理トップの場合 let EntryStatus=document.querySelectorAll('.recentEntry__itemEntryStatus'); for(let k=0; k<EntryStatus.length; k++){ if(EntryStatus[k].textContent.includes('下書き中')){ EntryStatus[k].style.overflow='hidden'; let add= '<span style="padding:2px 4px; margin: 0 -4px; '+ 'color: #fff; background: #2196f3;">下書き</span>'; let str=EntryStatus[k].textContent.split('・'); if(str.length<3){ EntryStatus[k].innerHTML=add; } if(str.length==3){ EntryStatus[k].innerHTML=str[0] +' '+ add; }}} } // 管理トップの場合 if(location.pathname.includes('draft')){ // 下書き保存の場合 let el_button= '<div id="el_button">'+ '<svg viewBox="0 0 120 120">'+ '<path d="M0 0L0 112L112 112L112 0L0 0z" style="fill: #fff"></path>'+ '<path d="M23 21L45 21C48 21 52 20 55 22C60 26 56 34 64 36C70 38 '+ '78 37 84 37C88 37 92 37 94 40C97 43 96 48 96 52L96 81C100 81 103 '+ '80 105 76C107 73 106 69 106 65L106 43C106 39 106 35 104 31C101 27 '+ '96 27 92 27C84 27 76 27 68 27C68 22 68 17 65 14C61 10 55 11 50 11C39 '+ '11 26 8 23 21M52 43C52 40 52 38 51 35C48 25 35 27 27 27C21 27 13 26 '+ '9 32C6 37 7 43 7 48L7 82C7 87 6 94 10 97C15 101 22 100 28 100L69 '+ '100C74 100 81 101 86 98C90 95 90 91 90 86L90 58C90 53 90 48 86 '+ '45C83 43 79 43 75 43L52 43z" style="fill: #1976D2"></path>'+ '<path d="M80 53C72 52 65 52 57 52C54 52 49 53 47 52C40 48 44 39 '+ '38 37C34 36 21 35 18 39C16 42 17 45 17 48L17 69C17 74 15 85 18 '+ '89C21 92 28 91 32 91L67 91C71 91 77 92 80 89C82 86 81 81 81 78C81 '+ '70 81 61 80 53z" style="fill: #fff"></path></svg>'+ '記事の編集・削除を表示'+ '<style>'+ '#el_button { position: absolute; top: 100px; left: calc(50% + 200px); '+ 'font: bold 16px Meiryo; white-space: nowrap; padding: 7px 20px 5px; '+ 'border-radius: 6px; color: #1976D2; background: #fff; '+ 'box-shadow: 5px 10px 30px #00000025; } '+ '#el_button:hover { background: #cfd8dc; } '+ '#el_button svg { width: 48px; height: 36px; vertical-align: -12px; } }'+ '</style></div>'; if(!document.querySelector('#el_button')){ document.body.insertAdjacentHTML('beforeend', el_button); } let files_link=document.querySelector('#el_button'); if(files_link){ files_link.onclick=function(){ location.href="https://blog.ameba.jp/ucs/entry/srventrylist.do"; }}}
「Quick EntryList」最新版について
旧いバージョンの「Quick EntryList」は、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。 最新バージョンへのリンクは、以下のページのリンクリストから探せます。