記事の選択操作を拡張
検索結果のリストページ内で、
➔ 「⇧」「⇩」キーで記事を選択を
➔ 「Enter」キーで選択した記事を開く
というキー操作を実現しましたが、リストページから選択した記事ページへ画面が遷移するので、それまでの検索結果やチェックした経過が見えなくなります。
「Alt+ ⇦」のショートカットで、遷移前の画面に戻れますが、単に記事を見つけるだけではない作業で「遷移」は困るので、別タブに開きたい場合は多いものです。
そこで、「Ctrl+Enter」で「別タブ」に記事を開く様にしました。 この操作で開いた別タブの記事を見るには「Ctrl+Tab」のショートカットが使えます。
ここまでの操作は、全てマウスに手を触れずにキーボードの操作で行えます。 大量の記事をチェックする作業では、キー操作に慣れると時間を節約できます。
「Ameba Search Tools」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Ameba Search Tools 〕 ver. 0.2
// ==UserScript==
// @name Ameba Search Tools
// @namespace http://tampermonkey.net/
// @version 0.2
// @description アメーバ検索の環境ツール
// @author Ameba Blog User
// @match https://search.ameba.jp/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=ameba.jp
// @grant none
// ==/UserScript==
let target=document.querySelector('head');
let monitor=new MutationObserver(page_select);
monitor.observe(target, { childList: true });
function page_select(){
if(document.querySelector('.PcResultPagination')){
main(); }}
function main(){
let now;
let now_u;
let now_s;
let q;
let now_s_q;
let now_s_pre;
let now_s_next;
let pre_url;
let next_url;
function get_pre_url(){
now=location.href;
now_u=now.split('?')[0];
now_s=now.split('?')[1];
if(now_s){
q=now_s.split('&');
for(let k=0; k<q.length; k++){
if(q[k].indexOf('p=')!=-1){
now_s_q=q[k]; }}
let now_page;
if(now_s_q){
now_page=now_s_q.substr(2);
if(now_page/1==1){
now_s_pre='p=1'; }
else{
now_s_pre='p='+ (now_page/1 -1); }
if(now_s_pre){
for(let k=0; k<q.length; k++){
if(q[k].indexOf('p=')!=-1){
q[k]=now_s_pre; }}
pre_url=now_u +'?'+ q.join('&'); }}
else{
pre_url=now +'&p=1'; }}
else{
pre_url=now +'?p=1'; }
} // get_pre_url()
function get_next_url(){
now=location.href;
now_u=now.split('?')[0];
now_s=now.split('?')[1];
if(now_s){
q=now_s.split('&');
for(let k=0; k<q.length; k++){
if(q[k].indexOf('p=')!=-1){
now_s_q=q[k]; }}
let now_page;
if(now_s_q){
now_page=now_s_q.substr(2);
if(now_page/1==100){
now_s_next='p=100'; }
else{
now_s_next='p='+ (now_page/1 +1); }
if(now_s_next){
for(let k=0; k<q.length; k++){
if(q[k].indexOf('p=')!=-1){
q[k]=now_s_next; }}
next_url=now_u +'?'+ q.join('&'); }}
else{
next_url=now +'&p=1'; }}
else{
next_url=now +'?p=1'; }
} // get_next_url()
document.addEventListener("keydown", check_arrow);
function check_arrow(event){
if(event.keyCode==37){ //「⇦」
event.preventDefault();
go_pre(); }
if(event.keyCode==39){ //「⇨」
event.preventDefault();
go_next() }
if(event.keyCode==38){ //「⇧」
event.preventDefault();
select_up(); }
if(event.keyCode==40){ //「⇩」
event.preventDefault();
select_down() }
if(event.keyCode==13){ //「Enter」
event.preventDefault();
select_open(event); }}
function go_pre(){
if(go_check(0)){
get_pre_url();
if(pre_url){
location.href=pre_url; }}}
function go_next(){
if(go_check(1)){
get_next_url();
if(next_url){
location.href=next_url; }}}
function go_check(n){
if(n==0){
let edge=document.querySelector('.PcResultPagination_MoreLink .s-triangle-left');
if(edge){
return true; }
else{
return false; }}
if(n==1){
let edge=document.querySelector('.PcResultPagination_MoreLink .s-triangle-right');
if(edge){
return true; }
else{
return false; }}}
let items;
function get_items(){
let PcBL=document.querySelectorAll('.PcBloggerListItem');
let PcAN=document.querySelectorAll('.PcAmebaNewsListItem');
let PcEL=document.querySelectorAll('.PcEntryListItem');
if(PcBL.length!=0){
items=PcBL; }
else if(PcAN.length!=0){
items=PcAN; }
else if(PcEL.length!=0){
items=PcEL; }
} // get_items()
let order=-1;
function select_up(){
get_items();
if(order>0){
for(let k=0; k<items.length; k++){
items[k].style.outline=''; }
order=order-1;
items[order].style.outline='2px solid #2196f3'; }}
function select_down(){
get_items();
if(order<items.length-1){
for(let k=0; k<items.length; k++){
items[k].style.outline=''; }
order=order+1;
items[order].style.outline='2px solid #2196f3'; }}
function select_open(event){
get_items();
for(let k=0; k<items.length; k++){
if(items[k].style.outlineWidth=='2px'){
let link=items[k].querySelector('a');
if(link){
let url=link.getAttribute('href');
if(event.ctrlKey){
window.open(url, '_blank'); }
else{
window.location.href=url; }}}}}
let s_input=document.querySelector('.PcSuggestForm_Input');
if(s_input){
s_input.onclick=function(){
get_items();
for(let k=0; k<items.length; k++){
items[k].style.outline=''; }}}
} // main()
アメーバ検索のページデザインについて
このページの「アメーバ検索画面」のスクリーンショットは、「Stylus」を使ったアレンジを適用しています。 以下のアレンジは、検索画面を大変に使い易くします。
これらのアレンジを検索画面に適用するには、拡張機能「Stylus」の導入が必要です。「Stylus」の導入やスタイルの取得については、以下のページを参照ください。
「Ameba Search Tools」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Ameba Search Tools」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
