ついにmain.jsに触ります。完成形が以下 今回Node.jsのネイティブモジュールを使用するため冒頭でfsとpathをrequireしてます。更に各種htmlのidタグをdocument.getElementByIdで取得。extensionRoot変数はご存知の通りjsxフォルダーのパスです。 本格的に解説に入る前にnav.jsの関数を実行した時に書いたコードをもう一度確認します。 冒頭の変数を頭に入れつつまずウインドウが開いた時に実行する関数、initから解説します。 非同期処理が入るのでasync関数として定義しています。ここで行っているのは。 jsxの共通の関数等を外部ファイルとし
今回から本格的にjsを書きてゆきます。jsもいくつかのファイルに分けて読み込ませます。その前にいくつか事前準備が必要です。まずはmanifestの編集。 今回メインの処理にNode.jsを使用するためnodeの行を追加します。それに加えて–mixed-contextも加えてください。これがないとウインドウ、リロード時にバグが起きるためです。–mixed-contextを残したくない場合開発終了時に除くこともできます。 次にjson2の配置。jsxとパネルの通信に必要なのでパネル側で読み込ませる前に事前にjsxフォルダーに入れておきます。こちらから入手してくだい。 また詳
前回の時点でベースのcssは完成したので今回少しだけ見た目を整えて完成させたいと思います。まずフォームをパネルのような要素で括って立体感を出すためのcssを作成します。 変更前 変更後 backgroundで背景色を指定、box-shadowで影を落として立体感を出したborder-radiusで四隅を丸くしています。この辺は好みですこれ自体重要な要素ではないのでやらなくてもこの後の作業に支障はありません。themeManagerで環境設定のUIの色によって柔軟に対応させたい時はむしろそのままの方がいいでしょう。（パネルの青の色が固定になるため）あくまで何かの参考までに。 ヘッドのフォームも同
Illustrator用Extension、BatchExtendAIを公開します。Photoshopのバッチ機能のようにIllustrator上で開いたファイルに対してアクション処理を使用します。Illustratorだとあらかじめ開いたファイルに対して使用する機能がなかったので作りました。アクションはあらかじめ作成したものを読み込んでくれます。セレクターからセットとアクション名を選んでください。ただしIllustratorが開かれた時にアクションを読み込むので新しいアクションを作成した直後は読み込みません。作成したアクションを新しく読み込み場合はアクション作成後Illustratorを再起
本当は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の