2015年10月5日付のCreateJS Blogの記事「HTML5 Banner Ads With CreateJS」に、新たなクラスとしてAdHelperが紹介されました。バナー広告をつくるときに役立つクラスです。「HTML5 Banner Ads With CreateJS」Appendix「AdHelper」にもとづいてAdHelperクラスの機能をご紹介します。

01 AdHelperオブジェクトをつくる

AdHelperクラスはGitHubのCreateJS/html5adsからダウンロードできます(図001)。AdHelperはCreateJSで広告を作成しようとするとき、その構築やデプロイが簡単にできるように助けてくれるクラスです。さまざまな機能を備え、使い方も簡単です。クラスのインスタンスは、つぎのようにコンストラクタを呼び出してつくります。渡す引数(myStage)は対象となるStageオブジェクトです。

var ad = new createjs.AdHelper(myStage);

図001■GitHubのCreateJS/html5ads

02 メソッドを連鎖して呼び出す

ほとんどのメソッドは呼び出したインスタンス自身を返しますので、その戻り値に続けてつぎのメソッドが呼び出せます。たとえば、つぎのJavaScriptコードは、AdHelperインスタンスをつくって時間を同期し、パフォーマンスを確かめつつ、高解像度(dpi)に対応させます。これらのメソッドには引数が与えられていませんので、いずれもデフォルトの設定が用いられます。

var ad = new createjs.AdHelper(myStage) .timeSync() .watchFPS() .highDPI();

03 スリープと解除

広告を予め定めたスケジュールにしたがってスリープさせ、マウスポインタが広告に重なっているかユーザーがクリックしたとき一定の時間で解除します。広告がスリープしている場合、Tickerクラスは一時停止し、Ticker.tickイベントが除かれ、GreenSockトゥイーンも一時停止します。そして、AdHelper.sleepイベントが配信されて、処理に手を加えることもできます。解除はこの逆で、AdHelper.wakeイベントが起こります。

ad.setSleep(start, mousedown, inBounds, useTicks, listener);

• start
  メソッドが呼び出されてからスリープするまでに待つ秒数。0は待ち時間なし。
• mousedown
  バナーがクリックされてからスリープするまでに待つ秒数。nullは待ち時間なし。
• inBounds
  マウスポインタがバナーの外に出てからスリープするまでに待つ秒数。nullは待ち時間なし。
• useTicks
  スリープの時間単位を定めるブール値。trueがtick、false(デフォルト値)は秒数。
• listener
  Stageオブジェクトに対するTickerクラスのリスナー関数。スリープのときは削除され、解除で登録される。

広告のスリープとその解除は、AdHelper.sleep()とAdHelper.wake()メソッドでも行えます。引数は、前者がスリープするまでの待ち時間、後者は解除した状態の時間です。

ad.sleep(delay); ad.wake(time);

04 表示の有無

広告が表示されなくなった(たとえば、ブラウザのタグで背後になった)ことを確かめ、そのスリープやサウンドの消音を行います。そして、広告が表示されたら、設定を戻します。AdHelper.hiddenプロパティがそれぞれに応じて定められ、AdHelper.sleepとAdHelper.wakeイベントが決まったとおりに配信されます。

AdHelperクラスを使うと、この機能は自動的に働きます。

05 コンテンツの代替と切り替え

CreateJSがブラウザに対応しないとき、表示する代替コンテンツが定められます。パフォーマンスを監視して、広告の動きが遅くなりすぎたら、代替コンテンツを表示することもできます。このためのメソッドは3つあり、それぞれ異なったレベルのコントロールを与えます。

AdHelper.setAltImage()メソッドは、イメージとリンクそれぞれのURLおよび代替テキスト、リンクターゲットの4つを引数とします。また、AdHelper.setAltHTML()とAdHelper.setAlt()メソッドには、それぞれ表示するHTMLコンテンツと要素を渡します。

ad.setAltImage(imgSrc, href, alt, target); ad.setAltHTML(html); ad.setAlt(element);

06 時間の同期

広告の中のすべてのMovieClipオブジェクトを時間同期のモードで動かすように設定します(すべてのMovieClipインスタンスのフレームレートを定めます)。これにより、広告は実際のフレームレートが変動しても、予め決められた時間で再生することができます。

ad.timeSync(framerate);

07 高解像度(DPI)の対応

高解像度(DPI)の画面で、最高解像度で描画します。高解像度の画面でもパフォーマンスを高めるため、最高解像度の描画はさせないようにもできます。広告を異なるスケールでオーサリングするときにも使えます。

ad.highDPI(enabled, scale);

08 パフォーマンスの監視

再生フレームレートを監視して、広告の対応すべき最低限のパフォーマンスがいつ満たせなくなるのかを見出せます。AdHelper.slowイベントが配信されますので、広告はスリープして代替コンテンツを表示することもできます。表示機能と組み合わせれば、背景のタグ内で帯域幅調整の問題が起こることも防げます。

ad.watchFPS(showAlt, minFPS, tolerance);

• showAlt
  trueを渡すと、再生が遅くなったときAdHelper.showAlt()メソッドが呼ばれて、代替コンテンツが表示される。
• minFPS
  許容できる最低フレームレート。nullを与えると自動的に計算される。
• tolerance
  デフォルト値の位置を基準にして、値が大きいほどフレームレートの遅れを許容する。

作成者: 野中文雄
作成日: 2015年10月20日