ブログ運営主について

ぱっかんのツイート

デザイン通りにコーディングできる補助jsを作ったよ

本日のおすすめ記事

足元が寒過ぎるので「デスクヒーター」というものを買ってみた。

家でPC作業やゲームをしている時、足元が寒過ぎて「デスクヒーター」というものを導入しました。購入から2週間使い倒してみたのでレビュー...

だいたいの人におすすめの記事
この記事はたぶん 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(筆者のバンド)のオリジナル曲

本日のおすすめ記事

足元が寒過ぎるので「デスクヒーター」というものを買ってみた。

家でPC作業やゲームをしている時、足元が寒過ぎて「デスクヒーター」というものを導入しました。購入から2週間使い倒してみたのでレビュー...

だいたいの人におすすめの記事

コメントを残す

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

CAPTCHA


この記事をこねた人

名前:ぱっかん
「臆病なのに幸福度で言えばたぶん福岡でTOP3に入る」と自負してます。また、病みやすいのを良いことにあんまり頑張らずに生きてます。
幸せ。

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

目指せ1日30,000pv
【職業】web諸々
【趣味】考えをまとめる
【好きなファッション】ウォーキングデッドに出てきそうな奴
【好きな食べ物】ネオソフト・きなこご飯
【好きなダメージの与え方】お前の姉ちゃんの四股名なんだっけ?
【ストレングスファインダーの結果】着想/最上志向/内省/共感性/運命思考

音源公開してます。
youtubeチャンネル