「Edit At Once」は便利な機能アイコンを設置します
「Edit At Once」は、機能アイコンをグローバルメニューに設置し、使い勝手の良いブログ環境を作ります。
機能アイコンは、新タイプスキンのナビメニューを前提としたデザインですが、旧タイプスキンでも、配置の調節しだいで設置は可能です。 以下は「Edit At Once」で追加される機能と扱い方の説明です。
「現在のページの再編集」
開いた自分のブログページで、赤色の「 」のアイコンを左クリックすると、その記事を再編集する「編集画面」を開くことができます。
「Ctrl」キーを押すとアイコンが「 」に変化します。「Ctrl」キーを押しながらアイコンを左クリックすると、新規の記事を作成する「編集画面」が開きます。
「リスト表示」機能
開いた自分のブログページで、赤色の「 」のアイコンを左クリックすると、「記事の編集・削除」を開き、その記事を検索して赤枠で表示します。 現在表示している記事の「複製」「削除」が最短の操作で可能になります。
「Ctrl」キーを押すとアイコンが「 」に変化します。「Ctrl」キーを押しながらアイコンを左クリックすると、「記事の編集・削除」の先頭ページが開きます。
追加される機能アイコン
以下は、追加される機能アイコンです。 下図の機能アイコン群は、ブログを訪れた他のユーザーにとっても、そのユーザー自身の機能ページを開くボタンになります。
訪問したユーザーには上の様に見えますが、「Edit At Once」を常駐しているブログの持主には、下図の様にアイコンの2個が赤色に表示されます。
◎ 赤いアイコンは、スクリプトの動作を示すインジケーターになっています。
「Edit At Once」ver. 0.8 の更新内容
2021年9月以降、アメブロのシステム変更により、ブログ画面などでシステムフォント「ameba-symbols」が標準では表示できなくなりました。 この詳細については以下を参照ください。
「Edit At Once」の目的の半分は、便利な機能アイコンの設置ですが、上の理由から「ameba-symbols」を表示を可能とする対策が必要になりました。 このバージョンは、対策が込みになったコードの整理と提示が主目的です。
以下の ❶「アイコンの設置」のコードは、アイコン群を纏める「#User_Menu」というdiv要素を使って、配置設定の調整を簡単にしました。
また、ブログページに開いた記事を、必要なら直接に編集画面に開いて再編集を可能にすることが、このツールの第2の目的です。 これは、このページの最後のスクリプトコードによって可能になります。 スクリプトコードはマイナーな更新をしただけで、旧バージョンと大きく変わりません。
「Edit At Once」ver. 0.8 の導入手順
このツールは Chrome / Edge / Firefox版 の「Tampermonkey」上で動作します。
❶「アイコン」の設置
「アイコン」は、以下のコードを「フリースペース」に登録すると表示されます。
●「フリースペース」の「編集枠」に上記コードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
▪「配置設定」で「フリースペース」の配置を右列の「使用する機能」に追加しないと、「フリースペース」は有効にならず、機能アイコンが表示されません。
▪既に「フリースペース」に登録している他の種類の表示内容やコードがある場合は、その後方にペーストしてください。
▪コードは長い文字列を含みますが、タグ内で改行するとコードが無効になります。
● タグ間の改行はフリースペース上側の空白を増します。 これが問題になる場合は、
以下の「margin-top値」を適当に調節するコード行を追加してください。
（-100px は一例で -300px等の値になる事も普通にあります）
● スキンによってナビメニュー（グローバルメニュー）とサイドメニューの相対位置が異なります。 アイコンの位置は上記コードの太字部分を調整します。
▪上下位置「top: -95px;」の値を書換えて、最適な高さの位置に調節する
▪左右位置「left: -210px;」の値を書換えて、最適な左右の配置に調節する
旧タイプスキンの場合は、アイコンを色々移動して表示できる適当な場所に設定してください。
●「画像一覧」などの本来の3個のアイコンは、同じボタンデザインに変わります。 また、検索ボックスもデザインを合わせています。 これは上記コードの最後の3行によるアレンジです。 この修飾が不適当な場合は 末尾3行を削除してください。
❷「Tampermonkey」を導入します
● 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
▪この拡張機能を既に導入されている場合は、この ❷の操作は不要です。
▪以下のページに簡単な導入の説明をしていますから参照ください。
❸「Tampermonkey」にスクリプトを登録します
「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Edit At Once 〕 ver. 0.8
// ==UserScript==
// @name Edit At Once
// @namespace http://tampermonkey.net/
// @version 0.8
// @description 参照ページを直接編集する
// @author Ameba blog User
// @match https://ameblo.jp/*
// @match https://blog.ameba.jp/ucs/entry/srventrylist*
// @exclude https://ameblo.jp/*/image*
// @noframes
// @grant none
// ==/UserScript==
let target=document.querySelector('head');
let monitor=new MutationObserver(main);
monitor.observe(target, { childList: true });
main();
function main(){
if(document.domain=='ameblo.jp'){ //「ブログページ」の場合
let List_Menu_a=document.querySelector('#List_Menu a');
let New_Menu_a=document.querySelector('#New_Menu a');
if(List_Menu_a && New_Menu_a){
List_Menu_a.classList.add('js_active');
New_Menu_a.classList.add('js_active');
document.addEventListener('keydown', function(event){
if(event.ctrlKey){
List_Menu_a.classList.remove('js_active');
New_Menu_a.classList.remove('js_active'); }});
document.addEventListener('keyup', function(event){
List_Menu_a.classList.add('js_active');
New_Menu_a.classList.add('js_active'); });
let List_Menu=document.getElementById('List_Menu');
List_Menu.onclick=function(event){
event.preventDefault();
if(event.ctrlKey==true){
let path=
'https://blog.ameba.jp/ucs/entry/srventrylist.do?';
window.location.href=path; }
else{
let article=document.querySelector('.js-entryWrapper');
let user=article.getAttribute('data-unique-ameba-id');
let entry_id=article.getAttribute('data-unique-entry-id');
let date=document.querySelector('time').getAttribute('datetime');
let entry_ym=date.slice(0, 4) + date.slice(5, 7);
let path=
'https://blog.ameba.jp/ucs/entry/srventrylist.do?pageID='+
'1&entry_ym='+entry_ym+'&user='+user+'&entry_id='+entry_id;
window.location.href=path; }}
let New_Menu=document.getElementById('New_Menu');
New_Menu.onclick=function(){
event.preventDefault();
if(event.ctrlKey==true){
let path=
'https://blog.ameba.jp/ucs/entry/srventryinsertinput.do';
window.location.href=path; }
else{
let article_class=document.getElementsByClassName('skin-entry');
let entry_id=article_class[0].getAttribute('data-unique-entry-id');
let path='https://blog.ameba.jp/ucs/entry/srventryupdateinput.do?id=' + entry_id;
window.location.href=path; }}
}
} //「ブログページ」の場合
if(location.pathname.includes('srventrylist.do')){ //「記事の編集・削除」の場合
let arg = new Object;
let pair=location.search.substring(1).split('&');
for(let i=0; pair[i]; i++){
let key=pair[i].split('=');
arg[key[0]]=key[1]; } // key[0]がkey, key[1]がvalue
let entry_ym=arg.entry_ym;
let pageID=parseInt( arg.pageID, 10); // 数値に変換
let user=arg.user;
let entry_id=arg.entry_id;
let amebaId=document.querySelector('#gHeaderRight .amebaId').textContent;
let entryList_li=document.querySelectorAll('#entryList li');
if(user!=null){
if(amebaId!=user){
window.history.back(); }
else{
let k;
for(k=0; k<entryList_li.length; k++){
let entryList_a=entryList_li[k].querySelector('h2 a');
if(entryList_a){
if(entryList_a.getAttribute('href').indexOf(entry_id)!=-1){
entryList_li[k].style.outline='2px solid red';
entryList_li[k].scrollIntoView({block: "center"});
break; }}}
if(k==entryList_li.length){
pageID+=1;
let path=
'https://blog.ameba.jp/ucs/entry/srventrylist.do?pageID='+
pageID+'&entry_ym='+entry_ym+'&user='+user+'&entry_id='+entry_id;
window.location.href=path; }}}
} //「記事の編集・削除」の場合
} // main()
❹ 操作と動作を確かめてください
以上で「Edit At Once」が利用可能になります。 あなたのブログページで動作を確認してください。
▪同様の機能を持つ「Edit At Once Am」を、同時に使用しても問題はありません。
「Am版」は最新のバージョンをお勧めします。
「Edit At Once」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Edit At Once」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
「 機能アイコン」が不要な場合
「Edit At Once」は、機能アイコンを設置したい場合に適したツールです。 ユーザーによっては機能アイコンは不要で、ブログ記事をすぐに再編集する機能だけが必要という場合があると思います。 この「機能アイコン」無しで動作する事を目的として制作したツールが「Edit At Once Am」です。
「Am版」は、記事のタイトル部を「右クリック」する事で、「再編集」「記事リスト」のメニューを表示し、「Edit At Once」と同等の目的を達成します。「Am版」の場合は「アメンバー記事」「記事一覧画面」などからでも「編集画面」を開く事が出来るオールマイティな機能です。「フリースペース」をアイコン設置のために使う必要がなく、導入も簡単です。 このツールは以下にあるので参照ください。
