Adobe CEPとか作ってるとフォームの実装が多いと思います。テキストボックスとかラジオボックス等。自分でいろいろ実装して使いまわす事なんかも多いのでフォーム関係の実装を一つのサイト（というかGit hub）に自分用に集めました。勿論たかがCEPです。ほとんどの人が自分自身でこういったフォームを作る必要性はあまり無いとえます。top coat、Adobe spectrumもしくはデフォルトの状態でも問題無いかもしれません。それでも自分でやりたいという方にも向けてGitHub、GitHubPageでサイトを公開しました。ただ今回React+styled-componentsで構築しているので普
Adobe scriptを書く方にとってはもはや当たり前となりつつあるJavascript。しかしAdobe周辺の作業に関わらずPC周りのあらゆる作業を自動で捌きたいと思った方も多いと思います。でも別言語はよくわからない、PowerShell?WSH?VBA何それ？Apple script?それ食えるの？という方にぴったりのネイティブアプリの開発方法、フレームワークがあります。Electronです。 Electron Electronとはhtml,cssでUI周りを作って内部の動きjsで作れるフレームワークです。つまりweb siteを作る技術でそのままアプリが作れる代物です。Adobe CE
今回から本格的にjsを書きてゆきます。jsもいくつかのファイルに分けて読み込ませます。その前にいくつか事前準備が必要です。まずはmanifestの編集。 今回メインの処理にNode.jsを使用するためnodeの行を追加します。それに加えて–mixed-contextも加えてください。これがないとウインドウ、リロード時にバグが起きるためです。–mixed-contextを残したくない場合開発終了時に除くこともできます。 次にjson2の配置。jsxとパネルの通信に必要なのでパネル側で読み込ませる前に事前にjsxフォルダーに入れておきます。こちらから入手してくだい。 また詳
前回の時点でベースのcssは完成したので今回少しだけ見た目を整えて完成させたいと思います。まずフォームをパネルのような要素で括って立体感を出すためのcssを作成します。 変更前 変更後 backgroundで背景色を指定、box-shadowで影を落として立体感を出したborder-radiusで四隅を丸くしています。この辺は好みですこれ自体重要な要素ではないのでやらなくてもこの後の作業に支障はありません。themeManagerで環境設定のUIの色によって柔軟に対応させたい時はむしろそのままの方がいいでしょう。（パネルの青の色が固定になるため）あくまで何かの参考までに。 ヘッドのフォームも同
今回からcssを書き込んでいきます。まずはタブのボタンの実装と切り替えを実装します。 まずはhtmlをもう一度見てみます。 リスト上に並んだ各種ラジオボタンを横並びにしてこのnavタグ自体の幅を画面にいっぱいに広げます。 今回は要素を横並びにするためにdisplay: flexを使用します。これは小要素を横並びにするためのプロパティでjustify-contentでどのように横並びするか指定できます。ただし今回は画面幅を各種ボタンでいっぱいに埋めるのでこれ自体あまり意味はありません。詳しくはこちらを参照。次に小要素の各種ボタンの大きさを指定します。 calcという関数らしき値が出てきました。こ
今回はcssを書いてゆきます。全体のレイアウトを整えてから細かいレイアウトを整えます。まずはcssに入る前にhtmlの各種mainタグにhideクラスをつけてあります。 setGuide idのついているフォームのみhideクラスがついていません。これはhideクラスをつけることによりフォームの表示をオフにするcssを実装するためのクラスです。このhideクラスをつけたり外すことにより表示の切り替えを行います。それを踏まえて基本のcssを書き込みます。style.cssに書き込んでいきます。 hideクラスにdisplayプロパティにnoneを指定しています。これで表示を非表示にできるとともに
前回に続いてhtmlをどんどん打ってゆきます。 guideを引くための機能のフォームのhtmlを加えました。見出しの部分はh1タグをheaderで囲んでいます。ヘッダーは全てのフォームで共通して打ち込みます。 各種見出しとガイドを引くためのボタン、アートボードの内側にガイドを引くための数値を入力するための数値のフォームとcm,mm,pointのラジオボタンをtopcoatのサイトを見ながら設置。以上のタグを打ち込むと以下のようなパネルになります。 とりあえずの表示はこんな感じです。なんとなくnavが上部に配置されてヘッダーがあって真ん中にメインのフォームが配置されて最後にフッターがあるのがわか
それでは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圧縮版はこちらです。 パネルの完成図は以下のような感じに。 *