プテクト用スタイルをJavaScript化
前ページで「ホーム」のプロテクトスタイルを紹介しましたが、文字列のプロテクトは「▢▢▢▢▢▢▢▢」等で置き換える手法でした。
上は、プロテクトしたサンプルですが、少し不自然な印象が気になります。
◎グリーン部分は、JavaScriptツール「アイコン画像 プロテクタ 🔵」の処理
◎ブルー部分は、スタイル「ホーム 個人情報プロテクタ」のボカシ処理
◎赤部分は、スタイル「ホーム 個人情報プロテクタ」の文字列置換の処理
で、もう少しレベルの高い処理で、文字列置換えの不自然さを無くそうというコードを考えました。 基本方針は以下です。
◎英文字は26文字のアスキーコードを、適当にシフトさせて、別の英文字に変更
◎半角数字は「0～9」を、適当にシフトさせて、別の数字に変更
◎全角文字（漢字）は、適当にシフトさせて、別の全角文字に変更
新しいプロテクタツールの内容
文字の置換え関数
文字置換えは、「フォローフィード」「最近見たブログ」「コメントした記事」で処理します。 この目的で、以下の「文字の置換え」のための関数を制作しました。
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();
関数「stir()」の引数は「str, shift1, shift2」の3個で、色々な場合に使える様にしています。
▪「str」は、置き換え対象の文字列で、「記事タイトル」「ブログ名」「カテゴリ名」等を指定すると、結果が出力されます。
▪「shift1」「shift2」は、文字コードをどれだけズラすかを指定する値です。 これは、ランダム値を指定すれば複雑な置換えが行われ、元の文字の推測がより困難になりますが、「ホーム」のプロテクタとしてはそこまでの必要が無いと思います。
そこで、現在の時刻を取得して「shift1: 1～24」と「shift2: 1～9」の数を得て、これを設定する様にしています。
▪ 変換対象の文字列は「let ch=str.split('');」で1文字ずつに分割して配列に入れ、それぞれの文字毎に、先ずそれが「英小文字」「英大文字」「半角数字」「全角文字」のどれかで分岐します。
その分岐ごとに、シフト操作をします。英文字だと、元のアスキーコードに「shift1」の値を足します。 アスキーコードが後半の文字は、英文字の範囲を超えるので、その場合は「-26」だけ戻し、英文字の何かにします。
こういったシフト操作は、文字コードの下限・上限と範囲幅に合わせる必要があるので、「shift1」「shif2」が必要になりました。
▪ 全角文字（漢字）の場合は Unicodeの文字コードになるので、範囲を外れる場合を無視するイージーな置換えをしています。
画像のボカシも JavaScript内で
画像に関しては「アイコン画像 プロテクタ 🔵」が「ユーザーアイコン」をプロテクトするので、「フォローフィード」では「記事のサムネイル」が残ります。
「記事のサムネイル」は、前ページのスタイル「ホーム 個人情報プロテクタ」でボカシを入れて来ましたが、全て JavaScriptツールで完結させる事にしました。
メインブログユーザー等はデフォルトで置き換え
左列の最上部のメインの「ブログユーザー」「ユーザーID」「ブログ名」などをデフォルトで置き換える事にしました。 これも「ホーム」のプロテクトツールを纏めるためです。
置換えにより、下の様な表示になります。
「ホーム ユーザー情報プロテクタ 🔵」の処理結果
「ホーム ユーザー情報プロテクタ 🔵」にはショートカットスイッチはありません。「Tampermonkey」で、このツールを「ON」にして「ホーム」を開くと、自動的に文字の置換えを始め、全てのプロテクト操作が行われます。
下は、「フォローフィード」をこのツールがプロテクトした結果です。
最初の「CSSスタイル」によるプロテクトと比較すると、タイトルの文字数などは、デフォルトの文字数と同じになり、文字列の長さが自然です。 ただ全角文字の置換えが下手で、「」が所々に出来ています。 これはユニコードの該当する文字が無い場合の表示で、もっと良い置換えコードが作れるはずです。「ホーム」全体のスクリーンショットでは、目立たないと思いますが。
今回、「ホーム ユーザー情報プロテクタ 🔵」「アイコン画像 プロテクタ 🔵」の2個のJavaScriptツールを使えば、「ホーム」のプロテクトはほぼ完了する環境になりました。 今後は、これらのツールを改善して行きます。
「ホーム ユーザー情報プロテクタ 🔵」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 ホーム ユーザー情報プロテクタ 🔵 〕 ver. 0.1
// ==UserScript==
// @name ホーム ユーザー情報プロテクタ 🔵
// @namespace http://tampermonkey.net/
// @version 0.1
// @description HOMEのユーザー情報をプロテクト
// @author Ameba Blog User
// @match https://www.ameba.jp/home
// @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 target1=document.querySelector('.HomeChecklist'); // 監視 target
let monitor1=new MutationObserver(HomeChecklist);
monitor1.observe(target1, {childList: true, subtree: true}); // 監視開始
function HomeChecklist(){
monitor1.disconnect();
// 以下は「フォローフィード」のプロテクト
let APT=document.querySelectorAll('.Author_PrimaryText');
for(let k=0; k<APT.length; k++){
let APT_str=APT[k].textContent;
if(APT_str){
APT[k].textContent=stir(APT_str, shift1, shift2); }}
let AST=document.querySelectorAll('.Author_SecondaryText');
for(let k=0; k<AST.length; k++){
let AST_str=AST[k].textContent;
if(AST_str){
AST[k].textContent=stir(AST_str, shift1, shift2); }}
let title=document.querySelectorAll('.HomeChecklist_Article_Title');
for(let k=0; k<title.length; k++){
let title_str=title[k].textContent;
if(title_str){
title[k].textContent=stir(title_str, shift1, shift2); }}
let HCAI=document.querySelectorAll('.HomeChecklist_Article_Image');
for(let k=0; k<HCAI.length; k++){
HCAI[k].style.overflow='hidden';
let img=HCAI[k].querySelector('img');
if(img){
img.style.filter='blur(10px)'; }}
// 以下は「最近見たブログ」のプロテクト
let HBHAN=document.querySelectorAll('.HomeBlogHistory_Article_Name');
for(let k=0; k<HBHAN.length; k++){
let HBHAN_str=HBHAN[k].textContent;
if(HBHAN_str){
HBHAN[k].textContent=stir(HBHAN_str, shift1, shift2); }}
let HBHAT=document.querySelectorAll('.HomeBlogHistory_Article_Title');
for(let k=0; k<HBHAT.length; k++){
let HBHAT_str=HBHAT[k].textContent;
if(HBHAT_str){
HBHAT[k].textContent=stir(HBHAT_str, shift1, shift2); }}
monitor1.observe(target1, {childList: true, subtree: true});
} // HomeChecklist()
setTimeout(()=>{
let target2=document.querySelector('.HomeBlogComment'); // 監視 target
let monitor2=new MutationObserver(HomeBlogComment);
monitor2.observe(target2, {childList: true, subtree: true}); // 監視開始
HomeBlogComment();
// 以下は「コメントした記事」のプロテクト
function HomeBlogComment(){
monitor2.disconnect();
let PAN=document.querySelectorAll('.PcArticle_Name');
for(let k=0; k<PAN.length; k++){
let PAN_str=PAN[k].textContent;
if(PAN_str){
PAN[k].textContent=stir(PAN_str, shift1, shift2); }}
let PAT=document.querySelectorAll('.PcArticle_Title');
for(let k=0; k<PAT.length; k++){
let PAT_str=PAT[k].textContent;
if(PAT_str){
PAT[k].textContent=stir(PAT_str, shift1, shift2); }}
monitor2.observe(target2, {childList: true, subtree: true});
} // HomeBlogComment()
// メインユーザーの置換え
let Avatar=
'https://stat.profile.ameba.jp/profile_images/20200525/18/d6/PJ/p/'+
'o03000300p_1590399247329_rw286.png?cat=120';
// ユーザープロフィール
let PcProfile_Image=document.querySelector('.PcProfile_Image img');
if(PcProfile_Image){
PcProfile_Image.setAttribute('src', Avatar);
PcProfile_Image.style.filter='hue-rotate(90deg) saturate(4)'; }
let PcProfile_Name=document.querySelector('.PcProfile_Name');
if(PcProfile_Name){
PcProfile_Name.textContent='Ameblo User'; }
// ブログのタイトル
let BlogTitle_Link=document.querySelector('.HomeBlogModule_BlogTitle_Link');
if(BlogTitle_Link){
BlogTitle_Link.textContent='Ameba Blog Sample'; }
}, 2000);
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();
スクリプトツールの最新バージョンについて
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「ホーム ユーザー情報プロテクタ 🔵」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
