Photoshop Extensionの開発18 イベント基本
css, html, javascript, Photoshop
何度も述べている通りCEP自体クロームベースのエンジンなのでイベントを定義する場合はブラウザ上で行う場合と全く同じでaddEventListenerを使用。CEP専用のイベントもaddEventListenerがベースになっているのでフロントエンドに慣れていればとっつきやすい。既に何度かイベント関連のコードはアップしているが再度載せておく。
html
CSSはtopcoatを使用。switchのようなformはlabelとdiv要素でフォームがレイアウトが作られている。labelにfor属性を持たせて中のフォーム要素のidに同名の値を定義させるとlabelとfrom要素を関連つける事ができる。詳しくはMDN等を参照してください。
pushボタンのイベントは見ればすぐわかるようにボタンを押せばアラートがなるという至極単純なイベント。ブラウザ上の挙動と全く変わらない。form要素は各種idやclass属性から値を取得する事もできるがdocument.forms.(フォームのname属性)から取得する事もでる。特にラジオボタンは同じname属性が振り分けらた要素からどのボタンがチェックされているかforms.(ラジオボタンのname属性).valueから簡単に取得できる。またチェックボックスやラジオボタン等複数のフォームから値を取得する場合はArra.fromでarrayオブジェクトに変換したのちforEachやmapで簡単にイベントの操作、値の取得ができる。今回は最初にラジオボタン要素をgetElementByClassNameで取得してforEachでまとめてクリック時のイベントを登録している。パネル上で値を設定する事の多いCEPの操作ではとにかくform要素の操作が多くなる。特に各種フォームの要素を取得してオブジェクトにまとめてjsx側に送るという事が多くなる。