Electron,ExtensionとかれこれずっとReactで開発してきたのでそろそろNext.jsでサイトでも作ってみたいなと思ったところだったので簡単なサイトを作ってみました。勿論おおよそ普段のReactと同じような感じで開発できたのですが少し戸惑った部分もあったので備忘録としてまとめました。本当にメモ書き程度の内容です。サイトはこちら。 Next.jsの導入 チュートリアル的なものが書かれたサイトで他にもっと詳しいサイトがあるのでここでは簡単にしか書きません。まずはインストールです。 これだけでベースとなるパッケージがインストールされます。ただし今回これに加えてtypescriptとs
2021年12月15日追記。 Photoshop 2022からはUXPにデフォルトで簡単にプログレスバーの実装ができるようになりました。2022以降、余程こだわりがない限りデフォルトのプログレスバーを使うのが言いでしょう。詳しくはこちらの記事。 Photoshop UXPではアプリケーションとパネル側のシステムが統一される、ということでキャンセルボタン同様プログレスバーの自作も今後できるようになるでしょう。勿論アプリケーション側の処理は基本非同期での処理でしょうから非同期での実装を想定します。ということで今回非同期の配列処理を取り上げます。このあたりに関してこちらの記事を参照。 大まかな構造
今回はよく見るスイッチ型のチェックボックスを作ります。凹んだような穴の中にボールが入っていてチェックすると中のボールが右に動いたり左に動いたりするあれで。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で構築しているので普
最後になりました。今回おまけ的にloading画面を作ります。loadingの最中はあらゆる要素の反応を無効にしたいので全ての画面をload画面で覆います。これを図的に表すとこんな感じでしょうか。 立体的な要素の指定はz-indexを行います。詳しくはこちらも参照してください。 まずhtmlでload要素を配置します。 load要素はcontainerには必ず含めないでください。このload要素はcontainerと独立した要素なので。そして以下、css。 円がくるくる回転するcssです。ベースとなっているload要素にz-index:5と高めの要素を指定しています。 このload要素ですが普
前回の時点でベースのcssは完成したので今回少しだけ見た目を整えて完成させたいと思います。まずフォームをパネルのような要素で括って立体感を出すためのcssを作成します。 変更前 変更後 backgroundで背景色を指定、box-shadowで影を落として立体感を出したborder-radiusで四隅を丸くしています。この辺は好みですこれ自体重要な要素ではないのでやらなくてもこの後の作業に支障はありません。themeManagerで環境設定のUIの色によって柔軟に対応させたい時はむしろそのままの方がいいでしょう。（パネルの青の色が固定になるため）あくまで何かの参考までに。 ヘッドのフォームも同
本当はcssを書ききってからjsに行こうかと思ったのですがさすがにmain formの切り替えを実装しないとレイアウトも形にならないので一度タブの切り替えの簡単なjsを書きます。まずこの切り替え用のjsですがメインの処置から独立させたいのでmain.jsとは別にnav.jsという名前でmain.jsと同じ階層にファイルを作ります。 わずか20行程のjsです。main.jsで実行するので全体を関数で囲みます。jsの解説に入る前にもう一度htmlを見てみます。 各種タブのラジオボタンにnav__radioというクラスが割り当てられています。getElementsByClassNameメソッドnav
今回からcssを書き込んでいきます。まずはタブのボタンの実装と切り替えを実装します。 まずはhtmlをもう一度見てみます。 リスト上に並んだ各種ラジオボタンを横並びにしてこのnavタグ自体の幅を画面にいっぱいに広げます。 今回は要素を横並びにするためにdisplay: flexを使用します。これは小要素を横並びにするためのプロパティでjustify-contentでどのように横並びするか指定できます。ただし今回は画面幅を各種ボタンでいっぱいに埋めるのでこれ自体あまり意味はありません。詳しくはこちらを参照。次に小要素の各種ボタンの大きさを指定します。 calcという関数らしき値が出てきました。こ
今回はcssを書いてゆきます。全体のレイアウトを整えてから細かいレイアウトを整えます。まずはcssに入る前にhtmlの各種mainタグにhideクラスをつけてあります。 setGuide idのついているフォームのみhideクラスがついていません。これはhideクラスをつけることによりフォームの表示をオフにするcssを実装するためのクラスです。このhideクラスをつけたり外すことにより表示の切り替えを行います。それを踏まえて基本のcssを書き込みます。style.cssに書き込んでいきます。 hideクラスにdisplayプロパティにnoneを指定しています。これで表示を非表示にできるとともに
webpackについては何度か触れましたが今回もっと深く触れたいと思います。webpackの役割はいくつかのファイルに分割されたjsファイルを一つにまとめるツールです。コードが複雑化するにつれファイル、一つあたりのコードが長くなって読みづらくなったり変数の管理が大変になります。なので各モジュールに役割事にコードを分割してメインのjsファイルで読み込ませる事で読みやすく、管理のしやすいコードが実現できます。まとめるついでにjsのコードを古いECMAに変換したりsassをcssに変換してモダンなコード書きつつ古いブラウザに対応させることが可能です。ReactやVueを使用する場合もこういった変換作