それではmainタグの中のフォームを打ち込みましょう。ただしその前にtopcoatについてもう一度触れる必要があります。こちらでも触れていますがtopcoatを使用すれば自前でフォームのカスタマイズをしなくても事前に用意された綺麗なフォームレイアウトが使えるので便利ですが一部radioボタンやcheckboxはそのままinputタグを打ち込んでも表示されません。実際にhtmlタグを打ち込む前に公式サイトで確認する必要があります。例えば このスイッチ型チェックボックスのhtmlは以下のようになっています。 このhtmlを丸々写さないと同じ見た目にならないので注意。labelの中にdivタグがある
前回全体のhtmlについて解説しました。ここから細かいタグも打ち込んでゆきます。まずはタブのhtmlからですが各種パネル表示を切り替える際にradioボタンの値で表示の内容を切り替えます。そのためにradioボタンをリスト形式で打ち込みます。 一気にhtmlの構造が複雑化しました。radio ボックスのフォームがリストタグの中に入れてさらにその外側をformタグで囲っています。この各種リストの中のradioフォームは全て同じ構造になっているので同じようなタグが並んでいるだけです。cssで装飾するためのタグも混じっているので一度削って分かりやすくします。 多少分かりやすくなりました。labelの
Extension関係の記事を検索すると環境構築してパネルを立ち上げるとこまでの記事はかなり多いのですが大体そこから先の記事はほとんどありませんでした。いわゆるHellow worldより進んだちょっとだけ複雑なExtensionの作り方を解説してみます。対象は環境構築はできる、もしくは簡単なパネルなら作れるくらいの方です。今回作るパネルには三つくらい機能を持たせてみます。ガイドを引く、ファイル情報をテキストにして印刷用にヘッドを作る、一時的なカラーの数値を保存する機能を持たせる、です。完成版はこちらにアップしておきました。 zxp圧縮版はこちらです。 パネルの完成図は以下のような感じに。 *
実験的にIllustrator用のExtensionを公開します。 Illustrator上でパスアイテムの塗りの色を管理するExtensionです。個人的によく使いそうな機能を主に三つ、一つのパネルにまとめました。 選択したパスアイテムの塗りの色を一括して動かす機能とカラーパターンを一瞬で作成する機能、それと特定の色をパネル上に一時的に保存する機能です。以下詳細。 塗りの色、一括調整機能 選択したパスアイテムをフォームに入力した数値だけ動かします。ばらばらのパスの塗りの色を一括して濃度の調整をしたいと思った事があったので作成。複合パスでもグループ化されたパスでも大体いけます。ただし特殊な設定
前回Illustratorでアクションを生成して実行してみましたが面倒です。面付け作業の効率を上げる時によく使ったりするのですが一々書くのも億劫なのでよく使用するアクションをオブジェクト化しました。以下からコードをコピーできます。 Illustrator actions 予め決まったアクションの文字列を返す関数をコンストラクトオブジェクトに渡してインスタンスオブジェクトとして生成。生成したオブジェクトのlaunchActionメソッドでアクションを実行します。リサイズや移動の関数なんかは第二引数にオブジェクトをオプションとして渡すことにより移動量やリサイズの拡大率を調整できます。 これがアクシ
Adobe JSXが古くて動作が遅いというのは皆さんご存知の通りですがIllustrator上でscriptを使用して沢山のアイテムを動かす、調べるといった処理をとにかく重くなりがちです。簡単なポスターならまだしも実際に仕事でIllustratorを触ってる方はどのような職種でも何重にも重なったレイヤーや百に近いアイテムのドキュメントは珍しく無いでしょう。こういった複雑なデータの版下データを面付けするとか幾つも配置させるとなるとscriptの出番、となるのですがこういった複雑なデータを扱うのはとにかく苦手で、ただ移動させるだけでもデータが複雑ですとかなり時間がかかります。さらにクリッピングマス
*2022年3月25日 ver2.0を公開しました。詳細はこちらから。 新しくExtension開発しました。今回はIllustrator用です。Illustratorのドキュメントに配置された画像をNode.jsで監視して、更新されたら自動的にドキュメントを開いて保存するというものです。ポスターなんかで画像の色補正をしている時にテストプリントの度に補正->pdf保存->出力 補正->pdf保存->出力と繰り返すのが面倒だと思ってこの一連の作業を自動化するために開発しました。ここで紹介したものをExhangeで公開するために開発し直したものです。具体的には監視したい画像
デバッグ周りが大変だったりいまだにecma3しか使用できないadobe jsxです。今回cep上でやりとりする時の細い開発情報をさらに載せます。 何度か触れていますがjsx単体で動かす場合は外部ファイルをincludeで読み込むことができるのである程度オブジェクト、関数をファイル事に分けられて見やすくできますがcepからアクセスする場合はこのincludeが使用できません。規模が大きくなるにつれてコードの量も大きくなってくるので厄介です。実はこの外部ファイル読み込みですがcep側のscriptで読み込むことが可能です。やり方は簡単。 func.jsがjsxのフォルダに入っていると仮定してcep
Photoshopに比べて謎な使用の多いIllustratorのCEPですが一番不便なのがデフォルトだとデバッグ時にIllustraotr本体のソフトを一々落とさないとコードの変更が反映されないとこです。Photoshopでいうところの強制Persistentです。参考Photoshop Extensionの開発11 Persistence IllustratorだとデフォルトでこのPersistentがオンになっている故にパネルを一度閉じてもコードの修正が反映されないのです。だからと言ってコードを書き直す度にIllustrator本体を落としてデバッグするのはかなりめんどくさいです。というわ
Adobe extensionを開発しているとformを扱う事が多くなります。jsxから数値を取得して、それをパネル上で表示して、数値を入力またjsxにアクセスしたり。デフォルトのtopcoatのcssは基本の設定が揃っていて便利ですがhtml構造が少し難しくなりがち。 前回説明したようにcheckboxやradiobuttonはlabel要素の中にdivが混じっていたりと少し複雑です。ここら辺のコードは柔軟なCEPを開発しようと思うと何度も触れる部分なので普段からまとめられると便利です。例えば以下のようなリストをjsで作るとしましょう。 各種input要素等を囲ったlabel要素があってその