※このスクリプトは、スクリプト使い放題マガジン2(初月無料)に含まれています

参考:スクリプト使い放題マガジン2(月額)もごひいきに(初月無料です)

※このスクリプトは部品としてのHTML+CSS生成ですので、そのままではブラウザ表示できません。あらかじめご了承ください。

■選択オブジェクトから差分を生成します
スクリーンショット 2018-09-24 11.12.09

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

 先日公開した「いきなりHTML2」というスクリプトですが、おかげさまで大好評をいただいております。

参考:#いきなりHTML 2(レスポンシブ対応)イラレから本格HTML+CSSを全自動生成

 この開発の裏には、優秀なスーバーバイザー(後輩くん)がいるのですが、当初から彼とは、

 修正対応をどうしようか?

 という話題で持ちきりでした。いきなりHTMLは一方通行で、いつでも新規作成ですが、お客様の業務的に商品やサービスの入れ替え(差分)による、修正対応は当然発生します。

 いつでも「いきなりHTML」で全取り換えでもよいのですが、やはり何かしら手は入れているはず。

 そこで、Illustratorで選択されたオブジェクトのみ、部品的にHTML+CSSを生成するスクリプトを作成しましたので、公開いたします。生成したHTML+CSSのサンプルはこちらから。


20180917_193644_3


■テキストかイメージか

 今回のスクリプトも「いきなりHTML」と同様に、テキストかイメージかで判断しています。イメージにはリンクをつけることも可能です。その際は、オブジェクトの名前にURLリンクを入れておいてください(レイヤーパネルのサブレイヤーです)。



スクリーンショット 2018-09-24 10.55.33

■今回のスクリプト情報
スクリーンショット 2018-09-24 11.11.49

スクリーンショット 2018-09-24 11.12.04

スクリーンショット 2018-09-24 11.12.09

スクリーンショット 2018-09-24 11.12.14



【スクリプト概要】
Illustratorの選択オブジェクトをHTML+CSSの部品として生成します


【スクリプトファイル名】
G570_autoHTMLparts.jsx


【使い方】
(1)対象となるオブジェクトを選択します
(2)このスクリプトを起動して、保存先を選択します

スクリーンショット 2018-09-24 11.12.04

(3)class名の開始番号を入力します
(4)スライスデータのpng解像度を入力します

スクリーンショット 2018-09-24 11.12.09


(5)選択オブジェクトのHTML+CSSが部品として生成されます
スクリーンショット 2018-09-24 10.59.39



【仕様】
(1)Illustratorのファイル名をフォルダ名としてその直下に作成します
(2)index.htmlが作成されます
(3)cssフォルダおよびstyle.cssが作成されます
(4)imgフォルダおよびスライスデータ(pngファイル)が作成されます

スクリーンショット 2018-09-24 10.59.39

【HTML】
(1)テキストは<p>、それ以外を<img>として生成します
(2)class名は、選択オブジェクトの左上から順に、自動採番です
 (p + アートボード番号 + 3桁の数字)…例:p1003.png
(3)3桁の数字は、入力されたclass名の開始番号から連番となります
(4)オブジェクトに名前のある<img>には、その名前で外部リンクをつけます(<a href〜)
(5)テキストの改行コードは</br>で変換します


【CSS】
(1)選択オブジェクトの自動採番されたclass名で「ガワのみ」出力します


【スライスデータ】
(1)スライスデータは、pngファイル固定です
(2)スライスデータのpng解像度は、x1〜x4まで選択可能です


【ご注意】
※このスクリプトは部品としてのHTML+CSS生成ですので、そのままではブラウザ表示できません。あらかじめご了承ください。


お役に立てれば幸いです!ではでは出羽の海。


20180917_115603_1