【ミスを減らして効率化】デザイン通りにコーディングできる自作ツール（coding-support.js）を公開

コーディングする時に、「デザイン通りに組み上げる」という当然のことが中々面倒です。
そこで、「コーディングしながら、簡単にデザイン画像と照らし合わせたり、ガイドラインを表示させるプラグイン」を作りました。

※以前「HTMLコーディング時にガイドラインを表示するjs」を作りましたが、そのレベルアップバージョンです。

まずはdemoをご覧ください。

demoページ

画面右側のボタンを押すと表示切替できます。
cssやhtmlソースなども全てjsに入れ込んでいるので少し長いですが、おかげでhtmlやcssファイルをいじらずに導入できます。

作業完了後、納品前にはちゃんと取り外しておく必要があるので、「最後にjsファイルを消すだけ」という手間の無さにこだわりました。

以下、使い方、簡単な説明です。

●こんなことが出来る

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

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

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

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

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

〇画面操作

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

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

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

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

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

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

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

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

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

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

●使い方（導入方法）

①下記ダウンロードページへアクセスし、「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」という風に、キャメルケースで入力する必要があり、そこだけ気を付けていれば大丈夫なはずです。

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

まとめ

もし改善点、ご要望があればコメントください。
jsはまだまだなので、勉強がてら頑張ります。

ソース全貌