f:id:otiai10:20150208095902p:plain

ウェブページをつくるにあたってデザイナーさんから上がってくるデザインカンプはPhotoshopのPSD形式だったりする。これとにらめっこしながらHTML&CSSをイチから書いて、都度リロードしたり、画面の大きさを変えてレスポンシブのチェックをするのは、骨が折れる仕事です。

必要なもの

Chromeブラウザ（ライブプレビューのため）
Adobeアカウント（PSDファイルインポートのため）
そしてBrackets ↓

Brackets エディタ

あまり多くを望まず、それっぽいものでいいので、PSDからHTMLをつくれるといいなぁ、と思っていたので、知り合いのデザイナーに聞いたらいい感じのものを教えてくれた。

Brackets - A modern, open source code editor that understands web design.

Web制作用のエディター。さすがWebデザイナーのためのエディタっぽく、いちいちtransition animationとかあってオシャレである。

新しいプロジェクトの作成

ついでなので、レスポンシブ対策のため、HTML5 Boilerplateをひな形にプロジェクトをはじめてみる。

上記のページからDownload
落ちてきたzipを展開すれば、これがすでにひな形なので
mv ~/Downloads/html5-boilerplate ~/your/path/project_name

今回はプロジェクト名をtainakaにしました

ライブプレビュー機能がある

[ファイル] → [フォルダーを開く] → で、さっき作ったtainakaフォルダを選択して、src/index.htmlをクリックすると以下のような画面になる。ここで編集できる。

で、これを編集・保存のたびにブラウザリロードとかアホみたいにめんどくさいので、右上のイナズマっぽいものをクリックすると、Chromeが立ち上がり、編集すると自動でプレビューが更新されるようにできる。

f:id:otiai10:20150207142405p:plain

PSDファイルをアップロードする

右上のダウンロードっぽいものをクリックすると、Adobe Creative Cloud のアカウントを求められたりして、これを紐づけると、手元のPSDをCCに上げたり、自分のCCにあるPSDをBracketsエディタ内で表示・解析できるようになる。

f:id:otiai10:20150207142826p:plain

解析だけならCC上でもできるけど、嬉しいのは補完とアセットダウンロードのようだ。↓

PSDからCSSを取得してあてる

具体的な使い方はこれがわかりやすい

Brackets: From Design Comp to Code - YouTube

Bracketsがやるのは、PSDファイルから各レイヤーのCSSを抽出したり、アセットを自動でローカルにダウンロードしたりするだけであって、HTMLの自動生成は行わない。つまり、HTMLでのマークアップをある程度終わらせてから、PSDと向き合ったほうがいいっぽい。あるいは、マークアップを想像しつつセレクタを定義しつつ、CSSを先に書いちゃう？

わたしもやってみる。

f:id:otiai10:20150208095902p:plain