CreateJSを学びなおす

以前、Web上で「語学学習支援プレイヤー(Repete)」の雰囲気を伝えるためのデモを作成するためにCreateJSを学びました。
2013年9月ごろです。
アプリの「語学学習支援プレイヤー(Repete)」は、自動で無音を検知します。デモでは雰囲気を伝えれば良いということで、あらかじめ定めておいた読み上げ文とあらかじめ決められた秒数を用い、再生・ポーズ・再開をおこないました。
いったんは、アップしたものの、ブラウザによっては音割れを起こしているものがあって困りました。メンテしていくのが大変かつ広報効果があまりなかったので、結局デモは取り下げました。

それ以来、iOSアプリ開発にかかりきりで、CreateJSのアップデートを追っていなかったのですが、昨日の記事(SoundJSを使った音楽の再生)を書くために現在のCreateJSを調べました。

2013年9月からやっていない人が追いつくために見たサイト

公式サイト

CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5
久しぶりに見ると、公式サイトもすっかりリニューアルされていました
(2014年12月にリニューアル)
ドキュメント、デモが充実している

CreateJSのブログ

CreateJS Blog
ブログを読むと、アップデート内容をたどることができます

CreateJSGitHub

CreateJS · GitHub
CreateJSのGitHub
各ライブラリのVersions.txtにバージョンごとの機能変更がこまかく記されています

野中文雄さんの記事

F-site | CreateJSの2014年12月12日および2015年5月21日の改訂のまとめ
野中文雄さんによるCreateJSの改訂状況のまとめ
日本語による情報。
このページを見ると、CreateJSの変化がわかります
FN1412007 | CreateJS 14/12/12 : getter/setterプロパティを実装する | HTML5 : テクニカルノート
SoundJS 0.6.0で、かなりgetter/setterプロパティが採り入れられています
最新のCreateJSを取り巻く環境にキャッチアップする | CreateJSのアップデートとFlash Professional CC 2015のHTML5 Canvasパブリッシュ | CreateJS勉強会 (第6回)
2015年9月に公開された記事。現在のCreateJS。

応用・実践編

gskinner lab
CreateJSの作者G-.Skinnerのラボ。

ICS LAB – HTML5/WebGL/Flash開発者の必読メディア
ICS LABのサイトで実践的なCreateJSの使い方が記されています
HTML5の音声ファイル最適化技術オーディオスプライトとは?―CreateJS勉強会/鹿野発表資料 – ICS LAB
複数のオーディオファイルを一つにまとめて読み込み時間を短縮する方法が紹介されています

[CreateJS][SoundJS]音を鳴らす。playとpauseが出来るようにする。(SoundJS ver 0.6.1)

以前、
[CreateJS][SoundJS]音を鳴らす。playとpauseが出来るようにする。 | nackpan Blog
という記事を書きました。
SoundJS ver0.5.0(2013年9月)の時代のもので、2015年9月現在CreateJSはアップデートしてサイトもリニューアルされたので、記事中のリンク先が切れているものが多いです。
そこで、SoundJS ver0.6.1(2015年5月リリース)にアップデートした記事を書きました。


ss 2015-08-31 22.36.01
SoundJS | A JavaScript library that lets you easily work with HTML5 audio.

CreateJSの4種のスイートのひとつ、SoundJSを使って音をあつかいます。

まずは音を出してみる

ファイル構成
fileorganization
index.htm

playSound.js

これで、音が鳴ります。

playボタンとpauseボタンをつくろう

playボタンを押すと音が出て、pauseボタンで止まる。そこでplayボタンを押すと続きから再生される。というのをやってみます。

SoundJS v0.6.1 API Documentation : SoundJS

SoundJSのドキュメントです。
こちらに、サウンドをコントロールするのにAbstractSoundInstanceクラスのインスタンスを用いるとあります。

AbstractSoundInstanceのドキュメント。
SoundJS v0.6.1 API Documentation : SoundJS
サウンドインスタンスの作成方法

あるいは

このように記述する事で、サウンドインスタンスが出来ます。このインスタンスをplay, pauseすればよい。

参考になるものがないかとCreateJSのデモページを見てみました。
CreateJS | Demos
さまざまなデモがあってCreateJSの多彩な使い方を知ることができます。
(Demo画面の右下には
live edit
というボタンがあって、自由にコードを編集でき実行できます。)

デモページの
ss 2015-09-11 11.25.04
MORE DEMOSボタンからSoundJSのデモを見てると、
ssMediaPlayer(注・音出ます)
CreateJS | Demos for SoundJS – Media Player
というDemoがありました。

このMedia Playerデモのコードを見て、play, pauseのやり方を調べてみました。

サウンドインスタンスのpausedプロパティで、pauseを切り替えることができることがわかりました。

ということで、
再生(play)、一時停止(pause)、再開(resume)をおこなう例をつくりました。

forked: [CreateJS][SoundJS]音を鳴らしてみる(SoundJS ver 0.6.1) – jsdo.it

javascriptで小数点以下の桁数を指定して表示する

たとえば
4.2532787 といった数値を

4.25 と小数点2桁までで表示したい。
というときに、javascriptではどうしたらいいのかな。

Number – JavaScript | MDN
toFixed – JavaScript | MDN

toFixed(桁数) とすれば、その桁にあうように四捨五入した文字列を返してくれる。

toFixed – JavaScript | MDNのページで紹介されている例



jQueryでスライダー

jQueryを使って、Sliderを作った。

jQuery UIについて

jQueryのプラグインで、 jQuery UIというものがあって様々なUIを提供している。こちらにスライダーがある。さまざまなオプションも簡単に指定できる。
jQuery UI
jQuery UIを利用するには? – Build Insider
Slider | jQuery UI
Sliderウィジェットでスライダーを生成するには? – Build Insider

今回は jQuery UIなしで

今回は、ツマミを動かすと範囲内を横移動しツマミよりも左側が黄色になるというシンプルなもの。
前回のドラッグアンドドロップ(jQueryでドラッグアンドドロップ | nackpan Blog)と、だいたい一緒ですね。移動方向を限定して、黄色バーをCSSのwidthを調整しています。

白い円がツマミになります。左右に動かす事が出来ます。

HTML

HTML側では、スライダー部分をslider-containerにまとめて、右側のバー、左側のバー、ツマミをおく。
my-containerはスライダーの周りの水色の部分。

CSS

thumbのpositionをslider-containerを基準にしたabsoluteにする。

javascript

javascript側では、ツマミでマウスボタンが押された(mousedown)なら、そのあとのマウスイベントをくっつける。
マウスが動いた(mousemove)とき、マウスボタンが離されたとき(mouseup)、マウスが所定の要素(今回はmy-containerと名付けた水色の部分)から離れた(mouseleave)とき。mouseupかmouseleaveでドラッグは終了と判断して、mousemove,mouseup,mouseleaveを取り外す。

jQueryでドラッグアンドドロップ

jQueryを使って、drag and dropをやってみた。

jQuery UIについて

jQueryのプラグインで、 jQuery UIというものがあって様々なUIを提供している。こちらを使えばjQueryオブジェクトをドラッグ可能にできる。さまざまなオプションも簡単に指定できる。
jQuery UI
jQuery UIを利用するには? – Build Insider
Draggable | jQuery UI
Draggable – jQuery UI API 1.8.4 日本語リファレンス – StackTrace

今回は jQuery UIなしで

今回は、シンプルにマウスダウンしたらドラッグ開始、マウスアップしたらドラッグ終了というのを作った。

オレンジの図形をドラッグして動かす事が出来る。
以前、CreateJSを使ってやったドラッグアンドドロップ(CreateJSを使ってみる – 図形のドラッグ)では、canvasを使用している。
今回動かすのは、div要素にidを割り当てて、CSSのbackground-colorで色を付けた矩形。
CSSのプロパティleft, topを使って移動させた。

注・今回のデモはタッチイベントに対応していない。なので、「CreateJSを使ってやったドラッグアンドドロップ(CreateJSを使ってみる – 図形のドラッグ)」と違って、スマートフォンでは図形をうごかせない。

HTML

sprite-01が動かす図形。my-stageが図形が動くステージ。その外側を、my-containerが囲む。
my-stage上でマウスが動いているときドラッグにしていたが、それではマウスが外に出てドラッグ終了となったときに図形がはしっこま寄らずに止まってしまう。そこで、さらに外側を囲むmy-containerを用意して、そこをマウス移動に反応する領域に設定した。

CSS

sprite-01のpositionを、my-stageを基準にしたabsoluteにする。

javascript

javascript側では、sprite-01でマウスボタンが押された(mousedown)なら、そのあとのマウスイベントをくっつける。
マウスが動いた(mousemove)とき、マウスボタンが離されたとき(mouseup)、マウスが所定の要素(今回はmy-container)から離れた(mouseleave)とき。mouseupかmouseleaveでドラッグは終了と判断して、mousemove,mouseup,mouseleaveを取り外す。

[CreateJS][SoundJS]音を鳴らす。playとpauseが出来るようにする。

(2015年9月11日追記。
この記事の情報はSoundJS ver 0.5(2013年9月)に基づくものです。
SoundJS ver 0.6.1(2015年5月リリース)に基づいて
こちらに
[CreateJS][SoundJS]音を鳴らす。playとpauseが出来るようにする。(SoundJS ver 0.6.1) | nackpan Blog
記事を書き直しました)


以下の情報はSoundJS ver 0.5(2013年9月)に基づくものです

ssSoundJS
SoundJSのサイト
CreateJSの4種のスイートのひとつ、SoundJSを使って音をあつかってみよう。

まずは音を出してみる

ファイル構成
fileorganization
index.htm

playSound.js

これで、音が鳴る。

playボタンとpauseボタンをつくろう

playボタンを押すと音が出る、pauseボタンで止まって、そこでplayボタンを押すと続きから再生される。というのをやってみよう。
ssSoundJSResources
SoundJSのサイトのResourcesにある、チュートリアル、ドキュメントを見ていくと、SoundInstanceクラスというのがある。
SoundInstanceクラスのドキュメンテーション
サウンドインスタンスの作成方法

あるいは

このように記述する事で、サウンドインスタンスが出来る。このインスタンスをplay, pause, resumeすればいい。

ここで、SoundJSのサイトのDEMOSをあらためて見たら、
ssMediaPlayer(注・音出ます)
MediaPlayerというのがあるじゃないですか。
これみたら、

で、そのインスタンスがポーズしているかどうか調べられるんだ、ということ分かった。

ということで、
再生(play)、一時停止(pause)、再開(resume)をおこなう例をつくりました。
[CreateJS][SoundJS]音を鳴らしてみる – jsdo.it

tweenについて、easingについて

TweenJSをあつかうにあたって、tweenのことが良くわかってなかったので調べた。
イージングでquadとか、cubicとか出てくるけどどういう事を示しているのか知らなかった。
tweenとは、アニメーションの際に始まりと終わりを指定するとその間をうまいこと補間してくれる機能。
イージングで、どのように補間するか定める。イージングで、in, out の指定があるが、それは、始点でどのように動くか、終点でどのように動くか指定するもの。
Robert Pennerさんによるイージングが広く用いられている。
こちらに、Robert Pennerさんのイージングに関係する情報がいろいろとのっている。(図や、スライド、文章・・・)
Robert Penner’s Easing Functions
このなかに書籍”Robert Penner’s Programming MacroMedia Flash MX”の中のtweenに関する章がpdfで掲載されている。
http://www.robertpenner.com/easing/penner_chapter7_tweening.pdf
順を追って、丁寧に平易にPenner’s Easingがどのように作り出されていったか述べてある。
t : time (現在時刻)
d : duration (始まりから終わりまでにかかる時間)
b : begin (始まりの量)
c : change (変化量)

イージングで用いられている用語とその変化の度合い

(t は、始点時0、終点時1となるように調整。(t = t / duration) )
quad : quadratic(二次) f(t) = t * t
cubic : cubic (三次) f(t) = t * t * t
quart : quartic (四次) f(t) = t * t * t * t

quad といえば、4を意味するのでは?と思った。この章で、作者も触れている。
quadraticは、正方形の、2次の、という意味。ラテン語の正方形 quadratum から来ている。quadratumが「4辺」という意味合いの言葉だった。

イージング Linear, quadratic In , cubic In , quartic In が どのようになるのか描いてみた。

CreateJSを使ってみる – 読み込んだ画像をアニメーションさせながら変形

イメージ図。
image_transform

前回(CreateJSを使ってみる – 画像の読み込み)は、画像を読み込むところまでやった。

画像を変形する

イメージ図のようにするために、画像を回転させて、縦方向に圧縮しましょう。

EaselJS には回転、拡大縮小、移動などを行列で行うクラス Matrix2D がある。

こちらのブログで、matrix を用いた回転や拡大縮小の例を分かりやすく解説している。
EaselJSのMatrix2Dクラスを使った変換行列の操作 | kudox.jp
この時点(EaselJS 0.5.0)では、Matrix2D のscale メソッドは、matrix にmatrix を乗算したものと違う挙動をしていた。
FN1305002 – EaselJSのMatrix2D.scale()メソッドを他の変換の後に呼出すと正しく伸縮されない – HTML5 : テクニカルノート
2013年5月15日付けEaselJS 0.6.1 以降は、Matrix2D の scale メソッドのバグは修正されている。

実例。matrix による画像の変形。
ボタンを押すと、だんだんと変形の度合いが強くなるようにした。

この部分で、単位行列 に、回転matrix と拡大縮小matrix をかけてできた行列をcontainer に適用している。

アニメーションする

アニメーションの際は、ゆっくり動き出して速く動いた後、またゆっくりになって止まるなど、スピードを調整したい。
あと、変形が終わった後、さらに移動させたりしたい。
CreateJS には、そのあたりを簡単に記述できるライブラリTweenJS があるので、それを使ってみよう。
TweenJS の使い方は、こちらのブログが分かりやすかった。
トゥイーンで簡単canvasアニメーション!TweenJSの使い方 | kudox.jp

TweenJS で、x やy , rotationなどはあつかいやすい。
けど、matrix に変換行列をかけていくのをやるにはどうしたらいいのかな。プラグインをつくって、そこで計算してターゲットのmatrixに変更を加える事にしよう。

TransformMatrixPlugin.js というのを作って、matrixに変更を加えて適用するようにした。

ひとつめのtween部分、このうち、

部分が、TransformMatrixPlugin が関係している部分。

のところで、matrixを使った変形を指定。
mat というプロパティをTransformMatrixPluginで設定した。
mat は、skewX, skewY, rotation, scaleX, scaleY をもち、値を設定する事が出来る。
そして、mat プロパティを使うときには

をその直前に、そして、

をmat プロパティを使った直後に書く。

TransformMatrixPlugin.js