インターフェイスが要のブラウザ拡大ツール
スクリプトツールの優劣を決める要素は幾つかありますが、基本性能はもちろんですが、特に「Remember My Page」の様なブラウザ拡大ツールは、ユーザーインターフェイス(操作性や判り易さ)が大事と感じさせられました。
こういったツールが介在すると、画面の拡大がツールによるのか、ブラウザの拡大なのか、その両方かを、混乱し易くなります。 そこで、このツールは「ツール独自の拡大率」を扱う様にしています。 ブラウザ拡大を併用すると拡大率は掛け算になるので、ブラウザ側は基本的に固定(一般に100%が好ましい)で、一時的な調整に使うのが、混乱しにくい方法と思います。
作成の過程で苦労したのは、ブログページで拡大率の「設定モード」の場合に、ページ移動、記事一覧への移動、ページ順次表示から個別表示への切換、等を行った場合のトラブル対策でした。
「設定モード」中の移動は、アメブロヘッダーが更新されて設定パレットが無くなったり、設定枠が非表示なのにマウスホイールで画面が拡縮したり、再表示した設定枠は100%の表示で、実画面は拡大されている等の、困った状態を生じます。 それらはツールの信頼性を損なうだけでなく、操作の混乱に繋がるので、問題をひとつずつ潰す作業をしました。
その結果で、「設定モード」中のページ移動に対して、以下の仕様を決めました。
◎ ページ移動は、調整のための拡大をリセットし、ユーザー設定値の表示に戻す
普通は調整中のページ移動はしないでしょうが、あらゆる場合を想定しました。 ver 0.3 では、この移動時の対策を修正強化しています。
アメブロヘッダー上に表示されるコントロールパネル
ページを開く最初の僅かの間ですが、パネルを開くボタンが、本来の「ホーム」へのリンクとして動作します。 これは、ユーザースクリプトの起動がページの読込みより僅か遅れるので、仕方の無い事です。
急いでボタンを押すと遷移してしまうので、スクリプトが有効になると、ボタンに淡いブルーの背景色を表示する様にしました。
● このツールをONにしている場合は、ページ登録の有無にかかわらずボタンに背景色が付きます。 背景色が付けば、コントロールパネルを開く事が出来ます。
● ページ読込みが完全に終わる前に、ツールのパネルを開くことは出来ます。 しかし、読込み中はホイール操作による拡大がスムーズに出来ない事があります。
コントロールパネルに「×」マークの「閉じるボタン」を付けました。 上記のインターフェイスの改善で、ページャー操作ではパネルが閉じなくなったので、操作を迷わなくするためです。
●「×」ボタンを押すと、画面の拡大した状態は、元の設定値にリセットされます。 そのページで以前に拡大を設定している場合はその拡大率、未設定の場合は100%が元の設定値です。
●「Set」を押さない限り、元の登録された設定値は変更されません。
● パネルを開くと、ウインドウ全体のスクロールバーが無くなり、マウスホイールは拡大率のみを変更する様になります。 パネルを閉じるとスクロールバーが戻ります。 同時に、ブラウザの表示は、最後に「Set」を押した拡大率になります。
「Remember My Page」ver. 0.3
このツールは、Chrome および 新Edgeのみで動作します。
◎以下のコードを「Tampermonkey」の新規作成画面にコピー&ペーストして保存すれば、アメブロの各ブログ画面で、このツールが使用可能になります。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
〔 Remember My Page 〕ver. 0.3
// ==UserScript== // @name Remember My Page // @namespace http://tampermonkey.net/ // @version 0.3 // @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(){ zoom_reset(); let z_button=document.querySelector('._jm4LLuUd'); z_button.style.background='#e0f7fa'; z_button.style.padding='2px 0 3px'; z_button.style.borderRadius='4px'; z_button.onclick=function(event){ // Amebaアイコンのクリック event.preventDefault(); // クリックしてもホームに飛ばさない local_backup(); } } //do_zoom() function zoom_reset(){ 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値を設定して拡大 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 15px 2px; z-index: 1; '+ 'color: #333; background: #fff;'; 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 button_0=document.createElement('input'); button_0.setAttribute('type', 'submit'); button_0.setAttribute('value', '✖'); let style_text_x='font: normal 12px Arial; width: 14px; height: 22px;'+ 'margin-right: 15px; padding: 1px 0px; 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='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'); z_panel.appendChild(input_1); if(remember_id.indexOf(user_id)!=-1){ zoom_value=remember_zoom[remember_id.indexOf(user_id)]; } else { zoom_value=1; } input_1.value=Math.round(zoom_value*100); 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(); } if( edit_mode==1){ 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(){ 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(); edit_mode=0; win_html.style.overflow='auto'; // ウインドウのスクロールを再開 z_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 4px 0 15px; 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コード非対応で性能が悪くテスト版としています。 最新バージョンへのリンクは、以下のページのリンクリストから探せます。