Just Diary

Follow me

カテゴリー:css 一覧

Photoshop Extensionの開発34 ロード画面(エクステンション)

今回はロード画面をエクステンション上に作ります。エクステンションの場合進捗の割合を表示できませんがcssやjavascriptで自在にロード画面を作成できるので自由度が高いです。まずはロード画面のcssとhtmlから websiteを作る場合と同じ要領でhtmlの一番上の要素にロード画面のレイヤーを載せて通常は非表示。jsxの処理が動いている時にロード画面のhtmlを表示させます。cssはアニメーションで円が三つバウンドするよくあるロード画面です。 作成したロード画面。jsxの処理が開始される時にこのロード画面のdisplayをcssでblockにします。その後jsxの処理が終わった時にロード

Read more

Photoshop Extensionの開発24 css スクロールバー

今回はスクロールバーの見た目を変えて見ます。こちらもあまりweb上で見かけないのはクロスブラウザ問題が深刻だからです。MDNのサイトでも使用自体勧められていません。fire foxで使用出来ないのはかなり問題ですがご存知の通りCEPはクロームベースなので関係ありません。webサイトのスクロールバーをいじることじたい抵抗があるかもしれませんがExtension上ではアプリと割り切っていじっても良いでしょう。それではhtmlとcss html css overflowでリストの中身が溢れた時にscroll表示するようにしました。それではこのdiv要素のスクロールを変えてゆきます。 id listに

Read more

Photoshop Extensionの開発23 フォームデザイン2

続いてスライドバーを作ります。input type=”range”でスライドバーのフォームが用意されているのですがあまりwebサイトで見かけた事がないと思います。このスライド、各ブラウザで見えかたが大きく異なったりしてクロスブラウザ問題を考えるとかなり扱いずらいフォームだとは思います。しかしCEPはクロームベースで動いているのでこういった問題は殆ど気にしなくてもいいのがメリットです。 valueでデフォルトの数値、 minで最小値の設定、 maxで最大値の設定 stepで一ステップ事の数値を設定できます。ちなみにデフォルトの状態が以下になります。 見えかたはクロームに依

Read more

Photoshop Extensionの開発22 フォームデザイン1

topcoatのライブラリーを使用すれば自作でcssを用意しなくても便利なフォームデザインが用意されているのは前回述べた通りです。それでも自前でデザインしてみたい場合のカスタマイズについて述べます。ちなみにtopcoatを使用ずる場合はdisabled時やチェック時のフォームの反応やクリックした時の反応等全て事前に用意されているのでこれら全て自前でカスタマイズするとなるとそれなりの労力になる事は覚悟してください。 まずhtml チェックボックスをふた通り用意しました。それぞれ大きくカスタマイズするのでlabel要素の中にdivも一緒に挟んでいます。labelで一緒に挟む事によりdivをクリック

Read more

Photoshop Extensionの開発18 イベント基本

何度も述べている通りCEP自体クロームベースのエンジンなのでイベントを定義する場合はブラウザ上で行う場合と全く同じでaddEventListenerを使用。CEP専用のイベントもaddEventListenerがベースになっているのでフロントエンドに慣れていればとっつきやすい。既に何度かイベント関連のコードはアップしているが再度載せておく。 html CSSはtopcoatを使用。switchのようなformはlabelとdiv要素でフォームがレイアウトが作られている。labelにfor属性を持たせて中のフォーム要素のidに同名の値を定義させるとlabelとfrom要素を関連つける事ができる。

Read more

Photoshop Extensionの開発7 CSS編

一通り環境設定の説明も終わったのでCSS関係の解説もしたいと思います。まずthemeManagerから。 themeManager.jsがデフォルトでjsフォルダに入っていると思います。 csinterfaceと共にthemeManager.init関数がデフォルトで呼び出されているはずです。このデフォルトの状態でPhotoshopの環境設定カラーを変えてみます。 環境設定のウインドウカラーに合わせてカラーが変わりました。特に何も意図がなければtopcoat等のCSSライブラリをそのまま使うと周りのウインドウに合ったデザインパネルをそのまま使用できるのでオススメです。今後Extensionの開

Read more

最近のコメント

Other link

最近のコメント

Close