2018-07-22T21:00:28Z

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

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

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

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

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

改善案

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

改善結果

改善結果

改善方法

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

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

ユーザスクリプト

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

Webページ側を拡張しない理由

ページを拡張して、検索機能を追加することは可能である。だが、その結果単純なページを好むユーザにとっては、不必要なユーザインターフェイスによるページの複雑化(難読化)や、不必要なスクリプトによるページのダウンロード時間の増加などの悪影響が発生する。

また。ユーザ毎に必要とする機能は異なるため、データのみを提供する。機能に関しては、ユーザ側で必要に応じて対応することを前提とする。

また、ページ拡張のユーザスクリプトは、単純なページ(拡張していないページ)では作成が容易であり。単純なページはページの変更頻度が低いと考えられるため、ユーザスクリプトの保守性が高いと言える。

 コメントを書く