<!DOCTYPE HTML>
            <html>
            <head>
            <title>convert log</title>
            <meta http-equiv="content-type" charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <style>
                *{
                    font-family:★font;
                }
                header{
                    display:block;
                    position:fixed;
                    width:100%;
                    height:40px;
                    left:0;
                    top:0;
                    margin-left:0 !important;
                    padding-left:0 !important;
                    text-align:left;
                    z-index:200;
                    background:#fff;
                }
                body{
                    margin-top:0px;
                }
                .main{
                    padding-top:50px;
                    padding-left:1em;
                }
                details{
                    padding-top:.5em;
                    padding-left:1em;
                    cursor:pointer;
                    z-index:500;
                    background:#000;
                    color:#fff;
                    outline:none;
                    border:none;
                    height:40px;
                    width:100%;
                    transition:.5s;
                }
                details summary{
                    cursor:pointer;
                    background:#000;
                    color:#fff;
                    outline:none;
                    height:40px;
                }
                details[open]{
                    cursor:pointer;
                    z-index:500;
                    background:#000;
                    color:#fff;
                    outline:none;
                    border:none;
                    width:100%;
                    overflow-x:hidden;
                    overflow-y:auto;
                    height:500px;
                    transition:.5s;
                }
                details[open] summary{
                    cursor:pointer;
                    z-index:500;
                    background:#000;
                    color:#fff;
                    outline:none;
                    height:40px;
                }
                input[type="checkbox"]{
                    display:none;
                }
                input[type="checkbox"]+label{
                    display:none;
                    display:inline-block;
                    position:relative;
                    padding-left:25px;
                    padding-right:10px;
                    cursor:pointer;
                }
                input[type="checkbox"]+label::before{
                    content:"";
                    position:absolute;
                    display:block;
                    box-sizing:border-box;
                    width:20px;
                    height:20px;
                    margin-top:-10px;
                    left:0;
                    top:50%;
                    border:1px solid;
                    border-color:#888;
                    background-color:#FFF;
                    border-radius:5px;
                }
                input[type="checkbox"]:checked+label::after{
                    content:"";
                    position:absolute;
                    display:block;
                    box-sizing:border-box;
                    width:18px;
                    height:9px;
                    margin-top:-9px;
                    top:50%;
                    left:3px;
                    transform:rotate(-45deg);
                    border-bottom:3px solid;
                    border-left:3px solid;
                    border-color:#000;
                }
                a:link{text-decoration:none;color:#fff;}
                a:visited{text-decoration:none;color:#fff;}
                a:hover{text-decoration:none;color:#fff;}
                h2{
                    color:#fff;
                    font-size:120%;
                    display:inline-block;
                }
                h2::before{content:'▌ ';}
                button[type="button"]{
                    outline:none;
                    border:none;
                    border-radius:15px;
                    width:10em;
                    height:1.5em;
                    padding:0.1em;
                    text-align:center;
                    background:#ccc;
                    color:#888;
                    transition:0.3s;
                    margin-left:1em;
                }
                button.show[type="button"]{
                    outline:none;
                    border:none;
                    border-radius:15px;
                    width:10em;
                    height:1.5em;
                    padding:0.1em;
                    text-align:center;
                    background:#888;
                    color:#ccc;
                    transition:0.3s;
                    margin-left:1em;
                }
                button[type="button"]:hover,button.show[type="button"]:hover{
                    cursor:pointer;
                    background:#fff;
                    color:#000;
                }
                ★css
                @media only screen and (orientation: portrait){
                header{
                    display:block !important;
                    position:fixed !important;
                    height:60px !important;
                    left:0 !important;
                    top:0 !important;
                    margin-left:0 !important;
                    padding-left:0 !important;
                    padding-top:20px !important;
                    text-align:left !important;
                    z-index:200 !important;
                    background:#000 !important;
                }
                body{
                    position:absolute !important;
                    padding-left:0 !important;
                    width:95% !important;
                }
                .main{
                    padding-top:60px !important;
                    padding-left:0.5em !important;
                }
                .chat{
                    margin-top:0 !important;
                    margin-bottom:0 !important;
                    padding:0.5em !important;
                    padding-left:1em !important;
                    word-break:break-word !important;
                    overflow-wrap:break-word !important;
                }
                details[open]{
                    height:800px !important;
                }
                }
            </style>
            <style name="priority">
                .hide{
                    display:none !important;
                }
                .none{
                    display:none !important;
                }
            </style>
            </head>
            <header>
            <details>
                <summary>表示切替</summary>
                <h2>タブ別</h2><button type="button" onclick="tabHIDE();" id="tabBTN" class="show">一括非表示</button><br>
                <form action="#" name="tab_box">★tab</form>
                <br>
                <h2>発言者別</h2><button type="button" onclick="memHIDE();" id="memBTN" class="show">一括非表示</button><br>
                <form action="#" name="mem_box">★mem</form>
                <br>
                <a href="#">▵ TOP</a>
                <br><br><br>
            </details>
            <script type="text/javascript">
            function showHIDE(){
                var countTAB = document.getElementsByName('tab').length - 1;
                var hideTAB = [];
                for(i = 0 ; i <= countTAB ; i++){
                    var id = document.getElementsByName('tab')[i].id;
                    var isCHECK = document.getElementById(id).checked;
                    if(isCHECK){;}
                    else{hideTAB.push(id.toUpperCase());}
                }
                var countMEM = document.getElementsByName('mem').length - 1;
                var hideMEM = [];
                for(i = 0 ; i <= countMEM ; i++){
                    var id = document.getElementsByName('mem')[i].id;
                    var isCHECK = document.getElementById(id).checked;
                    if(isCHECK){;}
                    else{hideMEM.push(id.toUpperCase());}
                }
                var target = document.getElementsByClassName('chat');
                for(i = 0 ; i <= target.length - 1 ; i++){
                    var classSET = target[i].className.split(' ');
                    for(j = 1 ; j <= classSET.length - 1 ; j++){
                        var TAB = hideTAB.indexOf(classSET[j]) !== -1;
                        var MEM = hideMEM.indexOf(classSET[j]) !== -1;
                        if(TAB | MEM){
                            target[i].classList.add('hide');
                            break;
                        }
                        else if(!TAB && !MEM){
                            target[i].classList.remove('hide');
                        }
                        else{continue;}
                    }
                }
            }
            function tabHIDE(){
                var btn = document.getElementById('tabBTN');
                var isSHOW = btn.className;
                var allTAB = document.getElementsByName('tab').length - 1;
                for(i = 0 ; i <= allTAB ; i++){
                    var id = document.getElementsByName('tab')[i].id;
                    if(isSHOW == 'show'){
                        document.getElementById(id).checked = false;
                        btn.classList.remove('show');
                        btn.innerText = '一括表示';
                    }
                    else{
                        document.getElementById(id).checked = true;
                        btn.classList.add('show');
                        btn.innerText = '一括非表示';
                    }
                }
                showHIDE();
            }
            function memHIDE(){
                var btn = document.getElementById('memBTN');
                var isSHOW = btn.className;
                var allMEM = document.getElementsByName('mem').length - 1;
                for(i = 0 ; i <= allMEM ; i++){
                    var id = document.getElementsByName('mem')[i].id;
                    if(isSHOW == 'show'){
                        document.getElementById(id).checked = false;
                        btn.classList.remove('show');
                        btn.innerText = '一括表示';
                    }
                    else{
                        document.getElementById(id).checked = true;
                        btn.classList.add('show');
                        btn.innerText = '一括非表示';
                    }
                }
                showHIDE();
            }
            </script>
            </header>
            <body>
            <div class="main">★log
            </div>
            </body>
            </html>

LOG Convert ver.1.1.1

動作確認｜Windows10 Google Chrome
上記ブラウザ以外では一部説明文が表示されない場合がございます。
InternetExplorerおよびMicrosoftEdgeは文字化けの可能性がある為、非推奨です。

対象ログはココフォリア・Tekeyの全ログ（どどんとふ風　※ダークモード未対応）で出力したログ
（HTML要素が一致するログ）のみです。
手動で置換したものや、その他ツールのログ、コンバート済ログは動作致しません。
ログの容量が大きいものはタブ・発言者の切り替えに時間がかかる場合がございます。

元ログ・ログにタブが含まれているかどうかを問わず、TAB0～2は「メイン」「情報」「雑談」、
MEM0は「KP」で自動判定されます。
「メイン」「情報」「雑談」以外のタブ色は、文字色が「#000」「#888」以外で一番最初に発言のあった
発言者の文字色から自動で淡色を生成します。
MEM0のみ発言者がログ上で表示されなくなりますが、GM等に名称を置き換えて頂いても問題ありません。

動作未確認Ver.1.2.0（表示切替速度向上・おまけ機能つき）
　 ※不具合修正によりパッチバージョンが変更されている場合があります。

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

　