Photoshop Extensionの開発34 ロード画面（エクステンション）
css, html, javascript, Photoshop
今回はロード画面をエクステンション上に作ります。エクステンションの場合進捗の割合を表示できませんがcssやjavascriptで自在にロード画面を作成できるので自由度が高いです。まずはロード画面のcssとhtmlから
websiteを作る場合と同じ要領でhtmlの一番上の要素にロード画面のレイヤーを載せて通常は非表示。jsxの処理が動いている時にロード画面のhtmlを表示させます。cssはアニメーションで円が三つバウンドするよくあるロード画面です。
作成したロード画面。jsxの処理が開始される時にこのロード画面のdisplayをcssでblockにします。その後jsxの処理が終わった時にロード画面のdisplayをnoneに戻します。簡単に実装できます。以下サンプル。
それで実はこのコードもMac版Photoshopだと上手く動きませんでした。どうもjsxの処理が動いている間はエクステンションのフォーカスが外れてロード画面が動かないらしいです。setTimeoutで間をおけば一応ロード画面そのものは表示されるのですがアニメーションが動かないので本来の動作にはなっていません。ちなみにサーバーと通信してコールバックがくるまでロード画面を表示させてた場合は上手くアニメーションが動いてくれたのでどうもjsxとやりとりする場合に問題があるみたいです。