本文のフォントサイズは「16px」「14px」
アメブロのブログの記事本文は、殆どが「16px」「14px」のフォントサイズです。「Remember My Page」を使い始めると、拡大率の指定対象は結局「14px」のタイプのブログに限られ、それに類しないブログはまれと判って来ました。
色々なブログがあり、ページ拡大率を一律に決められないので、「ユーザー判断で拡大率をマニュアル指定する」という基本コンセプトは変えられません。 しかし現実的には「14px」の記事を自動的に拡大すれば便利です。
雑多なページを手当たり次第に閲覧する事があるのですが、二度と見ないと思われるページが「14px」タイプの場合は、拡大設定を登録しません。 それは手間な上に、ローカルストレージが無駄に肥大しますから。 登録データの肥大でツールの反応が遅くならなかったとしても、一度登録すると削除は難しくなります。
とはいえ「14px」のブログは拡大すれば読み易いのは事実です。 そこで「14px」タイプを判断して、ページを自動的に拡大する機能を考えました。「14px」タイプのページに常に自動拡大すれば、登録を増やす必要がなく、大半のブログのフォント表示サイズを「16px」に均一化できます。 結果として、登録が必要なブログは、自動拡大が適さない限られたブログだけになり、ストレージをよりダイエットできます。
適さないページは、例えば特殊にスキンアレンジしたページで、ツールは「14px」と判断するが、実際には拡大しない方が見易い場合などです。 そういう場合を考慮すると「拡大率100%の登録」が必要になり、登録方式を改める必要が出て来ました。
新しい自動拡大の仕様と「拡大率100%」の登録
●「Remember My Page」が起動して有効な状態で、Amebaアイコンが青色に変わります。 これは、これまでと同じです。
●「Remember My Page」の自動拡大機能は、本文フォントが「14px」と判断した場合に動作します。(アレンジを施したブログは、判定できない可能性があります) その際、自動拡大の動作を示すために、Amebaアイコンはライトグリーンに変化します。 下は「14px」タイプのブログの場合です。
この状態でAmebaアイコンをクリックすると、実際の拡大率が「114%」だと判りますが、この拡大率は登録されたものではありません。 ページ拡大率の「114%」は、14pxのフォントがほぼ 16pxに表示される拡大率です。
● 拡大率を再調整して、それを登録したい場合は「Set」を押します。 ページの拡大率が登録された場合は自動拡大が動作せず、アイコンが青色に戻ります。 また、自動拡大をさせない「100%」の登録や、「114%」の拡大を登録する事が可能で、その場合もアイコンは青色になります。
●「Reset」を押すと、それまでの「ユーザーID+拡大率」の登録自体を削除します。 もし、これまで登録をしていたページが拡大不要になった場合は、「Reset」を押すとローカルストレージが節約出来ます。
●「14px」タイプのブログで、これまで拡大率の設定があった場合は、「Reset」を押すと「ユーザーID+拡大率」の登録が削除されます。 結果としてアイコンがライトグリーンに変化し、自動拡大が機能します。
●「14px」タイプ以外のブログで、これまで拡大率の設定があった場合、「Reset」を押すと「ユーザーID+拡大率」の登録が削除されます。 結果としてアイコンは青色のまま変化しませんが、画面は100%のデフォルトの表示になります。
● 以上の纏めになりますが、使い方は簡単です。
▪青色アイコンは、スクリプトが動作している事を示します。 未登録で拡大なし、登録済で拡大設定がされているかは、パネルを開かないと判りません。
▪ライトグリーンのアイコンは、「14px」タイプのページで自動拡大の表示です。
▪いずれの場合も、現在の拡大率が不適当ならパネルを開き再設定するだけです。
「Remember My Page」ver. 0.7
このツールは、Chrome / 新Edge / Firefox で動作を確認しています。
◎以下のコードを「Tampermonkey」の新規作成画面にコピー&ペーストして保存すれば、アメブロの各ブログ画面で、このツールが使用可能になります。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
〔 Remember My Page 〕ver. 0.7
// ==UserScript== // @name Remember My Page // @namespace http://tampermonkey.net/ // @version 0.7 // @description ブログページのブラウザ拡大率をユーザー単位で記録・固定(zoom / transform 使用) // @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 zoom_auto=0; let edit_mode=0; let win_html=document.querySelector('html'); let ua=0; let agent=window.navigator.userAgent.toLowerCase(); if(agent.indexOf('firefox') > -1){ ua=1; } // Firefoxの場合のフラグ 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(){ zoom_reset(); let z_button=document.querySelector('._jm4LLuUd'); if(zoom_auto!=1){ z_button.style.filter='contrast(10) hue-rotate(90deg)'; } else if(zoom_auto==1){ z_button.style.filter='contrast(8)'; } z_button.onclick=function(event){ // Amebaアイコンのクリック event.preventDefault(); // クリックしてもホームに飛ばさない local_backup(); } } //do_zoom() function zoom(zoom_value){ // Firefox用のページ拡大コード document.body.style.transform='scale(' + zoom_value + ')'; document.body.style.transformOrigin='top left'; document.body.style.width=Math.round(1000/zoom_value)/10 + '%'; // document.body.style.height=Math.round(1000/zoom_value)/10 + '%'; } function zoom_reset(){ user_id=document.location.pathname.split("/")[1]; // ユーザーIDを取得 if(remember_id.indexOf(user_id)!=-1){ zoom_auto=0; // アイコン色 manual zoom zoom_value=remember_zoom[remember_id.indexOf(user_id)]; } // 登録有 else{ let entryBody=document.querySelector('#entryBody'); if(entryBody){ if(getComputedStyle(entryBody, null).fontSize=='14px'){ // 未登録14px型 zoom_auto=1; // アイコン色 auto zoom zoom_value=1.14; } // auto zoomを適用 else{ zoom_auto=0; // アイコン色 zoom未設定 zoom_value=1; }} else{ zoom_auto=0; // アイコン色 zoom未設定 zoom_value=1; }} // entryBodyが取得出来ない場合 let zz_input=document.querySelector('#z_input'); if(zz_input){ zz_input.value=Math.round(zoom_value*100); } // 拡大率表示を更新 if(ua==0){ document.body.style.zoom=zoom_value; } else if(ua==1){ zoom(zoom_value); } } // 開いた画面にzoom値を設定して拡大 function local_backup(){ edit_mode=1; win_html.style.overflow='hidden'; // ウインドウのスクロールを抑止 let z_panel=document.createElement('div'); let panel_style; panel_style= 'position: absolute; top: 0; left: 0; z-index: 1; '+ 'color: #333; background: #fff; padding: 3px 0 2px 15px; width: 415px;'; z_panel.setAttribute('style', panel_style); z_panel.setAttribute('id', 'z_panel'); document.querySelector('._1wfBdJLw').appendChild(z_panel); if(ua==0){ z_panel.innerHTML= '<style>input[type="number"]::-webkit-inner-spin-button { '+ '-webkit-appearance: none; }</style>'; } // 拡大率設定枠のデザイン else if(ua==1){ z_panel.innerHTML= '<style>input[type="number"]{ -moz-appearance:textfield; }</style>'; } let button_0=document.createElement('input'); button_0.setAttribute('type', 'submit'); button_0.setAttribute('value', '✖'); let style_text_x; if(ua==0){ style_text_x='font: normal 12px Arial; width: 14px; height: 22px;'+ 'margin-right: 15px; padding: 1px 0px; vertical-align: 1px;'; } else if(ua==1){ style_text_x='font: normal 12px/12px Arial; width: 16px; height: 21px;'+ 'margin-right: 15px; padding: 2px 0; vertical-align: 1px;'; } button_0.setAttribute('style', style_text_x); z_panel.appendChild(button_0); button_0.onclick=function(){ edit_mode=0; zoom_reset(); win_html.style.overflow='auto'; // ウインドウのスクロールを再開 z_panel.remove(); } let input_1=document.createElement('input'); input_1.setAttribute('type', 'number'); let input_1_style; if(ua==0){ input_1_style='font: normal 15px Arial; padding: 2px 0 0 8px; width: 36px; '+ 'box-sizing: content-box; height: 16px; vertical-align: -0.3px;'; } else if(ua==1){ input_1_style='font: normal 15px Arial; padding: 2px 0 0 8px; width: 36px; '+ 'box-sizing: content-box; height: 16px; vertical-align: -1.2px;'; } 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'); z_panel.appendChild(input_1); if(remember_id.indexOf(user_id)!=-1){ zoom_value=remember_zoom[remember_id.indexOf(user_id)]; } else{ if(zoom_auto==1){ zoom_value=1.14; } else{ zoom_value=1; }} input_1.value=Math.round(zoom_value*100); document.onwheel=function(event){ // マスウホイールで設定 event.stopImmediatePropagation(); if(event.deltaY<0 && edit_mode==1){ input_1.stepUp(); } else if(event.deltaY>0 && edit_mode==1){ input_1.stepDown(); } if(edit_mode==1){ if(ua==0){ document.body.style.zoom=input_1.value/100; } else if(ua==1){ 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; if(ua==0){ button_2_style= 'font: normal 15px Arial; padding: 1px 2px; margin-left: 4px; height: 22px;'; } if(ua==1){ button_2_style= 'font: normal 15px/15px Arial; padding: 0 2px; margin-left: 4px; height: 21px;'; } button_2.setAttribute('style', button_2_style); z_panel.appendChild(button_2); button_2.onclick=function(){ let zoom_set=input_1.value/100; // 登録するzoom倍率 if(remember_id.indexOf(user_id)==-1){ // 未登録のIDの場合 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); // 一旦は登録削除 remember_data.push([user_id, zoom_set]); // 登録値を更新して追加 let write_json=JSON.stringify(remember_data); localStorage.setItem('remember_zoom', write_json); } reg_set(); edit_mode=0; do_zoom(); win_html.style.overflow='auto'; // ウインドウのスクロールを再開 z_panel.remove(); } let button_3=document.createElement('input'); button_3.setAttribute('type', 'submit'); button_3.setAttribute('value', 'Reset'); let button_3_style; if(ua==0){ button_3_style= 'font: normal 15px Arial; padding: 1px 2px; margin-left: 4px; height: 22px;'; } if(ua==1){ button_3_style= 'font: normal 15px/15px Arial; padding: 0 2px; margin-left: 4px; height: 21px;'; } button_3.setAttribute('style', button_3_style); z_panel.appendChild(button_3); button_3.onclick=function(){ if(remember_id.indexOf(user_id)==-1){ ; } // 未登録のIDの場合 else if(remember_id.indexOf(user_id)!=-1){ // 既登録のIDの場合 remember_data.splice(remember_id.indexOf(user_id), 1); // Resetは登録削除 let write_json=JSON.stringify(remember_data); localStorage.setItem('remember_zoom', write_json); } reg_set(); edit_mode=0; do_zoom(); win_html.style.overflow='auto'; // ウインドウのスクロールを再開 z_panel.remove(); } let button_4=document.createElement('input'); button_4.setAttribute('type', 'submit'); button_4.setAttribute('value', 'Export'); let button_4_style; if(ua==0){ button_4_style= 'font: normal 15px Arial; padding: 1px 2px; margin: 0 4px 0 15px; height: 22px;' } if(ua==1){ button_4_style= 'font: normal 15px/15px Arial; padding: 0 2px; margin: 0 4px 0 15px; height: 21px;' } button_4.setAttribute('style', button_4_style); z_panel.appendChild(button_4); button_4.onclick=function(){ let write_json=JSON.stringify(remember_data); let blob=new Blob([write_json], {type: 'application/json'}); try{ let a_elem=document.createElement('a'); a_elem.href=URL.createObjectURL(blob); document.body.appendChild(a_elem); a_elem.download='remember_zoom.json'; // 保存ファイル名 if(ua==1){ a_elem.target = '_blank'; document.body.appendChild(a_elem); } a_elem.click(); if(ua==1){ document.body.removeChild(a_elem); } URL.revokeObjectURL(a_elem.href); alert("✅ ファイルを保存しました\n"+ " ダウンロードフォルダーを確認してください"); } catch(e){ alert("❌ ファイル保存時にエラーが発生しました\n"+ " ダウンロードフォルダーを確認してください"); }} let button_5=document.createElement('input'); button_5.setAttribute('type', 'submit'); button_5.setAttribute('value', 'Import'); let button_5_style; if(ua==0){ button_5_style= 'font: normal 15px Arial; padding: 1px 2px; margin-right: 12px; height: 22px;' } if(ua==1){ button_5_style= 'font: normal 15px/15px Arial; padding: 0 2px; margin-right: 12px; height: 21px;' } button_5.setAttribute('style', button_5_style); z_panel.appendChild(button_5); button_5.onclick=function(){ input_5.click(); } let input_5=document.createElement('input'); input_5.setAttribute('type', 'file'); input_5.style.display='none'; z_panel.appendChild(input_5); input_5.addEventListener("change" , function(){ if(!(input_5.value)) return; // ファイルが選択されない場合 let file_list=input_5.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(); zoom_reset(); // 画面の拡大表示をリセット alert("✅ 拡大率の登録データを読込みました\n"+ " 読込んだファイル名: " + file.name); } else{ alert("❌ Remember My Page の Exportファイルではありません\n"+ " Importファイルは 「remember_zoom ... 」の名前です"); }}}); if(ua==0){ let chrome_value=Math.round(((window.outerWidth - 16) / window.innerWidth)*100); if(chrome_value!=100){ let button_6=document.createElement('span'); let button_6_style; button_6_style='font: normal 15px Arial; color: #fff; background: #0288d1; '+ 'padding: 2px 4px; border-radius: 4px; transition: 2s'; button_6.setAttribute('style', button_6_style); button_6.innerHTML='Chrome ' + chrome_value + '%'; z_panel.appendChild(button_6); setTimeout(()=>{ button_6.style.opacity='0'; }, 1000); setTimeout(()=>{ button_6.remove(); }, 3000); }} } // 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{ if(zoom_auto==1){ zoom_value=1.14; } 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コード非対応で性能が悪くテスト版としています。 最新バージョンへのリンクは、以下のページのリンクリストから探せます。