「Quick EntryList」複製パネルと複製元のデザインを融合させる（29）/JS

「複製パネル」のインターフェイスを改善

今回の更新は「複製パネル」に全て集約されました。 このパネルの操作性を、当初から重要視していますが、インターフェイスを更に判り易くしました。

 

「複製パネル」の表示後は、複製元以外の記事は操作を受け付けない様にしましたが、他の記事にマウスポインタを乗せるとリンク先を開くことが出来ます。 やはり、この移動も好ましくないと考えました。

 

「複製パネル」で「複製」をするのかどうか、中止するなら「✖」を押すしか選択肢がない様にして、ユーザーは何処で何をしているのか判らなくなる可能性を、極力無くすことが必要です。 特に「複製」操作は、記事リストの画面が瞬時に移動するので、ここは徹底する必要があります。

 

「複製パネル」が開いた状態と、それが閉じた状態のインターフェイスのコントロールは、これまで2ヵ所の関数が関わっていましたが、それらを整理して、ひとつの関数に纏めました。 重要な「複製」ボタンの「disabled」指定と、ページ上の記事全体に「pointer-events:none」を指定する処理は、少し複雑に組み合わさっています。

 

「Quick EntryList」 ver.2.9   437行～

function panel_item(n, k){
    let entry_item=document.querySelectorAll('.entry-item');
    let prosess_b=entry_item[k].querySelector('button.process');
    if(prosess_b){
        if(n==1){
            for(let i=0; i<entry_item.length; i++){
                entry_item[i].style.outline='';
                entry_item[i].style.pointerEvents='none'; }
            entry_item[k].style.outline='2px solid #6bc1cf';
            entry_item[k].style.background='#e2eef0';
            prosess_b.disabled=true;
            prosess_b.style.pointerEvents='auto'; }
        else{
            entry_item[k].style.outline='';
            entry_item[k].style.background='';
            prosess_b.disabled=false;
            prosess_b.style.pointerEvents='';
            setTimeout(()=>{
                for(let i=0; i<entry_item.length; i++){
                    entry_item[i].style.pointerEvents=''; }
            }, 600); }}}

 

 

「複製パネル」と「複製元」のデザインを一体化

これまでの「複製パネル」は、一応は「複製元」の記事に接して表示される様にしていましたが、複製元の記事の枠線を「複製パネル」の背景色と同じにして一体感を出す様にしました。 また、パネルと記事の枠線を左端で揃えて、パネルが選択した記事にのみ関連することを強調しています。

 

複製パネルで複製ボタンを押した画面

 

 

 

以上の機能を追加した「Quick EntryList」ver.2.9 をアップロードしました。

 

 

 

「Quick EntryList」 のマニュアル

「Quick EntryList」の全ての機能や扱い方の詳細は、マニュアルを参照ください。

 

 

 

 

 「Ameblo Management」を導入が必要です

「Quick EntryList」は、拡張機能「Stylus」による「Ameblo Management」のページデザインを前提に制作しています。 デフォルトの「記事の編集・削除」のデザインは余りにも無駄が多く、適確な操作には向いていないからです。

 

「Ameblo Management」の導入については、下のページの説明を参照ください。

 

 

 

 

「Quick EntryList」を利用するには

このツールは Chrome・Edge・Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入・更新の手順を説明します。

 

 

❶「Tampermonkey」を導入します

◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。

既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。 

拡張機能の導入については、以下のページに簡単な説明があるので参照ください。

 

 

 

❷ スクリプトコードを登録・更新します

「Quick EntryList」のコードは「GitHub」で配布しています。

 

● 以下のリンクを押すと「Quick EntryList」を初めて利用される場合は「インストール」、既に利用されている場合は「上書き」（更新）ができます。

 

 

 

● 下の様な確認画面が表示されたら、「スクリプト名（ツール名）」「バージョン」を確認して、「インストール」または「上書き」のボタンを押します。

 

Tampermonkey v5.3.3 インストール画面

 

 

以上の操作で、「Tampermonkey」の「インストール済み UserScript」のリストに「Quick EntryList」の最新バージョンが登録・更新されます。

 

▪ ダッシュボードのリストは「  リロード」すると、新しい登録が反映します。

 

 

 

「Quick EntryList」最新版に関する記事について 

スクリプトツールは、動作対象ページのHTML変更などで正常動作が不能になる場合があります。「自動更新」や手動による「更新」で、最新バージョンを利用することをお勧めします。

 

「Quick EntryList」の最新バージョンに関する情報は、以下のページのリンクリストから探せます。