シリーズ投稿。Photoshopフィルタとしてsbsarを使う
ドキュメントの確認をもうちょっともうちょっと。
ファイル書き出しサンプル
ボタンをおしてtsv出すサンプル。このサンプル見たな。違う目線でおさらい。
https://developer.adobe.com/photoshop/uxp/2022/guides/getting-started/writing-a-file/
- ファイル書き出しは追加のパーミッションいらない。セーブダイアログが出るので。
- 情報の取得だけなので、executeAsModal使ってない。
webソケットサンプル
https://github.com/AdobeDocs/uxp-photoshop-plugin-samples/tree/main/io-websocket-example
サーバー側
npm run start でローカル起動するソケットサーバ。
- github上のコード。
- WebSocketServerが8080番ポートでリッスン。
- 受け取った文字列メッセージを＝の文字でスプリットしてコマンド名と引数に分解。
- そのまま引数を送りかえすechoコマンド。
- 定期的にランダムな数値を投げ返すランダムコマンド。ON・OFFできる。
- インクリメントしていく数値を一定周期で投げ返すfastコマンド。ON・OFFできる。
- 今までのコマンド履歴と引数の内容が一致するか確認するvalidateコマンド。
簡単な実装。自分が作りたいものの場合は外部コマンドを叩いて処理が終了したら戻る。非同期。かぶる実装部分なし。参考にはなる。
クライアント側
https://github.com/AdobeDocs/uxp-photoshop-plugin-samples/tree/main/io-websocket-example/server
manifest.json
manifest.jsonを確認するとバージョンが4で権限の要求などがない。
パネル一つのプラグイン。ソケットとのやり取りは何も権限がいらないらしい？バージョン5でも？
UI
URL指定して接続・切断、コマンド種別はチェックボックスで選べる。
js実装
- UIパーツの参照をまとめて取る書き方が面白い。
const [ output, connectButton, disconnectButton, validateButton, state,
randCheckbox, fastCheckbox, messageText, url ] =
["output", "connect", "disconnect", "validate", "state",
"rand", "fast", "text", "url"].map(el => document.querySelector(`#${el}`));- entrypoints.setup に初期化コードでメニューを用意して？コネクション張る。
- validateButtonを押したときに送信履歴をサーバーに送ってずれがないか確認している。（というデモ。）
- サーバーから受け取ったメッセージは、＝の文字でコマンドと引数分解して、ログ表示かエラー通知表示を行う。
- 接続状態が変化すると、ステータス表示エリア（と、メニューアイテムのラベル？）を更新する。
とても簡単な例だったが entrypoints.setup ()内でできる事の詳細をちゃんと理解できていないので要確認。https://developer.adobe.com/photoshop/uxp/2022/uxp/reference-js/Modules/uxp/Entry%20Points/EntryPoints/
よくある質問みたいなページ
https://developer.adobe.com/photoshop/uxp/2022/guides/how-to/
- 一般的によく使われるコードの断片をシェアするだけなので怖くないよ。
- JS強者は必要ない情報を書くよ、ExtendScriptからやってきた人は読もう。
- 外部JSをインクルードする方法、ログの出し方、sync/awaitの使いかたをざっと。
- ホスト情報の取り方、パネルが開いたり閉じたりしたことを検知するやり方。
- File I/Oについて
- 4か所ファイルの置き場がある。
- プラグインのホームディレクトリは読み取り専門。
- プラグインのデータディレクトリは読み書き可能でOSが再起動しても中身が残る、他のプラグインはアクセスできない。
- プラグインの一時ディレクトリ。多分読み書きOK。アプリ再起動で中身は消える。
- OSのファイルシステムアクセスはファイルダイアログでユーザーが許可しないとできない。
- さらにセキュアなストレージも提供。キーバリューでデータを保持。暗号化される。
- ファイルの読み書きの仕方はそのうち追記するよ。
- sCore.showAlertでアラートが出せる。
ソケットや他プロセスの起動みたいな事は描いてなかった。
まとめ
今回、あんまり有意義な情報はなかった。
NEXT TODO
手を動かす詐欺終了までもうちょっと。
- fsモジュールドキュメント確認。
https://developer.adobe.com/photoshop/uxp/2022/uxp/reference-js/Modules/FileSystem/ - entrypoint.setup コマンドのみのプラグインでも必要だっけ？
https://developer.adobe.com/photoshop/uxp/2022/uxp/reference-js/Modules/uxp/Entry%20Points/EntryPoints/ - psjsだけでノイズフィルター作ってる例があったので実装見てみる。
https://developer.adobe.com/photoshop/uxp/2022/assets/874d23d0b54117a6e72ee98bbe79c41b/imaging.psjs - メニューからコマンド実行させる 。
- レイヤー名で画像を書き出す。
- python編へ
