CSS Nite in OSAKA, Vol.16補足ツボ

投稿日 投稿者 正宗

皆様、CSS Nite in OSAKA, Vol.16 「これから始めるFlashActionScriptツボのツボ」にお越し頂きありがとうございました。ActionScriptをこれから始めてみようというきっかけになれば幸いです。

セミナーでは「とにかくこう書いてみれば動くので始めてみるきっかけになれば」という部分のみに焦点を当てて紹介しておりますので、なるべくかみ砕いて幾つかの部分であえて簡略的な表現をこころがけています。
はじめて触るぶんには必要としないであろう知識ですが、これから本格的に学習される方に向けて出来るだけ詳細な情報を補足という形でここにまとめさせていただきます。

ActionScriptのバージョンについて

  • 「アクション」
    • stop(),gotoAndPlay()などのフレームの制御ができる
    • オブジェクトのドラッグドロップやボタンアクションなどのある程度のインタラクションが可能
    • 変数や条件分岐などはあったが、入力が独自インターフェースのみで直接スクリプトを記述できなかったのが特徴＜/li>
  • ActionScript1
    • フレームアクション、ボタンアクション、クリップアクションなどに直接スクリプトの記述が可能になった
    • 関数が使えるようになった
    • JavaScriptライクな記述が可能になった（ECMAScript準拠）
    • 全てをオブジェクトとして扱う
  • ActionScript2
    • AS1を拡張してクラスや変数の型が扱えるようになった
    • それによってよりオブジェクト指向よりな記述が可能になった
    • AS1との「ある程度」の互換性を持たせたことが特徴
    • 変数の型宣言などはデバッグには役立つが処理速度向上にはつながらなかったため、普及率としてはAS1とどっちつかず？
  • ActionScript3
    • 以前までのASとは実行エンジンレベルで変更した（SWFの内部でスクリプトを処理していたActionScript Virtual Machineという実行エンジンのバージョンを従来の1から２へとメジャーバージョンアップ）
    • そのためAS1、AS2とは互換性が無い
    • 厳密な型のチェックや型宣言などにより処理速度やデバッグ環境が向上したのが主な特徴
    • ボタンアクション、クリップアクションの廃止。記述は必ずフレームアクションかasファイルに書かなければならない
    • 以上のことから初心者に少し敷居が高くなったように感じられるのは事実

個人的な見解も混ざっていますが、以上がActionScriptのバージョンの遍歴になります。

では初心者はAS2以前を勉強した方がいいのか、それともAS3を勉強した方が良いのかは意見が分かれますが、AdobeがAS2以前の実行環境を用意している以上はどちらでも良いとも言えますし、今後AS2以前の環境が残される保証がないことと今後の新機能はAS3のみに追加されることが予想されるのでなるべくAS3から始めた方が良いとも言えます。

僕個人としてはせっかく最初から覚えるならなるべくAS3からはじめたほうがいいと思っています。
理由としてはセミナーのように最初はgotoやstop、マウスアクションから入るのでとっかかりにそんなに差異がないと考えているからです。
とはいえ、初心者の方にはAS3の厳密な型のチェックが独学する上で重大な障壁になる恐れもあります。
AS2以前では当たり前だった、root.gotoAndPlay(10);とかでもAS3ではいきなり型のチェックでエラーになったりするので、これからAS3を学ばれる方は最初に「型」と「クラス」の基礎について十分理解を深めておくことをお勧めします。

addEventListenerについて

AS3では「何かあったら動く」記述はほぼ全てaddEventListenerに集約されています。
詳細は大重美幸さんの著書「ActionScript3.0入門ノート」（大重さんのサイトに飛びます。サイト内にアマゾンへのリンクがあります）が参考になるかと思います。大重さんの本でも書かれてあることですが、イベントリスナーを理解することはAS3を理解することに直結してきますので、ここでもaddEventListenerの記述のしかたについては十分に補足したいと思います。

パターン１

addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void{
  //ここに命令を書く
});

パターン２

addEventListener("click", function(e:MouseEvent):void{
  //ここに命令を書く
});

パターン３

addEventListener(MouseEvent.CLICK, hoge);
function hoge(e:MouseEvent):void{
  //ここに命令を書く
}

上の３つのパターンは書き方は微妙に違っていますが動作は同じものになります。
違いを少しずつ見つけていくことで、呪文のように見えるaddEventListenerの書き方も理解しやすくなるかも知れません。

パターン１とパターン２の違いについて

パターン１とパターン２の違いは、MouseEvent.CLICKと書いてあるか“click”と書いてあるかだけです。
試しにFlash上で新規AS3ファイルを開いて、下のスクリプトをコピペして実行してみて下さい。

if(MouseEvent.CLICK === "click"){
	trace("ふたつは全く同じもの！");
}

「出力」ウインドウに「ふたつは全く同じもの！」と表示されるかと思います。
つまりaddEventListenerの括弧の中の一番最初に入る文字（「1番目の引数」と呼ぶ）は“click”でもMouseEvent.CLICKでもどちらでも良いということになります。ただし“click”と書こうとした場合、中身を”clik”とか”kurikku”など間違えて書いてしまうとバグの発見が遅れるなどいろんな問題が起きるので通常はaddEventListenerの第一引数に“click”とは書きません。
では何故MouseEvent.CLICKと書いた方が良いのか、そもそもMouseEvent.CLICKとは何なのか、に関しては今回の記事だけで説明が困難ですが、興味のある方は「static 定数」などのキーワードや「マジックナンバー　マジックワード」などのキーワードで検索することをお勧めします。マジック・ナンバーを使ってはいけないといったコラムも参考になるかも知れません。
以前ぼくがセミナーで使ったこちらの記事のPDFでも多少説明してあります（今後このサイトでまとめる予定です）。
要点としては、書き方の問題になるんですがMouseEvent.CLICKという「定数」と呼ばれるものをここでは用いるのがセオリーとなっています。
addEventListenerまわりでは今後もMouseEventやらEventなどの記述が、一見すると何度も出現して慣れないうちはまぎらわしいのですが「”click”とMouseEvent.CLICKは同じものなんだ、でもaddEventListenerの第一引数ではMouseEvent.CLICKと書いておく方がいいんだ」と頭の片隅にでも覚えておけば便利です。
今後自分でイベントを設定する「カスタムイベント」と呼ばれるものを作成したり、「クラス」や「型の宣言」について学ばれるときに、きっと役に立ちます。

パターン１とパターン３の違いについて

ふたつの違いを見つけるために、もう一度パターン１とパターン３を並べてみました。
・パターン１

addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void{
  //ここに命令を書く
});

・パターン３

addEventListener(MouseEvent.CLICK, hoge);
function hoge(e:MouseEvent):void{
  //ここに命令を書く
}

まずパターン３からですが、addEventListenerの括弧の中の2番目に入る文字（「2番目の引数」と呼ぶ）に「hoge」などという適当な名前を入れておいて、2行目以降にその「hoge」という関数を作っている、という流れになります。
つまり1行目の「hoge」は関数の名前を入れている、ということになります。
そしてパターン１ですが、パターン３の2行目以降の関数を定義する（名前付き関数を作る）記述を省いて、addEventListenerの2番目の引数にいきなり関数を書いています。
パターン１のようにいきなり関数を書くことを「匿名関数」とか「関数リテラル」と呼びますが、書き方としては「匿名」という文字通り、この場合は名前をつけません。

そのほか、パターン１では最後3行目に「});」などという一見意味不明な記号の羅列のようにも見られる記述がありますが、これは中括弧｛｝と括弧（）の閉じ忘れを注意深く見ればaddEventListenerの直後に開き括弧（が来てて、そのあと開き中括弧｛がきてるので今度は開いた順番と逆に閉じてることに気付けば、パターン１の呪文のような記述も理解の糸口が見えてきます。

実際の制作では第二引数に匿名関数を使うか名前付き関数を使うかについてはケースバイになるかと思います。
今回のセミナーでは「とりあえずコピペでも動くスクリプト」をご紹介したかったため、名前付き関数の名前の書き間違いや重複によるエラーを回避するために、匿名関数での書き方のみの紹介となりました。

まとめますとaddEventListenerについては、先ずは第一引数に「何が起こったか」を文字として書き入れて、第二引数に「そうなったら次にどうしたいのか」を関数として書き入れる、
第一引数はただ単に文字列を入れても良いけど「MouseEvent.CLICK」などのあらかじめ定義されてある「定数」を使うのがセオリー、
第二引数については関数を入れればよいが匿名関数にするか名前付き関数にするかはケースバイなので、その都度都合の良い方、もしくは自分でわかりやすい書き方をすれば良い、
ということになります。

参考書籍、参考サイト

僕が普段から参考にさせて頂いているサイトや書籍を紹介します。
サイトに関しては本当はもっとあるんですが、挙げていくときりがないので入門にお勧めなサイトを絞ってあります。

なおリンク先に関しては僕の一方的な判断で張っています。当然のことながらリンク先のサイト管理者はこの記事を知りませんしCSS Nite in OSAKA, Vol.16のイベントに関しても関与しておりません。
なので例えばFLASH-jpのサイトに行っていきなり「この間のイベントのことなんですけど」なんて質問しても誰もわからないと思いますのでご注意下さい。念のため。

最後に

せっかくActionScriptに興味を持ったのなら、「難しいことは考えずにとにかく動く楽しさから入って貰いたい」という気持ちと「せっかくなのであれも知って欲しいしこれも知って欲しい」という気持ちから、こうした形で補足としてまとめさせて頂きました。
「ここは違うんじゃないの？」とか「ここってどうなの？」等のご指摘やご意見、ご質問ありましたら下のコメント欄に残して頂くと幸いです。

コメントを残す

メールアドレスが公開されることはありません。