テキストボックスの入力でリストをフィルタする

はじめに

  • テキストボックスに入力すると、リストの中から部分一致でフィルタします。
  • 表示されたリストが 1 件になったとき Enter するとリンクを表示します。
  • リンクは別ウィンドウを開きます。
  • リストは JSON 形式の別ファイルです。

実際の表示

    コード

    HTML

    <input type="text" id="input">
    <ul id="output"></ul>

    JavaScript

    $(function() {
      var list
      var hits = []
      // リスト取得
      $.ajax({
        url: '/cmp/parts/list-filter/prefectures.json'
      })
      .done(function(data) {
        list = data
      })
      .fail(function() {
        alert('ページを読み直してください')
      })
      // イベント処理
      $(window).on('load', function() {
        $('#input').trigger('input')
      })
      $('#input').on({
        'input': update,
        'keypress': typeEnter})
      $('#output').on('click', 'a', function(event) {
        event.preventDefault();
        var url = $(this).attr('href')
        goLink(url)
      })
      // 関数
      function update() {
        $('#output').empty()
        var input = $(this).val()
        if (input !== '') {
          hits = list.filter(function(index) {
            return (index.name.indexOf(input) > -1)
          })
          for (var i = 0; i <= hits.length - 1; i++) {
            $('#output').append('<li><a class="pref-link" href="' + hits[i].url + '">' + hits[i].name + '</a></li>')
          }
        } else {
          for (var i = 0; i <= list.length - 1; i++) {
            $('#output').append('<li><a class="pref-link" href="' + list[i].url + '">' + list[i].name + '</a></li>')
          }
        }
      }
      function typeEnter(event) {
        if (hits.length == 1 && event.keyCode == 13) {
          goLink(hits[0].url)
        }
      }
      function goLink(url) {
        window.open(url, '', 'width=500, height=500, menubar=0, toolbar=1, status=1, scrollbars=1, resizable=1')
      }
    })

    JSON

    [
    {
    "name": "北海道",
    "url": "http://www.pref.hokkaido.lg.jp/"
    },
    {
    "name": "青森県",
    "url": "http://www.pref.aomori.lg.jp/"
    },
    {
    "name": "岩手県",
    "url": "http://www.pref.iwate.jp/"
    },
    {
    "name": "宮城県",
    "url": "http://www.pref.miyagi.jp/"
    },
    {
    "name": "秋田県",
    "url": "http://www.pref.akita.lg.jp/"
    },
    {
    "name": "山形県",
    "url": "http://www.pref.yamagata.jp/"
    },
    {
    "name": "福島県",
    "url": "http://www.pref.fukushima.lg.jp/"
    },
    {
    "name": "茨城県",
    "url": "http://www.pref.ibaraki.jp/"
    },
    {
    "name": "栃木県",
    "url": "http://www.pref.tochigi.lg.jp/"
    },
    {
    "name": "群馬県",
    "url": "http://www.pref.gunma.jp/"
    },
    {
    "name": "埼玉県",
    "url": "http://www.pref.saitama.lg.jp/"
    },
    {
    "name": "千葉県",
    "url": "http://www.pref.chiba.lg.jp/"
    },
    {
    "name": "東京都",
    "url": "http://www.metro.tokyo.jp/"
    },
    {
    "name": "神奈川県",
    "url": "http://www.pref.kanagawa.jp/"
    },
    {
    "name": "新潟県",
    "url": "http://www.pref.niigata.lg.jp/"
    },
    {
    "name": "富山県",
    "url": "http://www.pref.toyama.jp/"
    },
    {
    "name": "石川県",
    "url": "http://www.pref.ishikawa.lg.jp/"
    },
    {
    "name": "福井県",
    "url": "http://www.pref.fukui.lg.jp/"
    },
    {
    "name": "山梨県",
    "url": "http://www.pref.yamanashi.jp/"
    },
    {
    "name": "長野県",
    "url": "http://www.pref.nagano.lg.jp/"
    },
    {
    "name": "岐阜県",
    "url": "http://www.pref.gifu.lg.jp/"
    },
    {
    "name": "静岡県",
    "url": "http://www.pref.shizuoka.jp/"
    },
    {
    "name": "愛知県",
    "url": "http://www.pref.aichi.jp/"
    },
    {
    "name": "三重県",
    "url": "http://www.pref.mie.lg.jp/"
    },
    {
    "name": "滋賀県",
    "url": "http://www.pref.shiga.lg.jp/"
    },
    {
    "name": "京都府",
    "url": "http://www.pref.kyoto.jp/"
    },
    {
    "name": "大阪府",
    "url": "http://www.pref.osaka.lg.jp/"
    },
    {
    "name": "兵庫県",
    "url": "http://web.pref.hyogo.lg.jp/"
    },
    {
    "name": "奈良県",
    "url": "http://www.pref.nara.jp/"
    },
    {
    "name": "和歌山県",
    "url": "http://www.pref.wakayama.lg.jp/"
    },
    {
    "name": "鳥取県",
    "url": "http://www.pref.tottori.lg.jp/"
    },
    {
    "name": "島根県",
    "url": "http://www.pref.shimane.lg.jp/"
    },
    {
    "name": "岡山県",
    "url": "http://www.pref.okayama.lg.jp/"
    },
    {
    "name": "広島県",
    "url": "http://www.pref.hiroshima.lg.jp/"
    },
    {
    "name": "山口県",
    "url": "http://www.pref.yamaguchi.lg.jp/"
    },
    {
    "name": "徳島県",
    "url": "http://www.pref.tokushima.jp/"
    },
    {
    "name": "香川県",
    "url": "http://www.pref.kagawa.lg.jp/"
    },
    {
    "name": "愛媛県",
    "url": "http://www.pref.ehime.jp/"
    },
    {
    "name": "高知県",
    "url": "http://www.pref.kochi.lg.jp/"
    },
    {
    "name": "福岡県",
    "url": "http://www.pref.fukuoka.lg.jp/"
    },
    {
    "name": "佐賀県",
    "url": "http://www.pref.saga.lg.jp/"
    },
    {
    "name": "長崎県",
    "url": "http://www.pref.nagasaki.lg.jp/"
    },
    {
    "name": "熊本県",
    "url": "http://www.pref.kumamoto.jp/"
    },
    {
    "name": "大分県",
    "url": "http://www.pref.oita.jp/"
    },
    {
    "name": "宮崎県",
    "url": "http://www.pref.miyazaki.lg.jp/"
    },
    {
    "name": "鹿児島県",
    "url": "http://www.pref.kagoshima.jp/"
    },
    {
    "name": "沖縄県",
    "url": "http://www.pref.okinawa.lg.jp/"
    }
    ]

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

    はじめに

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

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

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

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

    ブックマークレット

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

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

    別の方法

    使い方

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

    コード

    ブックマークレット

    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>';word=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(word)}));

    元の 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>'
    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"),t=$("#novel_a").next("novel_bn");$("head, body").empty(),$("link, style, script").remove(),$("head").append(e),$("head").append(n),$("head").append(o),$("body").append(i),$("body").append(t),$("*").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')
    var novel_bn = $('#novel_a').next('novel_bn')
    $('head, body').empty()
    $('link, style, script').remove()
    $('head').append(style)
    $('head').append(viewport)
    $('head').append(title)
    $('body').append(novel_color)
    $('body').append(novel_bn)
    $('*').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": "012a345b678cd90efg1h12345h6789ij01k2l345",
      "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 の記号とかいろいろをエンコード、デコードしてくれます。