Matchmove for AE users
Get Facebook

• home
• AE Expression
• エクスプレッションの文法

5:エクスプレッションの文法：

エクスプレッションを記述する上で大切なのは、文法を間違えずに解釈してプログラムを書くということです。After Effectsが認識できる形でなければ、思った通りの動作をしてくれません。私がよく起こす間違いや経験の中から、これだけ覚えれば、かなり上達するという点を列挙します。

基本事項

大文字と小文字の使い方

大文字と小文字の使い方はいたってシンプルです。私は、小文字だけで大文字は使わないと決めています。
Javascriptは、大文字、小文字を別の命令や関数として認識します。例えば、timeとTime、TIMEはすべて異なるものとしてAEのエクスプレッションは認識します。大文字、小文字を混ぜて構文を見やすくする方法もありますが、構文が長くなると、大文字にしたものと小文字にしたものをつい忘れてしまってプログラムがうまく動作しないことがあります。

構文を見やすくしたいのであれば、アンダーバーを使う手もあります。
例えば、キューブを動かすようなエクスプレッションを作成するため、cubestarttimeという変数を作成した場合は、cube_strat_timeと書きなおせば見やすくなりますね。
ちなみに、ハイフンは引き算の時に使うので、単語を見やすく用途では絶対に使用しません。

セミコロンは行の区切りを示す

プログラムの基本は、1行の文章で１つの命令を記述することです。「右手を上げる」という命令の次に「左手を上げる」という動作をさせたいときは、右手を上げる;
左手を上げる；

と書きます。（この構文では実際にAE上では動きません。）

カンマで区切る

カンマは、アンカー、位置、スケール、回転、不透明度プロパティの回転、不透明度以外のプロパティは、２つ以上の数値を持っています。位置プロパティは、X、Y、Zの（３次元の場合）３つです。この３つのプロパティを示すのに、０１０１０と入力したら、Xは間違いなく０と分かりますが、Yは10なのか101なのか不明です。このため次のようにカンマで区切ります。 0,10,10

ピリオドは「の」に置きかえる

では、ピリオドはどのように使うのでしょうか？ピリオドはエフェクトのプロパティを表現するために使います。 transform.position=[100,100];
transform.rotation=100;

上記プログラムの場合、オブジェクトをX=10,Y=10の位置に置き、１００度回転させるという意味です。
私は、ピリオドを「～の～」という風に接続詞「の」に置き替えています。

このプログラムの場合は、
トランスフォームの位置プロパティをX100、Y100に設定しなさい。
トランスフォームの回転プロパティを100度に設定しなさい。

と読み替えると判りやすくなると思います。もちろんセミコロンは文末を示す「。」と同じ意味です。

とにかく、よく間違える数字と文字列

プログラミングで一番間違えるのは、数字と文字列の間違いです。コンピュータは単に「１」と書いただけではこの文字が数字なのか文字なのか分りません。分らないので特に指定しない限り、「１」を数字として扱います。本当は、文字列の「１」と表示したいのに、間違って数字の１として計算しようとしてエラーを発生します。

一体のどういうこと？と思われる方も多いでしょう。まず数字とは量、大きさなど数値的に計算できるものです。文字列は（プログラミングの世界では文字のことを字の集まりを表す意味で文字列といいます）それ自身で計算は出来ず、加減乗除しても値が変わらないものです。（ただし、文字列も足して文字数を増やしたりする計算式がありますが、本質は、表示するのが目的です）
数字と文字列を区別するには、ダブルクォーテーションを付けると文字列になります。数字の1234を文字列として使用したいなら"1234"となります。ただしAEのエクスプレッションはプログラミングの世界の常識からすると甘いところもあり、数字と文字列を混在させてもOKな場合があり、頭を悩ませることが多々あります。
100×100pxの平面を作成し、拡大プロパティに
["1234",123]

と入力してください。幅1234と高さ123の平面が出来ます。次に
["1234","123"]

と入力してください。結果は変わりませんね。今度は以下のように入力してください。
["1234",１＋"123"]

エクスプレッションの結果は1234,1123になっているはずです。今度は別のパターンを試してみましょう。
["1234",1+123]

今度は1234,124になっています。上記4つのパターンは、どれもエラーは発生せず、すべて正解です。これが文字列と数字の違いです。ちょっと理解するのに時間がかかるかもしれませんが、頭に入れておいてください。

スペースで構文を見やすくする

AEのタイムラインにエクスプレッション記述するとき、一番気をつけることは、誰が見てもきれいな文章にすることです。エラーがあった時に発見するのにきれいに書いてあれば、バグを見つけやすいものです。幸い、JavaScriptは、スペースを無視しますので、単語と記号の間にスペースを入れることで、構文を見やすくすることができます。
例えば、
y=x+1;

という構文を書いた時に、
y = x + 1 ;

と書いた方が見やすいですね。特にAEのエクスプレッション入力欄は、文字が小さく見にくいのに加え、文字間が狭すぎて、カンマやピリオド、コロンやセミコロンを打ち間違えても気がつかないことがあります。このため、単語や記号の間にスペースを入れて構文を見やすくします。

補足として10.のプログラムについて、すこし実験してみましょう。まず、サンプル02をダウンロードしてください。そのファイルには、50ピクセルの正方形が２つあり、それぞれDown１とSlideと名前をつけてあります。（とりあえずDown2のレイヤーは非表示にしてください）各正方形の不透明度にエクスプレッションを適用して次のプログラムを記入してください。

if ((transform.position[0] >200) || (transform.position[1]>160)) {50} else {100};

これを訳すと、「位置のプロパティのXが200より大きい、または、Yが160より大きいならば、不透明度を50％にしなさい。そうでなければ100％にしなさい」という意味です。
このエクスプレッションをプレビューすると、Slideの正方形は、X軸で200を超えると不透明度が50％になります。
一方、Downの正方形は、最初は100％でしたが、カーブを描きながら下っていく途中で50％から100％になり、最後に50％になります。
では、このプログラムを以下のように書き換えてください。 if ((transform.position[0] >200) && (transform.position[1]>160)) {50} else {100};

&マークを二つ並べることで、位置のプロパティのXが200より大きくて、かつYが160より大きいとき、不透明度を50％にしなさい。そうでなければ100％にしなさい」という意味です。両方とも与えられた条件を満たさない限り、不透明度は100％にしなさいということです。では、最後にもうひとつ学習してみましょう。 今度はDown1を非表示にしてDown2を表示してください。

if (!(transform.position[1] >150)) {50} else {100};

これはXは初期値のままにしておき、Yのみ150より大きいとき以外は不透明度を50％にしなさいという意味です。つまり、150より小さいときは100％にしなさいという意味です。ifの後ろにある「！」が150より大きいを打ち消し、150より小さいとの表現に変わり、不透明度を50にしなさいと命令しています。
Down2と書いた不透明度50％の正方形がカーブを描きながら下りてくるとYポジションが150を超えたところで100％に変わるのが分かるはずです。
まったく役に立たないエクスプレッションですが、何かのときに役に立つかもしれないので覚えておいてください。

ちょっと休憩

いきなり配列という難しいところから入ったので、次は、簡単な1次元のエクスプレッションを練習してみます。
１次元のエクスプレッションが該当するのは、トランスフォームのところでは、回転と不透明度のプロパティがそれにあたります。要は、２つの数値を入れる必要のないものが１次元というこになります。
さらに、JavaScriptは、結構いいかげんなところもあり、括弧が足りなくてもうまく動いてしまうことがあります。上記の例でも、最初の式にある(transform.position[0] >200)と(transform.position[1]>160)の丸括弧はなくてもかまいません。ただ、(!(transform.position[1] >150))の式の時に、！マークの後ろについている丸括弧と150の後ろについている丸括弧をはずすとうまく動きません。
また、プログラムの書き方として上記例では1行で書きましたが、実際は以下の通りに書くのが普通です。

if ((transform.position[0] >200) || (transform.position[1]>160)){
50
} else {
100
};

これは、後でプログラムを見たときに1行では長すぎて分かりにくいからです。サイトのHTMLでもタグの後を改行しているのもこんな理由からです。最初のうちは慣れないかもしれませんが、実際に書いていくうちに自然にできるようになります。がんばってください。