JavaScript による文字のランダム置換え
ツール紹介記事でスクリーンショットを使う場合が多いのですが、画面によっては他のブログユーザーの「ブログ名」「ブログID」などが表示されます。 その情報がスクリーンショットを通じて公開されるのは避ける必要があります。
テキスト部分を画像上でボカシを入れるのがひとつの方法ですが、画像処理に手間がかかり、テキスト表示が失われて説明が判り難くなる問題があります。 そこで、テキスト(文字)をランダムに置換える操作を JavaScriptで行う様になりました。
「漢字」のテキスト置換えは、通常使われない「漢字」が頻出して違和感がありますが、「英数文字」は良い結果を得ています。
「フォロワー管理」「制限したブログの管理」でのプロテクト
プロテクトする画面によって、テキストを含む要素名が異なるので、プロテクトツールは対象画面ごとに制作する必要があります。 コード自体はシンプルなので、移植はそう難しくは有りません。
このページでは、「フォロワー管理」「制限したブログの管理」のふたつの管理画面でのスクリーンショットプロテクタのコードを紹介します。
「フォロワー管理・ブロック管理 プロテクタ」
プロテクトツール名は「フォロワー管理・ブロック管理 プロテクタ」です。
● ショートカットは「Ctrl+F1」です。
▪ プロテクトを実行後に、続けてショートカットで再実行できます。 複数回実行すると、次々と異なる文字への置換えが可能です。
下は「制限したブログの管理」のブロックリストで、赤枠の文字列が置換えられた文字列です。
ただし、アイコンは別ツールの「アイコン画像 プロテクタ」で置き換えています。
「フォロワー管理・ブロック管理 プロテクタ」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「+」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 フォロワー管理・ブロック管理 プロテクタ 〕 ver. 0.2
// ==UserScript== // @name フォロワー管理・ブロック管理 プロテクタ 🔵 // @namespace http://tampermonkey.net/ // @version 0.2 // @description フォロワー管理・ブロック管理でユーザーID・ブログ名をプロテクトする 「Ctrl+F1」 // @author Ameba Blog User // @match https://blog.ameba.jp/ucs/reader/readerlist.do // @match https://blog.ameba.jp/block // @icon https://www.google.com/s2/favicons?sz=64&domain=ameba.jp // @grant none // ==/UserScript== let date=new Date(); let shift1=date.getHours()+1; // 1~24のランダム値 let shift2=shift1%9 +1; // 1~9のランダム値 let target=document.querySelector('head'); let monitor=new MutationObserver( catch_key ); monitor.observe(target, {childList: true}); // ショートカット待受け開始 catch_key(); function catch_key(){ document.addEventListener('keydown', (event)=>{ if(event.ctrlKey && event.keyCode==112){ // ショートカット「Ctrl+F1」 event.stopImmediatePropagation(); event.preventDefault(); main(); }}, false); } // catch_key() let n=1; // ショートカット毎に更新する値 function main(){ alert("💢 ユーザーIDプロテクタ が処理を実行します"); change_id_shift(n); change_block_id_shift(n) change_block_name(); function change_id_shift(x){ let name=document.querySelectorAll('.name'); for(let k=0; k<name.length; k++){ let name_link=name[k].querySelector('a'); name_link.textContent=disguise(name_link.textContent, x); }} function change_block_id_shift(x){ let block_id=document.querySelectorAll('.BlogWebBlock_status__66mul > span:last-child'); for(let k=0; k<block_id.length; k++){ block_id[k].textContent=disguise(block_id[k].textContent, x); }} function change_block_name(){ let block_name=document.querySelectorAll('.BlogWebBlock_blog-title__HQRtx'); for(let k=0; k<block_name.length; k++){ block_name[k].textContent=stir(block_name[k].textContent, shift1, shift2); }} function disguise(str, xx){ let str_=str.split(''); for(let k=0; k<str_.length; k++){ let ASCII=str_[k].charCodeAt(); if(ASCII==45){ //「-」の場合 ASCII=101; } //「e」に変換 else if(ASCII>47 && ASCII<58){ //「0~9」の場合 48~57 ASCII=(ASCII + xx -48)%10 +48; } // 半角数字をxxシフト else{ //「a-z」の場合 97~122 ASCII=(ASCII + xx -97)%26 + 97; } // 半角英小文字をxxシフト str_[k]=String.fromCharCode(ASCII); } return str_.join(''); } function stir(str, shift1, shift2){ let ch=str.split(''); for(let i=0; i<ch.length; i++){ let alph=/[a-z]/; let alph_=/[A-Z]/; let num=/[0-9]/; let zen=/^[\p{scx=Hiragana}\p{scx=Katakana}\p{scx=Han}]+$/u; let ch_code; let n_ch_code; if(alph.test(ch[i])){ ch_code=ch[i].charCodeAt(0); // 97~122 if(ch_code+shift1>122){ n_ch_code=ch_code+shift1-26; } else{ n_ch_code=ch_code+shift1; } ch[i]=String.fromCharCode(n_ch_code); } if(alph_.test(ch[i])){ ch_code=ch[i].charCodeAt(0); // 65~90 if(ch_code+shift1>90){ n_ch_code=ch_code+shift1-26; } else{ n_ch_code=ch_code+shift1; } ch[i]=String.fromCharCode(n_ch_code); } if(num.test(ch[i])){ ch_code=ch[i].charCodeAt(0); // 48~57 if(ch_code+shift2>57){ n_ch_code=ch_code+shift2-10; } else{ n_ch_code=ch_code+shift2; } ch[i]=String.fromCharCode(n_ch_code); } if(zen.test(ch[i])){ ch_code=ch[i].codePointAt(0); // unicode n_ch_code=ch_code+shift2; ch[i]=String.fromCodePoint(n_ch_code); }} return ch.join(''); } //stir(); } // main()
スクリプトツールの最新バージョンについて
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「フォロワー管理・ブロック管理 プロテクタ 🔵」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。