デザイナーでも超簡単！Bracketsで楽々コーディング 第2回 Brackets+Extractにコードを書いてもらって楽する方法
デザイナーでも超簡単！Bracketsで楽々コーディング
前回はBracketsの基本的な機能を紹介しました。今回は本格的なコーディングに入る前に、BracketsにExtractを組み合わせて簡単なコーディングを体験しましょう。。
ExtractはPhotoshopを使わなくてもPSDから画像アセットや要素の幅などのプロパティを抽出（Extractできる機能です。これまでだと、デザインが完成したら仕様書にしたがってPhotoshop内でスライスをしたり書き出しする作業が必要でした。Extractを使うとこのような作業をコーディング時に行えるようになります。
今回はExtractの紹介がてら、サンプルのPSDファイルを用いてCSSを書いてみることにします。
Extactを利用する
ベースとなる部分だけ書いたHTMLファイルを用意しました 。Bracketsでサンプルファイルのフォルダを開いてから、index.htmlを開いて作業をしてください。
completeフォルダには完成品が入っていますから、困ったらそちらも参考にしてください。
Extractを利用するには、表示メニューのExract for Bracketsを表示という項目を選択（Ctrl+Alt+X)するか、画面右端にあるExtractアイコンをクリックします。
アイコンは画面右端に表示されている
表示メニューの一番下にExtractのメニューが表示される
Extractを利用するにはAdobe IDが必要です。これはオンラインストレージに一旦ファイルを置く必要があるためです。
ここでAdobe IDを入力してログインすると、Creative Cloudにアップロードしているファイルの一覧が表示されます。解析したいPSDファイルが予めアップロードされているならそのファイルを選択するだけです。初めてサインインした人、使いたいファイルが一覧に無い人は、ウインドウ内にPSDをドラッグアンドドロップするとアップロードが開始されます。
PSDファイルはドラッグして追加することもできる
ファイルを選択すると少しの間ファイルを解析する待ち時間が発生します。解析が完了すると、いよいよExtractの機能を利用することができます。
読み込みが完了すると、レイヤー構造も表示される。レイヤーは表示非表示を切り替えられる。
今回はブランド情報サイトのブランド紹介ページを想定したサンプルを用意しました。
それでは実際にコードを生成（ほとんど書かないのです！）していきましょう。
画像を取得する
まず、PSDファイルのレイヤーをアセットとして配置してみましょう。ここでは、ページの見出しが画像で出来ていますので、実際に書き出しをしてhtml上に配置してみることにします。
サンプルコードでは12行目、h1タグの間にカーソルを置き、Extractウインドウではタイトル部分の画像を選択します。画像のタグはimgですから、この状態で<im と入力しましょう。すると補完されます。続いてファイルを示す要素、src=を入力してください。
選択内容に応じて、コードヒントに必要な情報が表示される
Extractで選択しているアセットがサムネイル表示されたら、そのままEnterキーで確定します。すると予めレイヤーに入っていた名前がファイル名としてsrc属性の値に適用されています。書き出したいパス名に合わせてファイル名や保存先のディレクトリを書き換えましょう。</h1>の手前にカーソルを置き、>を入力して補完を完了させると、画像ファイルが生成されます。
これでExtractからアセットの書き出され、指定したディレクトリに保存されました。
14行目のh2要素にも同様に画像を書き出ししておきましょう。
幅や高さを取得する
Extractでは選択した要素の幅や高さを取得することができます。また、複数の要素を選択すると、その相対的な位置を数値で取得することもできます。
これらを利用してCSSのレイアウトを進めてみましょう。
今回のデザインでは、メインとなる要素がセンタリングされています。まずは、その要素の横幅を取得してみましょう。Extractウインドウ内で要素を選択します。
WidthはW、HeightはHを略して表示されている
メインとなる要素の横幅は900pxでした。htmlファイルの11行目でクイック編集（⌘＋E/Ctrl+E）を行い、styles.cssにwrapperクラスのスタイルを書いていきましょう。
表示されたwrapperクラスはコンテンツ全体を囲むdiv要素に設定されているクラスです。ここに横幅を設定すると、コンテンツ全体の幅が設定されることになります。
幅はwidthで指定しますから、widthを書いてみましょう。
ヒントによっては最初の数文字で補完が可能
Extractで要素を選択している状態のため、widthの値もExtractから取得してヒントを出してくれます。候補からExtractマークのあるwidth:900px;を選択してEnterキーで確定します。
デザインではメインとなる900pxの要素が中央に配置されていますので、同じようにセンタリングしましょう。
この場合、wrapperクラスにmargin:auto;と書くだけでセンタリングされます。コードヒントを活用して入力してください。
Extractでは複数の要素を選択すると要素間の距離を表示してくれます。
テキストのタイトルとその外側の枠の間は何ピクセルに設定されているでしょうか？2つの要素を選択して調べてみたいと思います。Shiftキーを押しながら選択することで、複数選択することができます。
マージンや余白（padding）を調べるときは複数選択を活用する
得られた数値はクリックするとそのままコピーできます。今回は内側の要素の余白に調べた値を入力しましょう。
13行目のarticleタグにカーソルを置いてクイック編集をひらき、コードを入力します。paddingは余白を意味し、-topは上端、-leftと-rightは左右の余白を表しています。それぞれ、Extractから数値を持ってくることができます。
article {
width: 900px;
padding-top: 29px;
padding-left: 30px;
padding-right: 30px;
}
ここで注意したいことは、余白を追加した分ブラウザに表示される幅が広がるということです。上の記述のままではarticle要素は幅が960pxとなりますから、レイアウトの崩れが発生してしまいます。そこで、widthの値は900pxから左右の30pxをそれぞれ引いた数、840pxに修正しておきましょう。
article {
width: 840px;
padding-top: 29px;
padding-left: 30px;
padding-right: 30px;
}
簡単なレイアウトができてきました。
このように、スタイルシートでは余白は実際のサイズに内包して扱われています。やや面倒だと感じるのですが、widthは一番外側の大きさであると理解すれば、複雑なレイアウトの計算もやりやすくなります。
テキストを抽出する
Extractではテキストを抽出することもできます。PSD内に文章をデザインして、これをコードに落としこむときは、別途PSDや仕様書から文章をコピーペーストする必要がありましたが、Extractでは直接テキストを取得することができます。別途PSDや仕様書から文章をコピー&ペーストする必要がありません。
コピーしたいテキストを選択して、「テキストをコピー」という部分をクリックするだけです。
テキストのコピーは「テキストをコピー」をクリックするだけだ
テキストがコピーできたら、段落ごとにpタグで囲み、改行したい箇所にbrタグを入れて整形しておきます。
ここまで、うまく行っているでしょうか？ライブプレビューで状態を確認してみましょう。
プレビューした状態。メインのコンテンツがずれているように見えるが、これから枠線をいれるのでこのまま進める
色を抽出する
このテキストには黒以外の色が設定されているようです。Extractでは色情報を抽出することができます。
テキストを選択した状態で、テキストの色を取得してみましょう。colorと入力するとコードヒントが表示されます。
一見黒に見えてもコードはそうでないことも多い
スタイルシートをコピーする
Extractでは単色ではなくグラデーションの情報を抽出することもできます。
article要素に背景を設定してみましょう。articleの枠を選択した状態でクイック編集をひらき、スタイルの最後の行にbackgroundと入力します。
ベンダープレフィックスも一回で入力することができる
幾つかExtractマークのあるヒントが表示されました。
一番上はグラデーションの抽出。2番目もグラデーションの抽出ですが、こちらには-vendor-が追加されています。これはベンダープレフィックスと呼ばれるもので、ブラウザ個別の実装に対応するために使用されます。ベンダープレフィックスは一つ一つ書くのが面倒ですから、是非活用したい機能です。今回はこのベンダープレフィックスがあるものを選択しました。
ヒントの3番目はグラデーションを画像として書き出すものです。
続いてボーダーのスタイルを指定しましょう。Extractでは、角丸のボーダーラインの半径も取得できます。
borderと入力すると、border-radiusという情報が表示されました。
articleの最後にボーダーのスタイル
border: solid 1px #ddd;
を追加します。
ほとんど手書きせずここまでのコードがExtractを利用して書くことができた
手書きするとちょっと大変そうなcssでしたが、Extractを利用することで簡単に入力することができました。
仕上げる
ページの制作はまだ残っています。あとはフッターを作り、h1,h2のマージンを調整するだけですが、これはご自身で挑戦してみてください。完成品のhtmlを参考にしつつ、Extractを使って画像とテキストを書き出ししてみましょう。
Extractを利用すると、デザイナーはスライス作業から開放され、コーダーはスライスが完了するのを待つ必要がなくなります。
保存先もコーディング時に指定できますから、あるはずの場所にファイルが無いといった問題も起こりません。さらに、コーダーは必要な情報を必要なときに取得できるので、デザイナーを探して作業を中断することなく自由にコーディングを進められます。
Extractはもともとブラウザ内で操作できるサービスでした。そのため、Bracketsからアップロードしたファイルブラウザ版のExtractからも利用できます。ブラウザ版では、フォントの種類や色情報などが一覧できるようになっています。
また、Extract for Bracketsはまだベータ版でまれに動作が不安定になることがあり、うまく動かない場合はブラウザ版でフォローをするという使い方もできます。
これでBracketsとExtractの基本的な操作方法の紹介は完了です。次回からはいよいよ制作の現場で遭遇しうるシチュエーションで、Bracketsを用いて作業をすることにしましょう。