ES5とES6でアドタグを作ってみた


はじめに

アドテク問題(広告表示編)のQ7を元にネイティブ広告を表示するアドタグをES5とES6で作ってみました。

処理の流れ

大きな処理の流れは以下の通り

  1. 広告要素取得処理
    サーバからタイトル/説明文/画像URLの取得を行う

  2. フォーマット処理
    取得した要素を表示するページに最適化した形にフォーマットする

  3. 広告表示処理
    フォーマットした広告を表示する

ES5

ES6

まず、ES6で書くために必要なモジュール群をnpmでインストールします。

package.json

簡単に説明すると、
アドタグはES6で書きますが、動かないブラウザがあるので、ES5にトランスパイルを行うために、babelを使います。
テスト書く用のmochaとLinterはeslintでルールはairbnbのものを使います。
後は、モジュールをコンパイルするためにwebpackを使います。

ES5では、1つのファイルにすべての処理を書きましたが、
ES6ではClassの概念が存在するため、それを使って4つのモジュール分割します。

  • index.js
  • adunit.js
  • utils.js
  • settings.js

それぞれのモジュールの依存は、

こんな感じでimportを使うことで、解決することができます。

Class内では、他の言語と同じようにconstructorを指定することができ、
このアドタグでは、instance作成時の引数に広告をレンダリングするdomのidを指定しています。

index.js

adunit.js

モジュールが完成したら、テストを書きます。今回は一旦、settingsのテストだけ書いてます。
testフォルダの下にテストコードを追加し、
テストを実行する場合は、

を実行します。

package.jsonにnpm testコマンド時の挙動を記述しており、

テストフレームワークとしてmochaを使い、テストもES6で書いているので、
babel-registerをrequireに渡すことで、テストコードをES5にトランスパイルしてから実行されるようになるらしいです。

最後に、webpackを使いモジュール化したら完成です。

distフォルダの配下に、es6.min.jsというのが生成されます。

サンプル

DACホームページサンプル
※スマホorスマホUAで見てください。

広告が2つ表示され、上の方がES6、下の方がES5で書いたアドタグが使われています。

今回使用したコードは以下にまとめてあります。
ES2015-sample


DACエンジニア採用情報

  関連記事

playlist
解説、VMAP!

どうも動画といえば僕です。Rhiannonです。 前回、前々回と動画ファイル自体についての記事を書きましたが、今回はVMAPについて解説しようと思います。 VMAPって聞いた事あるけど仕様書が英語だし読むの大変だと思っていた方の理解の一助になれば幸いです。   VMAPとはなんぞや? VM …

appnexus
「Ad Tech Power Game」

こんにちは、テクノロジー戦略部の田畑です。 はじめに。 この「アドテクゑびす界」ですが、DAC公式のエンジニアブログです。他の方も色々と技術的なことを書いていますが僕エンジニアでもなんでもありません。コード書けませんし、読めません。 ではなぜそんなやつがここでブログを書いているのか?会社の公式ブログ …

hashed_potato
【DMP】IDのハッシュってなに

アドテクに関わる方であれば、よく耳にするであろう「ハッシュ」をシンプルに説明してみようと思います。 とはいえ「ハッシュ」は広いので、ここでは「IDのハッシュ」に焦点を当てます。 「ハッシュ/hash(動詞)」はそもそも「細切れにする」というような意味を持ちます。(名詞だと「細切れのもの」) ハッシュ …

big-brother2
オトナの常識、消費者プライバシー保護(後編)

プライバシーが保護されていると期待できなくなってしまった国とは? 『オトナの常識、消費者プライバシー保護(前編)』はこちらから             正解はアメリカです。 スノーデン事件といえば、ご存じの方もいらっしゃるかと思います。 & …

no image
SafeFrameでリッチ広告をセキュアに実現

アドサーバ(広告配信サーバ)は、通常iframeで広告のクリエイティブを配信している。(JS配信とかに対応しているアドサーバもある) 通常のセキュリティだとiframeの中身(srcで実際に表示されている側)がiframeを操作する事はできない。つまりexpandなどのリッチ広告、特に表示領域を変更 …

new-york-city-828776_1280
ネイティブ広告と記事広告の違いってなに?!

こんにちは、プラットフォーム・ワンの新卒1年目Yukaです!! ここ数年よく耳にし、さまざまな媒体で目にするネイティブ広告。 しかし、今までの記事広告といったいなにが違うのー?!?!?! ということで調べてみました。 ネイティブ広告(Native Ads) デザイン、内容、フォーマットが、媒体社が編 …

20140930220910
AudieneOneでアドブロック利用者を抽出する訪問者セグメントを作ろう

はじめに iOS 9のコンテンツブロッカーによって盛り上がったアドブロック論争。アドブロック自体はPCブラウザ用プラグインで昔からできていたことなのですが、さらに普及していくのかもしれません。 アドブロックの仕組みが普及するのはインターネット業界全体の損失につながりかねない話ではあるのですが、その一 …

gtm
【タグマネジメント】GoogleTagManagerでイベントリスナーを使う

タグマネジメントとは タグマネジメントとは、広告効果測定ツールや、サイト解析ツールなどで利用している『HTMLタグ』の管理を行うことをいいます。 タグマネジメントツールでは、Webサイトの全ページに各タグマネジメントツールが発行する1つのタグを設置するだけで、あらゆるHTMLタグを管理画面上で登録す …

IAB
Ad Tech Conference~海外アドテク系カンファレンスに行ってきた~

こんにちは、田畑です。   前回のエントリから早一か月、どのように書こうかなぁと考えているうちに時間が経ってしまいました。前回はそもそも自分の部署が何をしているのかといったところを書いたので、今回は実際に情報収集の場として利用している各種カンファレンスの様子について書いてみました。 &nb …

SCA_and_Discovery_after_return_to_flight,_2005
【DMP】ピギーバックってなに

アドテクに関わる方であれば、よく耳にするであろう「ピギーバック」をシンプルに説明してみようと思います。 「piggyback/ピギーバック」は 「おんぶ」「背負う」に当たる言葉です。 アドテクでピギーバックというと、タグのピギーバックのことを指すことが多いように思います。 タグは、サイトに導入する小 …