今回はよく見るスイッチ型のチェックボックスを作ります。凹んだような穴の中にボールが入っていてチェックすると中のボールが右に動いたり左に動いたりするあれで。git hubにあげたform collectionのチェックボックスにもあります。 git hubにあげたのはReact + styled-componentsなのでReact使わない方のためにvanilla jsで解説します。コードの全体像はcode sandboxで公開しています。 htmlを見てもわかりますがhtml要素だけ見ても少し複雑です。何度か過去にも解説したようにinput要素そのものは使わずにdiv要素を使ってゼロからこのス
Adobe CEPとか作ってるとフォームの実装が多いと思います。テキストボックスとかラジオボックス等。自分でいろいろ実装して使いまわす事なんかも多いのでフォーム関係の実装を一つのサイト（というかGit hub）に自分用に集めました。勿論たかがCEPです。ほとんどの人が自分自身でこういったフォームを作る必要性はあまり無いとえます。top coat、Adobe spectrumもしくはデフォルトの状態でも問題無いかもしれません。それでも自分でやりたいという方にも向けてGitHub、GitHubPageでサイトを公開しました。ただ今回React+styled-componentsで構築しているので普
CEPにいろんな機能を盛り込む時にモードや画面の切り替えを行いたい時があると思います。機能が増えて行くにつれて色々パーツを埋め込みたくなりつつもパネル自体の大きさはあまり大きくしたくない時などがあります。 今回はこんな感じの画面を切り替えるCSSを作りましょう。CEP上ではウェブサイトと違って基本的にhtmlはindex.htmlのみ使用して他のhtmlファイルにリンクで飛ぶようなやり方はしないので二つ分の画面を一つのhtmlにまとめます。それではまずは htmlから <div class=”mainForm box form“>と<div class
ある程度Extensionの開発にも慣れてきていろんな機能やオプションを盛り込むと段々UI周りの整理をしたくなるでしょう。実際htmlは構造上、上から下に流れる構造になりやすいので何も考えずにひたすらボタンやチェックボックスを増やして行くと縦長いインターフェースになって使いずらくなる。というわけで今回簡単な基本のボックスレイアウトをcssで組んでみたいと思います。簡単なところからという事でヘッダーとオプションのチャックボックスを入れたサイドメニューとメインのエリアにボタンのあるよくありそうなインターフェースを作ります。以下が下書きになります。 適当ですがこんな感じで作ります。サイドバーにオプシ
前回からの続きですがAdobe CEPでUI上でパラメータの値をユーザー側で設定してjsx側に送る事は何度も何度も出てくると思います。昔はj-queryで取得したなんて事もやってましたが流石に取得するformの数が増えてゆくと地道に一つづつ取得するなんて事は非効率的だし苦痛です。さらにJSONでjsx側に送るため効率よくobjectにまとめなければなりません。arrayメソッドを中心に効率よく取得してみましょう。 topcoatのcssをベースにしたhtmlから取得してゆきます。最初はラジオボタンの簡単なhtmlです。チェックされたボタンの値を取得します。実はラジオボタンの値を取得するだけなら
Adobe extensionを開発しているとformを扱う事が多くなります。jsxから数値を取得して、それをパネル上で表示して、数値を入力またjsxにアクセスしたり。デフォルトのtopcoatのcssは基本の設定が揃っていて便利ですがhtml構造が少し難しくなりがち。 前回説明したようにcheckboxやradiobuttonはlabel要素の中にdivが混じっていたりと少し複雑です。ここら辺のコードは柔軟なCEPを開発しようと思うと何度も触れる部分なので普段からまとめられると便利です。例えば以下のようなリストをjsで作るとしましょう。 各種input要素等を囲ったlabel要素があってその
今回はロード画面をエクステンション上に作ります。エクステンションの場合進捗の割合を表示できませんがcssやjavascriptで自在にロード画面を作成できるので自由度が高いです。まずはロード画面のcssとhtmlから websiteを作る場合と同じ要領でhtmlの一番上の要素にロード画面のレイヤーを載せて通常は非表示。jsxの処理が動いている時にロード画面のhtmlを表示させます。cssはアニメーションで円が三つバウンドするよくあるロード画面です。 作成したロード画面。jsxの処理が開始される時にこのロード画面のdisplayをcssでblockにします。その後jsxの処理が終わった時にロード
今回はスクロールバーの見た目を変えて見ます。こちらもあまりweb上で見かけないのはクロスブラウザ問題が深刻だからです。MDNのサイトでも使用自体勧められていません。fire foxで使用出来ないのはかなり問題ですがご存知の通りCEPはクロームベースなので関係ありません。webサイトのスクロールバーをいじることじたい抵抗があるかもしれませんがExtension上ではアプリと割り切っていじっても良いでしょう。それではhtmlとcss html css overflowでリストの中身が溢れた時にscroll表示するようにしました。それではこのdiv要素のスクロールを変えてゆきます。 id listに
続いてスライドバーを作ります。input type=”range”でスライドバーのフォームが用意されているのですがあまりwebサイトで見かけた事がないと思います。このスライド、各ブラウザで見えかたが大きく異なったりしてクロスブラウザ問題を考えるとかなり扱いずらいフォームだとは思います。しかしCEPはクロームベースで動いているのでこういった問題は殆ど気にしなくてもいいのがメリットです。 valueでデフォルトの数値、 minで最小値の設定、 maxで最大値の設定 stepで一ステップ事の数値を設定できます。ちなみにデフォルトの状態が以下になります。 見えかたはクロームに依
topcoatのライブラリーを使用すれば自作でcssを用意しなくても便利なフォームデザインが用意されているのは前回述べた通りです。それでも自前でデザインしてみたい場合のカスタマイズについて述べます。ちなみにtopcoatを使用ずる場合はdisabled時やチェック時のフォームの反応やクリックした時の反応等全て事前に用意されているのでこれら全て自前でカスタマイズするとなるとそれなりの労力になる事は覚悟してください。 まずhtml チェックボックスをふた通り用意しました。それぞれ大きくカスタマイズするのでlabel要素の中にdivも一緒に挟んでいます。labelで一緒に挟む事によりdivをクリック