初めて学ぶCreateJS

if文とフィルタのクリア

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
インスタンスのクリックによって、フィルタの適用と解除を切替えます。条件判定により処理を振分けます。
講師:
12:42

字幕

キャンバスに表示された画像には フィルタが適応できるようになっています インスタンスをクリックすると ぼかしとセピア調のカラー調整の フィルタがかかります クリックすると ぼかしがかかって カラーがセピア調になるということです これにもう1つ処理を加えたいと思います どういう処理かというと もう1度クリックすると フィルタが解除されます クリックで適用と解除を切り替える そのためには条件判定の処理を 覚える必要があります インスタンスをクリックしたら フィルタがかかるという所までの JavaScript のコードを確かめておきましょう まだもう1度クリックした時に 解除されるという処理は加わっていません ですからフィルタを適用するという部分 について確かめておきます まずフィルタを適用するには 適用する フィルタを配列に入れる必要があります ぼかしは BoxBlueFilter パラメータはこのような感じです ぼかし幅とぼかしの品質を指定します それからカラーの調整は ColorMatrixFilter です その中にカラーの調整の指定をする ColorMatrix のオブジェクトを入れています 明度と コントラスト 彩度 それから色相 といった指定ができます それらのフィルタのオブジェクトが 入った配列を インスタンスの Filters プロパティに 設定するとフィルターが設定されます そしてそれを実際に画像に対して適用するには cache メソッドを呼び出し その適用範囲を引数として定めます そして stage の描画を update メソッドで更新すれば フィルタがかかるということです インスタンスをクリックしたら設定を行い もう1度クリックしたら設定を解除する といった処理をするには 条件によって行う処理を切り分ける 振り分けるといったことが 必要になります そのために使う構文が if 文です if 文の説明をしましょう 条件によって処理を分ける時には if というキーワードを使った if 文を書きます if 文の構文は まずキーワードを if でスタートして () の中に条件を書き込みます 条件というのは例えば 2つの値の大小を比べたり あるいは2つの値が等しいかどうか あるいは等しくないかどうか という比べ方もあります そして条件に当てはまる場合 条件が満たされた場合には この条件の後の {} に書いた処理が実行されます 条件に当てはまらない場合 else というキーワードを使いますと 条件に当てはまらない場合に 実行したい処理が {} の中に書けます この構文ですと条件が当てはまるか 当てはまらないかによって こちらの処理 もしくは else の後の処理 どちらか一方が実行される ということになります では今回のようにオン オフを 切り替えたい場合にどうしたら良いかというと この if 文とフラグと言われる 変数を使うと便利でしょう フラグと言っても特別なキーワードではなく 単なる変数です 但しフラグというのは役割として オンかオフか とか イエスかノーか 2つのうちのどちらの状態であるかを 記録するために使う その用途に使う変数をフラグと言っています そしてその時 使う値は true がイエスとかオン false がノーとかオフ として使われます 最初の状態どちらにするかは その設定によって異なりますが 例えば初めはオフにするのであれば false を代入しておきます そして if の構文は 次のように使います 条件としてはフラグが 今 false かどうか = 2つを繋ぐと 等しいかどうかを比べることになります フラグの値の内容が false であれば これが条件が満たされたということになって 次の括弧の中の処理を行います false だということは 今オフなわけですから 切り替えるのでしたら オンにするための処理を行います そしてもうオンになりましたので フラグの値は true に置き換えます もしフラグが false でない つまり true の場合は else の後の処理が行われまして ということは今 true ですから オンからオフに切り替えます つまりオフにする処理を行います オフにすれば今度はフラグが false に 置き換えなければいけません こうして何か実行を切り替えるたびに この if 文の処理を行えば 切り替えが交互にできる ということになります フラグを使ったオン オフ切り替えの処理を JavaScript コードに書き込んでいきます まずフラグの変数ですね フィルタが適用されているかどうかですので applied にしましょう 最初は適用されていませんから 値は false です そしてクリックした時の イベントハンドラ set フィルタの関数に 切り替えの処理を加えます まず変数宣言はいいとして フィルタを適用する部分が フィルタオブジェクトを配列に入れて filters のプロパティに設定する という所ですね ここを if 文で括っていきます if で applied の変数の値が false に等しかったら 等しかったらという時は 「==」ですのでお間違いのないように 「=」にしますと代入の意味に なってしまいます この場合には フィルタを加えているということです で if 文の中は {} の中は インデントをかけて 一段下げておくと見やすいでしょう まずここまでで動作を 確認してみたいと思います else がありません else がなくても問題はありません else がなければ条件に あてはまらない時は この当てはまった場合の {} 内の処理を ただスキップして次に進むだけです では保存して確認しましょう 「ファイル」メニューから 「ブラウザでプレビュー」です ビットマップの画像が キャンバスに表示されました 現在の状態はフィルタがかかっていません オフの状態 applied の変数が false ですね ですからクリックするとフィルタがかかります クリックします ぼかしフィルタとカラー調整の フィルタがかかりました けれど else の処理を書いていませんので もう1度クリックしても何も変わりません では else の処理を書き加えます if 文の中の {} の処理 ステートメントが実は1つ抜けていました 何かというと applied のフラグが false の時に この処理をします そうすると適用されたので applied の値を true に変更しなければいけませんでした そしてまだ書いていませんが else では今度は applied が true なわけですから false に戻すという処理が必要になります ということはいずれにしても true であろうが 条件が当てはまろうが当てはまるまいが applied の変数は if も else も true と flase を 逆転して入れれば良いということですね 値を逆転して入れる ということがステートメントとして書けます どうするかというと applied の値を applied の値のままですと 値は変わりませんね true flase については 頭に「!」を付けてあげると 現在 true であれば false に falese であれば true に変わります つまり このステートメントで 変数 applied フラグの true false を反転することができます さて else を加えていませんが ここで 保存をしてブラウザで確認してみましょう 「ファイル」メニューから 「ブラウザでプレビュー」です キャンバスにビットマップの 画像が表示されました クリックするとフィルタが適用されて ぼけてセピア調に変わります もう1度クリックします else の部分の構文は 書いていません けれど元に戻るんですね これでクリックでフィルタが適用され クリックでオフになる という処理が何故かできてしまいました その理由をこれからお話します さて JavaScript コードの確認です まずフィルタをオフにするというのは どうすればいいでしょうか まだご説明していませんでした 実は空っぽの配列を filters プロパティに設定すると フィルタのクリアになります このローカル変数を宣言した時 フィルタの配列は空っぽですね そして条件に当てはまった時だけ つまりフラグが false の時だけ フィルタのオブジェクトを 配列に加えています その上でオブジェクトの加わった配列を filters プロパティに設定すれば フィルタが適用されます けれども既にフィルタが適用されていて applied のフラグが true の場合 この中はスキップされます ということは filters の配列は 空っぽのまま残されるんですね それを filters のプロパティに設定すれば フィルターが見事にクリアされてしまう ということです if の構文を習う時は if と合わせて else も覚えた方が良いので 是非あの構文を覚えて頂きたいのですが 今回については else を使わなくても うまくできてしまったということです if の構文について おさらいしておきましょう 条件によって処理を分けるには if キーワードを使い 括弧の中に条件を定めます そしてその後の {} の中は if の条件が満たされた場合に 処理されます そして else は付けないことも可能ですが 付けた場合には 条件が満たされない場合 その時の処理は else の後の {} の中が実行されます それから if の使い方の1つとして フラグを使った処理というのがあります フラグというのは現在の状態を オン オフなどのように 2つの状態のどちらであるかを 収めておきます true か false という値を 通常使います そして if 文を使って もしフラグが false であれば オンにする処理をして そしてフラグを true に切り替えます もし false でなければ else true ですので 今度はオフにする処理を行い そしてフラグは false に切り替える ということですね 実際のコードでは 今回は else は使いませんでした if 条件でフラグの変数が false であるかどうかを確かめた上で 空の配列に もし条件が当てはまれば applied の変数が false であれば 配列の中にフィルタのオブジェクトを加えます 条件に当てはまらなければ この処理が行われないので 空のままということでしたね そして変数の true false を 反転するのは「!」を使います そしてインスタンスの filters プロパティに 配列を設定します その時配列が空であれば フィルタがクリアされるということです

初めて学ぶCreateJS

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

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

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

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

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