Just Diary

Follow me

UXPに備えてモダンなJSの書き方に慣れる(string型の値、ECMA2015以降追加された機能)

string型のプリミティブ値、地味に扱いが面倒なことがあります。ゼロパッディング、余白の削除、等。string型も最新の環境では色々便利になっています。 テンプレートリテラル ECMA2015以前、あるstring値を代入時に例えばstring値と関数の結果、変数をつなげる場合、ダブルクォート”もしくはシングルクォート’を使用して変数、式の範囲とstringの範囲を細く分ける必要がありました。 ダブルクォートかシングルクォートをstring値として使用する場合はどちらかで文字列を囲ってその文字列の中にどちらかを使用するという面倒なものでした。またクオートを何度も囲い直

Read more

UXPに備えてモダンなJSの書き方に慣れる(ECMA2015以降に追加されたArrayメソッド等)

ECMA5で大幅に追加されたArrayメソッドですがECMA2015以降も目覚ましい進化を遂げています。前回までに載せられなかったものを今回説明します。 for of for inと似ていますがfor ofは反復可能なオブジェクトをインデックス順に反復処理をします。ただし返す値は各配列の値のみとなります。 for inと違ってObject objectには使えません。 反復可能なオブジェクトなら配列以外にもECMA2015より追加されたMap、ArrayオブジェクトでなくてもHTMLCollectionやArgumentsオブジェクトも使用可能です。 ここまで見た感じfor inとfor of

Read more

Extension watchFolderPS ver2

Photoshop用フォルダー監視Extension 特定のフォルダーを監視してファイルが投げ込まれたら自動的にPhotoshop上で開いて保存したりアクションを実行するExtensionを大幅アップデートしました。元々こちらの記事で作っていたものを改良していろんな画像拡張子に対応させました。よくわかりませんが前回の記事のアクセスがいまだに多かったので更新しました。 使い方 監視するフォルダーを設定してwatchボタンを押します。監視開始後に監視フォルダーに画像ファイルが投げ込まれるとPhotoshopが自動的に画像ファイルを開きます。オプションによってはそのまま特定のフォーマットで保存できま

Read more

UXPに備えてモダンなJSの書き方に慣れる(配列のような振る舞いをするオブジェクト、Arrayオブジェクト)

配列のような配列 jsには配列のようで配列でないオブジェクトもあります。一見妙に聞こえるかもしれませんがECMA3で代表的なものと言えばargumentsでしょう。 引数の値を配列のように引き受けるarguments。for文で反復可能なので一見配列型のオブジェクトに見えます。しかし。 forEachを使用するとエラーが出てしまいました。なぜでしょうか? 本当にArray型なのか確かめてみる。 ECMA5からArrayオブジェクトはArray.isArrayメソッドで確認可能です。Array型のオブジェクトならtrue、それ以外はfalseを返します。 以下確かめてみます。 なんとfalseが

Read more

UXPに備えてモダンなJSの書き方に慣れる(array,objectメソッド)

モダンなjsを書く方にはもう当たり前ですがECMA5でarrayメソッドがたくさん追加されました。forEach,map,filter,some,every,reduce等。アロー関数と組み合わせるとECMA3でfor文で書いていたほとんどのコードをかなり省略化できます。慣れるともはやfor文自体使う頻度がかなり減るでしょう。同様にObjectのプロパティを列挙する構文はECMA3までだとfor~in文しかありませんでした。しかしECMA2015以降これらのコードも簡略化できるように新しいメソッドが追加されました。今回繰り返し処理の構文を紹介します。 array メソッド 前述の通りECMA5

Read more

Photoshop UXP、サポートされていない機能

Photoshop UXPの開発について今回特にサポートされていない事、現状できないことを中心に書いていきます。CEP経験者なんかはドキュメントを結構飛ばして読んでしまうと思いますが結構サポートされていない機能、意外な仕様が多いです。 そもそもUXPのシステムは完全なブラウザベースのパネルではない CEPはgoogle Chromiumベースのシステムでした。つまりほとんどGoogle ChromeをベースにしたシステムであったのでブラウザでサポートしているCSS,HTMLに関してはよほど新しいものでない限りCEP上では動くものでした。それに対してUXPは基本は同じですが完全なブラウザベースの

Read more

UXPに備えてモダンなJSの書き方に慣れる(分割代入、スプレッド構文、シャローコピー、ディープコピー)

今回分割代入スプレッド構文に入ります。この辺りはアロー関数以上に見た目が???な構文が多いです。とはいえインターネット上のjs関係の記事では勿論jsのフレームワークのドキュメントでももはや当たり前のように扱われています。これはPhotoshop UXPも例外ではありません。例えばPhotoshop UXPの以下の構文は見たことがあると思います。 constとrequireはわかるけどappを囲む{}は一体何だ!?という疑問を持つと思います。これこそが分割代入です。これは以下と同様のコードです。 それでもまだしっくりこないとは思います。勿論こういった書き方は個人で開発する場合はする必要もあるわけ

Read more

UXPに備えてモダンなJSの書き方に慣れる(const、let 定数、変数)

ECMA2015以降から定数、変数の定義はvarからconst、letを使用するのが主流となりvarはもはや使われなくなりつつあります。しかしAdobe jsxのECMA3準拠の環境下だとvarがずっと主流でありました。しかしこのただの定数、変数宣言がなぜ新しい形式で行われるようになったのか。 そもそも const、letって? constは定数の宣言、一度定義して中身が変わらないことが前提の値を宣言します。letは変数の宣言、文字通り宣言後に値が再度変わりうる値を宣言します。しかしvarも変数の宣言であったはず、今回この二つの違いを掘り下げます。 varの仕様について varは変数の宣言とな

Read more

UXPに備えてモダンなJSの書き方に慣れる(アロー関数)

PhotoshopにUXPがついに来ましたが今後ECMA3ベースのjsxからUXPに移行するにあたり最新のjsの書き方がAdobe scriptを書く上でスタンダードになると思います。しかし今まで古い書き方に慣れていたのにいきなり新しい書き方に慣れようにも移行しづらいと思います。実際ECMA3からECMA2015の進化は飛躍的な進化でしたしその後のECMA2016,ECMA2017と年々さらに進化しています。もしくはECMA2015の進化影に隠れがちですがその前にECMA5の進化もありました。Adobe jsxはこのECMA5すらもサポートしていません。それくらいECMA3は古いです。今web

Read more

Photoshop UXPのmanifest.jsonを簡単に解説

Photoshop uxpのmanifest.jsonを簡単に触ってわかったことを自分へのメモがわりも含めて少し解説します。 CEPで言う所のmanifest.xmlのようにパネルのサイズや挙動を管理するのがこのmanifest.jsonになります。尚且つ今回UXPではjs内でのuxpモジュールのentrypointsメソッドも利用してパネルの挙動、メニューから呼び起こす関数等も管理します。まず上部のメニューとプラグインパネルのコマンドから実行する関数を設定します。これらの関数はパネルを通さなくても関数を実行できるので簡単なコードをたまに実行したい時などにjsxのように使用できます。manif

Read more

最近のコメント

Other link

最近のコメント

Close