FF14のパッチノートに位置固定の簡易目次を表示するJavaScript。突貫工事。

ffxiv-patchnote-floattoc.js

/* title: FF14パッチノートの固定位置簡易目次スクリプト
 * author: @Getaji
 * description: 4.2パッチノート公開時に動作確認。突貫工事なので不具合とか注意。jQueryが動いてないと死ぬ。
 *              使い方はデベロッパーツールのコンソール欄にぶちこむか、javascript:とつけてアドレスバーにぶちこむか、UserScriptにするか。
 *              位置を変更したい場合は9,10行目を変更するとよろし。スクロール位置を反映とかやってみたいけどそこまでしなくてもいいかなと思った終わり。
 */
(function() {
  $(document.head).append(`<style>
  #eftoc {
    position: fixed;
    bottom: 70px;
    right: 5px;
    border-radius: 5px 0px 0px;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.1) 0px 1px 4px 0px;
  }
  #eftoc-topheader {
    text-align: center;
    font-size: medium;
    background-color: #75b324;
    color: white;
  }
  .eftoc-h1 {
    margin: 2px 5px;
  }
  .eftoc-h2 {
    margin-left: 1em;
  }
  </style>`);
  const toc = $('<div id="eftoc">');
  toc.append('<div id="eftoc-topheader" style="text-align: center; font-size: medium; background-color: #75b324; color: white; ">目次</div>');
  $('.js--mdl-nav>li').each(function() {
    const a = this.children[0];
    const h1 = $('<div class="eftoc-h1"><div class="eftoc-h1-title">' + a.outerHTML + '</div></div>').appendTo(toc);
    console.log(this.children[0].innerText, this.children[0].getAttribute('href'));
    for (li of this.children[1].children) {
      $('<div class="eftoc-h2"><div class="eftoc-h2-title">' + li.innerHTML + '</div></div>').appendTo(h1);
    }
  });
  toc.appendTo(document.body);
})();