HTML/CSSコーダーにもデザインカンプを半透明で重ねる機能の自作をお勧めする件

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

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

https://qiita.com/yymmt/items/c3a015fa97d167ca0e6c

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

https://webdesigner-go.com/template/portfolio-02/

# 対象の読者

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

# Tampermonkeyのインストール

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

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

https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=ja

ピンのアイコンをクリックしておくと、右上に常に表示されるようになります。
![](https://i.gyazo.com/f88834ff0cec96c96b701b11e2887cea.png)

Tampermonkeyのアイコンを右クリックして「拡張機能を管理」をクリック。
![](https://i.gyazo.com/185e3599b7bb9d273dcf7eb2e42d42dd.png)

「ファイルのURLへのアクセスを許可する」をONに変更。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754122/1854480d-7bce-d3d8-3a24-eab4f0e16c8a.png)

# Tampermonkey最初のサンプル

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

ページを表示している状態でTampermonkeyのアイコン→「新規スクリプトを追加」をクリックします。
![](https://i.gyazo.com/e1a062f4315dfc8ad183934a09247c71.png)

このような画面になります。このスクリプトの名前`1`、実行されるURL`2`、実行する内容`3`が表示されます。
![](https://i.gyazo.com/92855747b53ac3d8de00d83ad31d9c65.png)

`match`を`file:///*`に変更`1`、`function`の中に、`console.log("test")`を追加`2`して、保存`3`します。
![](https://i.gyazo.com/419a78225788b0b679b9e2214052340b.png)

`インストール済みUserScript` `1`という画面に切り替わり、今作成したもの`2`が表示されます。
![](https://i.gyazo.com/e91a9f5fbe8e38859e3f5226e08bf0e2.png)

元のポートフォリオの画面に戻り画面を更新`1`すると、コンソール`2`に、`test` `3` と表示されます。
![](https://i.gyazo.com/50d2f230c9f88ed9f7001e5e23d8241b.png)

# カンプを重ねて表示する

### フォルダ構成

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

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

![](https://i.gyazo.com/e5c7404bf3aead1e2dbe4e60681bc5b9.png)

### スクリプト

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

```javascript
// ==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`で説明します。
![](https://i.gyazo.com/5cc51ce0cf0c1c572008a4cb52cd6b6b.png)

### 使い方

ポートフォリオの画面を更新します。通常はカンプは表示されません。
![](https://i.gyazo.com/885c46d58a5fe46542acc1597af4fab2.png)

画面の横幅をカンプの幅に合わせると、カンプが半透明で点滅表示されます。まずはPC版のカンプ`1366px`に合わせて画面の横幅を`1366px`にしてみたところです。タイトルのフォントサイズや、本文の位置がズレていることを確認できます。
![](https://i.gyazo.com/2500c03339e396296aade05585a6f076.png)

![](https://i.gyazo.com/6b02840f480efe517a325c9a1abc7670.gif)

次に、SP版のカンプ`375px`に合わせて画面の横幅を`375px`にしてみたところです。これもタイトルのフォントサイズなどがズレていますね。
![](https://i.gyazo.com/533d8dfea3cacc4fce2dd28b612692e6.gif)

デベロッパーツールでズレを修正していきます。点滅して見えなくなったらピッタリ重なっているということです。
![](https://i.gyazo.com/3fc1849fc97231ccbf17363871541d67.gif)

# 軽く解説

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

例えば、

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

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

```css
@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`は負荷低減のため入れてます。
![](https://i.gyazo.com/bba959035a6b65c327e76e612cbd384e.png)