【配布】クライアント側で「てーぶりゅ」に対応させるためのJavaScript【Blog/WordPress】

12/13/2020 yumesenya 0 Comments

「てーぶりゅ」とは

こちらを御覧下さい。

https://hayabusa.open2ch.net/test/read.cgi/livejupiter/1607746460/l50

但し、暫定的な独自の仕様として、おーぷんでの仕様と異なり、二行目以降も一列目はテーブルヘッダとみなして th タグを付けるようにしてあります。**を行末に付けた場合のみthとする機能は実装済みです。

使用例は↓こんな感じ。

!table
:B000000,:B000000,:B000000,:B000000,:B000000,:B000000,:Bffffff,:B000000,:B000000,:B000000,:B000000,:B000000,:B000000,:B000000,:B000000
:B000000,:B000000,:B000000,:B000000,:Bd79451,:Bdaa255,:Be2ae64,:Be2ad5d,:B000000,:B000000,:B000000,:B000000,:B000000,:B000000,:B000000
:B000000,:B000000,:B000000,:B000000,:Bdca555,:Be0a759,:Be2ab5b,:Bd79f54,:B000000,:B000000,:B000000,:B000000,:B000000,:B000000,:B000000
:B000000,:B000000,:B000000,:B000000,:Be6af64,:Be4ae5f,:Bd79f55,:Be1ac5d,:Be7b265,:B000000,:B000000,:B000000,:B000000,:B000000,:B000000
:B000000,:B000000,:B000000,:B000000,:Bd29b55,:Bd19950,:Bdda658,:Bdda659,:Be1a95a,:Bffffff,:B000000,:B000000,:B000000,:B000000,:B000000
:B000000,:B000000,:B000000,:B000000,:Bcd9650,:Bd0974f,:Bdea658,:Be2a958,:Bd49d56,:Bd2a56f,:B000000,:B000000,:B000000,:B000000,:B000000
:B000000,:B000000,:B000000,:B000000,:Bd29b50,:Bdaa256,:B8e7146,:B735f42,:B685339,:B5f4b36,:B333333,:B000000,:B000000,:B000000,:B000000
:B000000,:B000000,:B000000,:B000000,:Be8b979,:Bded7ce,:B51504e,:Be5e5e5,:Badadad,:B212123,:B2d3333,:B000000,:B000000,:B000000,:B000000
:B000000,:B000000,:B000000,:B000000,:B565758,:B9b9b9c,:B2f3031,:Bffffff,:Bbdbcbf,:B8f8f90,:B2d2d32,:B000000,:B000000,:B000000,:B000000
:B000000,:B000000,:B000000,:B000000,:B6d6e70,:Bcccccc,:B929294,:Bffffff,:Bffffff,:B8e8f90,:B39393d,:B000000,:B000000,:B000000,:B000000
:B000000,:B000000,:B000000,:B000000,:B888b8e,:Bacadaf,:Ba9aaac,:Baaabad,:Bacadaf,:B808284,:B6f7074,:B000000,:B000000,:B000000,:B000000
:B000000,:B000000,:B000000,:B6d6d6d,:B787a7d,:B7a7c7f,:B787a7d,:B737578,:B797b7e,:B787a7d,:B797b7e,:B000000,:B000000,:B000000,:B000000
:B000000,:B000000,:B000000,:B7b7d81,:B7d7f82,:B7b7d80,:B7e8083,:B737578,:B717376,:B707275,:B7b7d80,:B7e8082,:B000000,:B000000,:B000000
:B000000,:B000000,:B000000,:B6f7275,:B737578,:B7a7c7f,:B77797c,:B747679,:B787a7d,:B747679,:B787a7d,:B7b7d81,:B000000,:B000000,:B000000
:B000000,:B000000,:B000000,:B66686b,:B6e7073,:B787a7d,:B77797c,:B75777a,:B747679,:B6c6e71,:B747679,:B717376,:B000000,:B000000,:B000000
:B000000,:B000000,:B000000,:B77797c,:B787a7d,:B787a7d,:B6e7073,:B787b7e,:B747679,:B727477,:B737578,:B7c7d81,:B000000,:B000000,:B000000
:B000000,:B000000,:B000000,:B77797c,:B787a7d,:B737578,:B747679,:B797b7e,:B787a7d,:B76787b,:B737578,:B505051,:B000000,:B000000,:B000000
:B000000,:B000000,:B000000,:B000000,:B797b7e,:B797b7e,:B76787b,:B77797c,:B77797c,:B76787b,:B76787b,:B000000,:B000000,:B000000,:B000000
:B000000,:B000000,:B000000,:B000000,:B76797b,:B545558,:B6c6e70,:B75777b,:B515355,:B565758,:B737979,:B000000,:B000000,:B000000,:B000000
:B000000,:B000000,:B000000,:B000000,:B000000,:B203030,:B626262,:B767676,:B383840,:B222233,:B000000,:B000000,:B000000,:B000000,:B000000

注意事項

大急ぎ（さとる氏が機能を公開したと知って一時間ほど）で作ったので作りは荒いし、デザインはCSSに分けてないしでアカンやつです。暇ができたらブラッシュアップします。

解説もブラッシュアップが終わるまではしませんので悪しからず。

JavaScriptソース

document.addEventListener('DOMContentLoaded', function() {
  const targetClass = 't_b';
  const tableBorder = '1';
  let splitter;
  const tab = /\t/;
  const comma = /,(?![^<]*?">)/;
  const bgColorMarker = /:B/;
  const escapedCommaRExp = /,/g;
  const unEscapedComma = ','
  const escapedBrRExp = /<br>/g;
  const unEscapedBr = '<br />';
  const headerRExp = /\*\*$/;
  const tableClassName = 'read_table';
  const dotTableClassName = 'tdot';
  const nlRExp = /(?:<br>|<br \/>|\r\n|\n|\r)+/;
  const tableRExp = /(?:^|\r\n|\n|\r|<p[^>]*>|<div[^>]*>|<dd[^>]*>|<br>|<br \/>)\s*!table\s*(?:<br>|<br \/>|\r\n|\n|\r|\s)+/;
  var postBodies = document.getElementsByClassName(targetClass);

  for (let postBody of postBodies) {
    let strs = postBody.innerHTML.split(tableRExp);
    postBody.innerHTML = strs.shift();
    let latterStr = '';

    for (let str of strs) {
      if (nlRExp.test(str)) {
        let lines = str.split(nlRExp);
        let table = document.createElement('table');
        table.setAttribute('border', tableBorder);
        table.setAttribute('class', tableClassName);
        let isLineHeader = false;
        while (lines.length) {
          if (tab.test(lines[0])) {
            splitter = tab;
          } else if (comma.test(lines[0])) {
            splitter = comma;
          } else {
            splitter = false;
          }
          if (splitter) {
            let isRowHeader = true;
            let tr = document.createElement('tr');
            let line = lines.shift();
            if (headerRExp.test(line)) {
              isLineHeader = true;
              line = line.replace(headerRExp, '');
            }
            let items = line.split(splitter);
            for (let item of items) {
              item = item.replaceAll(escapedCommaRExp, unEscapedComma).replaceAll(escapedBrRExp, unEscapedBr);
              let td;
              if (isRowHeader || isLineHeader) {
                td = document.createElement('th');
                isRowHeader = false;
              } else {
                td = document.createElement('td');
              }
              if (bgColorMarker.test(item)) {
                let content = item.split(bgColorMarker);
                td.innerHTML = content[0];
                td.setAttribute('style', 'background-color:#' + content[1]);
              } else {
                td.innerHTML = item;
              }

              if (td.children) {
                let children = td.children;
                for (let child of children) {
                  if (!(child.textContent || /(BR|IMG|A)/.test(child.tagName))) {
                    td.removeChild(child);
                  }
                }
              }

              tr.appendChild(td);
            }
            table.appendChild(tr);
            isLineHeader = false;
          } else {
            while (lines.length) {
              latterStr += lines.shift() + '<br />';
            }
          }
        }
        postBody.innerHTML += table.outerHTML;
        if ('' != latterStr) {
          postBody.innerHTML += latterStr;
        }
      }
    }
    let tables = document.getElementsByClassName('read_table');
    for (let table of tables) {
      if ('' == table.textContent) {
        table.setAttribute('class', tableClassName + ' ' + dotTableClassName);
      }
    }
  }
});

何だか変数名が混乱しているような……？

CSS

こちらはさとる氏のものをそのまま流用しています。

.read_table {
    border: 0px;
    border-spacing: 0px;
    margin: 3px;
    border-collapse: collapse;
    max-width: 360px;
    overflow-x: scroll;
}
.read_table th, .read_table td {
    padding: 3px;
    border: 0.1px solid #222;
}
.read_table th {
    background: #ccc;
}
.tdot td{
    max-width:7px;
    max-height:7px;
    font-size:5px;
}

導入方法

まずは上記ソースをコピペして下さい。次に、お使いのブログ・WPでまとめ記事に適用される「自由に設定できるコード」のうち、本文の末尾やHeadタグ内の設定箇所に、

<script>
……
……
</script>

のようにタグを置いてその中に貼り付けるか、JavaScriptファイルをアップロードできるならそこに保存し、読み込ませるためのタグを

<script type=text/javascript src="maketable.js"></script>

こんな感じで書いて下さい。

CSSについても、お使いのブログ・WP内で適用される箇所にコピペして下さい。

取り急ぎ公開まで。

2020/12/13追記

以下の機能を改善し、以前のソースを削除しました。

  • CSSを分離
  • 他の当サイト配布スクリプトと併用可能に
  • 細かなバグ修正
  • 空白文字無し（＝「,」一つで）空白マス作成に対応（してた）
  • タブ区切り（エクセルからコピー時のデフォルトらしい）に対応（タブ文字を書き込むと「まとめくす」さんの吐くHTMLでもタブ文字が出力されている。感謝）
  • タブ区切り時に「,」を区切りとして使用しないようにするか否か検討中。本家の仕様次第？しました。
  • 幅の広いテーブル(360px以上)をスクロール化（追記されたCSSを拝借しただけ。CSSまとめて改造するときにでも条件指定で細長い表示領域のときに限定するかも？）
  • 背景色指定に対応
  • ドット絵機能に対応
  • だらだらと手続きを垂れ流しているので、流石にある程度函数化したい

2020/12/17追記

以下の機能を改善し、以前のソースを削除しました。

  • おーぷん２ちゃんねるが区切りでない「,」を補助機能から入力出来るようになったために生じた「,」のエスケープに対応
  • 同じく表内部に<br>タグを入れて改行出来るようになったことへ対応
  • その他、微修正

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です