AnimateでHTML5 Canvasコンテンツをつくる

イベントリスナーとは

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
処理を実行するきっかけとなるイベントと、処理を定めるリスナー関数についてご説明します。
講師:
05:15

字幕

このレッスンでは イベントリスナーについてご説明します。 イベントというのは、何かの処理を実行する きっかけとなる事柄です。 そしてリスナーというのは そのきっかけに対して行う処理を定めた 関数です。 今回は Animate の中で試すよりも 普通の HTML ドキュメントで試した方が わかりやすいので、HTML ドキュメントを DreamWeaverCC で開いています。 まだ骨格の部分だけ ほとんど真っ新な状態ですので ここにスクリプト要素を加えて JavaScript のコードを 書いてみたいと思います。 これを閉じます。 まずは、イベントリスナーの仕組みです。 完全な JavaScript コードではなくて 説明書きの形で入れていきます。 イベントリスナーを設定するためには addEventListener という関数 メソッドということが多いですけれど それを呼び出します。 ここではどんな役割かというと ある相手に対して、何かお願いをします。 この相手がオブジェクトになります。 もちろん「オブジェクト」と書いては いけませんので オブジェクトをちゃんと選んで その正しい キーワードで書かなければいけません。 そして、それに対して addEventListener ですね。 ちょっと綴りが長いですし わかりにくい綴りなので 間違えやすいですけど この中に2つ引数を指定します。 1つ目がイベントです。 2つ目がリスナーになります。 カンマ区切りで引数ですから 「リスナー」と。 このオブジェクトに対して「イベント」 こういうことが起こったら これをやってください、と。 こういうことというのは、例えば マウスをクリックしたとか あるいはキーボードの キーを押したとか データをダウンロード ロードし終わったとか そういったことが入ってきます。 そしてリスナーというのは 関数ですので ここは function と いうことになりまして、名前を付けます。 これが、この「リスナー」と 同じ名前になってないといけません。 これやってね、と言った時に 誰だかわかりませんので 同じ名前をここに書きます。 そして関数ですから () 閉じて [] この中に、その時にやってほしい 処理を書くと こういう組み立てになります。 オブジェクト、とてもたくさんあります。 特に Animate の中に 入っていると、いろんなオブジェクトに お願いすることが出来るんですけど、ここでは 一番わかりやすい window にします。 window に対して イベント、代表的なのは load し終わったら つまり、これで何か 処理を始める準備が整ったと いうきっかけですね。 その時にやって欲しい処理 初期化の処理が多いですから init という名前を付けることが多いです。 別に何という名前を付けてもよいですけど その同じ名前をここに付けます。 init と やることはまだ何もありませんので ここは alert で確認するだけにしましょう。 文字列を出します。 読み込み終わったよ、ということで loaded という文字を打ちました。 ではこれを保存して 確認します。 確認は「ファイル」> 「ブラウザーでプレビュー」で Chrome で確認することにします。 いきなり出てきますね。 すぐにロードし終わりますから そうしたら、読み込み終わったよ、と 何か初期化の処理をする準備が整ったよ ということで、ダイアログが 表示されました。 ではこれは OK で閉じます。 さて、無事に動いて ホッとしたんですけど この addEventListener という関数 メソッドということが多いですけど これを使う時に1つ大事な注意があります。 それは、このイベントが起こった時に この関数を実行して下さいと お願いするわけなんですが 実行して下さいということで、うっかり () を付けてしまう人がいます。 でも、これは付けてはいけません。 言ってみれば、携帯の着メロを 録音、メモリするようなものです。 メモリする時は鳴ってほしいわけがないですね 着信があった時に鳴ってほしい訳です。 ですから、この段階では 実行するのではなくて この関数の内容を、このまま メモリして下さい、と そして、load イベントが発生した時に ここにメモリされている内容を 実行しましょうと これがイベントリスナーの 処理の内容なわけですから 2つ目の引数、リスナー関数には 括弧は付けないということで このレッスンでは、イベントリスナー の扱いについてご説明をしましたけれど まず相手がいると オブジェクトですね。 それに対して addEventListener というメソッドを使い イベントを指定し そして、リスナー これ’呼び出しは付けずに リスナー関数を定義すると これでイベントが起こった時に このリスナーの関数が 実行されるという仕組みになっている ということです。

AnimateでHTML5 Canvasコンテンツをつくる

Animate CCではPCやモバイル、Webブラウザなどさまざまなデバイスとプラットフォームに向けたコンテンツが作れます。またHTML5に対応したダイナミックでインタラクティブな表現が可能です。このコースはAnimateで作った素材をJavaScriptでどのようにスクリプティングするのかを基礎から解説します。

2時間43分 (26 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年05月19日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。