■面倒な設定なし!Webコーダーさんもハッピー(CS6以降でどうぞ)

31
(バージョンはCS6以降でご利用ください)
20180917_193644_4


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

唐突ですが、Illustrator上で寸法線をサクッと入れるスクリプトを作ってみました。

寸法を入れるようなデザイン案件はまれかと思いますが、Webデザインでカンプに寸法を入れて、Webコーダーさんに渡すことはよくあると思います。

実はIllustratorで寸法を入れるスクリプトやプラグインは「何をいまさらww」なシロモノであり、すでに様々なすばらしいツールが公開されております。


「何をいまさら」なのですが、そこを根底から見直すのがこのブログのいいところ(自分で^ ^)


■寸法ってほんと面倒です^ ^;;
(クリックで拡大します)
54
大きさや間隔を表現し、そしてそれを人に伝えるために、寸法とは本当に重要な要素です。

各種CADソフトは寸法を入れる機能が充実していますが、Illustratorはそうでもない(というか標準機能には何にもないww)。

いえ何もなくていいんです、用がないから。でもたまに用がある(どっちや!)

じゃあ、わかりました、と寸法を描こうとすると、これがまたホントに心から面倒。分解しちゃえば何のことはない「線と数字の組み合わせ」なのですが、それを並べたり、揃えたり、アンカーポイントやパスに合わせたり、選択がセンシティブだったり(文字を掴もうとしたら線だったww)、ちょっとズレたら直すのが大変など、イヤイヤ要素満載なのです。

そこで撫でるように寸法を入れるスクリプトを作った次第です。


■「撫でるように」とはこれいかに


前述のとおりIllustratorで寸法を入れるプラグインやスクリプトはいくつかありますが、その設定も面倒です。線色や線幅、文字サイズ。はたまた寸法線をオブジェクトの上にするか下にするか。

そんなんどうでもいいんじゃあ!(乱暴)

とまでは言いませんが、誤解を恐れずに言えば、寸法って人に伝わればいいんですね(描き方がまちまちだとわかりづらいのでJIS規格などもありますが)。

でも「デザイナー風情がつくる寸法はなってねぇぜ!」なんてこと言われたら悲しいので、なんとかしたかった。

「撫でるようにシリーズ」は今までもいくつかご提案していますが、

・右手(マウス)でオブジェクト選択
・左手でショートカットキー(スクリプト割り当て済みの)…繰り返し

これの繰り返しなのですが、このオペレーションがすこぶる気持ちいいのです。

今回のスクリプトもヘビロテ予定の方は、ぜひショートカットキーを割り当て、撫でるように使ってみてください。ちなみに寸法線の両側の●は線パネルの矢印21番です。

このためにスクリプトからアクションを呼び出していますので(それができるようになった)CS6以降でご利用ください。また矢印21番ゆえに、グループ選択ツールなどを使い矢印の種類を変更することはもちろん可能です。
(これ)

■上でも下でもいいのよ///


前述のとおり寸法(ひいては図面の描き方)というのは、厳密にはお作法があります。ですがこのスクリプトは「人に伝わればよいが、できればキレイにサクッと」をコンセプトにしていますので、若干、道は外れています。

例えば寸法補助線。寸法線の両脇にちょいちょいっと出ているやつ。このスクリプトでは寸法補助線は上下に同じ長さだけ短く飛び出させています。
19
これは対象の上下どちらにおいても「それなりに見栄えのする寸法」のための配慮です

一般的なお作法は、
・寸法を対象物の上に描くならば、寸法補助線は下向きに長くして、上ははみ出さないように、
・寸法を対象物の下に描くならば、寸法補助線は上向きに長くして、下ははみ出さないようにします
57
でもこれってさっきの「面倒な設定」の話に戻るのです。つまり

今から描く寸法線は上にするか、下にするか

を人間様が判断してからプラグインなりスクリプトなりを動かし、表現方法を変えなくてはいけないのです。

実は寸法線の面倒さの本質はここにあるのです。

申し遅れましたが、このスクリプト、選択オブジェクトの上下中央に寸法を引きます。その後、デザイン内容によって上下見やすい方に動かせばよいのです。どちら側においてもそれなりにきれいに見えるようデザインされた寸法です。


■「動かしやすさ」にもこだわっています


繰り返しになりますが、このスクリプトは「寸法線をオブジェクトの上にしても下にしても、それなりにきれいに見えるように」がコンセプトですので、動かしやすさにもこだわっています。

具体的には寸法線・寸法補助線・数字をひとつのユニットでグループ化しています。
これがバラバラだと、ひとたび動かしてしまったが最後、整列がたいへんになるのです。


■プレビュー境界にも対応しています。


当然ながらプレビュー境界のオンオフにも対応しています。

オンとオフの違いについては、説明よりも実際の画面がわかりやすいと思います(パスだけ選択状態にしています)

■グループオブジェクトには合計も(2段まで)


これはオマケサービスですが、グループ化されたオブジェクトはそれぞれの寸法・間隔と合計が2段で表示されるようになっています。
グループ階層は1回だけですので、ご承知おきくださいませ。



■図面の歴史をディスっているわけではありませんので…m(_ _)m


私も大学時代は建築学科でしたので、寸法についてアツくなってしまいましたが、決して図面の歴史をディスっているわけではありませんので、よしなに(笑)

Illustratorで作るような「人に上手に伝えるための寸法」は、もう少しライトでいいと思った次第です。お気をわるくされた方がいらしたらゴメンなさい。


■今回のスクリプト情報
(クリックで動きます)
【スクリプト概要】
選択されたオブジェクト、およびその間隔に寸法を入れることができます。

【スクリプトファイル名】(スクリプト2本とアクション1本のセットです)
G313_DimensionYoko.jsx(スクリプト:横方向に寸法を入れる)
G313_DimensionTate.jsx(スクリプト:縦方向に寸法を入れる)
G313_Dimension.aia(アクション)

【使い方】
(1)アクションを読み込んでください(初回のみ)
(2)寸法を入れたいオブジェクトを選択します
(3)このスクリプトを起動します


【仕様】
(1)選択オブジェクトおよびその間隔に寸法が入ります
(2)グループオブジェクトは2段で寸法が入ります
(3)寸法線の位置は選択オブジェクト全体の上下中央になります
(4)寸法線・寸法補助線・数字をひとつのユニットでグループ化しています
(5)数字は標準文字スタイルを採用しています
(6)寸法線・寸法補助線の太さは1ptです
(7)数字の単位は「環境設定>単位>一般」を参照しています。ここがピクセルならピクセル単位で、ミリならミリ単位で表示されます。
 
※「縦方向に寸法を入れる」スクリプトも同仕様です(結果はこんな感じ)
16


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


(追記170422)数字の桁数および四捨五入のカスタマイズについて
80行目の
TXT.contents = Math.round(VAL*1000)/1000
をいじってくださいませ。

Math.roundはカッコの中を四捨五入します。

javascriptはエクセル関数のように「桁数指定して四捨五入」ができないので、
1000倍して、四捨五入して、1000で割る
として小数第3位まで算出しています。

小数第2位までならば、100倍して、100で割る
小数第1位までならば、10倍して、10で割る
整数までならば、
TXT.contents = Math.round(VAL)
としてください。

ちなみに四捨五入ほか「丸め方」は以下のとおりです。いずれも整数桁までに丸めますので、桁数指定の方法はすべて前述と共通です。

Math.round…四捨五入
Math.ceil…切り上げ
Math.floor…切り捨て


(追記170910)
座標・幅・高さを表示するスクリプトを追加しました。
G390_ShowSize.jsx
このほうが便利ですね…失礼いたしました。すでに購入いただいた方は追加ダウンロードできます。
24
(追記170911)
上記G390_ShowSize.jsxについて、環境設定の単位に応じた数値が出るように変更いたしました。


(追記171226)
このスクリプトはWebコーディングでラクするためのものですが、座標はプリントアウトして横に置いたほうがベターです。このとき、図版に混ざって見づらいことがありまして、背景にY=100を敷く別スクリプトをご用意しました。
G390_ShowSize2.jsx
ダウンロードサイトおよびスクリプトファイル名は同じです。
32

(追記20180720)

<寸法線の線幅について>

デフォルトの線幅の変更方法です。
いったんこのスクリプト(+アクション)を起動して、寸法線を作ってください。
(念のため寸法線はグループ解除しておきます)

寸法線だけを選択し、アクションパネルのG313_Dimensionを追加記録します。
(●ボタンを押します)
スクリーンショット 2018-07-20 13.08.01

─────ここから記録─────(●ボタンを押します)
線パネルにてお好みの線幅にします。このとき、両端のマークの大きさのバランスがわるくなるようでしたら、線パネルの矢印の倍率で調整します
スクリーンショット 2018-07-20 13.08.47

─────記録停止─────(■ボタンを押します)

G313_Dimensionにアクションが追加されているのを確認します。
スクリーンショット 2018-07-20 13.09.37



<寸法補助線の線幅について>

寸法補助線については、スクリプトファイルをテキストエディットなどで開き、修正してください。

62行目、65行目が線幅となっています。

 DM1.strokeWidth = 1
 DM2.strokeWidth = 1

Illustratorの内部はすべてポイント単位ですので、この場合は1ptとなります。0.5ptに変更するにはここを改変してください。
スクリーンショット 2018-07-20 13.28.18


(追記20190213)
Illustrator CC2019での使用において、以下のスクリプトに不具合がありました。
G313_DimensionYoko.jsx(スクリプト:横方向に寸法を入れる)
G313_DimensionTate.jsx(スクリプト:縦方向に寸法を入れる)
再度ダウンロードいただき、上書きをお願いいたします。ご迷惑をおかけいたしました。


(バージョンはCS6以降でご利用ください)
20180917_193644_4



20180917_193644_6



ついにできました!夢の機能!Illustratorから自動スライス自動コーディング。ホントにたったそれだけです
20180916_103430_1