テキストファイルを小説家になろうの表示にするブックマークレット

はじめに

テキストファイルをウェブブラウザで読み込んで実行すると、表示が「小説家になろう」でのものになるブックマークレットです。

|《》でのルビに対応しています。漢字 + ()でのルビには対応していません。

小説家になろうのモバイルサイト表示には対応していません。

ブラウザでテキストファイルを表示
ブラウザでテキストファイルを表示
ブックマークレットで表示変換
ブックマークレットで表示変換

ブックマークレット

下のリンクをブックマークバーへドラッグしてブックマークに追加してください。

テキスト -> 小説家になろう ブックマークレット

別の方法


使い方

ウェブブラウザ上へテキストファイルをドラッグするなどして開き、ブックマークレットを実行してください。


コード

ブックマークレット

javascript:(function(e){var r=document.createElement("script");r.src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js",document.documentElement.appendChild(r),r.onload=function(){var r=jQuery.noConflict(!0);e(r)}}(function(e){var r='<style>body{margin:50px auto;padding:0 20px;width:600px;font-family:"メイリオ",Meiryo,"Lucida Grande",sans-serif;font-size:15.2px;line-height:22.8px;text-align:left;vertical-align:baseline;direction:ltr;unicode-bidi:bidi-override;word-break:normal;word-wrap:break-word;color:#444}</style>',a=e("body").text().replace(/\n/g,"<br>").replace(/|(.+?)《(.+?)》/g,"<ruby>$1<rt>$2</rt></ruby>").replace(/|((.*))/g,"$1");e("head").append(r),e("body").empty(),e("body").append(a)}));

元の JavaScript

(function(f) {
  var s = document.createElement('script')
  s.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'
  document.documentElement.appendChild(s)
  s.onload = function() {
    var $ = jQuery.noConflict(true)
    f($)
  }
})
(function($) {
  var css = '<style>body{margin:50px auto;padding:0 20px;width:600px;font-family:"メイリオ",Meiryo,"Lucida Grande",sans-serif;font-size:15.2px;line-height:22.8px;text-align:left;vertical-align:baseline;direction:ltr;unicode-bidi:bidi-override;word-break:normal;word-wrap:break-word;color:#444}</style>'
  var word = $('body').text().replace(/\n/g, '<br>').replace(/|(.+?)《(.+?)》/g, '<ruby>$1<rt>$2</rt></ruby>').replace(/|((.*))/g, '$1')
  $('head').append(css)
  $('body').empty()
  $('body').append(word)
})

元の CSS

body {
  margin: 50px auto;
  padding: 0px 20px;
  width: 600px;
  font-family: "メイリオ", "Meiryo", "Lucida Grande", "sans-serif";
  font-size: 15.2px;
  line-height: 22.8px;
  text-align: left;
  vertical-align: baseline;
  direction: ltr;
  unicode-bidi: bidi-override;
  word-break: normal;
  word-wrap: break-word;
  color: #444444;
}

WordPress で p タグが消えるのを解決する方法

WordPress の記事を書くのに HTML タグを手打ちしてるんですが、その記事を公開して表のウェブページで見ると <p> が出力されてないのです。なんじゃこりゃ。

もちろんデータベースには <p> タグがそのまま保存されています。 PS Disable Auto FormattingRaw HTMLTinyMCE Advanced 、 function.php に remove_filter('the_content', 'wpautop'); を追加する、を試しましたが、まぁそもそも勝手に <p> タグ挿入するのやめて! っていうような話であったり、 <p> タグが消えなくしてくれるはずのプラグインも仕事してくれなかったり。

で、ふと気付きました。 <p> タグ内で改行すればいいんです。ちょっとウザいですが簡単です。

ダメな書き方

<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>

いい書き方

<p>
  吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
</p>

ファイルをスタートやタスクバーにピン留めする方法

はじめに

ファイルスタートタスクバーピン留めできたら便利だと思うのですが Windows はやらせてくれません。そこでちょっと考えてみました。

ファイルをスタートにピン留めする

下の要領でピン留めします。タスクバーにピン留めするのも同じ感じです。

  1. 目的のファイルを開くアプリのショートカットを作ります。

    アプリのショートカットを作る

  2. ショートカットのプロパティ画面で、アプリのパスにファイルのパスを付け足します。例えば下のようにします。

    "C:\Program Files\EmEditor\EmEditor.exe" "\\illya.c\sviel\bridge.txt"

    アプリのプロパティの画面

  3. ピン留めします。

    ピン留めする

  4. スタートにピン留めできました。

    スタートにピン留めされている

小説家になろうの表示を変更するブックマークレット 1

はじめに

表示変更のサンプル

小説家になろうの表示を黒背景で白文字にするブックマークレットを作りました。完全な黒と白ではなくて monokai と呼ばれるカラースキームを真似てみたので色っぽいはずです。

今回のやつは色や文字サイズが決め打ちなんですが、ゆくゆくはブックマークレットをカスタマイズできるジェネレータを作りたいと思っています。他には縦書きになるやつも作りたいですね。

使い方

小説家になろうの本文があるページでブックマークレットを実行します。元の画面へ戻るにはページをリロード(再読み込み)します。

ブックマークレット

表示変更ブックマークレット

ブックマークレットのコード

javascript:(function(){var e="<style>#novel_no,.novel_bn,.novel_subtitle{text-align:center}body,div,p{margin:0;padding:0}body{font-family:Meiryo,Helvetica,Arial;font-size:16px;letter-spacing:.05em;line-height:1.7;color:#f8f8f2;background-color:#272822}a,a:link{color:#66d9ef}a:visited{color:#f92672}#novel_color{width:100%;max-width:640px;margin:20px auto;padding-right:20px;padding-left:20px;box-sizing:border-box}.novel_bn{width:80%;margin:0 auto}.novel_bn:last-child{margin-top:30px}#novel_honbun,.novel_subtitle{margin-top:10px}.novel_bn a{display:inline-block;margin-right:10px;margin-left:10px}#novel_no{margin-top:15px}.novel_subtitle{font-weight:700}#novel_a,#novel_p{margin-top:10px;color:#75715e}</style>",n='<meta name="viewport" content="width=device-width, initial-scale=1">',o=$("title"),i=$("#novel_color");$("head, body").empty(),$("link, style, script").remove(),$("head").append(e),$("head").append(n),$("head").append(o),$("body").append(i),$("*").removeAttr("style")})();

元になるコード

元になる JavaScript

$(function() {
  var style = '<style>#novel_no,.novel_bn,.novel_subtitle{text-align:center}body,div,p{margin:0;padding:0}body{font-family:Meiryo,Helvetica,Arial;font-size:16px;letter-spacing:.05em;line-height:1.7;color:#f8f8f2;background-color:#272822}a,a:link{color:#66d9ef}a:visited{color:#f92672}#novel_color{width:100%;max-width:640px;margin:20px auto;padding-right:20px;padding-left:20px;box-sizing:border-box}.novel_bn{width:80%;margin:0 auto}.novel_bn:last-child{margin-top:30px}#novel_honbun,.novel_subtitle{margin-top:10px}.novel_bn a{display:inline-block;margin-right:10px;margin-left:10px}#novel_no{margin-top:15px}.novel_subtitle{font-weight:700}#novel_a,#novel_p{margin-top:10px;color:#75715e}</style>'
  var viewport = '<meta name="viewport" content="width=device-width, initial-scale=1">'
  var title = $('title')
  var novel_color = $('#novel_color')
  $('head, body').empty()
  $('link, style, script').remove()
  $('head').append(style)
  $('head').append(viewport)
  $('head').append(title)
  $('body').append(novel_color)
  $('*').removeAttr('style')
});

元になる CSS

body,
div,
p {
  margin: 0;
  padding: 0;
}
body {
  font-family: "Meiryo", "Helvetica", "Arial";
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 1.7;
  color: #f8f8f2;
  background-color: #272822;
}
a,
a:link {
  color: #66d9ef;
}
a:visited {
  color: #f92672;
}
#novel_color {
  width: 100%;
  max-width: 640px;
  margin: 20px auto;
  padding-right: 20px;
  padding-left:  20px;
  box-sizing: border-box;
}
.novel_bn {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}
.novel_bn:last-child {
  margin-top: 30px;
}
.novel_bn a {
  display: inline-block;
  margin-right: 10px;
  margin-left:  10px;
}
#novel_no {
  margin-top: 15px;
  text-align: center;
}
.novel_subtitle {
  margin-top: 10px;
  font-weight: bold;
  text-align: center;
}
#novel_p,
#novel_a {
  margin-top: 10px;
  color: #75715e;
}
#novel_honbun {
  margin-top: 10px;
}

小説家になろうの作品ページの Twitterカードを作る方法

概要

固定されたツイート

小説家になろうの自分の作品を Twitter で宣伝したいのですが、宣伝するなら目立つのがよいわけで、それならってことで画像を添付しようかってなります。でもここは1歩進んで Twitterカードを表示しようと考えたわけです。

Twitterカードから飛ばしたい先は小説家になろうの自分の作品ページで、 Twitterカードの記述を設置する場所は自分のホームページとかになりますから、ちょっとややこしくて、自分のホームページにリダイレクトの JavaScript を記述します。 .htaccess は上手くいかないので。

Twitterカードとリダイレクト

下のような記述になります。 <body> タグとかないですが、下のが全てです。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="twitter:title" content="タイトル">
<meta name="twitter:description" content="説明文( 68 文字まで)">
<meta name="twitter:image" content="画像の URL">
<meta name="twitter:card" content="カードの種類「 summary_large_image 」 「 summary_small_image 」">
<meta name="twitter:site" content="Twitter のユーザ名">
<script>
window.location.href = "飛ばしたいページの URL";
</script>
</head>
</html>

例えば僕は下のようにして Twitterカードを表示しています。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="twitter:title" content="⚔イオの冒険🛡">
<meta name="twitter:description" content="🌏世界を見る旅へ出た青年は同じ目的を持つ2人の少女に出会い共に歩み始める。世界をめぐる中で彼らを待っているのは様々な初めての体験だった。">
<meta name="twitter:image" content="http://yayoi-thyme.com/image/default-site-image.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@camellia">
<script>
window.location.href = "https://ncode.syosetu.com/novelview/infotop/ncode/n0041ed/";
</script>
</head>
</html>

Sublime Text への回帰と設定とか

回帰!

テキストエディタには、ここしばらく Atom を利用していたのですが、以前愛用していた Sublime Text回帰しました!

複数のパソコンで使用したいので設定の同期をしたかったのですが、以前は Dropbox を利用する方法しかありませんでした。でも Atom にあった GitHubGist を利用する方法が提供されてるんじゃないかと思って探したらありましたね。素晴らしい。

設定とか

Package Controll のインストール

まずは Package Controll のインストールです。以前はコードをコピペしなくてはなりませんでしたが、コンソールを起動( Ctrl + Shift + P )して package と入力したらインストールのメニューが表示されます。

Pakcage Controll のインストール

パッケージのインストール

Sync Settings

他のパソコンと設定を同期するパッケージです。 GitHubGist を利用するので GitHub のアカウントが必要です。

  1. いい具合に GitHub のアカウントを作ります。

  2. 設定画面へ行きます。

    Settings

  3. Personal access tokens をクリックします。

    Personal access tokens

  4. Generate new token をクリックします。

    Generate new token

  5. トークンの設定をしてトークンを作ります。

    トークンの設定

  6. 作られたトークンをテキストエディタなどへコピーしておきます。

    トークン

  7. Gist を作ります。

    Gist を作る

  8. 何か書かないと作れないので何か書きます。何でもいいです。 Create secret gist でいいです。

    Gist の内容

  9. 青い文字とか URL に Gist の ID が表れているのでコピペしておきます。 gist: は不要です。

    Gist ID

  10. Sync Settings の設定ファイルに下のような書式でトークンと Gist の ID を書きます。

    Sync Settings の設定ファイルを開く

    {
    "access_token": "511b115b066be54dda3b36957e8815ea64c3d389",
    "gist_id": "38608a26c138565f95eead6fbb4493b3"
    }

    コンソールから sync とか入力していくとメニューが表示されます。設定を GitHubGist にアップロードして、他のパソコンでダウンロードして同期を取る仕組みです。他のパソコンでアップロードして~とかもできます。

IMESupport

日本語入力の際、いい具合に表示してくれます。

A File Icon

アイコンが素敵

サイドバーのアイコンが素敵な感じになります。

ApacheConf.tmLanguage

.htaccess とか Apache httpd のシンタックスハイライトとアイコンを追加します。

BracketHighlighter

対応する括弧をハイライト

カーソル位置の括弧の対応先をハイライトします。

Color Highlighter

コードに色を付ける

CSS とかの色設定に色がつきます。

ColorPicker

カラーパレット

CSS などで色のコードを記述する際にカラーピッカーを利用できます。デフォルトではアルファベットが大文字になるのですが、パッケージの設定ファイルに下のように記述すると小文字になります。

{
  "color_upper_case": false
}

StringUtilities

コンテクストメニューから選択する

HTML の記号とかいろいろをエンコード、デコードしてくれます。

Atom から Sublime Text へ回帰したい

みんなの Sublime Text への恋が愛に変わったり、浮気心が芽吹き始めたような頃に僕は Sublime Text を購入して利用し始めました。慣れないところはありましたが使い出せばなかなかステキです。なんてったって見た目がきれいですよね。

で、みんなの Atom への浮気が本気に変わった頃、僕も Atom へ浮気をしてなんとなく本妻にしてしまいました。 Sublime Text と比較して何が魅力的かと言うと開発速度でしょうか。開発速度が高ければ将来性が見込めますし、開発母体が GitHub なので予算的にも強そうです。
さて、しかし。しばーらくアップデートされなかった Sublime Text が先日( 2017 年 9 月 13 日)、1年ぶりにアップデートされました。長らくアップデートされていなかったのが僕にとって気に入らないことでしたし「もう終わりかな?」などと感じさせられもしました。でもそれは解消されたのです。
それに、 Atom の開発速度、と言うか発展速度は思っているほどではありませんでした。1年にも満たない期間しか Atom を使っていないのですが、とは言えバグフィックスみたいなアップデートばかりだったと思います。あまり発展してる実感ができませんね。

あぁ、あと、 Atom悪いところが見えてきたんです。

  • 動作がもったりしている
  • 改行がないとシンタックスハイライトされなくなりやすい
  • 自動インデントのされかたが気に入らない

まぁ、僕的にはけっこう致命的です。/p>

と言うことで、僕としては Sublime Text へさっさと回帰したいのですが、初期設定が面倒でやりたくありません。またググってgdgdするなんてどうにも。

WordPress のテーマ Bhari の個別ページでサイドバーを表示させる方法

問題と解決

WordPress のテーマ「 Bhari 」の個別ページでサイドバー(ウィジェット)を表示させたかったのですが、それをするオプションが見つからないので PHP の関数を少し変更しました。

変更するファイルは ~wp-content/themes/bhari/inc/extras.php と ~wp-content/themes/bhari/inc/customizer/customizer.php で、変更場所は下のとおりです。

extras.php

function bhari_body_class( $classes )
{

    if (is_home() || is_archive() || is_search() ) {
        $layout = bhari_get_option('sidebar-archive');
    } elseif (is_page() || is_404() ) {
        $layout = bhari_get_option('sidebar-page');
    } elseif (is_single() ) {
        $layout = bhari_get_option('sidebar-single');
    }

    switch ( $layout ) {

    case 'layout-sidebar-content' :         $classes[] = 'layout-sidebar-content';
        break;
    case 'layout-content-sidebar' :         $classes[] = 'layout-content-sidebar';
        break;
    case 'layout-content-sidebar-sidebar' :    $classes[] = 'layout-content-sidebar-sidebar';
        break;
    case 'layout-sidebar-content-sidebar' :    $classes[] = 'layout-sidebar-content-sidebar';
        break;
    case 'layout-sidebar-sidebar-content' : $classes[] = 'layout-sidebar-sidebar-content';
        break;
    case 'layout-content-sidebar' :
    default:
        $classes[] = 'layout-content-sidebar';
        break;
    }

    return $classes;
}
add_filter('body_class', 'bhari_body_class');

endif;

customizer.php

if (! function_exists('bhari_get_defaults') ) :

    /**
     * Set default options
     */
    function bhari_get_defaults()
    {

        $bhari_defaults = array(

         /**
             * Container
             */
         'container-width-page'    => 1100,
         'container-width-single'  => 1100,
         'container-width-archive' => 1100,

         /**
             * Sidebar
             */
         'sidebar-page'    => 'layout-content-sidebar',
         'sidebar-single'  => 'layout-content-sidebar',
         'sidebar-archive' => 'layout-content-sidebar',
        );

        return apply_filters('bhari_theme_defaults', $bhari_defaults);
    }

endif;

おわりに

PHP の書き方を知らないので、どうにかこうにかできた感じです。スマートな方法とは思えませんが、まぁできたしいいかなぁ、と。

LinuxCIFS utils でアクセスできない場合の解決方法

問題!

LinuxCIFS utils をアップデートしたら CIFS へアクセスできないようになりました。マウントしようとすると下のようなメッセージが表示されます。

mount -t cifs //server/dir local_dir -o user=***,pass='***'
mount error(13): Permission denied
Refer to the mount.cifs(8) manual page (e.g. man mount.cifs)

ログ( messages )は下のようになっていて、ログオンできないのが問題のようです。

kernel: Status code returned 0xc000006d NT_STATUS_LOGON_FAILURE
kernel: CIFS VFS: Send error in SessSetup = -13
kernel: CIFS VFS: cifs_mount failed w/return code = -13

解決!

ググると認証方式を記述するように書かれたブログ記事が見つかります。どこも sec=ntlm とするようになっていますが、僕の環境では下のようにすることで解決できました。

mount -t cifs //server/dir local_dir -o sec=ntlmssp,user=***,pass='***'