「ZOOM」という拡張機能があります
フォローフィードから各ユーザーのページを見に行くと、ブログの文字サイズが異なって、ブラウザの拡大率の調整に苦労するという問題があります。 ブラウザの拡大率記憶はドメイン単位で行われ、一般のサイト間ではとても有効に働くのですが、ドメインが統一されるブログシステムでは機能せず、困った問題と言えます。
ブラウザ拡張機能を探すと、ダウンロード数の多い「Zoom for Google Chrome」というのがあったので（Firefox版もあります）、Chromeで試して見ました。 以下に、テストした印象を簡単にまとめます。
◎高度な技術下に作られていて、ブラウザネイティブの拡大機能をコントロールするコード（注1）も使っている様です。「CSSのzoomプロパティ」を使う場合は、ページが開いてからワンテンポ遅れて拡大します。 ブラウザ拡大機能を利用した方式にこの改善を期待しましたが、残念ながら差は感じませんでした。
◎拡大率の記録が、サイトごとの記録（これはブラウザデフォルトで既に可能です）と、ページごとの記録とを、切り替えが出来ます。 当然、ブログでは後者が必要になりますが、この切替の仕方が妙な方式です。
普通の拡張機能は、専用オプション設定ページを開いて設定変更をしますが、この拡張機能は制作者のサイトに飛び、そのページで設定をしなければなりません。 理由があるのかもしれませんが、登録ページや登録サイトの情報は、制作者ページに保存されて、セキュリティ上は不適切な方式です。
◎コンテキストでの設定メニューは、初期値の表示が現実と違う値が表示される。
◎拡大率指定に複数方法があり、少し迷う。 拡大率は、ブラウザ自体の拡大とツールによる拡大が交錯し、両方の掛け算になる場合もあります。 多機能で色々変えられるより、1つだけを変える方式が、ユーザーにとって現状と設定の関係が判り易い。
◎色々な機能を詰め込んでいるが、アメブロで必要な事は、多種のページの閲覧時の改善で、それ以外の不要な機能が多い。
以上の事から、シンプルでアメブロに特化したツールを作る事にしました。
（注1）
ページ自体やユーザースクリプトのJavaScriptでは、例えば Chrome内蔵の拡大機能のコントロールは出来ません。 しかし、Chrome拡張機能には特別なAPIが用意されていて、拡張機能としてなら内蔵機能を操作出来ます。（以下を参照ください）
コードを見ると「 chrome.tabs.setZoom(…) 」など、通常のJavaScriptでは無効になる「chrome」「tabs」などのキーワードが使われ、これらのコードが拡張機能の一部としてなら動作する事が窺えます。 拡張機能「ZOOM」などでは、これらのコードを使用しているわけです。
「zoom」と「transform: scale()」の問題
「Firefox」での利用も射程に入れ、当初は「transform: scale()」を使って全画面の拡大を行うコードを作りました。 しかし、ヘッダー、フッター等の右端が隠れ、全てが表示出来ない問題が生じました。「transform」を使った場合は、ウインドウサイズとの兼ね合いが必要になります。
最後の「zoom_ratio」の設定を煮詰め、漸く拡大表示が、自然にブラウザ拡大をしたのと同様の状態に近付きました。
zoom_ratio = 100/zoom_value %
1.25倍の拡大（125%）表示の時は、body { width: 80% } の指定が必要です。
横方向の問題はなんとか改善したのですが、「記事の上に戻る」ボタンの配置が、フッター部（画面外のはるか下方）に貼りつきます。 縦方向の問題は予想外で、色々と対策をしましたが、ついに断念しました。
「transform」を諦めて「zoom」プロパティに書き換えると、上記のウインドウサイズとの兼ね合いは、何も修正が要りません。 Firefoxに「zoom」プロパティは使えないのですが、先ずChrome版を完成させたいので「zoom」使用に変更しました。
「拡大率」の登録方法や「現在の拡大率」を明瞭にする
「Chromeを拡大操作」→ 適当な拡大率を決定 →「拡大率」を自動取得し「記録」
という処理方法でコードを作りましたが、「記録」時はスムーズですが、その操作でブラウザの拡大率を変更するので、「記録」の確認時や、他のページを参照した場合に、拡大状態の把握で混乱する状態に陥りました。
結局判った事は、ツールによる拡大とブラウザによる拡大が双方で行われると、混乱するという事です。 ブラウザ側は、リファレンスとしてすぐ一定（100%）に戻すのが理想ですが、これは JavaScriptから操作できません。
で、インターフェイスの簡素化が重要と気付き、方式を改めました。 ブラウザの拡大率は100%のまま触らず、ツール側で拡大率を調整し、その値の表示を確認し、そしてその値の記録を行う様にしました。
拡大率の登録
◎ 常に拡大や縮小をして表示をしたいブログで、アメブロヘッダーの左端のグラフィックアイコンをクリックします。 これが登録操作の開始ボタンです。 このアイコンは「ホーム」への不要なリンクボタンで、これを転用しています。
◎ ページが読み込み時の、ブラウザの回転するマークが止まってから、登録操作を行います。 ロード中に操作をすると、ホームに送られたり、設定枠が閉じたりします。
◎ 下の様に拡大率を表示・変更・指定する入力枠が表示されます。
◎ この値は 5%ずつ変化し、80%～200%を設定できます。 マウスホイールを回すと値が増減し、ウインドウ内は、その拡大率に合わせて拡大表示されます。
◎ ウインドウ内の拡大状態が最適になった状態で、「SET」ボタンを押します。 入力枠が消えて、そのブログについての表示拡大率が登録されます。
◎ 次にこのブログを開いた時に、自動的に最後に記録した拡大率で表示されます。 但し、この拡大はツールによるもので、ブラウザの拡大率とは別個です。
◎ 従って、このツールの登録する際は、普通はブラウザ拡大率を100%で行い、また、アメブロのブログページを参照する場合は、ブラウザ側は一定の拡大率（普通は100%）で参照する様な使い方をします。
◎ 以前に登録した値は、変更をした値で「SET」を押した時点で上書きされます。
◎ 登録・変更を中止する場合は、元の値で「SET」を押すか、別ページに移動する、ページを閉じる等の操作をします。「SET」を押さなければ、以前の登録値は残っていて、次にそのページを開いた時に拡大率として適用されます。
◎ ページを開く操作でページが読込まれ、一瞬だけツールの拡大が無い状態が生じます。 これは、CSSによる拡大ツールの仕様です。
◎ このツールの動作は、各「ブログ」ページと「記事一覧」ページに限られます。
試作中のコード
現在のコードは、ページの拡大表示、拡大率の設定・登録、ローカルストレージへの記録、等が可能です。 ストレージデータの外部（ダウンロード）ファイル保存の部分が未だありません。 これは、これから追加します。
◎ ツール名は「Remember My Page」としています。 このツールは、Chrome および 新Edgeのみで動作します。
◎以下のコードを「Tampermonkey」の新規作成画面にコピー&ペーストして保存すれば、アメブロの各ブログ画面で、このツールをテストする事が出来ます。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
〔 Remember My Page 〕ver. 0.1
// ==UserScript==
// @name Remember My Page
// @namespace http://tampermonkey.net/
// @version 0.1
// @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 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(){
let zoom_value=1;
let user_id=document.location.pathname.split("/")[1];
if(remember_id.indexOf(user_id)!=-1){
zoom_value=remember_zoom[remember_id.indexOf(user_id)];
document.body.style.zoom=zoom_value; } // 開いた画面にzoom値を設定して拡大
let z_button=document.querySelector('._jm4LLuUd');
z_button.onclick=function(event){ // Amebaアイコンのクリック
event.preventDefault(); // クリックしてもホームに飛ばさない
local_backup(); }
function local_backup(){
edit_mode=1;
win_html.style.overflow='hidden'; // ウインドウのスクロールを抑止
let z_panel=document.createElement('div');
let panel_style=
'position: absolute; top: 2px; left: 0; padding: 0 30px 0 20px; background: #fff;';
z_panel.setAttribute('style', panel_style);
z_panel.setAttribute('id', 'z_panel');
document.querySelector('._1wfBdJLw').appendChild(z_panel);
let input_1=document.createElement('input');
input_1.setAttribute('type', 'number');
let input_style=
'font: normal 15px Tahoma; padding: 0 0 0 8px; width: 70px; height: 21px;';
input_1.setAttribute('style', input_style);
input_1.setAttribute('step', '5');
input_1.setAttribute('min', '80');
input_1.setAttribute('max', '200');
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();
document.body.style.zoom=input_1.value/100; }
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_style='font: normal 15px Tahoma; padding: 0 2px; '+
'margin-left: -36px; height: 23px; ';
button_2.setAttribute('style', button_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(); }}
}} // do_zoom()
let monitor1=new MutationObserver(path_change);
monitor1.observe(target0, { childList: true }); // 監視開始
function path_change(){ // zoomの設定中にページ変更をした場合
if(edit_mode==1){
edit_mode=0;
win_html.style.overflow='auto'; // ウインドウのスクロールを再開
let zoom_value=1;
let user_id=document.location.pathname.split("/")[1];
if(remember_id.indexOf(user_id)!=-1){
zoom_value=remember_zoom[remember_id.indexOf(user_id)]; }
document.body.style.zoom=zoom_value; // 開いた画面にzoom値を設定して拡大
let zz_panel=document.querySelector('#z_panel');
if(zz_panel){
zz_panel.remove(); }}}
「Remember My Page」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
● このツールは ver.3.0 から「RemPage For Chrome」「RemPage For Firefox」に分かれますが、Firefox版は CSSコード非対応で性能が悪くテスト版としています。 最新バージョンへのリンクは、以下のページのリンクリストから探せます。
