20180916_103430_1


※このスクリプトはどのマガジンにも含まれない単品販売商品となります。

20180917_115603_1

20180917_115603_3

■全自動スクリプトのレスポンシブ対応です!

 おつかれさまです。@gorolibです。

 先日発表しました、いきなりHTML(イラストレーターから本格HTML&CSSを全自動で生成するスクリプト)については、大変好評でして、

参考:イラストレーターから本格HTML&CSSを全自動で生成するスクリプト(macOS専用)

調子に乗って「レスポンシブ版もほしい!」というリクエストに応えました!どうぞご利用ください!

 コンセプトは、いきなりHTMLと同じです。Illustratorからこのスクリプトを起動するだけで、スライスもコーディングも全自動で、html一式(index.html、css、画像イメージ)が生成されます。また、Windowsの開発環境がないものですから、こちらも当面macOS専用とさせてください。


■仕上がりはどんな感じなの?

 仕上がりについては、こちらのページでご確認ください。このスクリプトで生成されたものです(手を加えていません)。ブラウザの幅を変えてご確認ください。


スクリーンショット 2018-09-15 16.14.56


 自動生成されたhtml一式(index.html、css、画像イメージ)、および使用したaiデータはダウンロードできます。htmlとcssのコードもすべて公開しています。
(ダウンロードはこちらから)
https://www.dropbox.com/s/c4xeofqlzbj2riv/20180915_194918.zip?dl=1


(追記20180923)
IllustratorのバージョンがCS6の方はこちらから

■どうやって作ればいいの?

 まずは、Illustratorでプロトタイプを設計してください。そのaiデータを開いた状態で、このスクリプトを起動し、保存先を指定すると、レスポンシブデザインのhtml一式(index.html、cssおよびイメージ)が全自動で生成されます。

スクリーンショット 2018-09-16 10.43.13

スクリーンショット 2018-09-16 10.44.07

スクリーンショット 2018-09-16 10.44.18


 指定した場所に、Illustratorのファイル名でフォルダが作成されますので、バラバラにならずに安心です。

スクリーンショット 2018-09-16 10.48.19


 アートボードの幅が「max-width」となります。基本的には「左および上」とのスキマを参照しながら、コードを生成していきますので、ベースは「margin-left」と「margin-top」による構成です。

スクリーンショット 2018-09-16 10.48.55


 水平中央のオブジェクト(オブジェクトの水平中央=アートボードの水平中央)は、常に中央揃えの扱いとしています。

 また、オブジェクト幅=アートボード幅のものは、「object-fit: cover;」というスタイルで扱っています(高さ固定を併用)。サンプルでは、水色の画像と、フッターの屋号ですね。ブラウザの幅を縮めてご覧ください。

 これは、ブラウザの幅が「max-width」より小さくなると、中心の位置や高さはそのままに、画像の両端を切り落としながら縮んで行くものです。言葉ではわかりづらいので、実際にブラウザの幅を縮めてみてください。

スクリーンショット 2018-09-15 16.14.56

(こちらでお確かめください)


 オブジェクト幅=アートボード幅のものを、width 100%のまま縮めると、スマートフォンサイズではかなり小さくなってしまい、あまりいいことがありません。そのため今回は「object-fit: cover;」というスタイルを採用いたしました。


■あくまでもベースコードです

 念のための補足ですが、レスポンシブデザインの「こうあるべき」姿は、案件により異なります。このスクリプトでは、面倒なコーディング部分をカバーし、予想されるスタイルを割り当ててはいますが、このスクリプトの生成コードが納品物とはなり得ません。

 タイトルタグやメタデータ、キーワードを追記するのと同様に、調整はお願いいたします。

 前述の「object-fit: cover;」についても、お好みがあろうかと思いますので、調整をお願いいたします。

スクリーンショット 2018-09-16 10.50.45


■どういう順番でスライスしているの?

 さて、ここでIllustratorデータを、どういう順番でスライスしているのか説明します。

 レスポンシブデザインは、「どれを直前のオブジェクトとしているか」が肝となります。今回、スクリプトを作ってわかったのは、レスポンシブデザインは「横並びに弱い」ということです。

 例えば、サンプルのヘッダー部分。「GOROLIB DESIGN」はアートボードの左端を、「はやさはちから」は「GOROLIB DESIGN」の右端を参照しています。htmlでは、改行(改段?)する場合、divというタグを用いますが、どこでdivを入れるか、という問題があります。

スクリーンショット 2018-09-16 10.52.18


 今回のスクリプトでは、オブジェクトごとにdivタグを入れます。


■横並びの場合はグループ化してください

 今回のスクリプトでは、アクティブアートボードの上から順番にオブジェクトを参照します。

 グループオブジェクトの場合は、そのグループの1階層分だけを左から順番に参照します。サンプルでは、「GOROLIB DESIGN」から「Twitterのアイコン」までをグループ化しています。

 まとめると、サンプルでは上から順に次のようにオブジェクトを参照しています。

(1)ヘッダー部分(グループ化)
(2)写真の部分
(3)ごあいさつ
(4)本文
(5)お問い合わせ
(6)フッター

スクリーンショット 2018-09-16 10.56.24


 グループにすると、その直下の1階層分を拾います。1つの画像としてスライスしたい部分は、グループではなく、クリッピングマスクをかけてください。選択範囲にクリッピングマスクをかけるスクリプトが付録でついています。

 G389_PixelClip.jsx(付録2)…選択範囲にクリッピングマスクをつける
タイトルなし
■参照するオブジェクトとその扱い

 Illustratorデータから参照するオブジェクトと、その扱いについては以下のとおりです。

(1)テキストか?
(2)グループか?
(3)クリッピングマスクか?
(4)1〜3以外か?

 まとめてスライスしたいところをグループ化してしまうと、直下の1階層分を拾ってしまうので、前述のとおり、クリッピングマスクをかけてください。


■並び順の参照先は左か上か水平中央

 言わずもがなですが、htmlとは、HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の頭文字をとったものです。元々は、テキストをメインで扱う言語だったのですね(たぶん^ ^)。

 そして、このスクリプトを組んでわかったのは、htmlとは、基本は「上から詰めて行く」ものだということです。生成コードからわかることは、「margin-top(さっきのオブジェクトに対して上側にどのくらいのスキマ?)」というスタイルが頻出します。その上で「margin-left(さっきのオブジェクトに対して左側にどのくらいのスキマ?)」を使うのか、「margin: auto;(左右に等幅の余白=水平中央)」を使うのか、ということになっています。

スクリーンショット 2018-09-16 10.50.45


■ご利用における注意点

(1)校了データから別名保存した別データでご利用ください
 内部ではスライスするため、いくつかデータ変更をかけています。不測の事態をさけるため、このスクリプトを利用する際には、校了したデータ(もしくはそれに準ずるデータ)を別名保存したものでご利用ください。

(2)それぞれのオブジェクト名は自動連番です
 Illustratorの各オブジェクトから生成される要素は、自動連番です。

スクリーンショット 2018-09-16 11.05.44


(3)フォント指定はできません
 文字サイズは採用されますが、フォント指定はできません。デフォルトフォントが採用されます。


(4)本文にしたくないテキストはどうしたらいいの?
 本文にしたくないテキストは、アウトラインをかけるか、クリッピングマスクをかけてください。グループ化は、横並びのために直下の1階層分の横並びのために使っておりますので、クリッピングマスクでお願いいたします(スクリプト付録2)

タイトルなし
(5)URLリンクはオブジェクト名にセットしてください
 オブジェクト名がセットされているものは、html上でURLリンクとして採用します。Photoshopファイルのリンクなどは、オブジェクト名=Photoshopのファイル名となっている場合がありますので、ご注意ください。その場合は、オブジェクト名を消し去ってください(スクリプト付録1)

スクリーンショット 2018-09-11 15.31.18


(6)Illustratorからhtmlへの一方通行です
 Illustratorからhtmlへの一方通行です。生成されたhtmlからIllustratorデータを逆生成することはできません。


■ご購入いただいた方へのサポート

 いきなりHTMLと同様、コーディング現場の事情はさまざまでしょうから、ご購入いただいた方のリクエストには可能な限り、お応えします!(大きな仕様変更の場合は、要相談にて別途お見積もり)。


■今回のスクリプト情報


【スクリプト概要】
Illustratorから全自動でhtml+cssファイル一式を生成するスクリプトです(レスポンシブ対応)


【スクリプトファイル名】
G567_autoHTMLproResponsive.jsx(本体)
G566_setName.jsx(付録1)…URLリンクをつける
G389_PixelClip.jsx(付録2)…選択範囲にクリッピングマスクをつける

参考:超簡単スライス!Webデザイン用スクリプトの2本セットです


【使い方】
(1)対象となるアートボードをアクティブにします
(2)このスクリプトを起動します
(3)アクティブアートボード内の選択可能なオブジェクトをhtml化してデスクトップに出力します
(4)保存先を指定してください
(5)スライス(png)の解像度を選択してください(1x〜4x)←追記20180916

スクリーンショット 2018-09-16 14.46.29


※不測の事態を避けるため、校了データとは別名保存したデータにてご利用ください


【仕様】
(1)テキストはテキストとして扱います
(2)アウトラインがかかっているテキストはスライスしてイメージとして扱います
(3)横並びに処理したい部分はグループ化してください
(4)横並び以外でグループしたい部分は全体にクリッピングマスクをかけてください(付録2をお使いください)
(5)内部で「作業アートボードのすべての選択」を行いますので、オブジェクトロック、レイヤーロックされたオブジェクトは対象外です
(6)ごく小さいオブジェクトではスライスできない場合があります(その場で停止)。不測の事態を避けるため、校了データとは別のデータにてご利用ください


■付録1について(URLリンクをつける)
 オブジェクトをひとつ選択して、URLリンクを入力してください。
 機能としては、レイヤーパネル(サブレイヤー)の名前編集と同様です。

スクリーンショット 2018-09-11 15.31.18



■付録2について(選択範囲にクリッピングマスクをつける)
 クリッピングマスクをつけたい範囲を選択し、このスクリプトを起動してください。選択範囲にクリッピングマスクがかかります。
タイトルなし
お役に立てれば幸いです!ではでは出羽の海。


(追記20180916)
(1)スーパーバイザーの友人に指摘いただき、
・[word-wrap]プロパティを[overflow-wrap]プロパティに変更しました(CSS3からのようです)

(2)あと、自主回収しました!
・スライス(png)の解像度を選べるようにしました

スクリーンショット 2018-09-16 14.46.29

・CSSのソースでインデントがずれているところがあり修正しました!
─────

ダウンロード元、ファイル名は同じですので上書きしてください。


20180917_115603_1

20180917_115603_3