2011-02-19

After Effectsユーザーのための、プログラミング入門 その2 ScriptDragAndDrop

ScriptDragAndDrop.exe ドラッグ&ドロップ


面白いアプリを作ったので、今回はいきなり予定変更してそのアプリ紹介と、簡単なC#アプリケーションの作成方法です。

とりあえず、このアプリをダウンロードしてみてください。
ScriptDragAndDrop_v100.zip

ぶっちゃけて言うと、ファイル・フォルダのパス獲得をダイアログではなくて、ドラッグ&ドロップで実現できるアプリです。

実際に使ってみる

とりあえず、動かしてみましょう。

アーカイブの中には、以下の物が入ってます。
  • ScriptDragAndDrop.exe アプリ本体
  • ScriptDaDサンプル.jsx サンプルのスクリプト
  • ScriptDragAndDrop_src.zip C#ソースプロジェクト
ScriptDragAndDrop.exeは任意の場所へ、ScriptDaDサンプル.jsxはAfterEffectsのScriptsフォルダの場所へコピーしてください。

そして、起動させます。


After Effectsがインストールされていれば、上のTextBoxにそのPathが入力されているはずです。無ければ横のSETボタンでインストールされているAfterFX.exeを指定してください。

次に「ベーススクリプトのフルパス」を入力します。横のSETボタンでScriptDaDサンプル.jsxをとりあえず選んでください。

登録が終わったら、「ショートカットを作成」を押して「成功!」と表示されたら、デスクトップに「ScriptDaDサンプル.jsx」というショートカットファイル出来てるはずです。



このアプリを終了させ、AfterEffectsを起動します。そしたら、適当なファイル・フォルダをデスクトップの「ScriptDaDサンプル.jsx」ショートカットへドラッグさせてみてください。




と、ドラッグされたファイルパスがAfterEffectsのaletに表示されます。
いままでフォルダとかファイルのパスを獲得する方法がダイアログしか有りませんでしたが、ScriptDragAndDrop.exeを使えば、ドラッグ&ドロップで出来るということです!

何をしているか?

では、種明かしを。
ドラッグ&ドロップは以下の手順で実装しています。

  1. ScriptDragAndDropのショートカットに、ターゲットのパスをドラッグ&ドロップ
  2. ショートカットの起動オプション(リンク先)には、あらかじめベースとなるスクリプトのパスが登録されている
  3. ScriptDragAndDropは、ベーススクリプトとターゲットのパスをコマンドライン引数として受け取る
  4. コマンドラインを解析し、まずベースとなるスクリプトを読み込む。
  5. ベースとなるスクリプトには決められた単語が記述されていて、その単語をターゲットのパスに書き換える。
  6. ターゲットのパスに書き換えたスクリプトを適当なファイル(temp.jsx)に保存。
  7. ScriptDragAndDropからAfter Efefctsへスクリプト(temp.jsx)を送信
  8. After Efefctsはそのスクリイプ(temp.jsx)を実行。

この技を使えば、カットフォルダのインポートをドラッグ&ドロップで、しかも複数のスクリプトを使い分けながら作業出来たりします。いろいろ応用することもあると思います。

次にベーススクリプトの説明を。


予約語を配列として管理してあったりとか、単体で実行しても不都合無いように工夫してありますが、そこら辺はあまり問題ではなく、予約語”$DaDPath??“って文字が単純にドラッグされたファイルのぱすへ置換されるってことだけが重要です。

$DaDPath00で始まる予約語がドラッグされたファイル・フォルダの数だけ置き換わります。


ちなみに$DaDTempPathは、デバッグのために実際にAfterEffectsに送られるスクリプトのパスに置き換わります。
あと、このスクリプトでは20個以上のドラッグ&ドロップは受け取れません。これはスクリプト側の問題で、$DaDPath99までは大丈夫なはずです。

後は、スクリプト内で、Fileオブジェクトに変換してフォルダ・ファイルの識別等の処理を行って後はお好きにって感じです。

C#でのアプリケーション作成

まぁこれだけだと寂しいのでC#アプリケーション作成の基本を説明します。

上のアプリを作るのにだいたい2時間くらい。コーディング1時間、テスト1時間位です。かなり短い時間と感じられると思いますが、実はほとんど過去作ったアプリやWEBの情報をそのままコピーしてるだけで、コツさえ掴めれば誰でもこれくらいで出来るはずです。

特に僕が解説しなくても、よくある入門書を買ってきて一回読んだ後1時間位触っていればVC#は使える様になります。

VC#は簡単です。しかし、その為C#言語自体を知らなくてもアプリが作れてしまって、ある程度以上のアプリが全然作れないハマり状態になり易い危険性もあります。

まず、C#を始める前に2種類の参考書を買いましょう。

一つは、Visual Studioの操作を覚えるための本。これは最新で尚且つ一番安い物であれば何でもいいです。DelphiとかVC++を触った経験がある人なら、後々使えるようにリファレンスっぽい方がいいです。

僕は、Visual C#.NET逆引き大全 500の極意を使ってました。

もう一つは、C#言語の解説書です。これがなかなか無くて困りものです。
C#は操作マニュアルばかり多くて、言語系の本は他の言語との比較と新バージョンの変更点の説明ばかりで…

結局僕は、標準C#入門 改訂第2版(矢沢 久雄 著)で勉強しました。入門書かつ言語解説した本はこれだけです。(入門書じゃなければいろいろいい本はあるんですが)

まず、本を買って読む。これがC#の入門です。

あと、余力があればC#によるコンポーネントプログラミングも読んでおいたほうがいいです。
後々わかると思いますが、カスタムコンポーネント・コントロールを作れると格段に生産性が上がります。

参考になるWEBページ

次にC#でアプリを作るための情報を知る方法ですが、これは簡単です。
とりあえず上の二つのHPを見ればほぼ全ての情報が手に入ります。
特にDOBON.NETの.NET プログラミング Tipsは凄いです。

今回のドラッグ&ドロップやらショートカットの処理は、ほとんどここにあるサンプルコードをそのまま使ってます。

コーディング Tips

では、C#導入部分は本を読んでもらうとしてここでは、僕がC#でコーディングするときの心構えというかTipsを(まぁ、AEスクリプトでも同じだけど(^_^)

最初にフローを考える
いきなりコーディングを始めない事。特にC#は各種のイベントに合わせたプログラミングがメインなのでイベントの把握が重要。C#というかWindowsのプログラミングでは最重要!

classを積極的に使う
慣れていないと関数型のフローを考えがちだけど、最初からclassありきとして設計しよう。何故かというと楽だから。最初は面倒と思うかもしれないが、コードの再利用がしやすいというメリットはかなり大きい。同時に一つのclassはなるべく1ファイルにしておくと後で楽。

文字等の定数はまとめておく

定数はコード中になるべく埋め込まない(例外あるけど)
定数をコードから分離することでさらにコードの再利用が楽になる。この例ではclass定義中に定数の宣言をしているが、C#は他にもリソースとして別にもつことも簡単に出来る。

コメントは必ず書く
C#ではコメントとして”///“のような特別な記述方法が用意されてるので積極的に使おう。
変数や関数の上の行で”///“と入力すると自動的にコメント入力のフォーマットが作成される。

これは本来classのシリアライズに使われるものだけど、この形式で入力しておくと、単語の自動補完の時にそのコメントが表示される。これがすごく便利。

List<>は便利
標準の配列はCっぽくて、JavaScriptとかに慣れてると面倒さを感じます。で、さがすとほとんどJavaScriptの配列っぽく使えるList<>が用意されてました。

List<string> sList = new List<string>();

って宣言し、
sList.Add(“Ahahaaaa!”);
で自由に追加できます。stringだけでなくほとんど全ての型の配列化が可能です。

長くなったclassは、partial で分割する。
classが大きくなってきたら、partialでファイルを分割する。

また、classの中でも機能別に分類するのにも役に立つ。まぁ、そもそもそんなに大きなclassになるなら別のclassへ分離させたほうがいいですが。

classのメンバ変数・関数をpublicにするときはよく考えよう
基本privateで、必要になったときにpublicに。大抵の場合はアクセス関数経由にするか、propertyにする。つまりclassの外部からは想定外のアクセスはさせないように。

ラッパー関数を有効に活用しよう
ライブラリやいろいろな関数を使うときに、そのままだと引数が多いとかで使いづらい時があります。そんな時は引数等を使いやすくまとめた関数を作成しそれ経由しで使います。そのような関数をラッパー関数といいます。
コーディングの手間だけでなく、元のライブラリの関数が変更された時など対処等で役に立ちます。

カスタムコンポーネント・コントロールを必ず覚える
C#の場合、カスタムコンポーネント・コントロールを作れるかどうかでアプリの出来がかなり変わる。再利用が楽にできる面でも大きいですが、アプリの出来という面でも大きなアドバンスがあります。

例えば複数のコントロールに対するイベントをいちいち記述するより、コントロールを拡張して新しいコントロール作って処理したほうが、はるかにコーディング量が減ります。

最初はユーザーコントロールから始めると良い。
Expressだとカスタムコンポーネントが作れないって仕様にあるけど、実は全然問題なく作れる。


単語でわからないものがあるかもしれませんが、まぁそんなのあったなと覚えておいてください。

アイコンの作成・登録

ここから、今回作ったアプリの解説をします。最初はアイコン作成。意外とアイコン作成の情報が無いので詳しく説明します。

一応参考資料
●MSDN Windows XP 用アイコン作成法
●MSDN Icons (What’s New in Windows Vista)(Vista用のアイコンについて。英語)

  1. 画像を用意する。
    昔は16色モードで作成でしたが、今は普通にフルカラーで作ります。サイズは、48×48,32×32,16×16ピクセルの最低3種類。アルファチャンネル付き32bitのPNGファイルで保存します。Vista以降がターゲットなら256×256,96×96の大きな画像も用意します。

    僕はPhotoshopで96×96ピクセルで作成した後、リサイズして対処してます。
    PNGファイルで保存する場合、解像度は必ず96dpiに設定しておきましょう。今回はIconファイルに変換するので大丈夫ですが、VC#でPNGを表示する場合解像度に合わせてサイズを補正されるのでびっくりします。


  2. Iconファイルへ変換
    用意したPNGファイルをIconファイルへ変換します。
    僕は、towofu’s SOFTさんの@icon変換を使っています。


    Iconへ変換するときは、画像サイズが大きい物を最初に登録します。そして、まとめたいアイコンをすべて選択してから「マルチiconとして保存」してください。




  3. リソースファイル(res)へ、登録
    リソースファイル作成方法は、DOBON.NETのWin32ソースを実行ファイルに埋め込むに詳しく解説されています。

    作成したresファイルをプロジェクトフォルダへコピーした後、プロジェクトのプロパティで登録します。
    登録時、絶対パスで登録すると環境が変わるとエラーになってしまうので、resファイルをプロジェクトフォルダにおいて、ファイル名だけで登録します(何故か相対パス指定がうまくいかない時がある)


  4. アイコンをレジストリへ登録
    ドキュメントアイコンを実際に表示させるためには、レジストリへ登録が必要になります。

scriptDaD.cs

scriptDaD.csで定義されたscriptDaDクラスが今回のアプリの機能を実装しています。中身の説明は省略しますが、重要なのはそのメンバーだけです。

  • IsOpneAfterFXメソッド After Effectsが起動してるかどうかを返す
  • GetCMDメソッド 起動時のコマンドラインを解析して必要な情報を得る
  • Execメソッド 処理を実行する
  • ExePathプロパティ AFterFX.exeのフルパス
  • BaseScriptFilePathプロパティ ベーススクリプトのフルパス
  • TargetsClearメソッド ドラッグされたファイルパス配列を初期化
  • TargetsCountプロパティ ドラッグされたファイルパス配列の要素数
  • TargetsAddメソッド ドラッグされたファイルパス配列に新しいパスを追加する
  • MakeShortCutメソッド ショートカットを作成

scriptDaDクラスには以上のpublicなメンバがあり、それだけを把握していれば使えます。
逆をいえばクラスを設計するときは、内部構造がわからなくても使えるようにすることが重要です。

Program.cs アイコンへのドラッグ&ドロップの実装

Program.csには、Cでいうエントリポイント(main関数)が入ったProgramクラスがstaticて登録されています。
通常ではこのファイルを修正することは全く有りませんが、今回ショーットカット等へD&Dされたときにフォームが一瞬表示されるのが嫌だったのでちょっと手を加えています。


Formを作成する前にscriptDaDオブジェクトを作成し、実行が成功したらそのまま終了。実行できなかったらFormを表示させてます。

アイコンへのD&Dの処理は、DOBON.NETの「起動時のコマンドライン引数を取得する」で解説されています。

MainForm.cs コントロールへのドラッグ&ドロップの実装

フォーム等のコントロールへのD&D処理もDOBON.NETの「Drag&Dropされたファイルのファイル名を取得する」で解説されています。
かなり簡単なので、アプリを作ったら必ず対応させましょう。

具体的には
☆対象のコントロールのAllowDropプロパティをtrueに。


☆対象のコントロールのDragEnterイベントとDragDropイベントに必要なコードを記述


DragEnterイベントは、D&Dされ始めに発生するイベントで、コードでは内容を確認してD&D許可するかどうか調べています。
ここはエクスプローラからのD&Dのみを許可しています。


DragDropイベントはD&Dが終わった後に発生するイベントで、コードではD&Dされた内容を獲得して必要な処理を行っています。


After EffectsにScriptを送信する。

After EffectsにScriptを送信する方法は、scripting_guideに以下のように記述されています。

afterfx.exe -s “alert(“You just sent an alert to After Effects”)”

afterfx.exe -r c:\myDocuments\Scripts\yourAEScriptHere.jsx

afterfx.exe -r “c:\myDocuments\Scripts\Script Name with Spaces.jsx”


しかし、これは大嘘です。この例を見ると「半角スペースがある場合は、””で括るのか」と判断できますが、実際にやってみるとエラーを起こします。
正解は、「半角スペースあっても別に気にしないでそのまま記述する」です。あと、注意点は、-r以後には、パス以外の記述はしない事です。

よくみるとAfterFX.exeが全部小文字になってる段階でアヤシイ記述ですな。



これが、scriptDaDクラスでAfter Effectsを呼び出してるところです。最初は念の為に勝手に””で括る自前のラッパー関数を使っていてハマりました。普通にプロセス呼び出せばいいです。

便利なコンポーネント・クラス

ScriptDragAndDropの説明は以上です。判らないことや聞きたいところがあったら、twitterとかmailで質問してください。

あと、今C#でAfter Effectsを扱うために便利なコンポーネントを作っているのでそれのそれの説明で終りにします。

ダウンロードAE_utils_test01.zip
AE_utils_test01.zip
このアーカイブには作成途中の二つのプロジェクトが入ってます。先日tiwitterで上げたものと同じものです。

ScriptToAEコンポーネント
After EffectsにScriptを送信する機能をまとめたコンポーネント。
下図のアプリはその確認用のものです。


Versionの指定とか簡単にできるようになってます。
ほぼ完成。

CellFileNameクラス
セル画像ファイルのファイル名を扱うためのクラス。
CellFolderクラス
セル連番ファイルの入ったフォルダを一つのデータとして扱うためのクラス
CutFolderクラス
カットフォルダそのものを扱うためのクラス。

以上の三つはファイル管理のためのクラスです。まだ、未完成でいろいろ修正点・不具合が残ってます
下の図のアプリは、これらのクラスの動作確認用のアプリです。



適当なカットフォルダをドラッグ&ドロップすると、ListBoxに簡単な情報が表示されます。
インポートしてみる」を押すとAfter Effectsにスクリプトを送信して、TextBoxで指示されているフォルダを作成し、そこへセル・静止画・BGと判別してインポートします。

まだ、仕様が決まっていない(悩んでる)ところが多々あります。
何かの参考なればです。

次回予告

その2は「変数」だと予告したのにあっさり変更しました。今回のシリーズは気楽にやるつもりなので、面白いネタを思いついたらそれを優先するってポリシーなので^^;

今回アプリの説明したら面白かったので、次も何かアプリを作ってその解説をするつもりです。つくるアプリはもう決めてあって「電卓」です。当然AfterEffectsに絡めたものになると思います。一応C#/AEスクリプト両方で解説する予定です。

「変数」はやっぱり眠くなるなぁ(僕が)



タグ : , , , , [タグを追加する]


この記事の投稿者について:bryful

フィードバック

1 Star2 Stars3 Stars4 Stars5 Stars
評価がまだありません。この記事はどうでしたか?
Loading...Loading...

この記事に対する 13 の反応があります


  1. 1 AEUSERS(AEP Project) 2月 19th, 2011 at 08:22

    新着記事 : After Effectsユーザーのための、プログラミング入門 その2 ScriptDragAndDrop http://bit.ly/huYOEU

  2. 2 Al-Fun4 / おるふぁん 2月 19th, 2011 at 08:24

    RT @AEUSERS: 新着記事 : After Effectsユーザーのための、プログラミング入門 その2 ScriptDragAndDrop http://bit.ly/huYOEU

  3. 3 皐月 黒夫 2月 19th, 2011 at 08:33

    RT @AEUSERS: 新着記事 : After Effectsユーザーのための、プログラミング入門 その2 ScriptDragAndDrop http://bit.ly/huYOEU

  4. 4 ちょうさん 2月 19th, 2011 at 08:46

    RT @AEUSERS: 新着記事 : After Effectsユーザーのための、プログラミング入門 その2 ScriptDragAndDrop http://bit.ly/huYOEU

  5. 5 Daisuke Yagi / 八木 大輔 2月 19th, 2011 at 09:35

    RT @AEUSERS: 新着記事 : After Effectsユーザーのための、プログラミング入門 その2 ScriptDragAndDrop http://bit.ly/huYOEU

  6. 6 Adobe Creative Suite 7月 20th, 2011 at 09:06

    「After Effectsユーザーのための、プログラミング入門 その2 ScriptDragAndDrop」AEP Project http://bit.ly/ae-users_110202 #CS5_jp

  7. 7 Source Marine 7月 20th, 2011 at 09:19

    「After Effectsユーザーのための、プログラミング入門 その2 ScriptDragAndDrop」AEP Project http://bit.ly/ae-users_110202 #CS5_jp

  8. 8 Adobe Creative Suite 7月 20th, 2011 at 09:20

    スクリプトは経験があるけれどその他の言語はさわったことがないユーザーを対象に、C#/AEのJavaScriptをメインにプログラム全般を解説する連載の第2回です。http://bit.ly/ae-users_110202 #CS5_jp

  9. 9 Source Marine 7月 20th, 2011 at 09:24

    スクリプトは経験があるけれどその他の言語はさわったことがないユーザーを対象に、C#/AEのJavaScriptをメインにプログラム全般を解説する連載の第2回です。http://bit.ly/ae-users_110202 #CS5_jp

  10. 10 Ken Azuma 7月 20th, 2011 at 09:30

    スクリプトは経験があるけれどその他の言語はさわったことがないユーザーを対象に、C#/AEのJavaScriptをメインにプログラム全般を解説する連載の第2回です。http://bit.ly/ae-users_110202 #CS5_jp

  11. 11 IGU 7月 20th, 2011 at 11:18

    「After Effectsユーザーのための、プログラミング入門 その2 ScriptDragAndDrop」AEP Project http://bit.ly/ae-users_110202 #CS5_jp

  1. 1 AfterEffectsユーザーのための、プログラミング入門 その2 ScriptDragAndDrop | スクリプト - After Effects - 動画編集ソフト - アプリケーション | Jishuu.net Pingback on 4月 17th, 2012 at 02:48
  2. 2 After Effectsユーザーのための、プログラミング入門 その2 Script Drag And Drop | スクリプト - After Effects - 動画編集ソフト - アプリケーション | Jishuu.net Pingback on 10月 3rd, 2012 at 20:52

コメントをどうぞ!




特集