小説家になろうのヘッダーを便利にする
// ==UserScript==
// @name Narrow_DynamicHeader
// @namespace phodra
// @description 小説家になろうのヘッダーを便利にする
// @version 1.2
// @include http://ncode.syosetu.com/*
// @include http://novelcom.syosetu.com/*
// @include http://novel18.syosetu.com/*
// @include http://novelcom18.syosetu.com/*
// ==/UserScript==
(function (){
// ユーザーID
// 自分のIDを調べて書き換えてください。
// 通常版のユーザーIDは、ホーム画面の右上に以下のように表示されています。
// （ユーザー名）[ID:000000]でログイン中
// １８禁サイト用のユーザーIDは、Xホーム右側の
// 「評価をつけた作品一覧」のURLから得ることが出来ます。
const MY_USER_ID = 0;
const MY_XUSER_ID = 0;
// ※そのまま移動させると元の場所が埋め立てられるので、
// ※クローンを作成したのちにオリジナルは visibility = hidden で隠す。
// ヘッダー（オリジナル）
var $header_org = $("#novel_header");
// ヘッダー（クローン）
var $header = $header_org.clone(true);
$header.css( 'position', 'relative');
// オリジナルを隠す
$header_org.css( 'visibility', 'hidden');
// header Height
var headerH = $header.outerHeight();
// ヘッダーの親になるボックス
var $box = $("<div id='box'>");
$box.css( 'position', 'fixed');
$box.append($header);
// マウス検知エリア
var $detect = $("<div id='detect_area' />");
$detect.css(
{
'position': 'fixed',
'height': headerH,
'top': 0
}
);
// ヘッダーボックスに乗せる、外す
$detect.hover(
function()
{
_boxon = true;
if( scTop>0 ) HeaderShow(true);
else _show = 2;
},
function()
{
_boxon = false;
if( scTop>0 ) HeaderHide( !_lockB && !_lockM );
else _show = 0;
}
);
$detect.append($box);
$("body").append($detect);
// 章タイトルとサブタイトルのラベル
if( $(".margin_r20").size() ){
// コンテンツinfoのクローン
var $info_org = $(".contents1");
var $info = $info_org.clone(true);
$info_org.css( 'visibility', 'hidden');
$info.css(
{
'left': 0,
'right': 0,
'margin': 'auto',
'opacity': '0.8'
}
);
var $label = $("<div />");
var $cp_title = $info.children(".chapter_title");
$cp_title.hide();
if( $cp_title.size() )
{
var $cp_title2 = $("<span class='label_chapter' />");
$cp_title2.append($(".chapter_title").text());
$label.append($cp_title2);
$label.append(" - ");
}
// サブタイトル用のエレメント
var $label_sub = $("<span class='label_subtitle' />");
$label_sub.append($(".novel_subtitle").text());
$label.append($label_sub);
$info.append($label);
$box.append($info);
}
var boxheight = $box.height();
// 移動ボタン群
const NDH_BTN = 'ndh_button';
var move_a = "<a class='"+ NDH_BTN +"' />";
var move_div = "<div class='"+ NDH_BTN +"' />";
// 前ページ
var bn_p = $("a:contains('<<')");
if( bn_p.size() )
{
var $preEp = $(move_a);
$preEp.text("＜");
$preEp.attr(
{
'alt': 'Prev Episode',
'href': bn_p.attr('href')
}
);
$preEp.css('left', '15px');
$header.append($preEp);
}
// 次ページ
var bn_n = $("a:contains('>>')");
if( bn_n.size() )
{
var $nxtEp = $(move_a);
$nxtEp.text("＞");
$nxtEp.attr(
{
'alt': 'Next Episode',
'href': bn_n.attr('href')
}
);
$nxtEp.css( 'left', '55px');
$header.append($nxtEp);
}
$("#pageBottom").remove();
$("#pageTop").remove();
// 最上部へ移動
var $ptop = $(move_div);
$ptop.attr( 'alt', 'Scroll Top');
$ptop.css( 'right', '55px');
$ptop.text("↑");
$ptop.click( function(e)
{
$("html,body").animate(
{ 'scroll-top': 0
}, 500
);
}
);
$header.append($ptop);
// 最下部へ移動
var $pbtm = $(move_div);
$pbtm.text("↓");
$pbtm.attr( 'alt', 'Scroll Bottom');
$pbtm.css( 'right', '15px');
$pbtm.click( function(e)
{
$("html,body").animate(
{ 'scroll-top':
$(document).height() -$(window).height()
}, 500
);
}
);
$header.append($pbtm);
// AutoPagerizeのページ移動
// ※インストールしていなくても作製して非表示にしておき、
// AutoPagerizeの初期化イベントで表示させる。
// AP初期化イベント中ではなくこの時点で作成するのは、
// 高さの計算を簡略化するため。
// 前のページ
var $ap_prev = $(move_div)
$ap_prev.text("△");
$ap_prev.attr( 'alt', 'Scroll Prev Page');
$ap_prev.css(
{
'display': 'none',
'right': '140px',
}
);
$ap_prev.click( function(e)
{
$("html,body").animate(
{ 'scroll-top':
scTop==ap.seam[ap.page]?
ap.seam[ap.page-1]: ap.seam[ap.page]
}, 500
);
}
);
$header.append($ap_prev);
// 次のページ
var $ap_next = $(move_div);
$ap_next.text("▽");
$ap_next.attr( 'alt', 'Scroll Next Page');
$ap_next.css(
{
'display': 'none',
'right': '100px',
}
);
$ap_next.click( function(e)
{
$("html,body").animate(
{ 'scroll-top':
ap.page+1<ap.seam.length?
ap.seam[ap.page+1]:
$(document).height() -$(window).height()
}, 500
);
}
);
$header.append($ap_next);
// 移動ボタンのスタイル
var NDH_BTN_Style =
"." + NDH_BTN +"{ \
box-sizing: border-box; \
border: solid 1px transparent; \
}" +
"." + NDH_BTN + ":hover{ \
border: outset 1px black; \
}" +
"." + NDH_BTN + ":active{ \
border: inset 1px black; \
background-color: #fafafa; \
}";
var mb_style = $("<style type='text/css' />");
mb_style.append(NDH_BTN_Style);
$("head").append(mb_style);
// 追加したボタンのスタイルをまとめて設定
$( "." +NDH_BTN ).css(
{
'cursor': 'pointer',
'position': 'absolute',
'top': 0,
'bottom': 0,
'margin': '4px',
'padding': '0px 10px',
'line-height': function()
{
return $(this).height()+'px';
}
}
);
// フラグ
var _boxon = false;
var _lockB = 0, _lockM = 0;
var _show = 0;
// 表示設定
var $navi_box = $("#novelnavi_right");
if( $navi_box.size() )
{
$header_org.find("#novelnavi_right").remove();
$header.find("#novelnavi_right").hide();
var $navi = $("<div id='navi_button' class='" + NDH_BTN + "' />");
$navi.css(
{
'position': 'absolute',
'display': 'block',
'margin': 0,
'top': 16,
'right': 3,
'height': 28,
'width': 10
}
);
$navi.click( function()
{
if( _lockM )
{
$("#menu_off").click();
_lockM = false;
}else
{
$("#menu_on").click();
_lockM = true;
}
}
);
$header.append($navi);
var $navi_menu = $(".novelview_navi");
$navi_menu.css(
{
'top': headerH,
'right': 0
}
);
$header.append($navi_menu);
$("input[name='fix_menu_bar']").prop(
{
'disabled': true,
'checked': false,
}
);
$("#menu_off_2").click(
function(e){ $navi.click(); }
);
}
// AutoPagerize 互換
var ap;
// AP用変数とボタンを初期化
var AP_Init = function()
{
ap =
{
'seam': [0],
'page': 0,
};
$ap_next.show();
$ap_prev.show();
};
// ページを継ぎ足した時、継ぎ目の位置を記録する
var AP_SeamLine = function()
{
if( ap != null)
{
var $ap_sep = $(".autopagerize_page_separator");
var $ap_sep_last = $ap_sep.eq(-1);
ap.seam[$ap_sep.index($ap_sep_last)+1] =
parseInt($ap_sep_last.offset().top)-boxheight;
}
};
if( window.AutoPagerize )
{
console.log( 'window.AutoPagerize' );
// 初期化
AP_Init();
// 継ぎ足した時
AutoPagerize.addFilter(AP_SeamLine);
}else
{
$(document).on(
{
'GM_AutoPagerizeLoaded': function(){
AP_Init();
},
'GM_AutoPagerizeNextPageLoaded': function(){
AP_SeamLine();
}
}
);
}
var scTop = $(window).scrollTop();
// ヘッダーを表示させる
var HeaderShow = function(bool)
{
if( _show<1 && bool )
{
_show = 1;
// 消えている最中でもすぐにまた表示させる
$box.stop();
// ヘッダーを表示させるアニメ
$box.animate(
{ 'top': 0},
{ 'duration': 'fast',
'easing' : 'swing',
'complete': function()
{ _show = 2; }
}
);
}
}
// ヘッダーを隠す
var HeaderHide = function(bool)
{
if( _show>0 && bool )
{
_show = -1;
$box.stop();
// ヘッダーを非表示にするアニメ
$box.animate(
{ 'top': -boxheight},
{
'duration': 'normal',
'easing' : 'linear',
'complete': function()
{ _show = 0; },
'progress' : function(e)
{
if( parseInt($(this).css('top')) <= -scTop )
{
$box.stop(false,true);
$box.css( 'top', -scTop);
}
}
}
);
}
}
// スクロール位置によってヘッダー位置を調整
// ※上端でチラ見えしてるときは絶対座標っぽくずらす
// そうでなければ、画面のすぐ上で待機させる
var HeaderPosSet = function()
{
if( scTop <= boxheight ||
parseInt($box.css('top')) != -boxheight )
{
$box.stop();
$box.css( 'top', scTop<=boxheight? -scTop: -boxheight );
}
}
HeaderPosSet();
var novel_title = $(".margin_r20:first").text();
$(window).on(
{
'ready resize': function()
{
$detect.width($(window).width());
$box.width($(window).width());
},
'scroll': function()
{
scTop = $(window).scrollTop();
// ヘッダーを追従させる
if( _show==0 && !_lockB && !_lockM ) HeaderPosSet();
// AutoPagerize
if( ap != null )
{
for( var i=ap.seam.length-1; i>=0; i-- )
{
if( scTop >= ap.seam[i]-1 )
{
if( ap.page != i )
{
ap.page = i;
if( $("#novel_honbun").size() )
{
$label_sub.text(
$(".novel_subtitle").eq(i).text());
document.title =
novel_title + " - " + $label_sub.text();
}
}
break;
}
}
}
if( $(".novel_hyouka,#novel_footer,#footer").offset().top
< scTop + $(window).height() )
{
if( !_lockB )
{
HeaderShow(true);
_lockB = true;
}
}else
{
if( _lockB ) _lockB = false;
HeaderHide( !_lockM && !_boxon );
}
}
}
);
var href;
// ヘッダーに「目次」を追加
var $index_li = $("<li />");
var $index_node = $("<a />");
var index_href = $("#contents_main>a:first").attr('href');
if( index_href==null ){
// 携帯用のアドレスから生成
var handheld = $("link[media='handheld']").attr('href');
index_href = handheld.match(/\/n\d+?\w+?\//);
}
$index_node.text("目次");
$index_node.attr( 'href', index_href);
$index_li.append($index_node);
$header.find("li:contains('感想')").before($index_li);
var userid;
// ノベルフッターから作者コードを抜く
var user_href = $(".undernavi a:contains('マイページ')").attr('href');
if( user_href==null ){
// よくわからんけど作者コードっぽいので引っこ抜く
var atom = $("link[title='Atom']").attr('href');
if( atom ){
userid = atom.match(/(\d+|x\d+[^\.]+?)/)[0] + "/";
user_href = "http://mypage.syosetu.com/" + userid;
}else{
userid=null;
user_href=null;
}
}else{
userid = user_href.match(/(\d+\/|x\d+.+)/)[0];
}
// ヘッダーに「作者マイページ」を追加
var $user_li = $("<li />");
var $user_node = $("<a />");
$user_node.text("作者");
if( userid ){
$user_node.attr( 'href', user_href);
}else{
$user_node.css( 'cssText', 'color: rgba(200,200,200,0.3) !important;');
}
$user_li.append($user_node);
$header.find("li:contains('感想')").before($user_li);
// ヘッダーに「メール」を追加
var $mail_li = $("<li />");
var $mail_node = $("<a />");
$mail_node.text("メール");
if( userid && userid[0]!="x" ){
$mail_node.attr( 'href', 'http://syosetu.com/message/sendinput/to/' + userid);
}else{
$mail_node.css( 'cssText', 'color: rgba(200,200,200,0.3) !important;');
}
$mail_li.append($mail_node);
$header.find("li:contains('感想')").before($mail_li);
// N2コードを取得
var dlurl, n2code;
dlurl = $(".undernavi li:contains('ダウンロード')>a");
if( dlurl.size() ){
n2code = dlurl.attr('href').match(/\d+\//);
}
var bm_config = userid && userid[0]=="x"?
"http://syosetu.com/favnovelmain18/updateinput/xidfavncode/" + MY_XUSER_ID:
"http://syosetu.com/favnovelmain/updateinput/useridfavncode/" + MY_USER_ID;
bm_config += "_" + n2code;
var dl_prm = {
'hankaku': '0',
'code': 'utf-8',
'kaigyo': 'crlf'
};
// テキストダウンロードボタンを追加
var num = location.href.match( /\d+(?=\/$)/ );
var $down_li = $("<li />");
var $down_node = $("<a />");
$down_node.text("DL");
if( n2code && num ){
var txtdl_url = userid[0]=="x"?
"http://novel18.syosetu.com/txtdownload/dlstart/ncode/":
"http://ncode.syosetu.com/txtdownload/dlstart/ncode/";
$down_node.attr( 'href',
txtdl_url + n2code +
"?hankaku=" + dl_prm.hankaku +
"&code=" + dl_prm.code +
"&kaigyo=" + dl_prm.kaigyo +
"&no=" + location.href.match( /\d+(?=\/$)/ )
);
}else{
$down_node.css( 'cssText', 'color: rgba(200,200,200,0.3) !important;');
$down_node.css( 'pointerEvents', 'none');
}
$down_li.append($down_node);
$header.find("li:contains('レビュー')").after($down_li);
// 「縦書で読む」を消す
$header.find("li a.menu").parent().hide();
// 「ブックマークに追加」／「ブックマークを解除」を改変
var $fav = $("li.booklist,li.booklist_now");
var $fav_a = $fav.children("a");
$fav_a.css(
'cssText',
"color: #F4FA58 !important;"
);
$fav_a.css( 'font-size', '150%');
if( $("li.booklist").size() ){
$fav_a.text("☆");
$fav_a.attr( 'alt', 'ブックマークに追加');
}else{
$fav_a.text("★");
$fav_a.attr(
{
'href': bm_config,
'alt': 'ブックマーク設定'
}
);
}
$fav.attr( 'class', null);
// しおりを挿む／しおり中ボタンの改変
var $bmark_img = $("<img>");
var $bmark = $header.find("li.bookmark,li.bookmark_now");
$bmark.attr(
{
'id': 'bookmark_icongap',
'class': null
}
);
var $bmark_a = $bmark.children("a");
if( $bmark_a.size() ){
$bmark_a.text( "挿栞");
$bmark_a.attr( 'alt', 'しおりを挿む');
$bmark_img.attr( 'src', '/novelview/img/bookmarker_now.png');
}else{
$bmark.text("");
$bmark_a = $("<a />");
$bmark_a.attr(
{
'href': bm_config,
'alt': 'ブックマーク設定'
}
);
$bmark_a.text("設定");
$bmark.append($bmark_a);
$bmark_img.attr( 'src', '/novelview/img/bookmarker.png');
}
var col = $header_org.find("li>a:first").css('border-left-color');
if( $fav.size() ){
$bmark_img.css(
{
'pointer-events': 'none',
'position': 'absolute',
'top': 0,
'bottom': 0,
'margin': 'auto',
'padding': '0px 8px 0px 12px',
}
);
$bmark_a.before($bmark_img);
$bmark_a.css(
'cssText',
// padding-left は画像サイズから手計算。
// ※自動計算はloadイベントを使用しなければならないので、
// 表示の反映に若干ラグが出る（＆コードがややこしくなる）。
"padding-left: 33px !important;" +
"border-left: none !important;"
);
// <a>要素のテキストを縦中央合わせ
// ※heightが確定していなければ、適切なline-heightを求められない
var Li_Fix = function($li_a){
$li_a.outerHeight(headerH-1);
$li_a.css(
{
'line-height': $li_a.height()+'px',
'border-right': '1px solid ' + col,
}
);
$li_a.parent().css('padding',0);
};
Li_Fix($bmark_a);
Li_Fix($fav_a);
}else{
$down_node.css( 'border-right', '1px solid ' + col );
}
// 感想ページ
if( location.href.indexOf("impression")>0){
// コメントフォームをコメント一覧の上に持っていく
var hyouka = "#hyoukalan";
var $hyouka = $(hyouka);
if( $hyouka.size() )
{
var $target = $("h1:eq(0)");
$target.before($hyouka);
$target.before($("<hr>"));
// 横幅いっぱいにする
$("textarea," + hyouka).css(
{
'box-sizing': 'border-box',
'width': '100%'
}
);
// "▽感想を書く"を消去
$(".input").hide();
}
}
})();
// novel_headerのpositionを記録しないようにする
window.changeMenuBar = function(fixMenuBar){}