PCのブラウザでカクヨム小説を読む人向けのキーボードでページめくりできるスクリプト
@PXXN3
PCのブラウザで小説を読む人向けのキーボードでページめくりできるスクリプト
カクヨムで小説を読むとき、前のエピソードや次のエピソードを見るには画面の先頭や末尾までスクロールしてクリックする必要があります。
これをいつでもワンキーでできるようにする魔法をこれから紹介します。
① Google Chrome や Firefox などのブラウザをお使いの方は、まず最初にスクリプト実行できる拡張機能を選んで有効にしてください。
JavaScript を inject 実行できる拡張機能ならなんでもよいです。
Chrome では Scripty や Script Runner Pro など、Firefox なら run-a-script や Injector などといったものが無数にあります。
使いやすく信頼できるものを選んでください。
② 次に以下のスクリプトをコピペして必要なサイトで自動で読み込むように設定してください。
ページめくりスクリプト
///////////////////////////////////////////////////ここから
(function () {
"use strict";
const list = [
{ url: 'kakuyomu.jp/works/',
code: 'ArrowLeft',
modifiers: '',
type: 'link',
link: 'prev',
},
{ url: 'kakuyomu.jp/works/',
code: 'NumpadSubtract',
modifiers: '',
type: 'link',
link: 'prev',
},
{ url: 'kakuyomu.jp/works/',
code: 'ArrowRight',
modifiers: '',
type: 'link',
link: 'next',
},
{ url: 'kakuyomu.jp/works/',
code: 'NumpadAdd',
modifiers: '',
type: 'link',
link: 'next',
},
{ url: 'kakuyomu.jp/works/',
code: 'Enter',
modifiers: '',
type: 'a',
link: '続きから読む',
},
{ url: 'kakuyomu.jp/works/',
code: 'NumpadEnter',
modifiers: '',
type: 'a',
link: '続きから読む',
},
{ url: 'kakuyomu.jp/',
code: 'BracketLeft',
modifiers: '',
type: 'url',
link: 'https://kakuyomu.jp/my',
},
{ url: 'kakuyomu.jp/',
code: 'Numpad3',
modifiers: '',
type: 'url',
link: 'https://kakuyomu.jp/my',
},
{ url: 'kakuyomu.jp/',
code: 'BracketRight',
modifiers: '',
type: 'url',
link: 'https://kakuyomu.jp/my/antenna/works',
},
{ url: 'kakuyomu.jp/',
code: 'Numpad2',
modifiers: '',
type: 'url',
link: 'https://kakuyomu.jp/my/antenna/works',
},
{ url: 'syosetu.com/',
code: 'ArrowLeft',
modifiers: '',
type: 'aclass',
link: 'c-pager__item--before',
},
{ url: 'syosetu.com/',
code: 'NumpadSubtract',
modifiers: '',
type: 'aclass',
link: 'c-pager__item--before',
},
{ url: 'syosetu.com/',
code: 'ArrowRight',
modifiers: '',
type: 'aclass',
link: 'c-pager__item--next',
},
{ url: 'syosetu.com/',
code: 'NumpadAdd',
modifiers: '',
type: 'aclass',
link: 'c-pager__item--next',
},
{ url: 'syosetu.com/favnovelmain',
code: 'ArrowLeft',
modifiers: '',
type: 'aclasstitle',
links: ['c-up-pager__item', '前'],
},
{ url: 'syosetu.com/favnovelmain',
code: 'NumpadSubtract',
modifiers: '',
type: 'aclasstitle',
links: ['c-up-pager__item', '前'],
},
{ url: 'syosetu.com/favnovelmain',
code: 'ArrowRight',
modifiers: '',
type: 'aclasstitle',
links: ['c-up-pager__item', '次'],
},
{ url: 'syosetu.com/favnovelmain',
code: 'NumpadAdd',
modifiers: '',
type: 'aclasstitle',
links: ['c-up-pager__item', '次'],
},
{ url: 'syosetu.com/impression/',
code: 'ArrowLeft',
modifiers: '',
type: 'atitle',
link: '前のページ',
},
{ url: 'syosetu.com/impression/',
code: 'NumpadSubtract',
modifiers: '',
type: 'atitle',
link: '前のページ',
},
{ url: 'syosetu.com/impression/',
code: 'ArrowRight',
modifiers: '',
type: 'atitle',
link: '次のページ',
},
{ url: 'syosetu.com/impression/',
code: 'NumpadAdd',
modifiers: '',
type: 'atitle',
link: '次のページ',
},
{ url: 'syosetu.com/impression/',
code: 'ArrowLeft',
modifiers: '+',
type: 'dec',
re: '\/no\/(\\d+)\/.*',
str: '/no/$$/',
},
{ url: 'syosetu.com/impression/',
code: 'NumpadSubtract',
modifiers: '+',
type: 'dec',
re: '\/no\/(\\d+)\/.*',
str: '/no/$$/',
},
{ url: 'syosetu.com/impression/',
code: 'ArrowRight',
modifiers: '+',
type: 'inc',
re: '\/no\/(\\d+)\/.*',
str: '/no/$$/',
},
{ url: 'syosetu.com/impression/',
code: 'NumpadAdd',
modifiers: '+',
type: 'inc',
re: '\/no\/(\\d+)\/.*',
str: '/no/$$/',
},
{ url: 'syosetu.com/',
code: 'Enter',
modifiers: '',
type: 'adivclass',
link: 'novellingindex_bookmarker_no',
},
{ url: 'syosetu.com/',
code: 'NumpadEnter',
modifiers: '',
type: 'adivclass',
link: 'novellingindex_bookmarker_no',
},
{ url: 'syosetu.com/',
code: 'Enter',
modifiers: '',
type: 'aclick',
link: 'しおりを挿む',
},
{ url: 'syosetu.com/',
code: 'NumpadEnter',
modifiers: '',
type: 'aclick',
link: 'しおりを挿む',
},
{ url: 'syosetu.com/',
code: 'BracketLeft',
modifiers: '',
type: 'url',
link: 'https://syosetu.com/user/top/',
},
{ url: 'syosetu.com/',
code: 'Numpad3',
modifiers: '',
type: 'url',
link: 'https://syosetu.com/user/top/',
},
{ url: 'syosetu.com/',
code: 'BracketLeft',
modifiers: '+',
type: 'url',
link: 'https://syosetu.com/xuser/top/',
},
{ url: 'syosetu.com/',
code: 'Numpad6',
modifiers: '',
type: 'url',
link: 'https://syosetu.com/xuser/top/',
},
{ url: 'syosetu.com/',
code: 'BracketRight',
modifiers: '',
type: 'url',
link: 'https://syosetu.com/favnovelmain/list/',
},
{ url: 'syosetu.com/',
code: 'Numpad2',
modifiers: '',
type: 'url',
link: 'https://syosetu.com/favnovelmain/list/',
},
{ url: 'syosetu.com/',
code: 'BracketRight',
modifiers: '+',
type: 'url',
link: 'https://syosetu.com/favnovelmain18/list/',
},
{ url: 'syosetu.com/',
code: 'Numpad5',
modifiers: '',
type: 'url',
link: 'https://syosetu.com/favnovelmain18/list/',
},
{ url: 'www.alphapolis.co.jp/novel/',
code: 'ArrowLeft',
modifiers: '',
type: 'a',
link: '前の話',
},
{ url: 'www.alphapolis.co.jp/novel/',
code: 'NumpadSubtract',
modifiers: '',
type: 'a',
link: '前の話',
},
{ url: 'www.alphapolis.co.jp/novel/',
code: 'ArrowRight',
modifiers: '',
type: 'a',
link: '次の話',
},
{ url: 'www.alphapolis.co.jp/novel/',
code: 'NumpadAdd',
modifiers: '',
type: 'a',
link: '次の話',
},
{ url: 'www.alphapolis.co.jp/novel/',
code: 'Enter',
modifiers: '',
type: 'a',
link: '続きから読む',
},
{ url: 'www.alphapolis.co.jp/novel/',
code: 'NumpadEnter',
modifiers: '',
type: 'a',
link: '続きから読む',
},
{ url: 'www.alphapolis.co.jp/novel/',
code: 'Enter',
modifiers: '',
type: 'spanclassesclick',
links: ['bookmark', 'enabled'],
},
{ url: 'www.alphapolis.co.jp/novel/',
code: 'NumpadEnter',
modifiers: '',
type: 'spanclassesclick',
links: ['bookmark', 'enabled'],
},
{ url: 'www.alphapolis.co.jp/',
code: 'BracketLeft',
modifiers: '',
type: 'url',
link: 'https://www.alphapolis.co.jp/mypage/content',
},
{ url: 'www.alphapolis.co.jp/',
code: 'Numpad3',
modifiers: '',
type: 'url',
link: 'https://www.alphapolis.co.jp/mypage/content',
},
{ url: 'www.alphapolis.co.jp/',
code: 'BracketRight',
modifiers: '',
type: 'url',
link: 'https://www.alphapolis.co.jp/mypage/favorite',
},
{ url: 'www.alphapolis.co.jp/',
code: 'Numpad2',
modifiers: '',
type: 'url',
link: 'https://www.alphapolis.co.jp/mypage/favorite',
},
];
const excludeList = [
['kakuyomu.jp/my/works/', 'new'],
['kakuyomu.jp/my/works/', 'edit'],
['kakuyomu.jp/my/works/', 'episodes'],
['syosetu.com/user', 'input'],
['www.alphapolis.co.jp/mypage/novel/save'],
['x.com'],
];
function eKeyHandler(e) {
switch (e.target.tagName.toLowerCase()) {
case 'input':
case 'textarea':
case 'select':
// disable while input
return;
}
let url = location.href;
for (let i=excludeList.length-1; i>=0; i--) {
let l = excludeList[i];
let r = true;
for (let j=l.length-1; j>=0; j--) {
if (!url.includes(l[j])) { r = false; break; }
}
if (r) return;
}
for (let i=list.length-1; i>=0; i--) {
let l = list[i];
if (url.includes(l.url)
&& l.code == e.code
&& l.modifiers.includes('+') == e.shiftKey
&& l.modifiers.includes('^') == e.ctrlKey
&& l.modifiers.includes('!') == e.altKey
&& l.modifiers.includes('#') == e.metaKey) {
switch (l.type) {
case 'a': // search <a> with content matched in innerHTML
{
let els = document.getElementsByTagName('a');
for (let j=els.length-1; j>=0; j--) {
if (els[j].innerHTML.includes(l.link)) {
location.href = els[j].href;
return;
}
}
}
break;
case 'aid': // search <a> by ID
{
let els = document.getElementsByTagName('a');
for (let j=els.length-1; j>=0; j--) {
if (els[j].id == l.link) {
location.href = els[j].href;
return;
}
}
}
break;
case 'atitle': // search <a> by title
{
let els = document.getElementsByTagName('a');
for (let j=els.length-1; j>=0; j--) {
if (els[j].title.includes(l.link)) {
location.href = els[j].href;
return;
}
}
}
break;
case 'aclass': // search <a> with class
{
let els = document.getElementsByTagName('a');
for (let j=els.length-1; j>=0; j--) {
if (els[j].classList.contains(l.link)) {
location.href = els[j].href;
return;
}
}
}
break;
case 'aclasstitle': // search <a> with class and title
{
let els = document.getElementsByTagName('a');
for (let j=els.length-1; j>=0; j--) {
if (els[j].classList.contains(l.links[0]) && els[j].title.includes(l.links[1])) {
location.href = els[j].href;
return;
}
}
}
break;
case 'adivclass': // search <div> with class within which <a>
{
let el = document.querySelector('.' + l.link + ' a');
location.href = el.href;
return;
}
break;
case 'aclick': // search <a> with content matched in innerHTML and click
{
let els = document.getElementsByTagName('a');
for (let j=els.length-1; j>=0; j--) {
if (els[j].innerHTML.includes(l.link)) {
els[j].click();
return;
}
}
}
break;
case 'spanclassesclick': // search <span> with classes and click
{
let els = document.getElementsByTagName('span');
for (let j=els.length-1; j>=0; j--) {
let k=l.links.length-1;
for (; k>=0 && els[j].classList.contains(l.links[k]); k--);
if (k < 0) {
els[j].click();
return;
}
}
}
break;
case 'link': // search <link> by rel attr
{
let els = document.getElementsByTagName('link');
for (let j=els.length-1; j>=0; j--) {
if (els[j].rel == l.link) {
location.href = els[j].href;
return;
}
}
}
break;
case 'url': // jump to url
location.href = l.link;
return;
case 'inc': // increase number
location.href = url.replace(new RegExp(l.re), (match, p1) => l.str.replace('$$', Number(p1) + 1));
return;
case 'dec': // decrease number
location.href = url.replace(new RegExp(l.re), (match, p1) => l.str.replace('$$', Number(p1) - 1));
return;
}
}
}
}
document.addEventListener("keydown", eKeyHandler, false);
})();
///////////////////////////////////////////////////ここまで
操作方法
・カーソルキー左、またはテンキーのマイナス⇒前のエピソードを表示
・カーソルキー右、またはテンキーのプラス⇒次のエピソードを表示
・表紙でEnterキー、またはテンキーのEnterキー⇒現在読んでいるページを表示
・＠キー、またはテンキーの3⇒ダッシュボードを表示
・[キー、またはテンキーの2⇒マイページを表示
カクヨム、なろう（感想欄含む）、アルファポリスに対応しています。
JavaScript がわかる人はキーをカスタマイズするなどして自分の使いやすいように改造してください。
ご質問があればお気軽にどうぞ。
PCのブラウザでカクヨム小説を読む人向けのキーボードでページめくりできるスクリプト @PXXN3
★で称える
この小説が面白かったら★をつけてください。おすすめレビューも書けます。
カクヨムを、もっと楽しもう
カクヨムにユーザー登録すると、この小説を他の読者へ★やレビューでおすすめできます。気になる小説や作者の更新チェックに便利なフォロー機能もお試しください。
新規ユーザー登録（無料）簡単に登録できます
この小説のタグ
関連小説
秘訣／音澤 煙管
★0 エッセイ・ノンフィクション 完結済 1話
ネクスト掲載小説
ビューワー設定
文字サイズ
背景色
フォント
組み方向
機能をオンにすると、画面の下部をタップする度に自動的にスクロールして読み進められます。
応援すると応援コメントも書けます