デザイン通りにコーディングできるようになるコーディング補助js（DEMO）

●こんなことが出来る

〇コーディング時に役立つ

・「どうして私のデザイン通りにコーディングしてくれないの？」と言ってくるデザイナーを黙らせたい

・「ほらここ。1pxズレてるよね」と言ってくるディレクターを黙らせたい

・書き出したデザインデータと、実際にブラウザ上で表示されるコーディングデータを照らし合わせたい

・徹底的に業務を効率化したい

〇画面操作

・当ページ、画面右側に「P」「G」「H」のボタンがありますね。

・P → Picture（画像の表示切替）

・G → Guideline（フォトショ的ガイドラインの表示切替）

・H → Hide（再リロードするまでこの操作ボタンを非表示化）

・レスポンシブ対応なので、ウィンドウサイズをスマホサイズくらいまで縮めると、ガイドラインの位置や、画像が切り替わる

※このページでは、PC版は980px幅で固定し、SP版は、”両端からそれぞれ15px”というスタイルで指定。もちろん各々で変更可能。

●一応伝えておきたいこと

画像位置は基本的にズレていく

テキストの兼ね合いなどで、実際のデザインデータとコーディングデータはどう足掻いてもズレていきます。
基本的には「１枚絵のデザインデータ」のキャプチャを使ってそれと見比べながら作業していきますが、要素ごとにどうしてもズレていきます。

一応その対処の為に、coding-support.jsの中で画像の高さをいじれる項目を作っています。
だからここを変更して高さを調節すれば良いのですが、実際の作業で使ってみて「結構頻繁に高さを変えてる」という事実に気付きました。

だからそんな時はブラウザの「要素を検証」を使って、「.picture-cover」というclassが付与されたimgタグ（恐らく閉じbodyタグの直前）のスタイルを一時的に指定してあげてください。
このやり方だとページリロードすると設定が飛んでしまいますが、臨機応変に高さを変えていくことが可能。

画像の色味はcssで少し暗くしてる

表示させるキャプチャ画像には「filter:brightness(0.9);」というスタイルをかけてわざと暗くしています。
これは、実際に自分で作業してみて「コーディングデータと画像が全く一緒だったら、今どっちを表示してるか分からなくなる」という事故が頻発したためです。

コーディングデータで特に面倒なのは「余白」「間隔」の調整なので、色味に関するところで対策しました。 ちなみにこれは、coding-support.js内の188行目付近の「filter: 'brightness(0.9)'」を削除すれば外せます。

opacity設定はお好みで

「デザインデータを透過させて、実際のコーディングデータと照らし合わせる」という使い方が便利な場合もあります。 なのでデフォルトでは「0.6」に設定してますが、ここも各々で変更する前提の設定項目です。（coding-support.js21行目付近）

飽くまで作業補助用のjs

納品前にソースをしっかり消しておくこと

SP版の調整ではあんまり使わない

SP版のデザインデータが「750px」で作られていた場合は、ディスプレイサイズが375pxの「iPhone8」で照らし合わせないと、当然ですがズレます。
まぁ、目安としてご利用ください。

ローカルサーバーを構築してた方が良い

web屋さんならほとんどの方がローカルサーバーを使って作業してるので問題ないと思いますが、XAMPPやMAMPPを使用して、ローカルデータにもhttpからのフルパスでアクセスできる環境だと、本jsの真価が発揮できます。

何故なら、「coding-support.js」を「http://localhost/test/coding-support.js」等のフルパスでアクセスできるようにしておけば、後は作業データに「<script src="http://localhost/test/coding-support.js"></script>」と加えれば良いだけなので、「納品データの中に作業用jsファイルを追加する」という手間を省けます。

●使い方（導入方法）

①下記ダウンロードページへアクセスし、「Download Zip」をクリック。

「coding-support.js」をダウンロードし、解凍する。

〇ダウンロードページ
https://gist.github.com/maehara000/e6a30a65f34430f9d2cd2fe8927fbff0

②ダウンロードしたcoding-support.jsをhtmlのhead内で読み込む。

例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/js/coding-support.js"></script>

※「3.3.1/jquery.min.js」は状況に応じて入れる。（良く分からない場合は、まず入れずに試してみて、動かなかったら入れてみる）

※「/js/coding-support.js」のディレクトリは、jsファイルを保存してるパスに合わせて変更する。

ガイドラインとボタンがちゃんと表示されたら次へ↓

●jsの設定変更方法

基本的な編集方法

「coding-support.js」の7～40行目くらいまで、書いてある項目通りに設定してください。
「/* ----------- ↓諸々の設定↓ ----------- */」というコメントアウトで囲まれた箇所ですね。

〇スタイルの根本的な部分を変更したい場合

cssが分かる方なら、「coding-support.js」の96～189行目付近のスタイルをいじっていけばなんとかなります。 状況に応じて変更してください。
そういうの前提のjsなので。

ちなみに通常のcssなら

background-color: #ddd;

という感じで、単語をハイフンで繋ぎますが、jsの場合は「backgroundColor」という風に、キャメルケースで入力する必要があり、そこだけ気を付けていれば大丈夫なはずです。

キャメルケースとは、単語の間をハイフン（-）で繋がず、代わりに単語の頭文字を大文字にする記法です。