SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

特集記事(PR)

HTML/CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント

  • このエントリーをはてなブックマークに追加

 HTML/CSSコーディング作業の一部として、エンジニアの時間をとり続けてきた作業があります。Photoshopでスライスを切って書き出したり、その大きさや位置を測る作業です。僕は、21世紀にもなってこの決まりきった作業をコンピューターがやってくれないのはなぜだろうと思っていました。アドビが昨年発表した「Creative Cloud Extract(エクストラクト)」は、そんな状況を一気に変える可能性のあるクラウドサービスです。もう、いちいち画像を切り出したり、Photoshopで大きさを測ったりする必要はありません。Creative Cloudの有償版の契約がなくても使えるこのクラウドサービスは、コーディング作業の面倒な部分を支援してくれます。

  • このエントリーをはてなブックマークに追加

 この記事ではこの未来のコーディングを体験するために、デザイナーにどんなことに注意してPSDファイルを作ってもらえばよいか、詳しくご紹介します。

PSDファイルを受け取ったエンジニアの憂鬱な作業

 HTML/CSSコーディングに取り掛かる前に行う作業はいつも同じです。

 まず、Photoshopでスライスを切って画像を書き出します。

 スライスを使わずにレイヤーを新規ファイルに複製しトリミングして保存、という方法もよく使われます。またPhotoshop CCの2014年10月バージョンからは、「アセットを抽出」する機能がつき、わざわざスライスを切らなくてもレイヤーごとに画像を書き出せるようになりました。

 いずれにしても、エンジニアにとってのコーディングという作業は、慣れないPhotoshopを使ってレイヤーの海に潜り、ドロップシャドウが途中で切れないように注意しながら範囲を決め、ファイル名を付けつけながら画像を切り出す作業からはじまります。デザイナーが残業続きなら、作りっぱなしの「レイヤー32」などと格闘することもあるでしょう。

 いよいよ本業のコーディングという段階になってもPhotoshopは手放せません。オブジェクトの大きさや余白、文字の大きさや行間を測りつつCSSに反映させていく作業は、いつも単調で膨大です。

CSSコーディングが劇的に変わるCreative Cloud Extract

 そんな作業を楽にしてくれるクラウドサービスが「Creative Cloud Extract(エクストラクト)」です。もう、いちいち画像を切り出したり、大きさを測ったりする必要はありません。

 使い方は簡単です。まず、PSDファイルをCreative Cloudにアップロードします。

PSDファイルをブラウザにドラッグしてアップロード
PSDファイルをブラウザにドラッグしてアップロード

 アップロードが終わったらPSDファイルを開きます。もうPSDファイルのレイヤー構造がブラウザ上に表示されています。

CSSを自動生成

 レイヤーを選択すると、なんとCSSが表示されます。幅や高さだけでなく、枠線の幅まで表示されていますね。

2つの要素を選ぶだけの計測

 2つの要素を選択すると、相対的な位置関係が数値で表示されます。もうPhotoshopでいちいち計測する必要はありません。

測定したい2つの要素を、Shiftキーを押しながら選択する
測定したい2つの要素を、Shiftキーを押しながら選択する

カラーピッカーで色情報を取得

 PSDファイルで使われている主要な色やグラデーションは、すでにパレットとして並んでいます。クリックすると、その色がどこで使われているか表示されます。カラーピッカーツールでPSDファイルの任意の場所から色を拾うこともできます。

画像切り出しはファイル名を決めるだけ

 画像の切り出しは、ファイル名を決めてフォーマットを選択するだけです。画質や拡大率も設定できます。これだけの操作で画像がクラウド上に切り出されます。

コードエディターからも利用可能

 とても便利ですぐ使えそうな機能ですが、ブラウザとコードエディターを行き来するのが大変そうですね。

 オープンソースのコードエディター「Brackets」を使えば、上にコードエディター、下にPSDファイルを開いた状態でExtractサービスを使えます。

PSDファイルの情報が、コードヒントとして表示される
PSDファイルの情報が、コードヒントとして表示される

Creative Cloud有償契約なしで利用できる

 なんといっても凄いのは、月何千円という支払いが必要なCreative Cloudの有償契約がなくてもExtractサービスを利用できるということです。Extractサービスを利用できる期間や機能に制限はありません。Creative Cloudのアカウントを作るだけで使えます。

次のページ
デザイナーに注意してもらう10のポイント

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
特集記事連載記事一覧

もっと読む

この記事の著者

石川 修一(イシカワ シュウイチ)

株式会社ニューロマジック 執行役員早稲田大学大学院 基幹理工学研究科 招聘研究員慶應義塾大学大学院メディアデザイン研究科附属メディアデザイン研究所 リサーチャーデザイン、フロントエンドからクラウドまで、新しいことに興味がありすぎて時間が足りない、Web制作会社の制作部門統括。Adobeインフルエンサー。九州...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8493 2015/02/26 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング