ピクセルパーフェクトを目指すにあたって、ページにデザインカンプを半透明で重ねると便利です。今回は、Tampermonkeyを使ってデザインカンプを半透明で重ねる機能を自作しようという記事です。

「デザインカンプを半透明で重ねる」こと自体はPerfectPixelなどの拡張機能でも可能なので、今回は自己満でやってる感が強めとなっております(笑) PerfectPixelについてはこちら↓。

今回も、こちらのサイト↓から、ポートフォリオのテンプレートをお借りして説明します。

対象の読者

デザインカンプを元にHTML/CSSをコーディングする人
HTML/CSSの文法は分かっていて、大まかにはカンプ通りにできる人
特に、CSSの微調整の効率を上げたい人
JavaScriptの基本的な文法は分かっている人

Tampermonkeyのインストール

Tampermonkeyという拡張機能を使うと、ページ表示時に自動的にJavaScriptを実行させることができます。

こちら↓から「Chromeに追加」ボタンでインストールは完了です。

ピンのアイコンをクリックしておくと、右上に常に表示されるようになります。

Tampermonkeyのアイコンを右クリックして「拡張機能を管理」をクリック。

「ファイルのURLへのアクセスを許可する」をONに変更。

Tampermonkey最初のサンプル

最初のサンプルとしてコンソールにtestと出力してみましょう。

ページを表示している状態でTampermonkeyのアイコン→「新規スクリプトを追加」をクリックします。

このような画面になります。このスクリプトの名前1、実行されるURL2、実行する内容3が表示されます。

matchをfile:///*に変更1、functionの中に、console.log("test")を追加2して、保存3します。

インストール済みUserScript 1という画面に切り替わり、今作成したもの2が表示されます。

元のポートフォリオの画面に戻り画面を更新1すると、コンソール2に、test 3 と表示されます。

カンプを重ねて表示する

フォルダ構成

ここではソースコードをsrcフォルダ、デザインカンプをdocフォルダに格納しています。PC用とSP用があれば両方置いておきましょう。 htmlファイルからの相対パスで ../doc/pc.png にカンプがある状態で説明します。

デザインカンプがPhotoshopやXDの場合は、jpgかpngで書き出しておきましょう。

スクリプト

以下全体をコピーして、先ほどのスクリプトに上書きしてください。

// ==UserScript==
// @name         カンプを表示
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        file:///*htm*
// @icon         https://www.google.com/s2/favicons?domain=undefined.
// @grant        none
// ==/UserScript==

(function () {

    let widthToFilename = {
        [375]: "../doc/sp.png", // ここを書き換える
        [1366]: "../doc/pc.png", // ここを書き換える
    };

    let elm = document.createElement("div");
    elm.classList.add("__comp");
    document.body.style.position = "relative";
    document.body.appendChild(elm);

    let mq = Object.keys(widthToFilename).map(k => `
    @media (width: ${k}px){
        .__comp {
            background-image: url(${widthToFilename[k]});
        }
    }
    `).join(" ");

    let stl = document.createElement("style");
    stl.innerHTML = `
    .__comp {
        background-size: 100vw;
        position: absolute;
        top: 0px;
        width: 100%;
        height: 20000px;
        background-position-x: center;
        background-repeat: no-repeat;
        z-index: 9999;
        pointer-events: none;
        animation: 0.5s linear infinite blink;
        animation-timing-function:steps(5,jump-none);
    }
    ${mq}
    @keyframes blink {
        0% { opacity: 0; }
        50% { opacity: 0; }
        100% { opacity: 1; }
    }
    `;
    document.body.appendChild(stl);
})();

「ここを書き換える」部分は、カンプの横幅と、htmlファイルからみたカンプのパスを記載します。今回はPC版1366px、SP版375pxで説明します。

使い方

ポートフォリオの画面を更新します。通常はカンプは表示されません。

画面の横幅をカンプの幅に合わせると、カンプが半透明で点滅表示されます。まずはPC版のカンプ1366pxに合わせて画面の横幅を1366pxにしてみたところです。タイトルのフォントサイズや、本文の位置がズレていることを確認できます。

次に、SP版のカンプ375pxに合わせて画面の横幅を375pxにしてみたところです。これもタイトルのフォントサイズなどがズレていますね。

デベロッパーツールでズレを修正していきます。点滅して見えなくなったらピッタリ重なっているということです。

軽く解説

widthToFilename変数(赤線部分)をオブジェクトとして定義し、キーにカンプの横幅(青線部分)、値にカンプのパス(緑線部分)を記述します。mapでメディアクエリの形に整形しています。

例えば、

{
    [375]: "../doc/sp.png",
    [1366]: "../doc/pc.png",
}

は、以下のように整形されます。カンプをbackground-imageで表示している感じです。

@media (width: 375px){
    .__comp {
        background-image: url(../doc/sp.png);
    }
}
    
@media (width: 1366px){
    .__comp {
        background-image: url(../doc/pc.png);
    }
}

position等1でカンプをページ全体に重なるように表示、pointer-events 2でデベロッパーツールの「ページ内の要素を選択して検査」ボタンの挙動を阻害しないようにする、aniimation等3で点滅表示、といった感じです。0.5sの間に、opacityを0 → 0 → 1と変化させています。stepsは負荷低減のため入れてます。