パネル配色が継承されない問題
大きなプログラムミスを長い間気付かずに放置していました。 ◞(..)◟
「コメント管理」画面のパネル配色が、設定画面で設定してから 30日しか保持されない状態でした。
問題
パネル色(コメントリスト枠の配色)は、下の「 設定」の画面で設定が出来ます
しかし、この設定をしてから 30日が経過すると、下の様に配色設定が無効になり、パネルが透明になってしまいます。
原因
「Comment C-O」は「コメント設定」の画面で、各種の動作設定をする様になっていますが、それらは全て Cookieに登録しています。 Cookieの保存期間は 30日ですが、「コメント管理」画面を開くと自動的に再登録される仕組みです。 つまり、コメントのやり取りで「コメント管理」を利用をしている場合は、自然に設定保持が延長されます。
この自動で設定保持期間を更新するコードは、「コメント設定」の他の5件の設定に関しては問題がなかったのですが、「パネルの配色」の設定保持期間を更新するコードだけが抜け落ちていました。 その結果、配色を設定して 30日を過ぎるとパネル色が無効な設定になる状態でした。
但し30日の間に「 設定」から「コメント設定」画面を開いた場合は、その画面で設定保持期間が更新され、気付かない場合があります。 しかし、「コメント設定」を開く事は普通は余りないので、パネル配色の問題は多くの方に問題を生じていたと思われます。
今回の修正で、この問題は改善されました。
「Comment C-O」の扱い方
このツールの詳細は、以下の「操作マニュアル」を参照ください。
「Comment C-O」は「Ameblo Management」が必要です
「Comment C-O」は「Ameblo Management」による「コメント管理」ページのアレンジが必須です。「Ameblo Management」は拡張機能「Stylus」によって、アメブロの各種ページをユーザーライクにアレンジする統合スタイルです。 以下のページ後半に、「Ameblo Management」の導入手順を纏めているので参照ください。
「Comment C-O」と「Comment C-O With CSS」
今回の問題は、「Ameblo Management」のアレンジが使えない場合を補助する「Comment C-O With CSS」も同様に修復が必要でした。 この修復をしたバージョンは、以下のページに置いています。
この2つのツールのバージョンを揃えるために、両方の修復バージョンを「ver.1.7」としています。
「Comment C-O」を導入するには
「Comment C-O」は Chrome / Edge / Firefox の拡張機能の「Tampermonkey」上で動作します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「+」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Comment C-O 〕 ver. 1.7
// ==UserScript== // @name Comment C-O // @namespace http://tampermonkey.net/ // @version 1.7 // @description コメント管理画面のリスト開閉機能 // @author Ameba Blog User // @match https://blog.ameba.jp/ucs/comment/comment* // @noframes // @run-at document-start // @grant none // ==/UserScript== let save_t; let mode_key; let emode_key; let ua=0; // Chromeの場合のフラグ let agent=window.navigator.userAgent.toLowerCase(); if(agent.indexOf('firefox') > -1){ ua=1; } // Firefoxの場合のフラグ let path=document.location.pathname; if(path.match(/commentlist/)){ // コメント管理画面で動作 let retry=0; let interval=setInterval(wait_target, 1); function wait_target(){ retry++; if(retry>100){ // リトライ制限 100回 0.1secまで clearInterval(interval); } let target=document.body; // 監視 target if(target){ clearInterval(interval); environ(); }} function environ(){ let style= '<style id="co_list">'+ '.userList__item { position: relative; } '+ '.userList__item:focus { outline: 2px solid #2196f3; } '+ '.userList__text { display: none; max-height: 75vh; } '+ '.userList__information { top: 42px; right: 330px; } '+ '.userList__buttons { top: 38px; right: 76px; } '+ '.co_view { width: 26px; height: 26px; margin-left: 16px; color: #888; '+ 'font: 16px/27px Meiryo; padding: 0; border: 1px solid #aaa; '+ 'border-radius: 4px; background: #fff; cursor: pointer; } '+ '.co_view:active { box-shadow: 0 0 0 1px #fff, 0 0 0 3px #0091ff; } '+ '.co_menu { '+ 'background: linear-gradient(#26c6da 0%, #009688 70%) !important; } '+ '.co_menu:hover { '+ 'background: linear-gradient(#009688 0%, #26c6da 100%) !important; } '+ '.co_menu svg { fill: #fff; } '+ '.userList__menu:active , .commentReply__headerCancel:active { '+ 'box-shadow: 0 0 0 1px #fff, 0 0 0 3px #0091ff; } '+ '.commentReply__headerCancel { cursor: pointer; } '+ '.userList__tooltip { z-index: 1; top: -120px; right: 0 !important; } '+ '.item_close { position: absolute; margin: 0 !important; } '+ '#mold, #mnew { position: absolute; width: 29px; height: 29px; '+ 'cursor: pointer; font: normal 16px/28px Meiryo; '+ 'border: 1px solid #aaa; border-radius: 4px; background: #fff; } '+ '#mold { right: 24.5rem; } #mnew { right: 10rem; } '+ '#mold:active, #mnew:active, .navigation__filter:active, '+ '.navigation__setting:active { box-shadow: 0 0 0 1px #fff, 0 0 0 3px #0091ff; } '+ '#c_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; '+ 'background: rgb(0, 28, 25, .8); display: none; } '+ '.efmode { position: fixed; top: 60px; width: 706px; z-index: 1999; } '+ '.efmode_w { position: fixed; top: 60px; width: 706px; z-index: 1999; '+ 'box-shadow: -1px -1px 0 0 #ddd, 0 0 0 1px #aaa; } '+ '.userList__item, .userList__information { background: '+ get_cookie('item_color_set') + ' !important; }</style>'; if(!document.querySelector('#co_list')){ document.documentElement.insertAdjacentHTML('beforeend', style); } } // environ() window.addEventListener('DOMContentLoaded', function(){ set_items(); set_mselector(); set_commoverlay(); list_mode(); mode_set(); color_toss(); function set_items(){ let items=document.querySelectorAll('.userList__item'); for(let k=0; k<items.length; k++){ items[k].setAttribute('tabindex', '0'); let information=items[k].querySelector('.userList__information'); let buttons=items[k].querySelector('.userList__buttons'); set_view(buttons); information.classList.add('item_close'); buttons.classList.add('item_close'); } function set_view(elem){ let view=document.createElement('button'); view.setAttribute('type', 'button'); view.setAttribute('class', 'co_view'); view.textContent='▼'; if(!elem.querySelector('.co_view')){ elem.appendChild(view); }}} function set_mselector(){ let nav=document.querySelector('.navigation'); let description=document.querySelector('.navigation__description'); let mold=document.createElement('button'); mold.setAttribute('type', 'button'); mold.setAttribute('id', 'mold'); mold.textContent='◁'; if(!document.querySelector('#mold') && description){ nav.insertBefore(mold, description); } let mnew=document.createElement('button'); mnew.setAttribute('type', 'button'); mnew.setAttribute('id', 'mnew'); mnew.textContent='▷'; if(!document.querySelector('#new') && description){ nav.insertBefore(mnew, description.nextSibling); }} function set_commoverlay(){ let commentlist=document.querySelector('.commentList'); let c_overlay=document.createElement('div'); c_overlay.setAttribute('id', 'c_overlay'); if(!commentlist.querySelector('#c_overlay')){ commentlist.appendChild(c_overlay); }} function list_mode(){ let tab_item=document.querySelectorAll('.tabs .tabs__item'); if(tab_item[0] && tab_item[0].classList.contains('is-active')){ // 公開済み画面 let approved=get_cookie('approved'); if(approved!=0){ // approved: 1:制限表示 2:全文表示 let items=document.querySelectorAll('.userList__item'); for(let k=0; k<items.length; k++){ let view_button=items[k].querySelector('.co_view'); let text=items[k].querySelector('.userList__text'); text.style.display='block'; height_g(text, approved); view_button.textContent='▲'; }} document.cookie='approved='+approved+'; Max-Age=2592000'; } if(tab_item[1] && tab_item[1].classList.contains('is-active')){ // 承認待ち画面 let pending=get_cookie('pending'); if(pending!=0){ // pending: 1:制限表示 2:全文表示 let items=document.querySelectorAll('.userList__item'); for(let k=0; k<items.length; k++){ let view_button=items[k].querySelector('.co_view'); let text=items[k].querySelector('.userList__text'); text.style.display='block'; height_g(text, pending); view_button.textContent='▲'; }} document.cookie='pending='+pending+'; Max-Age=2592000'; let items=document.querySelectorAll('.userList__item'); for(let k=0; k<items.length; k++){ let menu_button=items[k].querySelector('.userList__menu'); menu_button.classList.add('co_menu'); }} } // list_mode() function mode_set(){ // マーク保持時間・動作mode等をここで設定 🟩 let save=get_cookie('save_time'); // マーク保持時間 if(save==0){ save_t=3600; } else if(save==1){ save_t=21600; } else if(save==2){ save_t=0; } document.cookie='save_time='+save+'; Max-Age=2592000'; mode_key=get_cookie('mode_key'); // マークリセット仕様 document.cookie='mode_key='+mode_key+'; Max-Age=2592000'; emode_key=get_cookie('emode_key'); // 編集画面暗転表示 document.cookie='emode_key='+emode_key+'; Max-Age=2592000'; } function color_toss(){ let item_color_set=get_cookie('item_color_set'); // リストの枠色 if(item_color_set==0){ item_color_set='#d8e1e5'; } document.cookie='item_color_set='+item_color_set+'; Max-Age=2592000'; } }); // window.addEventListener window.addEventListener('load', function(){ open_read(); open_edit(); close(); text_focus(); menu_read(); memo(); read_memo(); memo_app(); read_memo_app(); month_select(); function open_read(){ let items=document.querySelectorAll('.userList__item'); for(let k=0; k<items.length; k++){ let view_button=items[k].querySelector('.co_view'); if(view_button){ view_button.addEventListener('click', function(){ toggle(items[k], view_button); app_reset(items[k], 0); }); }} // 🟩 function toggle(item, sw){ let open_limit; let tab_item=document.querySelectorAll('.tabs .tabs__item'); if(tab_item[0] && tab_item[0].classList.contains('is-active')){ // 公開済み画面 open_limit=get_cookie('approved'); } else if(tab_item[1] && tab_item[1].classList.contains('is-active')){ // 承認待ち画面 open_limit=get_cookie('pending'); } let text=item.querySelector('.userList__text'); if(sw.textContent=='▼'){ text.style.display='block'; sw.textContent='▲'; height_g(text, open_limit); } else{ text.style.display='none'; sw.textContent='▼'; item.focus(); }} } // open_read() function menu_read(){ let items=document.querySelectorAll('.userList__item'); for(let k=0; k<items.length; k++){ let menu_button=items[k].querySelector('.userList__menu'); menu_button.addEventListener('click', function(event){ if(event.ctrlKey){ menu_button.click(); app_reset(items[k], 1); } else{ app_reset(items[k], 0); }}); }} // 🟩 function open_edit(){ let items=document.querySelectorAll('.userList__item'); for(let k=0; k<items.length; k++){ let reply_button=items[k].querySelector('.js-comment-reply-button'); if(reply_button){ reply_button.addEventListener('click', function(){ let text=items[k].querySelector('.userList__text'); let information=items[k].querySelector('.userList__information'); let buttons=items[k].querySelector('.userList__buttons'); text.style.display='block'; information.classList.remove('item_close'); buttons.classList.remove('item_close'); height_g(text, 1); app_reset(items[k], 0); // 🟩 items[k].scrollIntoView({block: "center"}); items[k].setAttribute('tabindex', ''); edit_overlay(items[k], 0); }); }}} // open_edit() function close(){ let items=document.querySelectorAll('.userList__item'); for(let k=0; k<items.length; k++){ let reply_cancel=items[k].querySelector('.js-comment-reply-cancel'); if(reply_cancel){ reply_cancel.addEventListener('click', function(){ let text=items[k].querySelector('.userList__text'); let information=items[k].querySelector('.userList__information'); let buttons=items[k].querySelector('.userList__buttons'); text.style.display='none'; information.classList.add('item_close'); buttons.classList.add('item_close'); let view_button=items[k].querySelector('.co_view'); if(view_button.textContent=='▲'){ view_button.textContent='▼'; } items[k].setAttribute('tabindex', '0'); items[k].focus(); edit_overlay(items[k], 1); }); }}} // close() function text_focus(){ let items=document.querySelectorAll('.userList__item'); for(let k=0; k<items.length; k++){ let text=items[k].querySelector('.userList__text'); let resizeObserver=new ResizeObserver(recover_scroll); resizeObserver.observe(text); function recover_scroll(){ let textarea=items[k].querySelector('.formGroup__textarea'); if(textarea){ textarea.blur(); }}}} function edit_overlay(elem, open_close){ let c_overlay=document.querySelector('#c_overlay'); if(emode_key==1){ if(open_close==0){ elem.classList.add('efmode'); c_overlay.style.display='block'; items_blur(6); lock(0); } if(open_close==1){ elem.classList.remove('efmode'); c_overlay.style.display='none'; items_blur(0); lock(1); }} if(emode_key==2){ if(open_close==0){ elem.classList.add('efmode_w'); c_overlay.style.display='block'; c_overlay.style.background='rgb(246, 252, 255, .7)'; items_blur(6); lock(0); } if(open_close==1){ elem.classList.remove('efmode_w'); c_overlay.style.display='none'; items_blur(0); lock(1); }} function lock(n){ let w_html=document.querySelector('html'); let backTop=document.querySelector('#backTop'); let globalH=document.querySelector('#globalHeader'); let ucsH=document.querySelector('#ucsHeader'); let sidem=document.querySelector('.l-ucs-sidemenu-area'); if(n==0){ w_html.style.overflowY='hidden'; backTop.style.visibility='hidden'; globalH.style.visibility='hidden'; ucsH.style.visibility='hidden'; sidem.style.visibility='hidden'; } if(n==1){ w_html.style.overflowY='scroll'; backTop.style.visibility='visible'; globalH.style.visibility='visible'; ucsH.style.visibility='visible'; sidem.style.visibility='visible'; }} function items_blur(n){ let itemsn=document.querySelectorAll( '.commentList>*:nth-child(-n+3), .userList__item:not(.is-open)'); for(let k=0; k<itemsn.length; k++){ itemsn[k].style.filter='blur('+n+'px)'; } let pagin=document.querySelector('.pagination'); pagin.style.filter='blur('+n+'px)'; }} function memo(){ let items=document.querySelectorAll('.userList__item'); for(let k=0; k<items.length; k++){ let sendbutton=items[k].querySelector('.commentList .sendButton'); if(sendbutton){ sendbutton.addEventListener('mousedown', function(event){ let textarea=items[k].querySelector('#form-reply'); textarea.value=textarea.value.trim(); // 文末の空白行を削除 let comm_id=sendbutton.getAttribute('data-comment-id'); document.cookie='comm_id='+comm_id+'; Max-Age=40'; app_reset(items[k], 1); // 🟩 }); }}} function read_memo(){ let comm_id=get_cookie('comm_id'); let items=document.querySelectorAll('.userList__item'); for(let k=0; k<items.length; k++){ let sendbutton=items[k].querySelector('.commentList .sendButton'); if(sendbutton){ let id=sendbutton.getAttribute('data-comment-id'); if(id==comm_id){ items[k].focus(); }}}} function memo_app(){ let app_button=document.querySelectorAll('[data-section-id="comment_approve"]'); for(let k=0; k<app_button.length; k++){ app_button[k].addEventListener('mousedown', function(){ let comm_id=app_button[k].getAttribute('data-comment-id'); let approve_id=get_cookie('new_comm_id'); cookie_write(approve_id, comm_id); }); } function cookie_write(value0, value1){ if(value0==0){ document.cookie='new_comm_id='+value1+'; Max-Age='+save_t; } else{ let arr=value0.split('%'); arr.push(value1); let approve_id_n=arr.join('%'); document.cookie='new_comm_id='+approve_id_n+'; Max-Age='+save_t; }}} function read_memo_app(){ let approve_id=get_cookie('new_comm_id'); let items=document.querySelectorAll('.userList__item'); for(let k=0; k<items.length; k++){ let sendbutton=items[k].querySelector('.commentList .sendButton'); if(sendbutton && approve_id!=0){ let id=sendbutton.getAttribute('data-comment-id'); if(approve_id.indexOf(id)!=-1){ let view_button=items[k].querySelector('.userList__menu'); view_button.classList.add('co_menu'); }}}} function app_reset(item, mode){ // 🟩 if(mode==mode_key){ let approve_id=get_cookie('new_comm_id'); let menu_button=item.querySelector('.userList__menu'); let sendbutton=item.querySelector('.commentList .sendButton'); if(sendbutton && approve_id!=0){ menu_button.classList.remove('co_menu'); let id=sendbutton.getAttribute('data-comment-id'); let arr=approve_id.split('%'); let arr_d=arr.filter(function(value){ return value!=id; }); let approve_id_d=arr_d.join('%'); document.cookie='new_comm_id='+approve_id_d+'; Max-Age='+save_t; }}} function month_select(){ let mold=document.querySelector('#mold'); let mnew=document.querySelector('#mnew'); let description=document.querySelector('.navigation__description'); let now=description.textContent.replace(/[^0-9]/g, ''); let now_y=Number(now.slice(0, 4)); let now_m=Number(now.slice(4, 6)); let y_list_button= document.querySelector('.js-filter-list-year .filterList__item:last-child button'); let start_y=2004; // 取得できなかった場合のデフォルト値 if(y_list_button){ start_y=Number(y_list_button.textContent.replace(/[^0-9]/g, '')); } if(now_y==start_y && now_m==1){ mold.style.opacity='0.2'; mold.style.pointerEvents='none'; } else{ mold.style.opacity='1'; mold.style.pointerEvents='auto'; } mold.onclick=function(){ let back; if(now_m>1){ back=now_y*100+now_m-1; } else{ back=(now_y-1)*100+12; } location.href='https://blog.ameba.jp/ucs/comment/commentlist.do?'+ 'comment_date='+back; } let today=new Date(); let n_today=(today.getFullYear())*100+today.getMonth()+1; if(now_y*100+now_m==n_today){ mnew.style.opacity='0.2'; mnew.style.pointerEvents='none'; } else{ mnew.style.opacity='1'; mnew.style.pointerEvents='auto'; } mnew.onclick=function(){ let next; if(now_m<12){ next=now_y*100+now_m+1; } else{ next=(now_y+1)*100+1; } location.href='https://blog.ameba.jp/ucs/comment/commentlist.do?'+ 'comment_date='+next; } } // month_select() }); // window.addEventListener function height_g(elem, limit){ let s_height=elem.scrollHeight; if(s_height<300){ elem.style.height='auto'; } else{ if(limit!=2){ elem.style.height='300px'; } else if(limit==2){ elem.style.height='auto'; }}} } // コメント管理画面で動作 function get_cookie(name){ let cookie_req=document.cookie.split('; ').find(row=>row.startsWith(name)); if(cookie_req){ if(cookie_req.split('=')[1]==null){ return 0; } else{ return cookie_req.split('=')[1]; }} if(!cookie_req){ return 0; }} if(path.match(/commentsettings/)){ // コメント設定画面で動作 window.addEventListener('load', function(){ let SettingsList=document.querySelector('.commentSettingsList'); if(SettingsList){ let list1=document.createElement('li'); list1.setAttribute('id', 'list1'); list1.classList.add('commentSettingsList__item'); list1.innerHTML= '<div class="commentSettingsList__link" style="justify-content: normal">'+ '公開済みリスト 初期表示のコメント内容:'+ '<input name="appr" type="radio" id="approved0">非表示'+ '<input name="appr" type="radio" id="approved1">制限表示'+ '<input name="appr" type="radio" id="approved2">全文表示</div>'; if(!SettingsList.querySelector('#list1')){ SettingsList.appendChild(list1); } let list2=document.createElement('li'); list2.setAttribute('id', 'list2'); list2.classList.add('commentSettingsList__item'); list2.innerHTML= '<div class="commentSettingsList__link" style="justify-content: normal">'+ '承認待ちリスト 初期表示のコメント内容:'+ '<input name="pend" type="radio" id="pending0">非表示'+ '<input name="pend" type="radio" id="pending1">制限表示'+ '<input name="pend" type="radio" id="pending2">全文表示</div>'; if(!SettingsList.querySelector('#list2')){ SettingsList.appendChild(list2); } let list3=document.createElement('li'); list3.setAttribute('id', 'list3'); list3.classList.add('commentSettingsList__item'); list3.innerHTML= '<div class="commentSettingsList__link" style="justify-content: normal">'+ '承認したコメントの緑マーク 保持時間:'+ '<input name="save" type="radio" id="save0">1時間'+ '<input name="save" type="radio" id="save1">6時間'+ '<input name="save" type="radio" id="save2">マーク非表示</div>'; if(!SettingsList.querySelector('#list3')){ SettingsList.appendChild(list3); } let list4=document.createElement('li'); list4.setAttribute('id', 'list4'); list4.classList.add('commentSettingsList__item'); list4.innerHTML= '<div class="commentSettingsList__link" style="justify-content: normal">'+ '承認したコメントの緑マーク リセット仕様:'+ '<input name="mode" type="radio" id="mode0">コメント参照時'+ '<input name="mode" type="radio" id="mode1">返信の送信時</div>'; if(!SettingsList.querySelector('#list4')){ SettingsList.appendChild(list4); } let list5=document.createElement('li'); list5.setAttribute('id', 'list5'); list5.classList.add('commentSettingsList__item'); list5.innerHTML= '<div class="commentSettingsList__link" style="justify-content: normal">'+ '返信コメント編集時 編集画面の背景表示:'+ '<input name="emode" type="radio" id="emode0">なし'+ '<input name="emode" type="radio" id="emode1">暗転'+ '<input name="emode" type="radio" id="emode2">ホワイトアウト</div>'; if(!SettingsList.querySelector('#list5')){ SettingsList.appendChild(list5); } let list6=document.createElement('li'); list6.setAttribute('id', 'list6'); list6.classList.add('commentSettingsList__item'); let inner= '<div class="commentSettingsList__link" style="justify-content: normal">'+ 'コメントリスト枠の配色:'+ '<input type="color" id="item_color">'+ '<span id="co_down">▼</span><span id="co_up">▲</span>'+ '<span id="co_test">Comment C-O <b>枠色サンプル</b> '+ '<span id="co_ticon">…</span></span>'+ '</div>'+ '<style>'+ '.commentSettingsList input { margin-left: 20px; margin-right: 6px; } '+ '#list6 { user-select: none; } '+ '#list6>div:hover { background: #fafafa !important; } '+ '#item_color { height: 28px; width: 24px; margin-top: -3px; '+ 'border: none; background-color: transparent; cursor: pointer; } '+ '#co_down, #co_up { display: inline-block; line-height: 18px; height: 16px; '+ 'padding: 1px; margin: -3px -5px 0 8px; '+ 'color: #999; border: 1px solid #aaa; border-radius: 2px; cursor: pointer; } '+ '#co_down:hover, #co_up:hover { color: #000; } '+ '#co_test { color: #333; padding: 4px 15px 2px; border: 1px solid #d4d5d6; '+ 'margin-left: 50px; } '+ '#co_ticon { display: inline-block; font-weight: bold; padding: 0 2px; '+ 'height: 20px; border: 1px solid #aaa; border-radius: 4px; '+ 'color: #757575; background: #fff; } '; if(ua==1){ inner +='#item_color { height: 20px; width: 20px; } '; } inner +='</style>'; list6.innerHTML=inner; if(!SettingsList.querySelector('#list6')){ SettingsList.appendChild(list6); } set_radio(); function set_radio(){ let approved=get_cookie('approved'); let approved0=document.querySelector('#approved0'); let approved1=document.querySelector('#approved1'); let approved2=document.querySelector('#approved2'); if(approved==0){ // approved: 0:コメント非表示 1:制限表示 2:全文表示 approved0.checked=true; } else if(approved==1){ approved1.checked=true; } else if(approved==2){ approved2.checked=true; } document.cookie='approved='+approved+'; Max-Age=2592000'; let pending=get_cookie('pending'); let pending0=document.querySelector('#pending0'); let pending1=document.querySelector('#pending1'); let pending2=document.querySelector('#pending2'); if(pending==0){ // pending: 0:コメント非表示 1:制限表示 2:全文表示 pending0.checked=true; } else if(pending==1){ pending1.checked=true; } else if(pending==2){ pending2.checked=true; } document.cookie='pending='+pending+'; Max-Age=2592000'; let save=get_cookie('save_time'); // save: 0:1時間 1:6時間 2:マーク非表示 let save0=document.querySelector('#save0'); let save1=document.querySelector('#save1'); let save2=document.querySelector('#save2'); if(save==0){ save0.checked=true; } else if(save==1){ save1.checked=true; } else if(save==2){ save2.checked=true; } document.cookie='save_time='+save+'; Max-Age=2592000'; let mode=get_cookie('mode_key'); // mode: 0:コメント参照時 1:返信の送信時 let mode0=document.querySelector('#mode0'); let mode1=document.querySelector('#mode1'); if(mode==0){ mode0.checked=true; } else if(mode==1){ mode1.checked=true; } document.cookie='mode_key='+mode+'; Max-Age=2592000'; let emode=get_cookie('emode_key'); // emode: 0:なし 1:暗転 2:ホワイトアウト let emode0=document.querySelector('#emode0'); let emode1=document.querySelector('#emode1'); let emode2=document.querySelector('#emode2'); if(emode==0){ emode0.checked=true; } else if(emode==1){ emode1.checked=true; } else if(emode==2){ emode2.checked=true; } document.cookie='emode_key='+emode+'; Max-Age=2592000'; } // set_radio() radio_select(); function radio_select(){ let approved0=document.querySelector('#approved0'); approved0.onchange=function(){ document.cookie='approved=0; Max-Age=2592000'; } let approved1=document.querySelector('#approved1'); approved1.onchange=function(){ document.cookie='approved=1; Max-Age=2592000'; } let approved2=document.querySelector('#approved2'); approved2.onchange=function(){ document.cookie='approved=2; Max-Age=2592000'; } let pending0=document.querySelector('#pending0'); pending0.onchange=function(){ document.cookie='pending=0; Max-Age=2592000'; } let pending1=document.querySelector('#pending1'); pending1.onchange=function(){ document.cookie='pending=1; Max-Age=2592000'; } let pending2=document.querySelector('#pending2'); pending2.onchange=function(){ document.cookie='pending=2; Max-Age=2592000'; } let save0=document.querySelector('#save0'); save0.onchange=function(){ document.cookie='save_time=0; Max-Age=2592000'; } let save1=document.querySelector('#save1'); save1.onchange=function(){ document.cookie='save_time=1; Max-Age=2592000'; } let save2=document.querySelector('#save2'); save2.onchange=function(){ document.cookie='save_time=2; Max-Age=2592000'; } let mode0=document.querySelector('#mode0'); mode0.onchange=function(){ document.cookie='mode_key=0; Max-Age=2592000'; } let mode1=document.querySelector('#mode1'); mode1.onchange=function(){ document.cookie='mode_key=1; Max-Age=2592000'; } let emode0=document.querySelector('#emode0'); emode0.onchange=function(){ document.cookie='emode_key=0; Max-Age=2592000'; } let emode1=document.querySelector('#emode1'); emode1.onchange=function(){ document.cookie='emode_key=1; Max-Age=2592000'; } let emode2=document.querySelector('#emode2'); emode2.onchange=function(){ document.cookie='emode_key=2; Max-Age=2592000'; } } // radio_select() list_color(); function list_color(){ let item_color_set=get_cookie('item_color_set'); // リストの枠色 if(item_color_set==0){ item_color_set='#d8e1e5'; } let item_color=document.querySelector('#item_color'); item_color.value=item_color_set; test_disp(item_color_set); document.cookie='item_color_set='+item_color.value+'; Max-Age=2592000'; item_color.onchange=function(){ test_disp(item_color.value); document.cookie='item_color_set='+item_color.value+'; Max-Age=2592000'; } let co_down=document.querySelector('#co_down'); let co_up=document.querySelector('#co_up'); co_down.onclick=function(){ item_color.value=hex_darken(item_color.value); test_disp(item_color.value); document.cookie='item_color_set='+item_color.value+'; Max-Age=2592000'; } co_up.onclick=function(){ item_color.value=hex_lighten(item_color.value); test_disp(item_color.value); document.cookie='item_color_set='+item_color.value+'; Max-Age=2592000'; } } // list_color() function hex_darken(hex){ // 明度を段階的に下げる if(hex.slice(0, 1)=='#'){ hex=hex.slice(1); } if(hex.length==3){ hex=hex.slice(0,1) + hex.slice(0,1) + hex.slice(1,2) + hex.slice(1,2) + hex.slice(2,3) + hex.slice(2,3); } // 透過度 1.1 とした色値に変更 let R=parseInt(hex.slice(0, 2), 16); let G=parseInt(hex.slice(2, 4), 16); let B=parseInt(hex.slice(4, 6), 16); return unequal_color(R, G, B, 0.9); } // 非透過色値に変更 function unequal_color(R, G, B, A){ // RGBは整数 Aは小数が必須 ➔ 等価 6桁hexに変換 return '#' + tohex(downColor(R, A)) + tohex(downColor(G, A)) + tohex(downColor(B, A)); function downColor(value, A){ let color_value=value/A - 255*(1/A - 1); return Math.floor(color_value); } function tohex(value){ return ('0'+ value.toString(16)).slice(-2); }} function hex_lighten(hex){ // 明度を段階的に上げる if(hex.slice(0, 1)=='#'){ hex=hex.slice(1); } if(hex.length==3){ hex=hex.slice(0,1) + hex.slice(0,1) + hex.slice(1,2) + hex.slice(1,2) + hex.slice(2,3) + hex.slice(2,3); } // 透過度 0.9 とした色値に変更 let R=parseInt(hex.slice(0, 2), 16); let G=parseInt(hex.slice(2, 4), 16); let B=parseInt(hex.slice(4, 6), 16); return equal_color(R, G, B, 0.9); } // 非透過色値に変更 function equal_color(R, G, B, A){ // RGBは整数 Aは小数が必須 ➔ 等価 6桁hexに変換 return '#' + tohex(upColor(R, A)) + tohex(upColor(G, A)) + tohex(upColor(B, A)); function upColor(value, A){ let color_value=value*A + 255*(1 - A); return Math.floor(color_value); } function tohex(value){ return ('0'+ value.toString(16)).slice(-2); }} function test_disp(color){ let test=document.querySelector('#co_test'); if(test){ test.style.background=color; }} help(); function help(){ let cmm_set=document.querySelector('.commentSettings'); if(cmm_set){ let help_description= '<p id="CO_help" style="font-size: .875rem; padding: 20px 0;">'+ 'Comment C-O の設定方法については '+ '<a href="https://ameblo.jp/personwritep/entry-12772207230.html" '+ 'target="_blank"> 操作マニュアル</a> を参照ください。</p>'; if(!document.querySelector('#CO_help')){ cmm_set.insertAdjacentHTML('beforeend', help_description); }}} }}); // window.addEventListener } // コメント設定画面で動作
「Comment C-O」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。 最新バージョンへのリンクは、以下のページのリンクリストから探せます。