コンバートログ（タイプB）はタブのみ簡単な表示切替※が可能です。
発言者の表示切替はできません。
※:メインタブ＋指定タブでの表示、または指定タブのみ表示ができます。
また、簡易的な動作確認のみ行っている為、完全な動作保証はしていません。
ログの容量によって動作が非常に重くなる可能性があります。
以下のHTMLログのみサポートしています。
◦ ココフォリア全タブログ
◦ ココフォリア個別タブログ
◦ Tekeyのどどんとふ風全タブログ※
◦ Tekeyのどどんとふ風複数タブログ※
※:ダークモードのタブも対象です。ただし、個別出力したタブやTekey v2（切り替え機能付き）ログは対象外です。
元のログからHTMLを編集し書き換えている場合は正しく動作しない可能性がございます。
CoC6版以外のログは動作未確認・ダイス出力タブ非対応です。
<!DOCTYPE HTML>
<html>
<head>
<title>【title-add-contents】</title>
<meta http-equiv="content-type" charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://use.fontawesome.com/releases/v6.5.0/css/all.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style data="root">/*root-add-contents*/</style>
<style data="loading">
#loading-hover{
position:fixed;
top:0;
left:0;
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
background:var(--load-color);
color:var(--font-color);
z-index:999;
}
#loading-hover div{
padding:10%;
}
#loading-hover div p{
width:12em;
height:1em;
margin:0.5em 0;
outline:1px solid var(--bd-color);
}
#loading-hover div p span{
display:inline-block;
height:1em;
margin:0;
padding:0.5px;
background:var(--bg-color);
animation:load 0.3s forwards;
}
@keyframes load{
0% { width:0%; }
50% { width:50%; }
100% { width:100%; }
}
</style>
<style data="header">
#first-tab,#prev-tab,#next-tab,#last-tab{
position:fixed;
top:48px;
z-index:100;
cursor:pointer;
transition:0.2s;
color:var(--menu-color);
}
#first-tab{left:20px;}
#prev-tab{left:60px;}
#next-tab{right:60px;}
#last-tab{right:20px;}
.opc{
cursor:default !important;
opacity:0.2 !important;
}
#header,#header-bg,#header-menu{
position:fixed;
top:0;
left:0;
width:100%;
margin:0;
padding:0;
overflow:hidden;
}
#header-bg{
height:80px;
border-bottom:2px solid var(--bd-color);
background:var(--bg-color);
z-index:9;
}
#header-menu{
height:20px;
background:rgba(0,0,0,0);
color:var(--menu-color);
z-index:12;
padding:10px 0 0 25px;
font-size:80%;
}
#header-menu p{
display:inline-block;
margin:0 0.5em 0 1.5em;
padding:0;
cursor:pointer;
}
#header-menu p:before,#checkbox p:before{
content:'\f0c8';
font-family:'Font Awesome 5 Free';
font-weight:200;
margin-right:0.5em;
}
#header-menu p.check:before,#checkbox p.check:before{
content:'\f14a' !important;
font-weight:900 !important;
}
#header{
display:flex;
flex-wrap:wrap;
justify-content: center;
height:84px;
background:rgba(0,0,0,0);
z-index:10;
transition:0.3s;
}
#header div{
height:25px;
min-width:100px;
margin:43px 3px 0 0;
padding:5px 10px;
border-top:2px solid var(--bd-color);
border-bottom:2px solid rgba(0,0,0,0);
border-left:2px solid var(--bd-color);
color:var(--bd-color);
transition:0.2s;
z-index:11;
}
#header div:last-child,#header div.show-last-tab{
border-right:2px solid var(--bd-color);
}
#header div span{
margin:0;
padding:0;
cursor:pointer;
}
#header div:has(span:hover){
background:var(--hover-color);
color:var(--menu-color);
}
#header div.select,#header div.select:has(span:hover){
background:var(--main-color) !important;
color:var(--bd-color);
margin-top:36px;
padding:10px 13px 15px 10px;
}
#header div.select span{
cursor:default !important;
}
#header div.select + div:before{
content:'';
position:absolute;
margin-top:-15px;
margin-left:-15.8px;
display:inline-block;
width:4px;
height:47px;
background:var(--bg-color);
}
#line-cut{
position:fixed;
top:81.8px;
left:0;
overflow:hidden;
width:100%;
height:3px;
background:var(--main-color);
z-index:11;
}
</style>
<style data="mobile-header">
#header-btn{
position:fixed;
top:0;
left:0;
margin:15px;
font-size:30px;
z-index:999;
transition:0.2s;
cursor:pointer;
}
#header-btn i.fa-gear{
color:var(--bg-color);
}
#header-btn i.fa-xmark{
color:var(--bd-color);
}
#mobile-menu{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
background:var(--bg-color);
color:var(--menu-color);
z-index:99;
}
#checkbox{
margin:75px 0 0 25px;
}
#checkbox p{
margin:0 0 15px 0;
padding:0;
font-size:80%;
cursor:pointer;
}
#mobile-menu div.contents{
margin:15px 0 0 25px;
width:90%;
height:65%;
overflow-y:scroll;
color:var(--menu-color);
}
#mobile-menu{ scrollbar-width:thin;scrollbar-color:var(--bd-color) rgba(0,0,0,0); }
#mobile-menu::-webkit-scrollbar{ width:10px;height:8px;}
#mobile-menu::-webkit-scrollbar-track{ background-color:var(--bd-color); }
#mobile-menu::-webkit-scrollbar-thumb{ background-color:rgba(0,0,0,0); }
#mobile-menu div.contents li{
list-style-type:circle;
cursor:pointer;
}
#mobile-menu div.contents li.select{
list-style-type:disc !important;
cursor:default !important;
}
</style>
<style data="chat-log">
body{
background:var(--main-color);
}
#chat-log,#dice-result{
margin-top:100px;
padding:10px 20px 50px;
}
.indent{
margin-left:100px;
padding:2px 10px;
width:clac(100% - 120px);
background:var(--idt-color);
}
.main-tab-log + .indent:not(.indent-reset),.indent:not(.indent-reset) + .main-tab-log{
margin-top:10px;
}
.main-tab-log + .indent:not(.indent-reset):before{
content:'';
position:absolute;
display:inline-block;
margin-left:-80px;
width:50px;
height:0.5em;
border-bottom:1px solid var(--idt-color);
}
.indent.indent-reset{
margin-left:0 !important;
padding:0 !important;
width:auto !important;
background:rgba(0,0,0,0) !important;
}
.dice-log,.log{
margin:20px 0;
}
.dice-log i{
margin-right:0.5em;
}
.dice-log.anime-on.start i{ animation:dice 0.5s forwards; }
@keyframes dice{
0%{ transform:scale(0.8) rotate(0deg); }
50%{ transform:scale(1.2) rotate(180deg); }
75%{ transform:scale(1.2) rotate(200deg); }
100%{ transform:scale(1) rotate(360deg); }
}
.dice-result.anime-on.start{ animation:result 0.5s forwards; }
@keyframes result{
0%{ transform:translateX(-100%); }
100%{ transform:translateX(0%); }
}
.dice-log span,.log span{
position:relative;
top:-1.5px;
font-weight:bold;
margin:0;
padding:2px 10px;
font-size:80%;
}
.log p,.dice-result{
padding:0 8px;
margin:0;
color:var(--font-color);
}
p.dice-result{
font-size:80%;
}
.no-user p{
padding:0 8px 0 0 !important;
}
.no-user p span{
margin:0;
padding:0;
}
.join-user{ margin-top:-20px !important; }
.join-user span{ display:none; }
.log p{ min-height:1em; }
#dice-result p{
margin:0;
padding:0;
margin-bottom:8px;
font-size:80%;
}
#dice-result p span:nth-child(2n){
padding:2px 5px;
margin-right:0.5em;
}
#dice-result p span:nth-child(2n-1){
display:inline-block;
width:8em;
}
#dice-result p span:nth-child(2n-1):before{
content:'［';
}
#dice-result p span:nth-child(2n-1):after{
content:'］';
}
#dice-result p span:nth-child(2n-1) b{
display:inline-block;
text-overflow:ellipsis;
white-space:nowrap;
max-width:7em;
font-weight:normal;
overflow:hidden;
font-size:80%;
position:relative;
top:3px;
}
</style>
<style id="portrait"></style>
<style data="priority">
.none{display:none !important;}
.priority-hide{display:none !important;}
</style>
<script data="common">
let isPC = false;
let okDice = false;
//dummy checkbox
$(function(){$(document).on('click','#header-menu p,#checkbox p',function()
{
let id;
try
{
id = ['main-show','dice-roll-on','join-user'].indexOf( $(this).attr('id') );
if( id == -1 && $(this).parent().attr('id') !== 'checkbox' ) return;
if( $(this).parent().attr('id') == 'checkbox' )
{ id = $(this).index('#checkbox p'); }
$(this).toggleClass('check');
}
catch(e)
{ console.error(e); }
finally
{
let isChecked = $(this).hasClass('check');
if( id == 0 )
{ showMainTab(isChecked,isMainShow()); }
else if( id == 1 )
{
let ok = false;
if( okDice ){ ok = true; }
else{ ok = confirm('ダイスアニメーションをオンにすると動作が重くなる可能性があります。\nオンにしますか？'); }
if( ok )
{
$('.dice-log,.dice-result').removeClass('start');
$('.dice-log,.dice-result').toggleClass('anime-on');
okDice = true;
}
else
{
$(this).removeClass('check');
let rmv = confirm('チェックボックスを非表示にしますか？');
if( rmv ){
$('#dice-roll-animation').remove();
$('#dice-roll-on,#dice-roll-on-mobile').hide();
}
}
}
else if( id == 2 )
{ joinUser(isChecked); }
}
});});
//toggle tab
$(function(){$(document).on('click','#header div span,#mobile-menu .contents li',function()
{
let elm = $(this);
if( $(this).parent().parent().attr('id') == 'header' )
{ elm = $(this).parent(); }
if( elm.hasClass('select') ) return;
/* reset */
$('.select').removeClass('select');
$('#chat-log div.indent,#dice-result').hide();
$('#chat-log').show();
/* add class */
elm.addClass('select');
/* show contents check */
let isMain = isMainShow();
let tabNum = 0;
if( isPC )
{
tabNum = $('#header div.select').index('#header div');
}
else
{
tabNum = $('#mobile-menu .contents li.select').index('#mobile-menu .contents li');
}
/* show hide & join user */
try
{
if( isMain ){ showMainTab(undefined,isMain); }
else if( $(this).attr('id') == 'dicelog' || $(this).attr('id') == 'dicelog2' ){
$('#dice-result').show();
$('#chat-log').hide();
}
else{ $('.indent[data-tabnumber="' + tabNum + '"]').show();showMainTab(isCheckType(0),isMain); }
}
catch(e)
{
console.error(e);
}
finally
{
joinUser(isCheckType(2));
}
});});
//show mainlog
function showMainTab(a,b)
{
if( a || b )
{/* tab0:visible or checked */
$('#chat-log .main-tab-log').removeClass('none');
$('#chat-log .indent').removeClass('indent-reset');
}
else
{/* checked false */
$('#chat-log .main-tab-log').addClass('none');
$('#chat-log .indent').addClass('indent-reset');
}
}
//join user
function joinUser(isCheck)
{
if(isCheck)
{/* join */
let prevTab = undefined;
let prevUser = undefined;
$('#chat-log div.main-tab-log:visible,#chat-log div.indent:visible').each(function(){
if( !$(this).children('div').eq(0).hasClass('dice-log') )
{
if(
prevTab == $(this).data('tabnumber')
&&
prevMem == $(this).data('user')
&&
$(this).data('user') !== undefined
)
{
$(this).addClass('join-user')
}
prevTab = $(this).data('tabnumber');
prevMem = $(this).data('user');
}
else
{
prevTab = undefined;
prevUser = undefined;
}
});
}
else
{/* cancel */
$('.join-user').removeClass('join-user');
}
}
//.check,.select
function isCheckType(a){
if( isPC ){ return $('#header-menu p').eq(a).hasClass('check'); }
else{ return $('#header-menu p').eq(a).hasClass('check'); }
}
function isMainShow(){
if( isPC ){ return $('#header div').eq(0).hasClass('select'); }
else{ return $('#mobile-menu .contents li').eq(0).hasClass('select'); }
}
</script>
<script id="dice-roll-animation">
function animationDice()
{
$('.anime-on').each(function(i)
{
let pos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if( scroll + 90 > pos - windowHeight + 200 )
{ $(this).addClass('start'); }
else
{ $(this).removeClass('start'); }
});
}
$(function(){$(window).scroll(function(){
if( isCheckType(1) )
{ animationDice(); }
});});
</script>
<script data="pc-script">
$(function(){$(document).on('click','#first-tab,#prev-tab,#next-tab,#last-tab',function()
{
if($(this).hasClass('opc')) return;
/* show&hide tab */
$('#header div').fadeOut(80);
let tgt = ['first-tab','last-tab','prev-tab','next-tab'].indexOf( $(this).attr('id') );
setTimeout(()=>
{
if( tgt < 2 )
{
$('#header div').removeClass('none');
if( tgt == 0 )
{ widthCheck( $('#header div') ); }
else
{ widthCheck( $( $('#header div').get().reverse() ) ); }
}
else
{
let slct;
let hideslct;
let showslct;
if( tgt == 2 )
{
slct = $('#header div:not(.none)').eq(0).index('#header div');
slct++
hideslct = '#header div:nth-child(n+' + slct + ')';
showslct = '#header div:nth-child(-n+' + slct + ')';
}
else if( tgt == 3 )
{
slct = $('#header div:not(.none)').length;
slct = $('#header div:not(.none)').eq(slct - 1).index('#header div');
slct++
hideslct = '#header div:nth-child(-n+' + slct + ')';
showslct = '#header div:nth-child(n+' + slct + ')';
}
else
{ return; }
$(hideslct).addClass('none');
$(showslct).removeClass('none');
if( tgt == 2 )
{ widthCheck( $( $('#header div:not(.none)').get().reverse() ) ); }
else
{ widthCheck( $('#header div:not(.none)') ); }
}
},100);
setTimeout(()=>
{ $('#header div').fadeIn(100); },300);
});});
function widthCheck(elm)
{
/* reset */
$('.show-first-tab,.show-last-tab').removeClass('show-first-tab show-last-tab');
/* check width */
let wdw = $(window).width();
let w = 50;
let setLast = false;
elm.each(function()
{
w += Number( $(this).width() ) + 50;
if( w >= wdw )
{
$(this).addClass('none');
if( !setLast )
{ $(this).prev().addClass('show-last-tab');setLast = true; }
}
});
if( setLast )
{ $('#first-tab,#prev-tab,#next-tab,#last-tab').fadeIn(50); }
/* prev,next class */
if( $('#header div').eq($('#header div').length - 1).hasClass('none') )
{$('#next-tab,#last-tab').removeClass('opc');}
else
{ $('#next-tab,#last-tab').addClass('opc'); }
if( $('#header div').eq(0).hasClass('none') )
{ $('#first-tab,#prev-tab').removeClass('opc'); }
else
{ $('#first-tab,#prev-tab').addClass('opc'); }
/* first,last class */
$('#header div:not(.none)').eq(0).addClass('show-first-tab');
$('#header div:not(.none)').eq($('#header div:not(.none)').length - 1).addClass('show-last-tab');
}
</script>
<script data="mobile-script">
$(function(){$(document).on('click','#header-btn i',function()
{
$(this).toggleClass('fa-gear fa-xmark');
$(this).parent().next().toggleClass('show-menu');
$(this).parent().next().toggle('slide',{direction:'left'},200);
});});
</script>
<script data="load-script">
function loadFnc()
{
$('#header div').hide(0);
joinUser(true);
let useragent;
let portraitStyle = '#chat-log{margin-top:60px !important;margin-left:40px;}.indent{margin-left:20px !important;}.indent:before{display:none !important;}';
try{
useragent = window.navigator.userAgent.toLowerCase();
if( useragent.match(/(iphone|ipad|ipod|android)/) || $(window).height() > $(window).width() )
{
$('#header-bg,#header-menu,#header,#line-cut').hide(0);
$('#portrait').text( portraitStyle );
setTimeout(()=>{ $('.mobile-contents').show(0); },600);
}
else
{
isPC = true;
setTimeout(()=>{ widthCheck( $('#header div') ); },50);
setTimeout(()=>{ $('#header div').show(0); },600);
}
setTimeout(()=>{ $('#loading-hover').fadeOut(100); },600);
}
catch(e){
$('#portrait').text( portraitStyle );
$('#header-bg,#header-menu,#header,#line-cut,#loading-hover').addClass('priority-hide');
$('.mobile-contents').show(0);
}
}
</script>
</head>
<body onload="loadFnc();">
<div id="loading-hover"><div>Loading...<p><span></span></p></div></div>
<div id="first-tab" style="display:none;"><i class="fa-solid fa-angles-left"></i></div>
<div id="prev-tab" style="display:none;"><i class="fa-solid fa-circle-chevron-left"></i></div>
<div id="next-tab" style="display:none;"><i class="fa-solid fa-circle-chevron-right"></i></div>
<div id="last-tab" style="display:none;"><i class="fa-solid fa-angles-right"></i></div>
<div id="header-bg"></div>
<div id="header-menu">
<b id="title">【title-add-contents】</b>
<p id="main-show" class="check">サブタブでメインログを表示</p>
<p id="dice-roll-on">ダイスアニメーションをオンにする<sup>※</sup></p>
<p id="join-user" class="check">隣接した発言者を統合する</p>
<small> ※非常に動作が重くなる可能性があります。</small>
</div>
<div id="header">
【tab-list-add-contents】
<div><span id="dicelog">ダイスログ</span></div>
</div>
<div id="line-cut"></div>
<div id="header-btn" class="mobile-contents" style="display:none;"><i class="fa-solid fa-gear"></i></div>
<div id="mobile-menu" style="display:none;">
<div id="checkbox">
<p class="check">サブタブでメインログを表示</p>
<p id="dice-roll-on-mobile">ダイスアニメーションをオンにする<sup>※</sup></p>
<p class="check">隣接した発言者を統合する</p>
<small>※非常に動作が重くなる可能性があります。</small><br>
<br>
<b><u> TAB LIST </u></b>
</div>
<div class="contents">
【mobile-menu-add-contents】
<li id="dicelog2">ダイスログ</li>
</div>
</div>
<div id="chat-log">【chat-log-add-contents】</div>
<div id="dice-result" style="display:none;">【dice-result-add-contents】</div>
</body>
</html>