Just Diary

Follow me

カテゴリー:html 一覧

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

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

Read more

IllustratorとPhotoshopの画像編集をNode.jsでやりとりする

前回よりローカルのサーバーを通じてアプリ間の連携を紹介しましたが今回は応用編としてIllustrator内で配置、レイアウトした写真画像をPhotoshopで再度開いて編集、更新、その後Illustratorで再編集、PDF書き出しといったやりとりをNode.jsでやりたいと思います。Illustrator内に配置した写真画像の色調補正の再補正等、いちいちPhotoshopに戻って開いて、書き出し、再度Illustrator側で開くといった事が多いと思うのでこのあたりの作業を自動化させたいと思いました。特にDTPや印刷、出力の際にIllustratorデータをPDFやらpostscriptファ

Read more

Photoshop Extensionの開発34 ロード画面(エクステンション)

今回はロード画面をエクステンション上に作ります。エクステンションの場合進捗の割合を表示できませんがcssやjavascriptで自在にロード画面を作成できるので自由度が高いです。まずはロード画面のcssとhtmlから websiteを作る場合と同じ要領でhtmlの一番上の要素にロード画面のレイヤーを載せて通常は非表示。jsxの処理が動いている時にロード画面のhtmlを表示させます。cssはアニメーションで円が三つバウンドするよくあるロード画面です。 作成したロード画面。jsxの処理が開始される時にこのロード画面のdisplayをcssでblockにします。その後jsxの処理が終わった時にロード

Read more

Photoshop Extensionの開発30 エクステンションでエクセルデータを表示させる

エクセルの表がどのように読み込まれるか図を上げ直しました。読み込まれた際にはオブジェクト形式でA1,A2,A3,A4….A列の次はそのままB1,B2B3….と各セルがそのまま連続して読み込まれます。これを前回A列、B列と縦列毎に分けました。 以降B,C,Dといった各列のデータ 前回オブジェクトデータの中にMapデータとして各列を整理しました。 因みにAの次にIになっているのはそもそもオブジェクトのプロパティの列挙順が保証されていないためアルファベット順に列挙されたりするわけではないからです。配列のようにsortメソッドも存在しないのでこの辺の処理を気をつけなければなりま

Read more

Photoshop Extensionの開発29 エクステンションでエクセルデータを読み込む

エクセルの表と照らし合わせながらAdobeのソフトでレイアウトを決めたりデザインする作業というのも世の中沢山あるかと思います。というわけで今回はxlsデータをExtensionで読み込んでパネル上に表示させたいと思います。 今回xlsデータの読み込みのためにxlsxモジュールをNodeから使用することにしました。という事でまずはインストール。 インストールしましたらCEPの環境もNode.jsが使用できるようにmanifest.xml等の調整もします。 また今回サンプルのエクセルデータとしてこちらのページから第3章の国民経済計算のエクセルデータを使用しました。 まずはxlsxを読み込みましょう

Read more

Photoshop Extensionの開発25 オープンリンク

Extension自体クロームベースで動いている事自体は述べました。もちろんhrefでリンクを開くこともできます、しかしwebブラウザ上で開くのはともかくExtension上で開くとどうなるのか? 結果 webサイトをパネル上で開く事ができました。ただし実用性もあまりない気もします。ただしパネル上にURLのリンクを貼ってブラウザ上でリンクを開きたいといった事はあると思います。実は別途方法があります。 onClickでwindow.cep.util.openURLInDefaultBrowserを登録するだけで対象の属性をクリックした時にブラウザ上にリンクを開いて誘導する事ができます。自作のEx

Read more

Photoshop Extensionの開発24 css スクロールバー

今回はスクロールバーの見た目を変えて見ます。こちらもあまりweb上で見かけないのはクロスブラウザ問題が深刻だからです。MDNのサイトでも使用自体勧められていません。fire foxで使用出来ないのはかなり問題ですがご存知の通りCEPはクロームベースなので関係ありません。webサイトのスクロールバーをいじることじたい抵抗があるかもしれませんがExtension上ではアプリと割り切っていじっても良いでしょう。それではhtmlとcss html css overflowでリストの中身が溢れた時にscroll表示するようにしました。それではこのdiv要素のスクロールを変えてゆきます。 id listに

Read more

Photoshop Extensionの開発22 フォームデザイン1

topcoatのライブラリーを使用すれば自作でcssを用意しなくても便利なフォームデザインが用意されているのは前回述べた通りです。それでも自前でデザインしてみたい場合のカスタマイズについて述べます。ちなみにtopcoatを使用ずる場合はdisabled時やチェック時のフォームの反応やクリックした時の反応等全て事前に用意されているのでこれら全て自前でカスタマイズするとなるとそれなりの労力になる事は覚悟してください。 まずhtml チェックボックスをふた通り用意しました。それぞれ大きくカスタマイズするのでlabel要素の中にdivも一緒に挟んでいます。labelで一緒に挟む事によりdivをクリック

Read more

Photoshop Extensionの開発18 イベント基本

何度も述べている通りCEP自体クロームベースのエンジンなのでイベントを定義する場合はブラウザ上で行う場合と全く同じでaddEventListenerを使用。CEP専用のイベントもaddEventListenerがベースになっているのでフロントエンドに慣れていればとっつきやすい。既に何度かイベント関連のコードはアップしているが再度載せておく。 html CSSはtopcoatを使用。switchのようなformはlabelとdiv要素でフォームがレイアウトが作られている。labelにfor属性を持たせて中のフォーム要素のidに同名の値を定義させるとlabelとfrom要素を関連つける事ができる。

Read more

最近のコメント

コメントなし
Other link

最近のコメント

コメントなし Close