// アナリティクス

【After Effects】『KBar』の拡張スクリプト『KBartender 2』の購入方法、ダウンロード・インストール方法、機能や使い方を徹底解説!!

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説

当サイトはアフィリエイト広告を利用しています。

After Effects

ふにゃ太郎
ふにゃ太郎

『KBar』をカスタマイズできる『KBartender 2』という拡張スクリプトがあると聞いたのですが

ご存知でしょうか(゚∀゚)!?

NEXTist
NEXTist

『KBartender 2』は中々クセの強い拡張スクリプトだね( ̄∇ ̄;)

使いこなすと超便利だから、一度触ってみる価値はあると思うよ♪( ´θ`)ノ

ふにゃ太郎
ふにゃ太郎

なるほどっ(°▽°)!!ただ機能を解説した記事や動画がほとんどなくって…|ω・`)チラッ

NEXTist
NEXTist

出たっ|ω・`)チラッ

解説するのちょっと大変だけど…(ー ー;)『KBar』ユーザーにはおすすめできるスクリプトだから

できる限りわかりやすいように頑張って解説してみるね(´∀`*)


今回は『KBar』の拡張スクリプト『KBartender 2』の購入方法と設定方法、機能と使い方を徹底解説していきたいと思います^^



少々クセのあるスクリプトですが

「『KBar』をとことんカスタマイズしたい!!」

「『KBar』の設定やデータ管理をもっと楽にしたい!!」

という方は、ぜひ最後まで見ていただければ幸いです(´∀`=)


*『KBar』の機能や使い方、購入方法、ダウンロード・インストール方法について徹底解説した記事はこちら⬇︎⬇︎


この記事は以下のような悩みや疑問をお持ちの方に役に立つ記事の内容となってます⬇︎⬇︎


目次

『KBar』の拡張スクリプト『KBartender2』とは!?

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 解説 設定

『KBartender2』は『KBar』の機能を拡張することができるスクリプトで、『KBar』のデータを管理するためのディレクトリを作成して、その都度プリセットファイル(.jnon)に変換することで『KBar』で各ボタンを1つ1つ設定しなくても、『KBartender2』を使えば数回クリックするだけでツールバーやボタンの作成、アイコンデザインなどをまとめて設定できるようになりますd( ̄  ̄)

文字だけだとわかりにくいですよね…(ー ー;)

要は『KBar』のデータを別の場所(ディレクトリ)で管理して

そこで一括設定した内容をプリセットファイル(.json)を使って『KBar』に反映することができるスクリプトです^^

ディレクトリの中にはツールバーフォルダを作って、その中にツールバーに設定したい各種ボタンに必要なデータを入れていけば、最終的にプリセットファイル(.json)で一気に設定を反映させることができます。

ボタンの中には『KBar』では設定できない各種ファイル(aep,ai,psd,c4d,csv,pdf…etc)をツールバーのフォルダに入れておけば、『KBar』を使ってワンボタンで開くように設定することができますd( ̄  ̄)

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2  機能 使い方 解説 Select Directory 階層


『Illustrator』と連動してアイコンも一気に設定することができるのでかなり便利ですd( ̄  ̄)

Adobe After Effects Script 無料 拡張スクリプト KBartender2  機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons Ai Illustrator アイコン デザイン



私が『KBartender2』を購入した理由は『KBar』では、自身でカスタマイズした設定に別のプリセットファイル(.json)をインポートすると、カスタマイズした設定は全て上書きされてしまいます。

「自分のカスタマイズした『KBar』に、あの無料配布されている便利でアイコンがかっこいいボタンを一気に追加することができたらいいのに…」

この悩みを解決してくれたのが拡張スクリプト『KBartender2』でした^ ^

価格は2,300円ほど、30%OFFクーポンを使えば1,600円くらいで手に入るので

『KBar』カスタマイズライフをエンジョイしたい方は購入を検討してもいいかもしれません( ´∀`)

『KBartender2』の購入方法とダウンロード方法

『KBartender2』は海外サイトに『songZ』という方が販売していますd( ̄  ̄)

まずは『KBartender2』販売ページへ入ります⬇︎⬇︎


『KBartender2』の販売ページに入ったら『individual license』を選択して『これが欲しいです!』をクリックします。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 解説 設定 サイト



メールアドレス入力と支払い情報(クレジットカード or PayPal)を入力して『支払う』を選択します。

『オファーコード』に割引コードredditfriendを使用すると30%OFFになるみたいです^ ^

*私は購入した後に知りましたので…実際に割引されるかはわかりません…(゚∀゚;)

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 解説 設定 支払い 情報入力



支払いが済んで購入が完了したら内容を確認してから『Download』をクリックします。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2  解説 設定 支払い完了 ダウンロード



ダウンロードページに入るので『ダウンロードする』をクリックします。

下にある『あなたのライセンスキー』は後でアクティベートする際に使用します。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 解説 設定 支払い完了 ダウンロード ライセンス



登録したメールアドレスにも『KBartender2』のダウンロードリンクとラインセンスキーが送られてきてるので、こちらを使用してもかまいませんd( ̄  ̄)

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 解説 設定 支払い完了 ダウンロード ライセンス



『KBartender2.3-Gumroad.zip』がダウンロードされます。

これで『KBartender2』のインストールに必要なファイルのダウンロードは完了です^^

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 解説 設定 支払い完了 ダウンロード KBartender2.3-Gumroad.zip



『KBartender2』をインストール方法とアクティベートする方法

『KBartender2』をインストール方法とアクティベートする方法を順を追って解説をしていきますd( ̄  ̄)

スクリプトファイル(.jsx,.jxsbin)の保存場所

Windows ▶︎ C: ▶︎ Program Files ▶︎ Adobe ▶︎ Adobe After Effects <AE version> ▶︎ Support Files ▶︎ Scripts ▶︎ ScriptUI Panels

Mac ▶︎ アプリケーション ▶︎ Adobe After Effects <AE version> ▶︎ Scripts ▶︎ ScriptUI Panels


『KBartender2』のインストール方法

『KBartender2.3-Gumroad.zip』を展開してフォルダを表示させます。

フォルダの中にはサンプルデータ『KBartender2_sample_directory』とスクリプトファイル『KBartender2.jsxbin』『KBartender2』のマニュアル『README』が入っています。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 解説 設定 jsxbin インストール



スクリプトファイル(.jsxbin)のインストール方法は2種類ありますd( ̄  ̄)

スクリプトをその都度開く場合にはアプリケーション ➡︎ 使用している『After Effects』ファイル ➡︎『Scripts』フォルダへドラッグ&ドロップで保存してください。

*『Windows』の方は『Support Files』 ➡︎『Scripts』へ保存してください。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 解説 設定 jsxbin Scriptsフォルダ 保存



『KBartender2』をワークスペースにドッキングして配置したい場合には、アプリケーション ➡︎ 使用している『After Effects』ファイル ➡︎『Scripts』➡︎ 『』へドラッグ&ドロップで保存してください。

『Windows』の方は『Support Files』 ➡︎『Scripts』➡︎『ScriptUI Panels』へ保存してください。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 解説 設定 jsxbin ScriptUI Panels 保存
NEXTist
NEXTist

ワークスペースにドッキングしてまで頻回に使用するスクリプトではないので

その都度開く方法でもいいかと思います^^



『KBartender2』をアクティベートする方法

『After Effects』を開いてから、その都度開く『Scripts』フォルダにスクリプトファイル(.jsxbin)を保存した方は、上部メニューの『ファイル』から『スクリプト』➡︎『スクリプトを実行…』を選択して

Adobe After Effects Script KBar 無料 拡張スクリプト Primitives jsx インストール



『Scripts』フォルダに保存したスクリプトファイル『KBartender2.jsxbin』を選択して開くをクリックすると『KBartender2』が開きます。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 解説 設定 jsxbin スクリプトを実行



ちなみに2回目以降は『最近使用したスクリプトファイル』にスクリプトファイル『KBartender2.jsxbin』が表示されるので、毎回ファイルを探して選択する必要はありません^^

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 解説 設定 jsxbin 実行



ワークスペースのドッキングが可能な『ScriptUI Panels』フォルダの中にスクリプトファイル『KBartender2.jsxbin』を保存した方は、上部メニューの『ウィンドウ』➡︎ 『KBartender2.jsxbin』で『KBartender2』が開きます。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 解説 設定 jsxbin 実行



『KBartender2』のパネルが開いたら『trial』と表示されている欄に『KBartender2』購入時に表示されていたライセンスコードをコピペして『Activate』をクリックします。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 解説 設定 アクティベート ライセンス コード



アクティベートが完了して『KBartender2』を使うことができるようになります(゚∀゚)

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 解説 設定 アクティベート ライセンス 認証 完了


KBartender2』の機能や使い方

KBartender2』の機能や使い方を順を追って解説をしていきますd( ̄  ̄)


サンプルファイルを使って『KBartender2』の使い方の流れを一通り解説

KBartender2』にはサンプルファイルが用意されているので、最初はそのサンプルファイルをディレクトリと指定して設定しながら『KBartender2』の使い方を解説していきます^^


『1.Select Directory』➡︎ ディレクトリ(サンプルファイル)を指定する

まずパネルの『1.Select Directory』をクリックして

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 Select Directory



購入したスクリプトファイル(KBartender2.jsxbin)が入っていたフォルダ内に『KBartender2_sample_directory』フォルダがあるので選択して『開く』をクリックします。

これで選択したサンプルファイルをディレクトリ(データの保管場所)として読み込みました。

NEXTist
NEXTist

このディレクトリの中に名前をつけてフォルダやデータを整理していくことで『KBar2』の設定をすることができますd( ̄  ̄)

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 サンプル Select Directory



サンプルファイルをディレクトリとして読み込むとパネルの下にディレクトリに含まれるツールバーの数とボタンの数が表示されます。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 Select Directory KBartender2_sample_directory



ディレクトリとして読み込んだサンプルファイル『KBartender2_sample_directory』の階層を見ると、サンプルファイルの下の階層にツールバーが3つ(toolbar_A,B,C)、さらに下の階層にそれぞれボタンとして機能するファイルが16個入っています。

ボタンの中には『KBar』では設定できない各種ファイル(aep,ai,psd,c4d,csv,pdf…etc)をツールバーのフォルダに入れておけばワンボタンで開くように設定することができますd( ̄  ̄)

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 Select Directory 階層
NEXTist
NEXTist

要はツールバーの階層にツールバーフォルダを作成して、その各ツールバーフォルダの中にボタンに設定したいファイルをぶち込めばボタンとして設定することができます٩( ‘ω’ )و



『2.Generate JSON』➡︎ ディレクトリ内で調整したファイルを『KBar』プリセットファイル(.json)としてエクスポートする

実際にディレクトリとして設定したサンプルファイル『KBartender2_sample_directory』の内容(ツールバーやボタン)を『KBar』へ反映させていきますd( ̄  ̄)

『2.Generate JSON』をクリックします。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 Generate JSON



ファイル名の入力と保存場所を指定して『保存』をクリックします。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 Generate JSON エクスポート



これでディレクトリとして指定したサンプルファイル『KBartender2_sample_directory』の内容(ツールバーやボタン)を『KBar』プリセットファイル(.json)としてエクスポートすることができました。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 Generate JSON プリセットファイル エクスポート



上部メニューのウィンドウ ➡︎ エクステンション ➡︎『KBar』 を開いて

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説  開く



左上にあるメニューから『KBar Settings』をクリックします。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 セッティングメニュー



『SETTINGS』➡︎ 『Restore』をクリックして

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 KBar2 SETTINGS Restore



先ほどエクスポートしたプリセットファイル(.json)を選択して『開く』をクリックします。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 SETTINGS .json file Restore



ディレクトリとして設定したサンプルファイル『KBartender2_sample_directory』の内容(ツールバーやボタン)を『KBar』へ反映させてることができました。

アイコンデザインはテキストになっていますが『Kbartender2』の機能を使って一括でアイコンを変更する方法も後ほど解説しますd( ̄  ̄)

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 ディレクトリ 反映



オリジナルのディレクトリフォルダを作って『KBartender2』とリンクする方法を解説

それでは実際に1からオリジナルのディレクトリフォルダを作って『KBartender2』とリンクする方法を解説していきますd( ̄  ̄)

サンプルファイルと同じようにオリジナルのディレクトリフォルダを作ります。ディレクトリとして設定するフォルダを作成して適当に名前をつけてください。

今回は『KBartender2-directory』とつけました。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 ディレクトリ フォルダ 作成



次はそのディレクトリフォルダ『KBartender2-directory』内に4つフォルダを作ります。

この4つのフォルダがツールバーになりますので、フォルダ名がツールバーの名前となりますd( ̄  ̄)

NEXTist
NEXTist

日本語名は文字化けします(ー ー;)ツールバーフォルダはいくつでも作成できます。

この階層に他のデータをおいても基本的に無視されますd( ̄  ̄)

Adobe After Effects Script KBar2 無料 拡張スクリプト KBartender2 機能 使い方 解説 KBar ツールバー フォルダ 作成



これでディレクトリの準備が整ったので『After Effects』➡︎ 『KBartender2』と『Kbar』を開きます。

『KBartender2』の『1.Select Directory』をクリックして

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 Select Directory



作成していたフォルダ『KBartender2-directory』をディレクトリとして選択、『開く』をクリックします。

これで『KBartender2-directory』がディレクトリとして『KBartender2』とリンクしました^ ^

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 Select Directory フォルダ


『KBartender2』を使って『KBar2』のボタン作成やアイコンを設定する方法を解説

次は『KBartender2』を使いながら『KBar』のボタン作成やアイコンを設定する方法を解説していきますd( ̄  ̄)

『KBartender2』のツールパネルには5つの機能が用意されているので、1つ1つボタンを作りながら解説していきます。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 ツールパネル


『 C(Cancel selected folder cache)』

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 ツールパネル Cancel selected folder cache

『Cancel selected folder cache』機能は『1.Select Directory』で設定したディレクトリとのリンクを解除(リセット)することができますd( ̄  ̄)

ディレクトリを変更したい場合などに使用しますが、ほとんど出番はありません…(゚∀゚;)

『 E(create extension/menu call script)』

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2  機能 使い方 解説 ツールパネル create extension/menu call script

『create extension/menu call script』はエクステンションやメニューアイテムからスクリプトを作成することができますd( ̄  ̄)

『KBartender2』の『E(create extension/menu call script)』ボタンを押すと以下のパネルが表示されます。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 ツールパネル create extension/menu call script



例えば

『extension or menu name』の欄にはエクステンションやメニューアイテムを入力しますが、入力する際には『After Effects』上に表記されている文字と一字一句、スペースまで間違いのないように入力しなければいけません。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2  機能 使い方 解説 ツールパネル create extension/menu call script Test 入力



『Motion Bro v3.2.1』と入力して『Test』をクリックすると、『Motion Bro』が開きます。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 ツールパネル create extension/menu call script Test



入力が間違っていると『Test』でエラーとなるので、間違っていないか確認しましょうd( ̄  ̄)

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 ツールパネル create extension/menu call script Test 入力 エラー



ちなみに日本語対応しているメニューもありますが、ほとんどが英語版でのメニューでないと正しく動作しませんでした…(ー ー;)

NEXTist
NEXTist

『新規コンポジション…』や『平面…』はいけましたが

『レンダーキューに追加』はいけませんでした(゚∀゚;)

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 ツールパネル create extension/menu call script Test 入力 エラー



『Get name…』をクリックすると『paste to get whole menu list(貼り付けてメニューリスト全体を取得)』と表示されるので『OK』をクリックすると

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 ツールパネル create extension/menu call script Test Get name



『キーボードショートカット』の画面が表示されるので『クリップボードにコピー』を選択して

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 ツールパネル create extension/menu call script Test キーボードショートカット



テキストエッディットなどにコピーしたショートカット一覧をペーストして、そこからコピペしながらメニューを入力するとスムーズかと思いますd( ̄  ̄)

ただし、日本語メニューの場合は機能しないことが多いです…(ー ー;)

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 ツールパネル create extension/menu call script Test キーボードショートカット一覧 コピペ



『Test』して問題なければ『Save』をクリックしてスクリプトファイル(.jsx)を書き出します。

名前とスクリプトのボタンを作りたいツールバーフォルダへ保存します。

今回は『Toolbar-1』フォルダへ保存します。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 ツールパネル create extension/menu call script Test スクリプト エクスポート



これでディレクトリ内のツールバーフォルダ『Toolbar-1』へ『Motion Bro』を開くスクリプトファイル(jsx)が保存されました。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 ツールパネル create extension/menu call script Test スクリプト エクスポート



実際にディレクトリがどうのように『KBar』に反映されるか確認します。

『KBartender2』の『2.Generate JSON』をクリックして、プリセットファイル(.json)を書き出します。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 ツールパネル create extension/menu call script Test json エクスポート



『KBar』の『SETTINGS』➡︎ 『Restore』をクリックして、先ほど書き出したプリセットファイル(.json)を選択して『開く』をクリックします。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 ツールパネル create extension/menu call script Test json Restore



これでディレクトリに設定したデータが『KBar』へ反映されます。

NEXTist
NEXTist

ディレクトリの各階層と設定を反映した『KBar2』を比較すると、どの階層にどのフォルダやファイルを置けばいいのかわかるかと思いますd( ̄  ̄)アイコンの設定は後述します^^

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 ツールパネル create extension/menu call script Test json 反映


『 M(Get the matchName of selected effect)』

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 ツールパネル Get the matchName of selected effect

『Get the matchName of selected effect』では選択したエフェクトをボタンとして作成することができますd( ̄  ̄)

例えば

ディレクトリ設定はそのままで、エフェクト(グロー)を選択した状態で『KBartender2』の『M(Get the matchName of selected effect)』ボタンを押します。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 ツールパネル Get the matchName of selected effect



保存場所を指定します。今回はグローエフェクトボタンを『Toolbar-2』に設定したいので、『Toolbar-2』を選択して『開く』クリックします。

Adobe After Effects Script KBar2 無料 拡張スクリプト KBartender2 機能 使い方 解説 ツールパネル Get the matchName of selected effect ツールバー 保存



すると『Toolbar-2』に『ADBE Glo2』というフォルダが作成されます。

これでエフェクト(グロー)を適用できるボタンが『Toolbar-2』にできました。

NEXTist
NEXTist

『Kbartender2』のディレクトリ内でエフェクトボタンは『フォルダ』になります。

中には空で問題ありませんd( ̄  ̄)

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 ツールパネル Get the matchName of selected effect エフェクト フォルダ 保存



今回はこのグローエフェクトボタンにアイコンを設定してみます。

設定は簡単です。アイコンに設定したいPNG/SVGにボタンデータと同じ名前をつけて、同じツールバーフォルダ『Toolbar-2』に入れるだけですd( ̄  ̄)

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 アイコン デザイン 設定 PNG SVG



『KBartender2』の『2.Generate JSON』でプリセットファイル(.json)を書き出して『KBar』の『SETTINGS』➡︎『Restore』から書き出したプリセットファイル(.json)をインポートすると『KBar』の『Toolbar-2』にエフェクト(グロー)ボタンがアイコン付きで反映されます^^

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 アイコン デザイン 設定 PNG SVG json Restore


『 Ai(Ai script: for easy creating button icons)』

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 ツールパネル Ai script: for easy creating button icons

『Ai script: for easy creating button icons』はIllustratorと連動して作成しているボタンに一括してアイコン(PNG/SVG)を設定することができますd( ̄  ̄)

今回は『KBartender2』のサンプルファイルを使って解説していきます。

サンプルファイルには各ツールバー(toolbar_A〜C)にそれぞれ4つずつ計16個のボタンデータが入っています。

サンプルアイコンは全てテキスト表示になっているので、各ツールバーごとに一括してアイコンを設定していきますd( ̄  ̄)

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons サンプル



ディレクトリはサンプルファイル『KBartender2_sample_directory』を設定しています。

まず『KBartender2』の『Ai(Ai script: for easy creating button icons)』ボタンをクリックします。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons



『Ai(Ai script: for easy creating button icons)』ボタンをクリックすると

・『Illustrator』を開いている or 開いていない

・新しくドキュメント(.ai)を作成するのか、古いドキュメント(.ai)を利用するのか?

・新しくドキュメント(.ai)を作成するのか、現在開いているドキュメントを使用するのか?

など、状況によってその都度質問が表示され選択した条件で『Illustrator』を開くようになります。


全て説明するのは難しいのでフローチャートを作ってみました⬇︎⬇︎

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2  機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons フローチャート



フローチャートを見ながら以下の3パターンに分けてると分かりやすいかと思います⬇︎⬇︎




【『Ai(Ai script: for easy creating button icons)』機能を使って初めてアイコンを一括設定する方】

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons フローチャート 初回



『Illustrator』を開いていない状態から手順を解説しますd( ̄  ̄)

まず『KBartender2』の『Ai(Ai script: for easy creating button icons)』ボタンをクリックして『launch』をクリックします。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons 初回 launch



『Illustrator』が開いて『Open old file or Create new file?(古いファイルを開くか、新しいファイルを作成しますか?)』と聞かれるので『Create』を選択します。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons Open old file or Create new file?



『Select α folder(based on KBar toolbar group)』と表示されたウィンドウが開くので、ディレクトリに設定しているツールバーフォルダの中からアイコンを一括設定したいフォルダを選択して『開く』をクリックします。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons Select α folder(based on KBar toolbar group)



選択したツールフォルダ『toolbar_A』内に含まれるボタンデータの数だけ名前がついた状態でアートボートが作成されたドキュメントが開きます。

NEXTist
NEXTist

アートボードに直接表示されているアートボード名は『プロパティ』➡︎『アートボード編集』で

分かりやすいように一時的に表示していますd( ̄  ̄)

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons Ai Illustrator アートボート



それぞれのボタンに合わせてアイコンを各アートボートに作成、もしくはコピペしてサイズを合わせます。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons Ai Illustrator アイコン デザイン



 上部メニューのウィンドウから『アセットの書き出し』パネルを表示させて、パネルの下にある四角のアイコンをクリックします。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons Ai Illustrator アイコン デザイン アセットの書き出し メニュー



『スクリーン用に書き出し』パネルが表示されるので上部タブを『アートボード』に切り替えて

・選択を『範囲』➡︎『すべて』に変更

・書き出し先をアイコンを設定したいツールバーフォルダ『Toolbar_A』に設定

・『書き出し後に場所を開く』『サブフォルダーを作成』のチェックを外す

・フォーマットはできればPNGよりSVG設定へ

設定が終わったら『アートボードを書き出し』をクリックします。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons Ai Illustrator アイコン デザイン アセットの書き出し 設定



これで保存先に指定したツールバーフォルダ『toolbar_A』内へ5つのアイコンデータ(.svg)が書き出されました。

NEXTist
NEXTist

ファイル名を少しでも変えてしまうとリンクしなくなるので注意ですd( ̄  ̄)

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons Ai Illustrator アイコン svg 書き出し



『KBartender2』の『2.Generate JSON』でプリセットファイル(.json)を書き出して『KBar』の『SETTINGS』➡︎『Restore』から書き出したプリセットファイル(.json)をインポートすると、『Toolbar-1』のボタンがアイコン付きで反映されます^^

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons Ai Illustrator アイコン svg .json 反映
NEXTist
NEXTist

スムーズに反映されないこともあるので、その時は一度『KBartender2』を閉じて

再度開いてトライしてみてくださいd( ̄  ̄)




【『Ai(Ai script: for easy creating button icons)』機能で以前作成したドキュメント(.ai)を使って

アイコンを再度一括設定する方】

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons フローチャート 2回目以降



【『Illustrator』でアイコンをデザインして、そのドキュメントをそのまま『KBartender2』の Ai(Ai script: for easy creating button icons)』機能で利用したい方】

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons フローチャート 2回目以降


『 ? 』アップデート情報やその他スクリプトの紹介など

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 機能 使い方 解説 ツールパネル アップデート情報

『?』ボタンは『KBartender2』のアップデートや各種サポート・ライセンス情報などを見ることができたり、開発者である『songZ』さんが作ったスクリプトを見ることができますd( ̄  ̄)

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 アップデート情報 サポート ライセンス情報



『KBartender2』で『KBar』にエクスプレッションボタンを追加する方法を解説

『KBartender2』では『KBar』で設定できない各種ファイル(aep,ai,psd,c4d,csv,pdf…etc)をそのままツールバーフォルダに入れておけばワンボタンで開くように設定することができますd( ̄  ̄)

ただし、エクスプレッションをボタンに設定する場合には『JavaScriptファイル(.js)』を書き出して、ツールバーフォルダへ入れる必要があります。

『KBartendar2』のサンプルファイル内にある『Wiggle.js(JavaScriptファイル)』を見ると分かりやすいです^ ^

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2  機能 使い方 解説 エクスプレッション 設定 JavaScript



サンプルファイル『Wiggle.js』をダブルクリックで開くと『Adobe Dreamweaber』が起動します。

*『Adobe Creative Cloud アプリ』より『Adobe Dreamweaver』をインストールしてください。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2  機能 使い方 解説 エクスプレッション 設定 JavaScript Dreamweaver



修正したい場合には数値を書き換えて保存すれば変更されます。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender 2 機能 使い方 解説 エクスプレッション 設定 JavaScript Dreamweaver



新しいエクスプレッションのボタンを作りたい場合には新規作成 ➡︎『JavaScript』➡︎ 作成を選択して

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2  機能 使い方 解説 エクスプレッション 設定 JavaScript Dreamweaver 新規作成



『KBar』のボタンに設定したいエクスプレッションのコードを書く、もしくはコピペして

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 エクスプレッション 設定 JavaScript Dreamweaver 新規作成



上部メニューのファイル ➡︎ 保存を選択して、名前と保存場所をしてから『保存』をクリックします。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 エクスプレッション 設定 JavaScript Dreamweaver 保存



あとは書き出した『JavaScriptファイル(.js)』を設定したいツールバーフォルダに入れて『KBar』に反映させれば、ワンボタンで使うことができます。

Adobe After Effects Script KBar 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 エクスプレッション 設定 JavaScript ディレクトリー ツールバー フォルダ 保存
NEXTist
NEXTist

サンプルフォルダの『JavaScriptファイル(.js)』のコードを書き直して

『別名で保存…』した方が早いかもしれませんね^ ^



最後に

『KBar』のカスタマイズをもっと手軽に楽しみたい方に最適な『KBartender2』について徹底解説しました^^

中々クセのあるスクリプトですが、使いこなせばカスタマイズにかかる時間を大幅に減らすことができるので『KBar』の利便性をとことん追求したい人にはオススメです(゚∀゚)

他にも『KBar』に関する記事をいくつか書いていますd( ̄  ̄)

興味のある方はぜひ読んでみてください^^⬇︎⬇︎

*『KBar』の機能や使い方、購入方法、ダウンロード・インストール方法について徹底解説した記事はこちら⬇︎⬇︎


『KBar』を購入後、カスタマイズ前に必ず読んでくださいd( ̄  ̄;)

*ランチャーツール『KBar』を楽しくカスタマイズするために見るべきサイトを紹介!!⬇︎⬇︎


*ランチャーツール『KBar』+スクリプトで超作業効率化!!作業を効率化する便利なスクリプトを厳選して紹介した記事です⬇︎⬇︎


*『KBar2』の無料拡張スクリプト『Primitives』を徹底解説した記事です⬇︎⬇︎



*『KBar』の『Invoke Menu Item』➡︎『Menu command name or command id』に『Command ID』を入力すれば、ワンボタンでメニューを実行することができるようになりますd( ̄  ̄)

【After Effects】の日本語版と英語版のメニューアイテム対応表 + Command ID【ver.2021】の記事はこちら⬇︎⬇︎


『KBar』のカスタマイズで使えるボタンアイコンやツールバーファイル(kbar)を作りました\( ̄∀ ̄)/

もちろん!! 全て無料 ダウンロードして使うことができますd(゚∀゚)

お気に入りが見つかればぜひ…使ってください( ´ ▽ ` )⬇︎⬇︎

NEXTist
NEXTist

記事はまだ途中ですが、随時追加していきます٩( ᐛ )و


今回紹介したランチャースクリプト『KBar』以外にも

『Adobe After Effects』で使えるおすすめの無料・有料プラグインやスクリプトはたくさんありますd(^^)

【Adobe After Effects】おすすめの無料プラグイン+スクリプト

『AEJuice』 (無料版)

*約700種類のプリセットや複数のプラグインを無料で使用できる『AEJuice』のダウンロード・インストール方法を解説した記事はこちら⬇︎⬇︎

『Animation Composer 3』 (無料版)

*約100種類以上のアニメーションプリセットや複数のプラグインを無料で使用できる『Animation Composer 3』の機能や使い方を徹底解説した記事はこちら⬇︎⬇︎

『Motion Bro』 (無料版)

*1200種類のプリセットが無料で使える『Motion Bro』のダウンロード・インストール方法を解説した記事はこちら⬇︎⬇︎

『Utility BOX 』(無料)

*無料で手に入る超便利な万能スクリプト『Utility BOX』を徹底解説した記事はこちら⬇︎⬇︎


『AEVIEWER 2』(無料)

*【Premiere Pro+After Effects】無料なのに超便利な素材管理プラグイン『AEVIEWER 2』の機能や使い方を徹底解説した記事はこちら⬇︎⬇︎


【After Effects】無料プラグインまとめ記事

*『After Effects』初心者が絶対に導入すべきおすすめの無料プラグインを紹介した記事はこちら⬇︎⬇︎


【Adobe After Effects】おすすめの有料プラグイン+スクリプト

『AEJuice ALL BUNDLE Lifetime』(有料買い切り)

*『AEJuice』が提供する64種類すべてのプラグイン(プリセット数9,000種類以上)が手に入る最強効率化バンドル『AEJuice ALL BUNDLE Lifetime』を徹底解説した記事はこちら⬇︎⬇︎

『Animation Composer Motion Designer’s Bundle』(有料買い切り)

*『Animation Composer』で使える8種類の便利なプラグイン詰め合わせセット『Motion Designer’s Bundle(プリセット数5,000種類以上)』を徹底解説した記事はこちら⬇︎⬇︎

『KBar2』(有料)

*導入必須のランチャースクリプト『KBar2』を徹底解説した記事はこちら⬇︎⬇︎

『Toko Graphics 4.0』(有料)

*2250種類の高品質なグラフィックプリセットが使える『Toko Graphics 4.0』の購入からインストールまでの手順を徹底解説した記事はこちら⬇︎⬇︎

『Motion Tools 2』(有料)

*超便利な万能プラグイン『Motion Tools』の機能と使い方を解説した記事はこちら⬇︎⬇︎

『Flow』(有料)

*『After Effects』必須のイージングプラグイン『Flow』の機能と使い方を解説した記事はこちら⬇︎⬇︎

『Auto Crop 3』(有料)

*『Auto Crop 3』の機能や使い方、購入方法からインストール方法まで徹底解説した記事はこちら⬇︎⬇︎



『Adobe CC』の契約期限切れ間近ではありませんか!?

『Adobe CC コンプリートプラン』が Adobe正規価格の半額【 39,980 円 / 年(税込)】で購入できる方法や

価格、各種サービス内容など徹底的に比較解説した記事を書いてます^^

*『Adobe CC』の契約更新が近い方はぜひ参考にして下さい⬇︎⬇︎





以上、最後まで読んでいただきありがとうございました٩( ‘ω’ )و