20180912_163747_1


2018年9月末までキャンペーン中!
通常価格4,980円のところ3,980円で発売中です!

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

20180917_115603_1

20180917_115603_2


■面倒なコーディングが数秒で(!)完了します

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


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


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

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

 以前から構想していた「イラストレーターから本格HTML&CSSを全自動で生成するスクリプト」が完成しましたので、ご報告いたします。

「どうしてIllustratorでせっかくきれいに作ったプロトタイプを、わざわざバラバラに(スライス)して、コーティングせにゃならんのか!」という長年の不満が解消しました!開発はご面倒さまでしたが、便利な道具が作れたという思いです。

 Windowsの開発環境がないものですから、当面macOS専用とさせてください。


■自動スライス自動コーディング(たったそれだけ!)

 このスクリプトは、Illustratorでのプロトタイプ設計を忠実に生かします。

 スライスもコーディングもすべて自動です。Illustrator上でこのスクリプトを起動すると、index.html、cssフォルダにstyle.css、imgフォルダにスライス画像が格納されます。

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

その後、index.htmlをブラウザで確認しておわりです。たったそれだけです。


■URLリンクを貼ることもできます(付録スクリプトあり)

 もちろん、URLリンクを貼ることも可能です。オブジェクトの名前にURLをセットしてください。オブジェクトの名前はレイヤーパネル(サブレイヤー)で確認できます。

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

 ただし、このレイヤーパネルのオペレーションも若干面倒なので、今回は、オブジェクトの名前をセットするスクリプト(G566_setName.jsx)も付録で付けました!


■コーダーさんにラクしてもらおう^ ^

 このスクリプトでの生成htmlは、そのままでももちろん使えますが、メタデータを加えたり、タイトルタグを直したりと「どうせ後で手を加えるだろう」という方に向いています。私もコーディングは苦手なので、これからコーダーの方とコンビを組む予定ですが、その方にラクをしてもらうためのスクリプトといっても過言ではありません^ ^


■ランディングページデザインに向いています

 このスクリプトは、アートボード単位でhtml一式を生成しますので、ランディングページデザインに向いています。ただ、マルチアートボードの場合でも、スライス名(要素の連番)はアートボードごとに変えていますので、複数ページの製造にもお役に立てると思います。


■作成サンプルを公開いたします

 とはいえ「その、あれや!コードの細かい部分はどうなっとるんや!」という方は当然いらっしゃるでしょうから、このスクリプトで作成されたhtml一式と、元のIllustratorファイルを無料公開いたします。

サンプルのaiデータとhtml+cssのダウンロードはこちらから

 ご購入を検討されている方は、作成サンプルをご確認いただいた上で、下記の注意点をよくお読みくださいませ。

 なお、サンプルでのスクリプト処理時間は3〜4秒でした。ちなみにアートボードの高さが13408pxのランディングページでは、20秒ほどかかりました。それでも全自動ですからラクラクではあります。
スクリーンショット 2018-09-11 14.47.22


■ご利用における注意点

(1)macOS専用です
 このスクリプトはmacOS専用といたします。当方、Windowsの開発環境がないものですから、検証済みであるmacOS専用とさせてください。

(2)相対座標内での絶対座標です
 Illustratorでのプロトタイプ設計は固定的です。その位置関係を表現するために、ページ幅は可変的、ページ内部は固定的な設定にしています。以下を参照ください。作成サンプルに含まれるcssの一部です。
スクリーンショット 2018-09-11 15.40.52


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

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

(5)レスポンシブデザインには向きません
 前項のとおり、相対座標内での絶対座標ですので、レスポンシブデザインには向きません。参考までに、当方では、デスクトップ用とスマートフォン用の2本立てで、アクセスデバイスによって切り替える設定をよく使います(Adobe Museがそうだったので)。レスポンシブデザイン沼に、わざわざ足を突っ込まないようにしています。

(6)フォント指定はできません
 デフォルトフォントのみとなります。スクリプト内部の処理としては「テキストかそれ以外」という分類にしています。
 テキストでしたら本文扱い、テキスト以外はpng出力としています。
(後述)font-sizeタグに対応しました(20180914)


(7)本文にしたくないテキストは?
 そのため、本文にしたくないテキストは、アウトラインをかけるか、グループ化してください。背景に塗りがある場合は、背景もろともグループ化すると便利です。
(後述)font-sizeタグに対応しました(20180914)


(8)オブジェクト名がセットされているオブジェクトは?
 Photoshopファイルのリンクなど(ファイル名)、あらかじめ名前がセットされているオブジェクトも存在します。その場合は、オブジェクト名を消し去ってください。付録のスクリプトが使えます。


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


■ご購入いただいた方へ

 コーディング現場の事情はさまざまでしょうから、ご購入いただいた方に向けて、可能な限り、リクエストにお応えしてまいります!(大きな仕様変更の場合は、別途お見積もり…となることもございますので、あらかじめご了承ください)。コメント欄にいただければと思います。


■今回のスクリプト情報


【スクリプト概要】
Illustratorから全自動でhtml+cssファイル一式を生成するスクリプトです


【スクリプトファイル名】
G564_autoHTMLpro.jsx
G566_setName.jsx(これはURLリンクをつけるための付録スクリプトです)


【使い方】
(1)対象となるアートボードをアクティブにします
(2)このスクリプトを起動します
(3)アクティブアートボード内の選択可能なオブジェクトをhtml化してデスクトップに出力します

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


【仕様】
(1)テキストかテキスト以外で処理を分けています
(2)テキストは本文とお考えください。フォント指定はできません
(3)テキスト以外はアウトラインをかけるか、グループ化してください
(4)内部で「作業アートボードのすべての選択」を行いますので、オブジェクトロック、レイヤーロックされたオブジェクトは対象外です
(5)ごく小さいオブジェクトではスライスできない場合があります(その場で停止)。不測の事態を避けるため、校了データとは別のデータにてご利用ください
(6)body の width は、アートボード幅です


■URLリンクをつけるための付録スクリプトについて

 オブジェクトをひとつ選択して、URLリンクを入力してください。すでに名前がついている場合は、その内容が表示されます。消去して保管することも可能です。
 レイヤーパネル(サブレイヤー)で名前編集するのと同じですが、便利ですのでよろしければお使いください。

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


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


(追記20180914)
font-sizeタグに対応しました。フォントの指定はできません(デフォルトフォント)が、サイズはremで対応しました。
テキスト位置のY座標については完全解明できていませんが、(行送り+サイズ)の半分だけ、Illustratorでの座標からずらすとぴったりのようです。エリア内文字はwidth指定あり、ポイント文字はwidth指定なしです。


サンプルのaiデータとhtml+cssのダウンロードはこちらから



■ダウンロードはこちらから

20180917_115603_1

20180917_115603_2