福岡散歩ブログ

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

本日のおすすめ記事

【75点】微かな物音で殺される「ザ・サイレンス 闇のハンター」評価と感想【Netflix】

Netflixオリジナル作品「ザ・サイレンス 闇のハンター」を鑑賞しました。 いつも通りネタバレ無し情報を書いた後にネタバレしていきます。...

この記事はたぶん 5 分で読めます。
ぱっかん
執筆者:ヘタレブロガーのぱっかん(@pakkan316

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

※以前「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”というスタイルで指定。もちろん各々で変更可能。

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

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

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

一応その対処の為に、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.js 21行目付近)
飽くまで作業補助用の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」という風に、キャメルケースで入力する必要があり、そこだけ気を付けていれば大丈夫なはずです。

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

まとめ

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

ソース全貌

 




Trash Area(筆者のバンド)のオリジナル曲

本日のおすすめ記事

【75点】微かな物音で殺される「ザ・サイレンス 闇のハンター」評価と感想【Netflix】

Netflixオリジナル作品「ザ・サイレンス 闇のハンター」を鑑賞しました。 いつも通りネタバレ無し情報を書いた後にネタバレしていきます。...

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この記事をこねた人

名前:ぱっかん
日常のクッソどうでもいいことが、鬼のように幸せに感じられる性格をしています。

なので思い切って「人生は映画だ」というテーマでブログを始めました(厳密には途中でそういうテーマに切り替えました)。
些細な毎日がどれだけ素晴らしいかを、いわゆる「引き寄せ系アラフォーブロガー」等とは違う路線で伝えられたらと思ってます。

「内省」という資質に優れており、それを活かした映画系の記事が得意。
→「当ブログ」と「ぱっかん」について

【職業】web諸々
【趣味】考えをまとめる・散歩・映画
【好きなファッション】ウォーキングデッドに出てきそうな奴
【好きな食べ物】ネオソフト・きなこご飯
【ストレングスファインダーの結果】着想/最上志向/内省/共感性/運命思考