「Awake」の機能
「Awake」は「管理トップ」と「アクセス解析」のページで動作し、基本はアクセス解析に関するアクセサリーツールです。
◎ ブログ管理画面におけるランキングデータの更新を速報する。
◎「管理トップ」と「アクセス解析」の往復を便利にするリンクを用意する。
◎「記事別アクセス数」のページの「総計」を表示する。
あっても無くても困らないツールと思い、気軽に機能を更新して来ました。
「管理トップ」ページの「アクセス解析」で、「現在のアクセス数」でアクセスの推移が表示されますが、今回はこれを「棒グラフ」風の表示にアレンジしました。
グラフ化の方法
JavaScriptのライブラリを利用すると、綺麗な円グラフ等も表示できますが、ここでは 昨日のアクセス数を100%とした現在のアクセス数を表示するだけですから、簡単なバー表示をすることにしました。
一番問題になるのは、バーを描画する方法です。 色々と方法はあると思うのですが、今回は「box-shadow」を使っています。
「box-shadow」で「inset」を指定すると、指定した要素(枠)の内側に影を描画でき、これを複数重ねて(ここでは青色の影と白の影)縦棒を演出しています。
下は、バー表示の変化する様子です。
「box-shadow」の高さは、実際は「box-shadow」の表示位置の「高低」でコントロールしています。
縦バーを表示するコードは以下です。
「Awake」ver. 1.6 57行~
「現在のアクセス数」に表示される数値から、現在のアクセス数の比率「g/(g-c)」を計算して、「box-shadow」を下方へずらす距離「var_top」を得ます。 その結果を実際の表示に反映する styleタグを最後に適用して、バーを表示しています。
「Awake」を使用するには
このツールは Chrome / Edge / Firefox の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。 以下のページに簡単な導入の説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
●「Tampermonkey」の「+」マークの「新規スクリプト」タブを開きます。
●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白になった編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Awake 〕 ver. 1.6
// ==UserScript== // @name Awake // @namespace http://tampermonkey.net/ // @version 1.6 // @description アクセスレポートの更新を背景色で表示・解析ページを「今日」で開く // @author Ameba Blog User // @match https://blog.ameba.jp/ucs/analysis* // @match https://blog.ameba.jp/ucs/top* // @grant none // ==/UserScript== let path=document.location.pathname; if(path=='/ucs/top.do'){ // 管理トップ で実行 let realtime=document.querySelector('.accessAnalysis__dailyAccess'); if(realtime){ realtime.style.cursor='pointer'; realtime.onclick=function(event){ if(!event.shiftKey){ window.location.href= 'https://blog.ameba.jp/ucs/analysis/analysis.do?unit=today'; } else{ window.location.href= 'https://blog.ameba.jp/ucs/analysis/analysis_page.do?unit=today'; }} document.onkeydown=function(event){ if(event.shiftKey){ realtime.classList.add('shift'); }} document.onkeyup=function(event){ if(!event.shiftKey){ realtime.classList.remove('shift'); }} let style_icon= '<style>.accessAnalysis__dailyAccess { position: relative; outline-offset: -1px; } '+ '.accessAnalysis__dailyAccess:before { position: absolute; top: 2px; left: 12px; '+ 'font-family: ameba-symbols; font-size: 32px; '+ 'content: "\\EA57"; color: #2196f3; } '+ '.accessAnalysis__dailyAccess.shift:after { content: "記事別"; '+ 'position: absolute; top: 43px; left: 16px; font: bold 16px Meiryo; } '+ '.accessAnalysis__dailyAccess:hover { outline: 1px solid #2196f3; } '+ '.realtimeAccess__header .spui-LinkButton--neutral { display: none; } '+ '#contents .accessAnalysis__summary { background: #e2eef4; } '+ '#contents .accessAnalysis__graph { background: #e2eef4; } '+ '</style>'; realtime.insertAdjacentHTML('afterbegin', style_icon); } setTimeout(()=>{ new_report1(); new_report_rank1(); }, 500); // ページを開いてからのタイミング setTimeout(()=>{ let Counter=document.querySelector('.c-numberCounter'); let Gap=document.querySelector('.accessAnalysis__dailyAccessGapNumber'); if(Counter && Gap){ let c=Counter.textContent/1; let g=Gap.textContent/1; let var_top; if(g<0){ var_top=Math.round(138*g/(g-c)); } else{ var_top=0; } let v_style= '<style class="var_style">.accessAnalysis__dailyAccess { '+ 'box-shadow: inset -11px '+ var_top +'px 0 #fff, inset -25px 0 0 #35c6d6 !important; }'+ '</style>'; if(!document.querySelector('.var_style')){ document.body.insertAdjacentHTML('beforeend', v_style); }} }, 3000); } // 管理トップ で実行 if(path.includes('analysis')){ // アクセス解析ページ全体 let target0=document.querySelector('#root > div'); let monitor0=new MutationObserver(page_change); monitor0.observe(target0, { childList: true }); page_change(); function page_change(){ let path=document.location.pathname; if(path.includes('analysis.do')){ // アクセス解析トップ clear_disp(); setTimeout(()=>{ new_report2(); new_report_rank2(); }, 500); // ページを開いてからのタイミング let realtime=document.querySelector('.p-realtimeAccess'); if(realtime){ realtime.style.cursor='pointer'; realtime.onclick=function(event){ if(!event.shiftKey){ window.location.href='https://blog.ameba.jp/ucs/top.do'; } else{ window.location.href= 'https://blog.ameba.jp/ucs/analysis/analysis_page.do?unit=today'; }} document.onkeydown=function(event){ if(event.shiftKey){ realtime.classList.add('shift'); }} document.onkeyup=function(event){ if(!event.shiftKey){ realtime.classList.remove('shift'); }} let style_icon= '<style>.p-realtimeAccess { position: relative; } '+ '.p-realtimeAccess:before { position: absolute; left: 10px; '+ 'font-family: ameba-symbols; font-size: 32px; '+ 'content: "\\EA31"; color: #009688; } '+ '.p-realtimeAccess.shift:before { content: "\\EA57"; color: #2196f3; } '+ '.p-realtimeAccess.shift:after { content: "記事別"; '+ 'position: absolute; top: 40px; left: 14px; font: bold 16px Meiryo; } '+ '.p-realtimeAccess:hover { border-color: #2196f3; } '+ '.p-analysisSummary { background: #e2eef4; }'+ '.p-genreRanking { background: #e2eef4; }'+ '.p-genreRanking__graph { background: #ffffff75 }'+ '</style>'+ '<style>.p-analysisSummary__ranking__rank { '+ 'margin-left: 20px; padding: 0 30px; width: fit-content; height: 32px; }'+ '</style>'; realtime.insertAdjacentHTML('afterbegin', style_icon); } } // アクセス解析トップ if(path.includes('analysis_page.do')){ // 記事別アクセス数ページ let target=document.querySelector('#root section'); let monitor=new MutationObserver(count_do); monitor.observe(target, { childList: true }); count_do(); } // 記事別アクセス数ページ } // page_change() } // アクセス解析ページ全体 function new_report1(){ let graph_term=document.querySelector('.accessAnalysis__graphHeadingTerm'); if(graph_term){ let accsess_text=graph_term.textContent.split('〜')[1]; let day=accsess_text.slice(0, -3).split('/')[1]; let date=new Date(); date.setDate(date.getDate() -1); // 昨日の日付を取得 let yesterday=date.getDate(); if(day==yesterday){ let access_panel=document.querySelector('.accessAnalysis__summary'); let access_graph=document.querySelector('.accessAnalysis__graph'); if(access_panel && access_graph){ access_panel.style.background='#fff'; access_graph.style.background='#fff'; }}}} function new_report_rank1(){ if(get_cookie('Awake_updated')==1){ // Cookie 「updated」をチェック Age 2h 🟢 disp_updated(); } // 更新後の2hはハイライト表示 let compare=''; let GRnum= document.querySelector('.accessAnalysis__summaryRankingGenreRelatedRankNumber'); if(GRnum){ compare+=GRnum.textContent; } let GAnum= document.querySelector('.accessAnalysis__summaryRankingGenreAllRankNumber'); if(GAnum){ compare+=GAnum.textContent; } let ORnum= document.querySelector('.accessAnalysis__summaryRankingOfficialRelatedRankNumber'); if(ORnum){ compare+=ORnum.textContent; } let OAnum= document.querySelector('.accessAnalysis__summaryRankingOfficialAllRankNumber'); if(OAnum){ compare+=OAnum.textContent; } // 以下のチェックを起動ごとに行う let last=get_cookie('Awake_last'); if(last!=0 && compare!=''){ if(last!=compare){ // 更新後の判定 Cookie 「updated」を登録 Age 2h 🟢 document.cookie='Awake_updated=1; Max-Age=7200'; disp_updated(); }} else{ ; } // 22h以内に管理トップを開いていない or compare取得に失敗した 判定不能 if(compare!=''){ // 起動ごとに Cookie「Awake_last」を更新 Age 22h 🟢 document.cookie='Awake_last='+compare+'; Max-Age=79200'; } function disp_updated(){ let panel_G=document.querySelector('.accessAnalysis__summaryRankingGenre'); if(panel_G){ panel_G.style.filter='hue-rotate(45deg)'; panel_G.style.background='#fff'; } let panel_O=document.querySelector('.accessAnalysis__summaryRankingOfficial'); if(panel_O){ panel_O.style.filter='hue-rotate(45deg)'; panel_O.style.background='#fff'; }} function get_cookie(name){ let cookie_req=document.cookie.split('; ').find(row=>row.startsWith(name)); if(cookie_req){ if(cookie_req.split('=')[1]==null){ return 0; } else{ return cookie_req.split('=')[1]; }} if(!cookie_req){ return 0; }} } // new_report_rank1() function new_report2(){ let access_title=document.querySelector('.p-analysisSummary__access__title'); if(access_title){ let accsess_text=access_title.textContent.match(/\(.*\)/).toString(); let day=accsess_text.match(/\/.*/).toString().replace(/[^0-9]/g, ''); let date=new Date(); date.setDate(date.getDate() -1); // 昨日の日付を取得 let yesterday=date.getDate(); if(day==yesterday){ let access_panel=document.querySelector('.p-analysisSummary'); access_panel.style.background='#fff'; }}} function new_report_rank2(){ let genre_xscale=document.querySelectorAll('.p-genreRanking__xScale'); if(genre_xscale.length==7){ let xscale_text=genre_xscale[6].textContent.match(/\/.*\(/).toString(); let day=xscale_text.replace(/[^0-9]/g, ''); let date=new Date(); date.setDate(date.getDate() -1); // 昨日の日付を取得 let yesterday=date.getDate(); let access_graph=document.querySelector('.p-genreRanking'); let ranking_rank=document.querySelectorAll('.p-analysisSummary__ranking__rank'); if(day==yesterday){ if(access_graph){ access_graph.style.background='#fff'; } if(ranking_rank[0]){ ranking_rank[0].style.background='#fff'; } if(ranking_rank[1]){ ranking_rank[1].style.background='#fff'; }}}} function count_do(){ clear_disp(); let retry=0; let interval=setInterval(more_open, 1000); function more_open(){ retry++; if(retry>20){ // リトライ制限 20回 4sec clearInterval(interval); alert("全てのリスト情報を開かずに合計しました"); } let more=document.querySelector('.p-accessGraph__moreLinkBtn--center'); if(more){ more.click(); } if(!more){ clearInterval(interval); page_count(); }} function page_count(){ let line_count=0; let num_count=0; let p_count=document.querySelectorAll('.p-accessGraphItem__count'); for(let k=0; k<p_count.length; k++){ line_count+=1; let line_item_disp=p_count[k].textContent.replace(/[^0-9]/g, ''); num_count+=parseInt(line_item_disp, 10); } let disp= '<div id="add_access">'+ '参照された記事数:'+ line_count +' アクセス数合計:'+ num_count + '<style>'+ '#add_access { position: absolute; top: 100px; right: calc(50% - 405px); '+ 'padding: 4px 15px 2px; font: normal 16px Meiryo; z-index: 10; '+ 'border: 1px solid #009688; background: #fff; '+ 'box-shadow: 2px 3px 6px rgb(170, 170, 170, 0.4); }'; if(line_count==100){ disp+= '#add_access { border: 1px solid red; }'; } disp+='</style></div>'; if(document.querySelector('#add_access')){ document.querySelector('#add_access').remove(); } document.body.insertAdjacentHTML('beforeend', disp); let add_access=document.querySelector('#add_access'); window.addEventListener("scroll", scroll); function scroll(){ let scroll_position=window.pageYOffset; if(add_access){ if(scroll_position>100){ add_access.style.position='fixed'; add_access.style.top='0'; } else{ add_access.style.position='absolute'; add_access.style.top='100px'; }}} } // page_count() } // count_do() function clear_disp(){ if(document.querySelector('#add_access')){ document.querySelector('#add_access').remove(); }}
「Awake」最新版について
旧いバージョンの「Awake」は、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。 最新バージョンへのリンクは、以下のページのリンクリストから探せます。