【実用中】サイトの更新方法などのマニュアル作成時に役立つ機能をjQuery(avascript）で作成

luck

6年前

ここ数年、ホームページ構築はWPなどのCMSを用いることが多くなりました。サイトの記事を増やしていくことは、SEOにも効果があるので、当然の流れだと思います。
それに伴い、記事の投稿（更新）方法のマニュアルが自ずと必要になってきました。口頭や画面共有等で説明するだけでOKな場合もありますが、基本的には必要だと思います。

マニュアルがある方がクライアントにも丁寧です。それに慣れない画面、慣れない操作であれば、実際に使う際に資料がないとなかなか難しいものです。

マニュアルを用意する場合は、基本的にはクライアントごとに作成したり、共通部分に関してはまとめたりしています。
ですが、最近は出来るだけマニュアルがなくても更新できるような管理画面にしたいと考えています。その方が実際に更新される方も便利だと思います。マニュアルと管理画面を行き来するよりは、管理画面だけで済ませる方がスムーズです。

そこで、考えた機能をご紹介しようかと思います。

どういった機能か

基本的な機能は下記2つです。

URLクエリパラメータ（target）にて指定されたクラスがを枠で囲い、場所を伝える
スクロールしないと見えないところにある場合は、該当箇所付近まで自動でスクロールする

また、fixedにも対応しています。

それでは、どういった機能かご覧ください。

枠で囲んで場所を見つけやすくする

「タイトルはここです」ボタンをクリックしてください。

タイトルはここです

いかがでしょうか？
「タイトル」がどこにあるか直ぐに見つけられたかと思います。

自動でスクロール

次にこちらをご覧ください。「関連記事のタイトル」の場合です。

関連記事のタイトルはここです

こちらはいかがでしょうか？
枠で囲うという点は「タイトルはここです」と同じですが、該当箇所へ自動でスクロールしたかと思います。

position: fixed; にも対応

最後にこちらもご覧ください。「ページ上部へ」のボタンです。こちらは、positionが「fixed」になっている場合になります。

ページ上部へのボタンはここです

fixedの場合は、枠線もfixedで設定されます。

使い方

私の方で実用しているもので、特に不具合は現状ありません。ですが、ご利用される際の動作の保証はできませんので、ご了承ください。
ただ、不具合や気になる点がありましたらコメントをいただけますと幸いです。時間があるときにはなりますが、確認し、改修等の参考にさせていただきます。（修正等できた際は追記します）

css

まずは、下記cssを枠線を表示したいページの「<head>～</head>」内または外部cssファイルに追加してください。

アニメーションや「text-shadow」部分は枠部分をより見つけやすくしている部分になります。また、枠線の色や太さに関しても決まりはありません。
ですので、装飾の部分に関してはカスタマイズしていただいても動作には問題ありません。

コピーする
※最新のChrome/Firefoxでは動作確認済
※IE11はクリップボードを許可した場合動作確認済
※うまくコピーできない場合は手動でコピーしてください

<style>
/*----------------------------------------------------
    マニュアル用
----------------------------------------------------*/
.marking {
    animation: markingFlash 2s infinite; // アニメーション
    animation-iteration-count: 3; // アニメーション
    border: 5px solid #c00;
    box-shadow: 0 0 10px;
    position: absolute;
    left: 0; // 初期値（最終的にはjavascriptで書き換える）
    top: 100px; // 初期値（最終的にはjavascriptで書き換える）
}

.marking span {
    animation: markingBound 2s infinite; // アニメーション
    animation-iteration-count: 3; // アニメーション
    color: #c00;
    font-size: 2.4rem;
    font-weight: bold;
    position: absolute;
    top: -50px;
    left: 40px;
    text-shadow: 1px 1px 0 #000;
    width: 600px;
}

/* テキストの配置位置を右端にする */
.marking .marking-text-right {
    left: auto;
    right: 20px;
    text-align: right;
}

/* アニメーション */
@keyframes markingFlash {
    50% {
        box-shadow: 0 1px 40px 1px red;
    }
}

@keyframes markingBound {
    0%   { top: -50px; }
    20%  { top: -80px; }
    60%  { top: -50px; }
    100% { top: -50px; }
}
</style>

javascript

次にjavascriptを枠線を表示したいページの「<head>～</head>」内または「<body>～</body>」内または外部jsファイルに追加してください。
※個人的には埋め込む場合ですと</body>直前あたりによくいれます

「こちらに反映されます ▼」の文言の変更や「 $(‘.marking’).css(‘top’, top+’px’);」～「$(‘.marking’).css(‘height’, height+’px’);」などの枠線部分の幅・高さ・位置などはカスタマイズしても動作には問題ありません。
※要素の指定がクラスだけな点など改善点はあるかと思っています

※jqueryの1.12.4を使用しています

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
    $(window).load(function(){
        // 対象を枠で囲う＆自動スクロール
        function pickup_target() {
            // URLパラメータ取得
            var param = url_query_param();
            if (typeof param['target'] === 'undefined') {
                return false;
            }
            // target(対象の要素)
            var target = param['target'];
            // fixed（fixedかどうか？）
            var fixed = false;
            if (typeof param['fixed'] !== 'undefined') {
                fixed = true;
            }
            // right（テキストを右面に合わせるかどうか）
            var right = false;
            if (typeof param['right'] !== 'undefined') {
                right = true;
            }
            if (right) {
                // 枠の右側を起点にする
                $('body').append('<div class="marking"><span class="marking-text-right">こちらに反映されます ▼</span></div>');
            } else {
                // 枠の左側を起点にする
                $('body').append('<div class="marking"><span>▼ こちらに反映されます</span></div>');
            }
            // 要素の幅・高さ・位置を取得
            var $target = $('.'+target);
            var height = $target.outerHeight();
            var width  = $target.outerWidth();
            var offset = $target.offset();
            // 要素を囲うため、位置・サイズを調整
            var top  = offset.top - 20;
            var left = offset.left - 20;
            height = height + 40;
            width = width + 40;
            $('.marking').css('top',    top+'px');
            $('.marking').css('left',   left+'px');
            $('.marking').css('width',  width+'px');
            $('.marking').css('height', height+'px');
            if (fixed) {
                // fixedの場合は、枠線もfixedにする
                $('.marking').css('position', 'fixed');
            } else {
                // fixed以外の場合、対象の要素の少し上まで自動スクロール
                var speed = 400; // ミリ秒
                var position = $target.offset().top - 150;
                $('body,html').animate({scrollTop:position}, speed, 'swing');
            }
        }
        pickup_target();
    });
});
function url_query_param() {
    var search = location.search;
    search = search.replace('?', '');
    var ar_search = search.split('&');
    var param = new Array();
    ar_search.forEach(function (val) {
        var sep_val = val.split('=');
        param[sep_val[0]] = sep_val[1];
    });
    return param;
}
</script>

html

html部分は枠線を表示したいページへのリンクです。URLクエリパラメータを指定することで、上記javascriptが動作します。

下記のパラメータは「?target=page-top&fixed=true&right=true」になります。

target	枠線で囲いたいクラス名を指定します。「target」の指定がない場合は、動作しません
fixed	fixedの場合に「true」を指定します。それ以外の場合は、「fixed=true」自体不要です
right	テキストの起点を右側にしたい場合に「true」を指定します。それ以外の場合は、「right=true」自体不要です。

<a href="https://lucklog.info/func-wordpress-for-explain/?target=page-top&fixed=true&right=true">どこに反映されるか確認する</a>

最後に

使い方等は以上です。
何か不明点や動作しない等ありましたら、下記よりコメントをいただければと思います。

上にも書きましたが、改善点はまだまだあるかと思います。
また、実用している機能ですが、日が浅く、適応した件数も少ないです。ただ、クライアントには「こんなことできるんですね」と驚かれた機能でもあります。
「百聞は一見に如かず」、どこに反映されているか一目でわかるので、親切な機能かなと個人的には思っています。

これから更に使いやすく改良し、マニュアルや管理画面等、その他使えそうな箇所で更に導入していけたらと思います。

改善した点等出てきましたら、別記事かこちらに追記したいと思います。