カテゴリ: Webデザイン

このエントリーをはてなブックマークに追加 Share on Tumblr Clip to Evernote 編集





◆ #いきなりHTML 2(レスポンシブ対応)
なんと!スライスもコーディングも全自動!イラレからHTML+CSSへ一発出力します

◆ スクリプトで時短革命
デザイン業界にもRPAを!スクリプトはオーダーメイドがイイんです!

◆ 10倍ラクするIllustrator仕事術〜ベテランほど知らずに損してる効率化の新常識
イラレ使いにこれ1冊!ホントに10倍ラクできます




※このスクリプトは、スクリプト使い放題マガジン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


お役に立ちましたらツイートお願いします!




このサイトで配布しているイラストレーターのアクションやスクリプトファイルを無断で転載・配布・販売することを固く禁じます。ご紹介いただける際は必ずURLリンクにてお願いいたします。 このサイトで配布しているイラストレーターのアクションやスクリプトファイルの使用で、ファイルの破損やアプリケーションに不具合が発生した場合でも、責任は負いかねますのでご承知おきくださいませ。自己責任での使用をお願いいたします。

© 2017 GOROLIB DESIGN
Released under the MIT license.





このエントリーをはてなブックマークに追加 Share on Tumblr Clip to Evernote 編集





◆ #いきなりHTML 2(レスポンシブ対応)
なんと!スライスもコーディングも全自動!イラレからHTML+CSSへ一発出力します

◆ スクリプトで時短革命
デザイン業界にもRPAを!スクリプトはオーダーメイドがイイんです!

◆ 10倍ラクするIllustrator仕事術〜ベテランほど知らずに損してる効率化の新常識
イラレ使いにこれ1冊!ホントに10倍ラクできます




スクリーンショット 2018-09-23 13.06.17


■Chromeへのドラッグ&ドロップで開きます

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

 最近、ダウンロードしたhtmlファイル(index.html)が、ダブルクリックしてもGoogle Chromeで開かないという件で困りました。

 結論から言うと、Chromeへのドラッグ&ドロップで開きます。

 Web案件における校正や納品では、htmlファイル一式を圧縮して送付します。このとき、メール添付でもDropbox経由のダウンロードでも、解凍したindex.htmlのダブルクリックでブラウザで開かなかったのです。これには困りました。

 確認お願いいたします!と元気よくメールしたものの「開かないじゃないか!」では恥ずかしいですからね。

 macOSの環境設定「セキュリティとプライバシー」に関することかと思っていたのですが(ダウンロードしたhtmlファイルを開かない等)、ドラッグ&ドロップで開くので、そうでもないらしい(^_^;)

 ただし、「ひらかない!」というクレームは今まで一度もないので、私の端末固有の現象なのか、設定の問題なのか、それともみなさまドラッグ&ドロップなのか…

 原因がわからないのは気持ちわるいですが、思い出せなくても困るので、備忘録としてブログに残しておきます。

 お役に立てれば幸いです!


お役に立ちましたらツイートお願いします!




このサイトで配布しているイラストレーターのアクションやスクリプトファイルを無断で転載・配布・販売することを固く禁じます。ご紹介いただける際は必ずURLリンクにてお願いいたします。 このサイトで配布しているイラストレーターのアクションやスクリプトファイルの使用で、ファイルの破損やアプリケーションに不具合が発生した場合でも、責任は負いかねますのでご承知おきくださいませ。自己責任での使用をお願いいたします。

© 2017 GOROLIB DESIGN
Released under the MIT license.





このエントリーをはてなブックマークに追加 Share on Tumblr Clip to Evernote 編集





◆ #いきなりHTML 2(レスポンシブ対応)
なんと!スライスもコーディングも全自動!イラレからHTML+CSSへ一発出力します

◆ スクリプトで時短革命
デザイン業界にもRPAを!スクリプトはオーダーメイドがイイんです!

◆ 10倍ラクするIllustrator仕事術〜ベテランほど知らずに損してる効率化の新常識
イラレ使いにこれ1冊!ホントに10倍ラクできます




20180922_151657_1


■DTPの人に心からお伝えしたいです

 おつかれさまです。GOROLIB DESIGNの渋谷吾郎です。

 新作をリリースいたしました!DTP出身の私が、やっとWebデザインを請け負うことができるようになり、「はじめてのWebデザインでは、こういうところがわからないのだ!」という部分をピンポイントで説明できるようになりました。

 つまり、かゆいところに「ボリボリと完全に手が届く!」ようになったのです。

 そこで、DTPの人に心からお伝えしたく、Webデザインのための説明書を書き下ろしました。お役に立てれば幸いです!


20180917_193644_2


この本はお得な「ぜんぶ入りマガジン」に入っています
20181117_130325_1


お役に立ちましたらツイートお願いします!




このサイトで配布しているイラストレーターのアクションやスクリプトファイルを無断で転載・配布・販売することを固く禁じます。ご紹介いただける際は必ずURLリンクにてお願いいたします。 このサイトで配布しているイラストレーターのアクションやスクリプトファイルの使用で、ファイルの破損やアプリケーションに不具合が発生した場合でも、責任は負いかねますのでご承知おきくださいませ。自己責任での使用をお願いいたします。

© 2017 GOROLIB DESIGN
Released under the MIT license.





↑このページのトップヘ