本当は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を指定しています。これで表示を非表示にできるとともに
前回に続いてhtmlをどんどん打ってゆきます。 guideを引くための機能のフォームのhtmlを加えました。見出しの部分はh1タグをheaderで囲んでいます。ヘッダーは全てのフォームで共通して打ち込みます。 各種見出しとガイドを引くためのボタン、アートボードの内側にガイドを引くための数値を入力するための数値のフォームとcm,mm,pointのラジオボタンをtopcoatのサイトを見ながら設置。以上のタグを打ち込むと以下のようなパネルになります。 とりあえずの表示はこんな感じです。なんとなくnavが上部に配置されてヘッダーがあって真ん中にメインのフォームが配置されて最後にフッターがあるのがわか
それではmainタグの中のフォームを打ち込みましょう。ただしその前にtopcoatについてもう一度触れる必要があります。こちらでも触れていますがtopcoatを使用すれば自前でフォームのカスタマイズをしなくても事前に用意された綺麗なフォームレイアウトが使えるので便利ですが一部radioボタンやcheckboxはそのままinputタグを打ち込んでも表示されません。実際にhtmlタグを打ち込む前に公式サイトで確認する必要があります。例えば このスイッチ型チェックボックスのhtmlは以下のようになっています。 このhtmlを丸々写さないと同じ見た目にならないので注意。labelの中にdivタグがある
前回全体のhtmlについて解説しました。ここから細かいタグも打ち込んでゆきます。まずはタブのhtmlからですが各種パネル表示を切り替える際にradioボタンの値で表示の内容を切り替えます。そのためにradioボタンをリスト形式で打ち込みます。 一気にhtmlの構造が複雑化しました。radio ボックスのフォームがリストタグの中に入れてさらにその外側をformタグで囲っています。この各種リストの中のradioフォームは全て同じ構造になっているので同じようなタグが並んでいるだけです。cssで装飾するためのタグも混じっているので一度削って分かりやすくします。 多少分かりやすくなりました。labelの
Extension関係の記事を検索すると環境構築してパネルを立ち上げるとこまでの記事はかなり多いのですが大体そこから先の記事はほとんどありませんでした。いわゆるHellow worldより進んだちょっとだけ複雑なExtensionの作り方を解説してみます。対象は環境構築はできる、もしくは簡単なパネルなら作れるくらいの方です。今回作るパネルには三つくらい機能を持たせてみます。ガイドを引く、ファイル情報をテキストにして印刷用にヘッドを作る、一時的なカラーの数値を保存する機能を持たせる、です。完成版はこちらにアップしておきました。 zxp圧縮版はこちらです。 パネルの完成図は以下のような感じに。 *
実験的にIllustrator用のExtensionを公開します。 Illustrator上でパスアイテムの塗りの色を管理するExtensionです。個人的によく使いそうな機能を主に三つ、一つのパネルにまとめました。 選択したパスアイテムの塗りの色を一括して動かす機能とカラーパターンを一瞬で作成する機能、それと特定の色をパネル上に一時的に保存する機能です。以下詳細。 塗りの色、一括調整機能 選択したパスアイテムをフォームに入力した数値だけ動かします。ばらばらのパスの塗りの色を一括して濃度の調整をしたいと思った事があったので作成。複合パスでもグループ化されたパスでも大体いけます。ただし特殊な設定
webpackについては何度か触れましたが今回もっと深く触れたいと思います。webpackの役割はいくつかのファイルに分割されたjsファイルを一つにまとめるツールです。コードが複雑化するにつれファイル、一つあたりのコードが長くなって読みづらくなったり変数の管理が大変になります。なので各モジュールに役割事にコードを分割してメインのjsファイルで読み込ませる事で読みやすく、管理のしやすいコードが実現できます。まとめるついでにjsのコードを古いECMAに変換したりsassをcssに変換してモダンなコード書きつつ古いブラウザに対応させることが可能です。ReactやVueを使用する場合もこういった変換作
*2022年3月25日 ver2.0を公開しました。詳細はこちらから。 新しくExtension開発しました。今回はIllustrator用です。Illustratorのドキュメントに配置された画像をNode.jsで監視して、更新されたら自動的にドキュメントを開いて保存するというものです。ポスターなんかで画像の色補正をしている時にテストプリントの度に補正->pdf保存->出力 補正->pdf保存->出力と繰り返すのが面倒だと思ってこの一連の作業を自動化するために開発しました。ここで紹介したものをExhangeで公開するために開発し直したものです。具体的には監視したい画像
