Just Diary

Follow me

タグ:Extension 一覧

IllustratorのCEPでデバッグをやりやすくする。

Photoshopに比べて謎な使用の多いIllustratorのCEPですが一番不便なのがデフォルトだとデバッグ時にIllustraotr本体のソフトを一々落とさないとコードの変更が反映されないとこです。Photoshopでいうところの強制Persistentです。参考Photoshop Extensionの開発11 Persistence IllustratorだとデフォルトでこのPersistentがオンになっている故にパネルを一度閉じてもコードの修正が反映されないのです。だからと言ってコードを書き直す度にIllustrator本体を落としてデバッグするのはかなりめんどくさいです。というわ

Read more

CEP上で画面を切り替えるインタフェースを作る

CEPにいろんな機能を盛り込む時にモードや画面の切り替えを行いたい時があると思います。機能が増えて行くにつれて色々パーツを埋め込みたくなりつつもパネル自体の大きさはあまり大きくしたくない時などがあります。 今回はこんな感じの画面を切り替えるCSSを作りましょう。CEP上ではウェブサイトと違って基本的にhtmlはindex.htmlのみ使用して他のhtmlファイルにリンクで飛ぶようなやり方はしないので二つ分の画面を一つのhtmlにまとめます。それではまずは htmlから <div class=”mainForm box form“>と<div class

Read more

CEP Basic UI

ある程度Extensionの開発にも慣れてきていろんな機能やオプションを盛り込むと段々UI周りの整理をしたくなるでしょう。実際htmlは構造上、上から下に流れる構造になりやすいので何も考えずにひたすらボタンやチェックボックスを増やして行くと縦長いインターフェースになって使いずらくなる。というわけで今回簡単な基本のボックスレイアウトをcssで組んでみたいと思います。簡単なところからという事でヘッダーとオプションのチャックボックスを入れたサイドメニューとメインのエリアにボタンのあるよくありそうなインターフェースを作ります。以下が下書きになります。 適当ですがこんな感じで作ります。サイドバーにオプシ

Read more

html formにセットされた値を効率よく取得する。

前回からの続きですがAdobe CEPでUI上でパラメータの値をユーザー側で設定してjsx側に送る事は何度も何度も出てくると思います。昔はj-queryで取得したなんて事もやってましたが流石に取得するformの数が増えてゆくと地道に一つづつ取得するなんて事は非効率的だし苦痛です。さらにJSONでjsx側に送るため効率よくobjectにまとめなければなりません。arrayメソッドを中心に効率よく取得してみましょう。 topcoatのcssをベースにしたhtmlから取得してゆきます。最初はラジオボタンの簡単なhtmlです。チェックされたボタンの値を取得します。実はラジオボタンの値を取得するだけなら

Read more

top coatのcss上で動的にhtml formを追加する

Adobe extensionを開発しているとformを扱う事が多くなります。jsxから数値を取得して、それをパネル上で表示して、数値を入力またjsxにアクセスしたり。デフォルトのtopcoatのcssは基本の設定が揃っていて便利ですがhtml構造が少し難しくなりがち。 前回説明したようにcheckboxやradiobuttonはlabel要素の中にdivが混じっていたりと少し複雑です。ここら辺のコードは柔軟なCEPを開発しようと思うと何度も触れる部分なので普段からまとめられると便利です。例えば以下のようなリストをjsで作るとしましょう。 各種input要素等を囲ったlabel要素があってその

Read more

jsで無理矢理Illustratorのドキュメントの裁ち落としサイズを取得

jsでできそうでできないIllustraotrのドキュメントの裁ち落としサイズの取得。一時期某フォーラムでも話題になって最終的にC++で書かれた専用のプラグインを用意することで解決という結局jsのみでは解決できない結論に至ってました。 しかしそれでもなんとかjsから裁ち落としのサイズを取得だけでもしたいという方もおられるかもしれません。という事でjsから無理矢理ドキュメントの裁ち落としサイズを読み込むExtensionを作成しました。 まずjsから裁ち落としのデータにアクセスするオブジェクトモデルがイラストレーターにないのでIllustratorのAiファイル情報からテキストとして読み込む事に

Read more

Adobe Bridge Extension開発

BridgeのExtension、ご存知でしょうか? あまりにもマイナーで情報もネットに特に出回ってなくて尚且つ仕様が他と結構違ってたりするのでちょっと開発するだけでも大変でした。 というわけで開発してみましょう。まずいきなりですがフォルダーの場所からして違うので注意してください。以下になります。 アプリケーション=> Adobe Bridge CC (バージョン 2018 以上) => CEP => extensions VS CodeのExtensionBuilderなんか使ってテンプレートを作成してからこのフォルダーに移動させるのもいいでしょう。但し既存のテキストエディ

Read more

Vulcan.jsを使用したAdobeのソフト同士の通信

何度かNode.jsを通じたソフトの通信について投稿しましたがどうもCEPライブラリーのVulcan.jsをを使用すればもっと簡単にできるらしいのでPhotoshopとIllustratorの簡単な通信をやってみました。 ちなみにVulcan.js自体はここから入手できます。 VsCodeのCC Extension Builder 等ではデフォルトで用意してくれないのでダウンロードしてください。メッセージを送る際に送信側のパネル自身のIDが必要なのでcsInterfaceから取得します。 VulcanMessageオブジェクトにパネルIDとメッセージを渡して送信します。 IDでメッセージの発信

Read more

Node jsのwatch機能でIllustratorに配置された画像を監視する

ご存知の通りポスターやディスプレイの作成なんかはIllustratorで版下を作成する事が多いです。しかし写真の画像をIllustratorで配置して出力する場合はプリンターにデータを送るためにPDFやpostscriptファイルに変換してプリンターに送るのですが写真の画像の色補正をPhotoshopで行なった後に一々Illustratorで開いて出力するというこのためだけにIllustratorを立ち上げることが多いです。このIllustratorで開いて出力という面倒くさい作業を自動化するために配置画像をNodeで監視して更新されたら自動的にIllustratorがPDFで書き出すExte

Read more

Node jsのWatch機能で自動的にPhotoshopでjpgイメージを書き出す。

PhotoshopやIllustratorで特定のファイルやフォルダーが更新、追加されたら自動的に書き出し等を行うExtensionを開発します。Adobeのソフトを通じて何かのファイルをPDFやjpgを書き出すといった作業がいろんな分野で多いと思ってファイルの監視を発火イベントとして使用したいと思ったのが始まりです。 まずは手始めとしてPhotoshopによる自動jpeg書き出し機能を開発したいと思います。仕様としては。 最初に監視対象のフォルダーを選ぶ ボタンを押して監視をスタートさせる psd、tiffファイルが追加されたらPhotoshopで自動的にjpegに書き出す。 Nodeではデ

Read more

最近のコメント

Other link

最近のコメント

Close