ログ・パンサー　β版@drytof

CSSとHTMLに慣れてる人向けログ整形ツール（※ココフォリアの全ログにのみ対応）
※ココフォリア非公式　　ツール転載元

01ファイル読込

ココフォリアの全体ログをアップロードしてください。

02色調整

こだわりたい人向け。（無編集でもOK）

◆全体

タイトル　　：
見出色　　　：
文字色　　　：
背景色　　　：
枠線色　　　：
行の高さ　　：
文字サイズ　：

◆見出し

タブタイトル：
発言者見出し：

◆spanタグの属性(追加)

タブ　　　　：
発言者　　　：
発言　　　　：

※補足　置換テーブル

置換元	置換先
$title	アップロードファイル名
$tab	タブ名
$actor	発言者
$color	発言者の文字色
$fontColor	全体の文字色
$backgroundColor	全体の背景色
$borderColor	全体の枠線色

03カスタマイズ

こだわりたい人向け。（無編集でもOK）
※ファイル読込後に調整可能

Exテンプレート

CSSやHTMLを頑張りたい人向けコンテンツ。このテキストエリア内を編集するとデザインを自由変更可能。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="noindex,nofollow">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>$title</title>
<script>

window.onload = function() {
  document.body.style.paddingBottom = '128px';
  
  var tab_arr = タブ名配列をここに配置;
  
  // タブのチェックボックスを並べるリストを作成
  var tablist = '<div id="tablist" style="width:100%;position:fixed;bottom:0;z-index:10000;'+
        'padding:10px;font-size:14px;display:flex;flex-wrap:wrap;flex-direction:row;justify-content:flex-start"></div>';
  document.body.innerHTML += tablist;
  document.getElementById("tablist").style.backgroundColor =  document.body.style.backgroundColor;
  
  // ラベルの作成
  for (var i = 0; i < tab_arr.length; i++){
    var label = '<label style="display:inline-block;min-width:96px" data-tab="' + tab_arr[i] + '"><input type="checkbox" checked onchange="checkTabLabel(this)"><span>'+ tab_arr[i] +'</span></label>';
    document.getElementById("tablist").innerHTML += label; //タブリストにチェックボックスを入れる
  }
};

// チェックボックスクリック時の挙動
function checkTabLabel(input){
  var element = input.parentElement;
  console.log(input.checked);
  var div_elements = document.querySelectorAll(".tabContainer[data-tab=\""+ element.dataset.tab +"\"]");
  Array.from(div_elements).forEach(function(div_element) {
    if(input.checked){
      div_element.style.display = "";  // checked属性がある（＝チェックがついている）ときは表示
    } else {
      div_element.style.display = "none";  //即消す
    }// チェック時の処理記述終わり
  });
};

</script>
<style type="text/css">
body,html{
  -moz-box-sizing: border-box;
  box-sizing  : border-box;
  font-family : "Roboto", "Helvetica", "Arial", "sans-serif", "メイリオ";
  color       : $fontColor;
  background  : $backgroundColor;
  border-color: $borderColor;
  line-height : $lineHeight;
  font-size   : $fontSize;
}
div {
  -moz-box-sizing: border-box;
  box-sizing  : border-box;
  font-family : "Roboto", "Helvetica", "Arial", "sans-serif", "メイリオ";
}

/* 見出し */
h1,h2,h3,h4,h5,h6{
  color      : $h1Color;
}
h1{
  font-size  : 18px;
  font-weight: bold;
}

span.spanTab, span.spanActor{
  display:none;
}

/* タブタイトルの分、１行目の発言をちょっと下に下げる */
.actorTitle[data-count="first"], .line[data-count="first"] {
  padding-top:10px;
}

/* 発言者と発言を左右に並べるためにflexを使用 */
div.actorContainer{
  display:flex;
  flex-direction:row;
  border-top:dotted 1px;
  border-bottom:none;
}

/* 発言者名 */
.actorTitle {
  font-weight:bold;
  border-right:solid 1px;
  padding-left:5px;
}

div.actorContainer > .actorGroup {
  flex:auto
}

@media screen and (max-width: 768px) {
  /* スマホ閲覧用　スクリーンサイズが768px以下の場合に適用 */
  /*  発言名と発言の横並びを解除(flexの削除) */
  div.actorContainer{
    display:block;
    border-top:dotted 1px;
    border-bottom:none;
  }

div.actorContainer > .actorTitle {
    font-weight:bold;
    border-right:none;
    padding-left:5px;
  }

div.actorContainer > .actorGroup {
  }
  
  /* タブタイトルの分、１行目の発言をちょっと下に下げる……のを解除する */
  .line, .line[data-count="first"] {
    padding-top:0px;
    padding-left:15px;
    margin:0px;
  }
}

/* スクリーンサイズが769px以上の場合に適用 */
@media screen and (min-width: 769px) {
  .line{
    padding-left:5px;
    /* border-bottom:dotted 1px; */
  }
  
  /* 発言者名の幅を固定にする */
  .actorTitle {
  width:120px;
  max-width:120px;
  min-width:120px;
}
}

div.tabGroup {
  border: solid 1px;
}

div.tabGroup > .actorContainer:first-child {
  border-top:none;
}
div.actorGroup > .line:last-child {
  border-bottom:none;
}

div.tabTitle{
  z-index:10;
  border:solid 1px;
  position:relative;
  min-width:120px;
  width:120px;
  text-align:center;
  top:10px;
  left:30px;
}

#tablist{
  background  : $backgroundColor;
}

カスタムCSSをここに配置

</style>
</head>
<body>
<h1>$title</h1>
整形後ログをここに配置
</body>
</html>

「カスタムCSSをここに配置」「整形後ログをここに配置」という文字列をCSSや整形後ログに置換します。

デフォルトは次の通りの仕様。
・タブごとにグルーピング
・発言者を左に表示
・スマホなど画面が小さい時は発言者を上に表示
・タブの表示非表示機能アリ

利用規約

・違法になることにつかわなければ使わなければだいたいOK
・本ツール自体のダウンロードOK
・改変、改良後のサービスを無償公開/無償頒布OK
・本ツールの複製を公開/配布する場合、詐欺や悪意のある行為に使わないでください
・本ツールで作った成果物の営利使用　不問(シナリオの規約に従ってください)
・本ツールを売りさばくのはNG。アフィリエイト広告等はOK。本ツールを使いたい人に制限さえかからなければ良いです。
・改造版を身内のみに公開　OK

Exヘルプ

整形後のログを自分好みにカスタマイズするためのアイデアやCSS、HTML知識をメモ書きします

ログパンサー形式の構造

HTMLファイルについて理解するのにこちらのサイトが参考になります。⇒とほほのWWW入門(https://www.tohoho-web.com/how2/html.htm)
ログパンサー形式はdivタグとspanタグから構成されて、下の通りの構造となっています。（長いので隠しました。ボタンで表示してください）
※「div.tabContainer」は「class属性にtabContainerを指定されたdivタグ」の意。

CSSによる装飾

ログパンサーで整形されたログの構造は明らかにタグ過多ですが、デフォルトでは一部要素を非表示にするCSSを適用しているためタブ名や発言者名の重複が見えないようになっています。
タグを見せるようにしたり消したりするのにdisplayが使えます。他、使う頻度の高そうなCSSを以下に紹介します。

CSS

display	表示/非表示	参考URL
flex	タグ要素の横並べ	参考URL
position, top, bottom, left	タブタイトルのように本来の表示位置からズラしたいときに使う	参考URL
padding	タグ内の余白幅。タグに指定した背景色はpadding範囲まで含まれる。	参考URL
margin	タグ外との余白幅。タグに指定した背景色はmargin範囲まで染められない。	参考URL
color	文字色	参考URL
background	背景。実は画像も指定できる。	参考URL
border	枠線。二重線やドット線を指定できる。	参考URL

セレクタ

.tabContainer[data-tab="(タブ名)"] .tabTitle	タブタイトルを表示するエリアのセレクタ例）.tabContainer[data-tab="メイン"] .tabTitle
.tabContainer[data-tab="(タブ名)"] .tabGroup	タブ内容を囲う外枠エリアのセレクタ例）.tabContainer[data-tab="メイン"] .tabGroup
.tabContainer[data-tab="(タブ名)"] .tabGroup *	タブ内容の内側エリアのセレクタ例）.tabContainer[data-tab="メイン"] .tabGroup
.actorContainer[data-actor="(発言者名)"] .actorTitle	発言者名を表示するエリアのセレクタ例）.actorContainer[data-actor="メイン"] .actorTitle
.actorContainer[data-actor="(発言者名)"] .actorGroup	発言者～発言内容を囲う外枠エリアのセレクタ例）.actorContainer[data-actor="メイン"] .actorGroup
.actorContainer[data-actor="(発言者名)"] .actorGroup *	発言者～発言内容の内側エリアのセレクタ例）.actorContainer[data-actor="メイン"] .actorGroup
.line	タブ、発言者問わずすべての行のセレクタ

あとは実際にHTMLやCSSを弄って実験を重ねると、自分好みの見た目にカスタマイズ出来るようになると思います。
ぜひ挑戦してみてください。

ログ・パンサー β版＠drytof