株主優待買取一覧をユーザスクリプトで便利にする

2018/07/192020/10/06

「チケットセンター：株主優待券買取一覧」を拡張する。

株主優待買取一覧の検索性能を向上する

現在は、データをすべてテーブル上に表示するだけのため、ブラウザ標準の検索機能を使用して検索している。

そのため、１つの項目を検索をすることはできるが、複数項目の一括検索を行うことができない。例えば、検索対象をExcel等でリスト化しても個別に検索することしかできず、不便である。

改善案

リストを元にページ内のデータを抽出する
- 証券番号のリストを使用する
  - 会社名では、抽出失敗の可能性があるため、不採用とする
  - 会社名では、意図しない抽出が発生する可能性がある
    - 例：Excelヘッダ列の文字列による誤抽出
- リストは、改行区切り／カンマ区切りに対応する
  - Excelで列をコピーすると改行区切りとなる
  - 標準的にcsv形式のデータが多いため、カンマ区切りに対応する

改善結果

改善方法

ユーザスクリプトを使用する。

以下のアドオンを使用してユーザスクリプトをWebページに対して追加する。（例は、Firefox向けアドオンであるが、Chrome向けアドオンも存在する）

ユーザスクリプト

株主優待券買取一覧拡張検索.user.js// ==UserScript==
// @name        株主優待券買取一覧拡張検索
// @description 証券番号から一覧内のデータを抽出する。
// @include     http://www.bugbugnow.net/p/ticketcenter.html
// @include     https://www.bugbugnow.net/p/ticketcenter.html
// @author      toshi
// @license     MIT License
// @see         https://opensource.org/licenses/MIT
// @namespace   https://www.bugbugnow.net/
// @version     1
// @see         1 - 初版
// @grant       none
// ==/UserScript==

(function() {
  'use strict';

  // 検索実行
  function exec() {
    let list = document.querySelector('#ex_textarea').value.replace(/ *, */g, '\n').split('\n');
    let top = document.querySelector('#ex_table');
    top.innerHTML = '<table></tabel>';
    top = document.querySelector('table');
    top.appendChild(document.querySelector('.app-content table.yuutai tr').cloneNode(true));

    // 抽出 + 色付け
    let codes = document.querySelectorAll('.app-content table.yuutai tr td.code');
    for (let i=0; i<codes.length; i++) {
      if (list.indexOf(codes[i].innerText) != -1) {
        let tr = codes[i].parentNode.cloneNode(true);
        tr.style.backgroundColor = '#ff91a7';
        top.appendChild(tr);
      }
    }
  }

  // 拡張UIの追加
  let content = document.querySelector('.app-content');
  let div = document.createElement('div');
  div.innerHTML = ''
    + '<div id="ex_search" style="margin-bottom: 1em;">'
      + '<textarea id="ex_textarea" style="width: calc(90% - 4em - 1em);margin: 0 0.5em;" placeholder="証券番号\nカンマ区切り or 改行区切り"></textarea>'
      + '<input id="ex_exec" type="button" value="実行" style="margin: 8px 0.5em;">'
    + '</div>'
    + '<div id="ex_table"></div>';
  div.querySelector('#ex_exec').onclick = exec;
  content.insertAdjacentElement('afterbegin', div);
})();