初めて学ぶCreateJS

スクリプトの構文を変えて書く

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CreateJS Suiteのライブラリの構文は工夫されていて、目的や好みに応じてJavaScriptコードの書き方が変えられたりします。
講師:
04:19

字幕

createJS のクラスには 同じ処理をするのに異なった書き方ができる そういった別の書き方を 用意していることがあります ここでは graphics クラス graphics オブジェクトに対する 描画の書き方について 異なった書式をご紹介しましょう この html ドキュメントの JavaScript コードでは canvas 要素に対して stage オブジェクトを作り shape のインスタンスを 表示リストに加えています そして その shape に対して draw という関数で 円を描いています この部分をまた別の書き方で お見せしましょう ではまず shape オブジェクトから graphics オブジェクトを 取り出していますが この変数 消してしまいます すると変数に graphics オブジェクトが 入っていませんから これらのメソッドを誰に対して呼びだしたら いいかということになりますね それは直接 この graphics プロパティに 繋いでしまいます じゃあ次の beginFill はと またつなげます 同じ要領で drawCircle も繋げます ではこれで「保存」を押して ブラウザで確かめてみましょう ファイルを保存したら 「ファイル」メニューから 「ブラウザでプレビュー」します 全く問題なくシアンの塗り 青い線の円が描かれました でも この文法は どういう意味なんでしょうか ちょっと確認することにしましょう まず shape オブジェクトの graphics プロパティ これは graphics オブジェクトになりますので そのオブジェクトに対して beginStroke メソッドを呼び出すことは 特に問題ありません しかしその後に何故また 「.」でメソッドが付け加えられるか といいますと beginStroke をはじめ これらの描画のメソッドというのは オブジェクトに対して 描画して描画の終わったオブジェクトを 返すという そういう文法になっています 従って beginStroke の メソッドを呼び出した後 beginStroke の設定された graphics オブジェクトが返されますから その返されたオブジェクトに対して beginFill という メソッドが呼び出せます また beginFill も同じように graphics オブジェクトを返しますから drawCircle と どんどんと繋げていけるということなんです graphics オブジェクトの描画メソッドを この方法で書くと何が変わるかというと 処理内容そのものは変わりません ただ まずタイプの手間が減りますね それから このように繋げて書いた方が 直感的にわかりやすいと 思う方もいらっしゃるようです もちろん逆の意見もありうるでしょう もう少し見やすくするには ここで改行したほうが良いかもしれません JavaScript では 改行は無視されて特別の意味を持ちません ですから見やすいように 改行を入れるということも可能です ただ逆に元の書き方のほうが わかりやすいという方も いらっしゃるかもしれません ですから どちらを取るかというのは 好みで考えて結構です こちらのほうが手間が減って 見やすいと思えば こちらの書き方をお使いください 元の書き方の方が かっちりとしてて わかりやすいという方も あるでしょう その方は元の書き方でも 全く変わりはありません createJS のライブラリが 複数の文法の書き方を用意している例として graphics オブジェクトを取り上げました そして graphics オブジェクトの場合には 描画をドットでどんどん繋いで書けるという 例をお見せいたしました

初めて学ぶCreateJS

このコースではCanvasへの簡単な描画からTweenJSによるトゥイーンアニメーション、PreloadJSでの外部画像ファイルの読み込みやSoundJSでのサウンドの再生などのさまざまな種類のスクリプティングについて解説します。さらにEaselJSでのマウスによるインタラクティブな操作やフィルタを使った動的な表現なども紹介します。

3時間31分 (27 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年02月22日

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

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

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