スキンの背景画像・背景色の設定を調査・差替えるツール（4）/ JavaScript

背景画像の設定・調整パネルの制作 

 ユーザー側で用意した背景用の画像を登録して、そのSRC（画像データのURL）をクリップボードにコピーする機能が出来ました。 続いて、メインウインドウに戻って、そのSRCをテスト的に設定する機能を作りました。

画像の配置調整機能は未だ作っていませんが、SRCを受け取り、目的のページの背景画像として表示させる機能を作り、その動作を確認しています。

テスト操作の様子 

以下は背景画像上を記事がスクロールするタイプのスキンのサンプルです。

❶ 調査 

「Skin Coordinate」を起動して、背景画像の設定されている部分を調べます。 

「html」ボタンをONにしてから、左端から順にボタンをON/OFFして、背景画像が「抜け」て無くなるボタンを探します。 背景画像が設定されていないボタンは、ページ上に枠線が表示されるだけで、背景画像の変化はありません。

このスキンでは「Header 1」を押しても変化が無く、「BodyText 2」を押すと全ての背景画像がなくなります。

 

この事で、「BodyText 2」の背景画像を差替えればアレンジできる事が判ります。

実は殆どのボタンに対して、好みの背景画像を設定できます。 しかしここでは、シンプルに元の背景画像を差替える事にします。（説明を判り易くするためです）

❷ 画像設定パネルの表示 

「BodyText 2」のボタンを右クリックすると、下図の様に「画像設定パネル」が表示されます。「Header 1」～「html」の7個のボタンは、全てこのパネルを表示できます。 つまり、各ボタンに対応する要素に背景画像の設定が出来ます。

右クリックしたボタンはグリーンになり、操作対象である事を示します。 他の6個のボタンはグレーアウトして押せなくなります。

「画像設定パネル」は「コントロールパネル」側で右クリックしたボタンを、もういちど「右クリック」すると閉じます。 この開閉のインターフェイスは、変更する予定です。

❸ 画像の用意～アップロード～SRCの取得 

今回は小型画像をタイル状に敷き詰める形になりましたが、実際の運用では適当なサイズの背景用の画像を用意する必要があります。 背景画像の表示方法の選択や、サイズに過不足がある場合の調整機能などは、今後に組む予定です。

「Upload」のボタンを押し「画像フォルダ」のサブウインドウを開きます。 背景用の画像をアップロードしてから選択します。 サムネイルのクリックで赤枠が表示されたら、SRCのコピーが完了です。

❹ SRCの記入 

メインウインドウに戻り、「SRC入力枠」の中をクリックして「Ctrl + V」を押します。 クリップボードにコピーしていたSRCが書き込まれます。「SRC入力枠」の右クリック→コンテキストメニューの「貼り付け」の操作でもOKです。

❺ 画像のテスト表示 

「画像設定パネル」で「Overlay」ボタンは主要なスイッチです。 このボタンを押すと、画像のSRCを取り込みます。 更に対応する要素に背景画像を設定するCSSコードを生成し、ページにそのCSSを適用して背景画像を表示します。

現在は画像の配置調整を飛ばしているので、「Overlay」ボタンを押すと、下の様にページの背景画像の位置に、小型の背景用画像がタイル状に表示されます。

背景画像が充分に大きなサイズなら、上下方向にだけ背景画像が繰り返される表示になります。

❻ 背景アレンジのCSSコードの出力 

「コントロールパネル」に「Get Code」のボタンを追加しました。 これは、現在のページの状態にアレンジするための、CSSコードを取得するスイッチです。

このスキンでは、押されて実効の状態にあるボタンは「BodyText 2」と「html」だけです。 他のボタンに対応する要素は、アレンジ不要です。 そして「html」ボタンは調査で必要なだけで、OFFにしても結果は同じです。 結局「BodyText 2」に対応する要素の「background」設定だけをアレンジすれば良いという事です。

無駄な二重指定を避けるため、OFFにしても結果が同じボタンは、できるだけOFFにすべきです。 しかし、不要な事に気付かず残していても、大して問題はありません。 目的のデザインの状態を確認して、「Get Code」を押すと、このツールがページに適用しているアレンジ用のCSSコードを纏めて出力します。

 現在は制作中のため、ダイアログに出力していますが、このCSSコードをコピーして「フリースペース」にペーストすると、全く同じページ画面が表示されます。

 「Skin Coordinate」のコード

以下のスクリプトコードは Chrome / 新Edgeで動作を確認しています。 ツールは未だ開発の最初の段階です。

◎ ページャーの細い「旧タイプ」のスキンでは、正しく動作しません。

◎「画像フォルダ」のサブウインドウでは「画像SRC」のコピー機能が動作します。

◎ ページに任意の背景画像をテスト的に表示できます。 また、そのCSSコードを出力できます。

以下のコードを「Tampermonkey」に登録する事で、ページ背景設定の調査ツールとして動作させる事が出来ます。

〔コピー方法〕　軽量シンプルなツール「PreBox Button   」を使うと

　　コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

　　の操作で、掲載コードのコピーが可能になります。

〔 Skin Coordinate 〕ver. 0.4

// ==UserScript==
// @name         Skin Coordinate
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description   「ヘッダー背景画像」のチェック
// @author       Ameba Blog User
// @match       https://ameblo.jp/*
// @match       https://blog.ameba.jp/ucs/skin/srvskinpreview*
// @match       https://blog.ameba.jp/ucs/upload/srvimage*
// @run-at       document-start
// @noframes
// @grant        none
// ==/UserScript==


let task=0; // メイン ON/OFF
let overlay=0; // サブパネル ON/OFF
let edit=0; // 背景貼付 ON/OFF

let bn1=0; // bn値は「0:通常 1:透過 2:背景貼付」
let bn2=0;
let bn3=0;
let bn4=0;
let bn5=0;
let bn6=0;
let bn7=0;


let target=document.querySelector('head');
let monitor=new MutationObserver(catch_key);
monitor.observe(target, { childList: true });


catch_key();


function catch_key(){
    let sp=document.querySelector('.skin-page');
    if(sp){ // ページ表示エリアの取得が条件
        document.addEventListener("keydown", check_key);
        function check_key(event){
            let gate=-1;
            if(event.altKey==true){
                if(event.keyCode==117){
                    event.preventDefault(); gate=1; }} // ショートカット「Alt＋F6」

            if(gate==1){
                event.stopImmediatePropagation();
                event.preventDefault();

                act(); }} // ツールの実効関数
    }} // catch_key



function act(){
    if(task==0){
        task=1;
        panel_disp();
        panel2_disp();
        coordinate(); }
    else if(task==1){
        task=0;
        panel_remove();
        panel2_remove();
    }}



function panel_disp(){
    let panel=document.createElement('div');
    panel.setAttribute('id', 'skin_panel');

    panel.innerHTML=
        '<input id="b1" type="submit" value="Header 1">'+
        '<input id="b2" type="submit" value="Header 2">'+
        '<input id="b3" type="submit" value="BlogText 1">'+
        '<input id="b4" type="submit" value="BlogText 2">'+
        '<input id="b5" type="submit" value="BlogText 3">'+
        '<input id="b6" type="submit" value="body">'+
        '<input id="b7" type="submit" value="html">'+
        '<input id="upload" type="submit" value="Upload">'+
        '<input id="get_code" type="submit" value="Get Code">';

    let css=
        '#skin_panel { position: fixed; bottom: 40px; left: calc(50% - 490px); '+
        'width: 980px; padding: 15px 0 15px 20px; background: #005f56; '+
        'border: 2px solid #fff; border-radius: 4px; z-index: 10; }'+
        '#skin_panel input { font: normal 16px meiryo; color: #000; '+
        'margin-right: 20px; padding: 4px 8px 2px; } '+
        '#b1, #b2, #b3, #b4, #b5, #b6 { outline: none; }';

    let style=document.createElement('style');
    style.innerHTML=css;
    panel.appendChild(style);

    let skin_panel=document.querySelector('#skin_panel');
    if(!skin_panel){
        document.querySelector('body').appendChild(panel); }} // panel_disp()


function panel_remove(){
    let skin_panel=document.querySelector('#skin_panel');
    skin_panel.remove(); }



function panel2_disp(){
    let panel=document.createElement('div');
    panel.setAttribute('id', 'insert_panel');

    panel.innerHTML=
        '<input id="g1" placeholder="背景用の画像SRCを入力" autocomplete="off">'+
        '<input id="g2" type="submit" value="Overlay">'+
        '<input id="g3" type="submit" value="Trim 1">'+
        '<input id="g4" type="submit" value="Trim 2">'+
        '<input id="g5" type="submit" value="Trim 3">'+
        '<input id="g6" type="submit" value="Trim 4">';

    let css=
        '#insert_panel { position: fixed; bottom: 110px; left: calc(50% - 490px); '+
        'width: 980px; padding: 15px 0 15px 20px; background: #005f56; '+
        'border: 2px solid #fff; border-radius: 4px; z-index: 10;  display: none; }'+
        '#insert_panel input { font: normal 16px meiryo; color: #000; '+
        'margin-right: 20px; padding: 4px 8px 2px; }'+
        '#g1 { width: 400px; }';

    let style=document.createElement('style');
    style.innerHTML=css;
    panel.appendChild(style);

    let insert_panel=document.querySelector('#insert_panel');
    if(!insert_panel){
        document.querySelector('body').appendChild(panel); }} // panel2_disp()


function panel2_remove(){
    let insert_panel=document.querySelector('#insert_panel');
    insert_panel.remove(); }



function coordinate(){
    let b1=document.querySelector('#b1');
    let b2=document.querySelector('#b2');
    let b3=document.querySelector('#b3');
    let b4=document.querySelector('#b4');
    let b5=document.querySelector('#b5');
    let b6=document.querySelector('#b6');
    let b7=document.querySelector('#b7');
    let upload=document.querySelector('#upload');
    let get_code=document.querySelector('#get_code');

    b1.onclick=function(){
        if(bn1==0){
            bn1=1;
            b1.style.boxShadow='0 0 0 2px #2196f3, 0 0 0 4px #fff';
            check_back(1); }
        else{
            bn1=0;
            b1.style.boxShadow='none';
            undo_check(1); }}

    b2.onclick=function(){
        if(bn2==0){
            bn2=1;
            b2.style.boxShadow='0 0 0 2px #2196f3, 0 0 0 4px #fff';
            check_back(2); }
        else{
            bn2=0;
            b2.style.boxShadow='none';
            undo_check(2); }}

    b3.onclick=function(){
        if(bn3==0){
            bn3=1;
            b3.style.boxShadow='0 0 0 2px red, 0 0 0 4px #fff';
            check_back(3); }
        else{
            bn3=0;
            b3.style.boxShadow='none';
            undo_check(3); }}

    b4.onclick=function(){
        if(bn4==0){
            bn4=1;
            b4.style.boxShadow='0 0 0 2px red, 0 0 0 4px #fff';
            check_back(4); }
        else{
            bn4=0;
            b4.style.boxShadow='none';
            undo_check(4); }}

    b5.onclick=function(){
        if(bn5==0){
            bn5=1;
            b5.style.boxShadow='0 0 0 2px #2196f3, 0 0 0 4px #fff';
            check_back(5); }
        else{
            bn5=0;
            b5.style.boxShadow='none';
            undo_check(5); }}

    b6.onclick=function(){
        if(bn6==0){
            bn6=1;
            b6.style.boxShadow='0 0 0 2px #0b8, 0 0 0 4px #fff';
            check_back(6); }
        else{
            bn6=0;
            b6.style.boxShadow='none';
            undo_check(6); }}

    b7.onclick=function(){
        if(bn7==0){
            bn7=1;
            b7.style.boxShadow='0 0 0 4px #fff';
            b7.style.outline='2px dotted #000';
            check_back(7); }
        else{
            bn7=0;
            b7.style.boxShadow='none';
            b7.style.outline='none';
            undo_check(7); }}


    b1.oncontextmenu=function(event){
        event.preventDefault();
        if(overlay==0){
            overlay=1;
            impose(1); }
        else{
            overlay=0;
            undo_impose(1) }}

    b2.oncontextmenu=function(event){
        event.preventDefault();
        if(overlay==0){
            overlay=1;
            impose(2); }
        else{
            overlay=0;
            undo_impose(2) }}

    b3.oncontextmenu=function(event){
        event.preventDefault();
        if(overlay==0){
            overlay=1;
            impose(3); }
        else{
            overlay=0;
            undo_impose(3) }}

    b4.oncontextmenu=function(event){
        event.preventDefault();
        if(overlay==0){
            overlay=1;
            impose(4); }
        else{
            overlay=0;
            undo_impose(4) }}

    b5.oncontextmenu=function(event){
        event.preventDefault();
        if(overlay==0){
            overlay=1;
            impose(5); }
        else{
            overlay=0;
            undo_impose(5) }}

    b6.oncontextmenu=function(event){
        event.preventDefault();
        if(overlay==0){
            overlay=1;
            impose(6); }
        else{
            overlay=0;
            undo_impose(6) }}

    b7.oncontextmenu=function(event){
        event.preventDefault();
        if(overlay==0){
            overlay=1;
            impose(7); }
        else{
            overlay=0;
            undo_impose(7) }}


    upload.onclick=function(){
        window.open('https://blog.ameba.jp/ucs/upload/srvimagelist.do',
                    null, 'top=50,left=100,width=800,height=640'); }


    get_code.onclick=function(){
        total_css(); }

} // coordinate()



function check_back(n){
    let css;
    let s_id;
    let sp=document.querySelector('.skin-page');
    if(n==1){
        css='.skin-bgHeader { background: none; '+
            'box-shadow: #2196f3 0 0 0 4px inset, #fff 0 0 0 6px inset; }'; }
    if(n==2){
        css='.skin-columnA .skin-bgHeader > div, '+
            '.skin-columnB .skin-bgHeader > div { background: none; '+
            'box-shadow: #2196f3 0 0 0 4px inset, #fff 0 0 0 6px inset; }'; }
    if(n==3){
        css='.skin-page { background: none; '+
            'box-shadow: red 0 0 0 10px inset, #fff 0 0 0 12px inset; }'; }
    if(n==4){
        css='.skin-page::before { background: none; '+
            'box-shadow: red 0 0 0 10px inset, #fff 0 0 0 12px inset; }'; }
    if(n==5){
        css='.skin-blogBody { background: none; '+
            'box-shadow: #2196f3 0 0 0 4px inset, #fff 0 0 0 6px inset; }'; }
    if(n==6){
        css='body { background: none; '+
            'box-shadow: #0b8 0 0 0 10px inset, #fff 0 0 0 12px inset; }'; }
    if(n==7){
        css='html { background: #fff; '+
            'background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, '+
            'transparent 75%, #ddd 75%, #ddd), '+
            'linear-gradient(-45deg, #ddd 25%, transparent 25%, transparent 75%, '+
            '#ddd 75%, #ddd); background-size: 10px 10px; }'; }

    let style=document.createElement('style');
    s_id='skin_'+n;
    style.setAttribute('id', s_id);
    style.innerHTML=css;

    if(document.querySelector('#'+s_id)){
        document.querySelector('#'+s_id).remove(); }
    sp.appendChild(style); } // check_back()


function undo_check(n){
    let s_id;
    s_id='skin_'+n;
    document.querySelector('#'+s_id).remove(); }



function impose(n){
    let g1=document.querySelector('#g1');
    let g2=document.querySelector('#g2');
    let g3=document.querySelector('#g3');
    let g4=document.querySelector('#g4');
    let g5=document.querySelector('#g5');
    let g6=document.querySelector('#g6');


    let b_id='#b'+n
    document.querySelector(b_id).style.background='#3bff5c';

    for(let k=1; k<8; k++){
        if(k!=n){
            let b_id='#b'+k;
            document.querySelector(b_id).disabled=true; }}

    let insert_panel=document.querySelector('#insert_panel');
    insert_panel.style.display='block';


    g2.onclick=function(){
        if(edit==0){
            edit=1;
            let src=g1.value;
            if(src!=''){
                if(n==1){ bn1=2; }
                if(n==2){ bn2=2; }
                if(n==3){ bn3=2; }
                if(n==4){ bn4=2; }
                if(n==5){ bn5=2; }
                if(n==6){ bn6=2; }
                if(n==7){ bn7=2; } // 背景画像の貼付け「2」
                trim(n, src); }}
        else{
            edit=0;
            if(n==1){ bn1=0; }
            if(n==2){ bn2=0; }
            if(n==3){ bn3=0; }
            if(n==4){ bn4=0; }
            if(n==5){ bn5=0; }
            if(n==6){ bn6=0; }
            if(n==7){ bn7=0; } // 背景画像の通常化「0」
            undo_check(n); }

    }} // impose()



function undo_impose(n){
    let b_id='#b'+n
    document.querySelector(b_id).style.background='';
    let insert_panel=document.querySelector('#insert_panel');
    insert_panel.style.display='none';

    for(let k=1; k<8; k++){
        let b_id='#b'+k;
        document.querySelector(b_id).disabled=false; }}



function trim(n, src){
    let css;
    let s_id;
    let sp=document.querySelector('.skin-page');

    if(n==1){
        css='.skin-bgHeader { background: '; }
    if(n==2){
        css='.skin-columnA .skin-bgHeader > div, '+
            '.skin-columnB .skin-bgHeader > div { background: '; }
    if(n==3){
        css='.skin-page { background: '; }
    if(n==4){
        css='.skin-page::before { background: '; }
    if(n==5){
        css='.skin-blogBody { background: '; }
    if(n==6){
        css='body { background: '; }
    if(n==7){
        css='html { background: '; }

    css=css +'url('+ src +'); }';

    let style=document.createElement('style');
    s_id='skin_'+n;
    style.setAttribute('id', s_id);
    style.innerHTML=css;

    if(document.querySelector('#'+s_id)){
        document.querySelector('#'+s_id).remove(); }
    sp.appendChild(style); }



function total_css(){
    let css='';

    if(bn1==1){
        css+='.skin-bgHeader { background: none; } '; }
    if(bn1==2){
        css+=style_css(1); }
    if(bn2==1){
        css+='.skin-columnA .skin-bgHeader > div, '+
            '.skin-columnB .skin-bgHeader > div { background: none; } '; }
    if(bn2==2){
        css+=style_css(2); }
    if(bn3==1){
        css+='.skin-page { background: none; } '; }
    if(bn3==2){
        css+=style_css(3); }
    if(bn4==1){
        css+='.skin-page::before { background: none; } '; }
    if(bn4==2){
        css+=style_css(4); }
    if(bn5==1){
        css+='.skin-blogBody { background: none; } '; }
    if(bn5==2){
        css+=style_css(5); }
    if(bn6==1){
        css+='body { background: none; } '; }
    if(bn6==2){
        css+=style_css(6); }
    if(bn7==1){
        css+='html { background: #fff; } '; }
    if(bn7==2){
        css+=style_css(7); }

    alert(css);

} // total_css()


function style_css(n){
    let s_id='skin_'+n;
    let style_tag=document.querySelector('#'+s_id);
    let css;
    if(style_tag){
        css=style_tag.textContent; }
    return css; }





window.addEventListener('DOMContentLoaded', function(){
    let upl_index=document.querySelector('#uploadIndex');
    if(upl_index){ // 画像フォルダウインドウの場合に動作する
        upload_w(); }});

function upload_w(){
    let css=
        '#globalHeader, #ucsHeader, .l-ucs-sidemenu-area, '+
        '.selectImg .numLabel, label[for="image_title1"], input.inputText, '+
        'input[type="checkbox"], #imageList .actionControl, #moreUpload, '+
        '#imageList .imageBox .btnDefault, #mailBlog, #ucsMainRight, '+
        '#footerAd, #globalFooter { display: none !important; } '+
        '#ucsContent { width: 770px !important; background: #fff; } '+
        '#ucsMain { font-size: 16px; background: none; } '+
        '#ucsMainLeft { width: 740px !important; } '+
        '#uploadImgTitle h2 { font-size: 16px; padding-top: 4px; } '+
        '.comment { font-size: 16px; width: 16em; overflow: hidden; '+
        'white-space: nowrap; } '+
        '.selectImg:not(:nth-child(3)) { display: none; } '+
        '.selectImg .fileUp { width: 500px; padding: 10px; font-size: 16px; } '+
        'input#upload { font-size: 16px; padding: 1px 0 0; } '+
        '.imageBox { width: 187px; margin: 0; } '+
        '.imageBox .thickboxEditTitle { display: block; overflow: hidden; '+
        'width: 175px; } '+
        '.imageBox dt label { color: transparent; } '+
        '.imageBox img { height: 130px; width: auto; } '+
        'html { overflow-y: scroll !important; }';

    let style=document.createElement('style');
    style.setAttribute('id', 'skin_upload');
    style.innerHTML=css;

    let skin_upload=document.querySelector('#skin_upload');
    if(!skin_upload){
        document.querySelector('html').appendChild(style); }

    let target3=document.querySelector('form[name="imageListForm"]');
    let monitor3=new MutationObserver(imagelist);
    monitor3.observe(target3, { childList: true });

    imagelist();

    function imagelist(){
        let imagebox_img=document.querySelectorAll('.imageBox img');
        for(let k=0; k<imagebox_img.length; k++){
            imagebox_img[k].parentNode.removeAttribute('href');
            let rsrc=imagebox_img[k].getAttribute('src');
            let src=rsrc.substring(0, rsrc.indexOf("?"));
            imagebox_img[k].setAttribute('src', src);

            imagebox_img[k].addEventListener('mousedown', function(event){
                event.stopImmediatePropagation();
                let gsrc=imagebox_img[k].getAttribute('src');
                copyClipboard(gsrc);

                imagebox_img[k].parentNode.style.outline='3px solid red';
                imagebox_img[k].parentNode.style.outlineOffset='-3px';

                setTimeout(()=>{
                    imagebox_img[k].parentNode.style.outline='none';
                }, 2000);
            }); }}


    function copyClipboard(str){
        let tmp_area=document.createElement("textarea");
        tmp_area.textContent=str;
        let body=document.getElementsByTagName("body")[0];
        body.appendChild(tmp_area);
        tmp_area.select();
        let retVal=document.execCommand('copy');
        body.removeChild(tmp_area);
        return retVal; }

} // upload_w()

「Skin Coordinate」最新版について 

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

●「Skin Coordinate」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。

スクリプトツール 　最新バージョン・リンク一覧表 （ツール名順）