「Remember My Page」はアメブロ専用
アメブロのブログ専用にデザインする事で、シンプルでブラウザの負担にならないツールです。 必要な機能だけのスクリプトを選んで「Tampermonkey」で動作させる事で、快適なブログ環境を作れるというのが、自作ツールの良いところです。
「Remember My Page」は、いつも訪れるブログの拡大表示の拡大率を、アメブロユーザーのIDと関連付けて記録します。 拡大率の登録は簡単で、記録容量の心配は不要でしょう。 拡大率を登録すると、登録したブログを再び訪れた時に、自動的に登録した拡大率で表示します。 拡大率は、80%～200%の間で5%のステップで指定できます。 この%値は、FirefoxやChromeのビルトインの拡大率の全てと同じに出来ます。
（ 100%、110%、120%、125%、130%、など）
必要なら、1%の端数値も設定できますが、余りそういう必要はないでしょう。
現在のところ「zoomプロパティ」が使える Chrome と 新Edge のみに対応しています。 前ページに続いて、ローカルファイル（ダウンロードファイル）への登録データの保存機能を追加しました。
アメブロヘッダー上に表示されるコントロールパネル
「ファイル保存」「ファイル読込み」のボタンを追加したので、コントロールのパネルが長くなりました。
登録データは、日常的にはブラウザが管理するローカルストレージに保存されます。 下は、ストレージに保存されているデータの配列です。
DevTools では、この内容を見る事や、編集、データ全体の削除などが出来ます。
最上段の「Application」を選択、
左ペインの「Storage」→「Local Storage」→「https://ameblo.jp」を選択
で、上図の様なストレージに記録された様々なデータが一覧されます。 その中で、
「remember_zoom」の項が、このツールが記録したものです。
中身は配列で「ユーザーID」「zoom値」がひとつの単位になり並んでいます。
また、先の図の「Save」ボタン（ファイル保存）を押すと、「ダウンロード」フォルダーに「remember_zoom.json」の名で、登録データがファイル保存されます。 このファイルは、メモ帳などのテキストエディタで開く事が出来、データは手作業で編集する事が出来ます。
ある程度、このツールを使用して登録が多くなった頃を見計らって、データをファイル保存しておきます。「Cookie削除」などと一緒にローカルストレージのデータを誤って削除してしまう事があります。 そんな場合、データをファイル保存していると、それを読込めば、いちから再登録をする手間が不要です。
ファイル読込みをすると、ファイルのデータで、読込み前のローカルストレージの記録を上書きします。 従って、一般にですが、読込むのは最近に保存したファイルを選択する方が良いと思います。
「Remember My Page」ver. 0.2
現在のコードは、ツールとして一応は完成しています。 ページロードが完全に終わるまでの間は、ツールの拡大設定を開くことは出来ますが、拡大操作がスムーズに出来ない事があります。 ページのロードが完了してから操作すれば、無問題です。
このツールは、Chrome および 新Edgeのみで動作します。
◎以下のコードを「Tampermonkey」の新規作成画面にコピー&ペーストして保存すれば、アメブロの各ブログ画面で、このツールが使用可能になります。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
〔 Remember My Page 〕ver. 0.2
// ==UserScript==
// @name Remember My Page
// @namespace http://tampermonkey.net/
// @version 0.2
// @description ブログページのブラウザ拡大率をユーザー単位で記録・固定(zoom使用)
// @author Ameba Blog User
// @match https://ameblo.jp/*
// @exclude https://ameblo.jp/*/image*
// @noframes
// @grant none
// ==/UserScript==
let remember_data={}; // ブログ登録データ
let remember_id=[];
let remember_zoom=[];
let user_id;
let zoom_value;
let edit_mode=0;
let win_html=document.querySelector('html');
reg_set();
function reg_set(){
let read_json=localStorage.getItem('remember_zoom'); // ローカルストレージ 保存名
remember_data=JSON.parse(read_json);
if(remember_data==null){
remember_data=[['user', 'zoom']]; }
remember_id=[]; // 配列をリセット
remember_zoom=[]; // 配列をリセット
for(let k=0; k<remember_data.length; k++){
remember_id[k]=remember_data[k][0];
remember_zoom[k]=remember_data[k][1]; }}
let target0=document.querySelector('head'); // 監視 target
let monitor0=new MutationObserver(do_zoom);
monitor0.observe(target0, { childList: true }); // 監視開始
function do_zoom(){
user_id=document.location.pathname.split("/")[1]; // ユーザーIDを取得
if(remember_id.indexOf(user_id)!=-1){
zoom_value=remember_zoom[remember_id.indexOf(user_id)]; }
else {
zoom_value=1; }
document.body.style.zoom=zoom_value; // 開いた画面にzoom値を設定して拡大
let z_button=document.querySelector('._jm4LLuUd');
z_button.style.background='#e0f7fa';
z_button.style.padding='2px 0 3px';
z_button.onclick=function(event){ // Amebaアイコンのクリック
event.preventDefault(); // クリックしてもホームに飛ばさない
local_backup(); }
} //do_zoom()
function local_backup(){
edit_mode=1;
win_html.style.overflow='hidden'; // ウインドウのスクロールを抑止
let z_panel=document.createElement('div');
let panel_style='position: absolute; top: 0; left: 0; padding: 3px 30px 2px 20px; '+
'color: #333; background: #fff; z-index: 1;';
z_panel.setAttribute('style', panel_style);
z_panel.setAttribute('id', 'z_panel');
document.querySelector('._1wfBdJLw').appendChild(z_panel);
z_panel.innerHTML=
'<style>input[type=number]::-webkit-inner-spin-button { '+
'-webkit-appearance: none; }</style>';
let input_1=document.createElement('input');
input_1.setAttribute('type', 'number');
let input_1_style='font: normal 16px Arial; padding: 2px 0 0 8px; width: 36px; '+
'height: 16px; vertical-align: 0;';
input_1.setAttribute('style', input_1_style);
input_1.setAttribute('step', '5');
input_1.setAttribute('min', '80');
input_1.setAttribute('max', '200');
input_1.setAttribute('id', 'z_input');
zoom_value=remember_zoom[remember_id.indexOf(user_id)]; // 入力枠表示値を取得
if(!zoom_value){
zoom_value=1; }
input_1.setAttribute('value', Math.round(zoom_value*100)); // 拡大値表示
z_panel.appendChild(input_1);
window.onmousewheel=function(event){ // マスウホイールで設定
if(event.wheelDelta>0 && edit_mode==1){
input_1.stepUp(); }
else if(event.wheelDelta<0 && edit_mode==1){
input_1.stepDown(); }
document.body.style.zoom=input_1.value/100; }
let button_2=document.createElement('input');
button_2.setAttribute('type', 'submit');
button_2.setAttribute('value', 'Set');
let button_2_style=
'font: normal 15px Arial; padding: 1px 2px; margin-left: 4px; height: 22px;';
button_2.setAttribute('style', button_2_style);
z_panel.appendChild(button_2);
button_2.onclick=function(){
edit_mode=0;
let zoom_set=input_1.value/100; // 登録するzoom倍率
if(remember_id.indexOf(user_id)==-1){ // 未登録のIDの場合
if(zoom_set!=1){ // 等倍の場合は登録しない
remember_data.push([user_id, zoom_set]);
let write_json=JSON.stringify(remember_data);
localStorage.setItem('remember_zoom', write_json); }}
else if(remember_id.indexOf(user_id)!=-1){ // 既登録のIDの場合
remember_data.splice(remember_id.indexOf(user_id), 1); // 等倍は登録削除
if(zoom_set!=1){ // 等倍でない場合は登録値を更新する
remember_data.push([user_id, zoom_set]); }
let write_json=JSON.stringify(remember_data);
localStorage.setItem('remember_zoom', write_json); }
reg_set();
win_html.style.overflow='auto'; // ウインドウのスクロールを再開
let zz_panel=document.querySelector('#z_panel');
if(zz_panel){
zz_panel.remove(); }}
let button_3=document.createElement('input');
button_3.setAttribute('type', 'submit');
button_3.setAttribute('value', 'Save');
let button_3_style=
'font: normal 15px Arial; padding: 1px 2px; margin: 0 10px; height: 22px;'
button_3.setAttribute('style', button_3_style);
z_panel.appendChild(button_3);
button_3.onclick=function(){
let write_json=JSON.stringify(remember_data);
let blob=new Blob([write_json], {type: 'application/json'});
let a_elem=document.createElement('a');
a_elem.href=URL.createObjectURL(blob);
document.body.appendChild(a_elem);
a_elem.download='remember_zoom.json'; // 保存ファイル名
a_elem.click();
document.body.removeChild(a_elem);
URL.revokeObjectURL(a_elem.href); }
let button_4=document.createElement('input');
button_4.setAttribute('type', 'file');
let button_4_style='font: normal 11px Arial; vertical-align: 2px; width: 320px;';
button_4.setAttribute('style', button_4_style);
z_panel.appendChild(button_4);
button_4.addEventListener("change" , function(){
if(!(button_4.value)) return; // ファイルが選択されない場合
let file_list=button_4.files;
if(!file_list) return; // ファイルリストが選択されない場合
let file=file_list[0];
if(!file) return; // ファイルが無い場合
let file_reader=new FileReader();
file_reader.readAsText(file);
file_reader.onload=function(){
if(file_reader.result.slice(0, 15)=='[["user","zoom"'){ // remember_zoom.jsonの確認
remember_data=JSON.parse(file_reader.result); // 読出してストレージを上書きする
let write_json=JSON.stringify(remember_data);
localStorage.setItem('remember_zoom', write_json); // ローカルストレージ 保存名
reg_set(); }} });
} // local_backup()
let target1=document.querySelector('head'); // 監視 target
let monitor1=new MutationObserver(path_change);
monitor1.observe(target1, { childList: true }); // 監視開始
function path_change(){ // zoomの設定中にページ変更をした場合
let zz_panel=document.querySelector('#z_panel');
if(edit_mode==1 && !zz_panel){
edit_mode=0;
win_html.style.overflow='auto'; // ウインドウのスクロールを再開
do_zoom(); } // 画面の拡大表示をリセット
else if(edit_mode==1 && zz_panel){
let zz_input=document.querySelector('#z_input');
if(remember_id.indexOf(user_id)!=-1){
zoom_value=remember_zoom[remember_id.indexOf(user_id)]; }
else {
zoom_value=1; }
zz_input.value=Math.round(zoom_value*100); } // 拡大値表示をリセット
} // path_change()
「Remember My Page」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
● このツールは ver.3.0 から「RemPage For Chrome」「RemPage For Firefox」に分かれますが、Firefox版は CSSコード非対応で性能が悪くテスト版としています。 最新バージョンへのリンクは、以下のページのリンクリストから探せます。
