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エンジニア採用情報

  関連記事

no image
【動画広告】VASTって何?

こんにちは、FlexOne推進部の近江です。 私は新卒入社2年目でアドサーバーや動画ソリューション(OVP)のサポート、開発を担当しています。 今回は動画広告のプロトコル「VAST」について書かせて頂きます。   ここ数年動画のくるくる詐欺がありましたが、昨年はHulu、ユーチューバー、見 …

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

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

解説、VMAP!

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

Google IMA SDK で動画アプリに広告を入れてみた〜iOS編〜

新卒のjotakaです。 スマホアプリに動画広告を出すためのSDKを導入してみたいと思います。 ここでのSDKはアプリへ簡単に機能追加するためのframeworkやlibraryと言う方がわかりやすいかもしれません。 アプリ開発者が動画広告用のSDKを使用するメリットとして、例えば動画広告の仕様であ …

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

どうも、広告技術研究室のダーハラです。    何やってる人? 広告技術研究室の業務は多岐に渡るのですが、僕の仕事は海外のアドテクノロジーの動向や関連する技術環境の変化を調べて、経営陣や開発部隊にフィードバックするといったことを主な業務としています。 とてもやり甲斐のある仕事なのですが、仕事 …

アドテク問題(広告表示編)

アドテクエンジニア向けの問題を考えました。 お題は「広告表示」です。 以下お題に沿った「アドタグ」を作成し、広告を表示してみてください。 全部で9問あるので、興味のある人はやってみてください。 難易度は、ちょうどいいくらいです。 全部できた人は、採用担当までご連絡ください。 Q1.バナー広告を表示し …

アドブロッカーに対抗してアドチェッカーを作ってみた

iOS9のSafariでコンテンツブロック機能が登場し、サイト上の広告を非表示にするアドブロックの存在が世に広まりました。 これを機にCrystalを始めとする数々のアドブロッカーアプリが登場しています。 PCブラウザでもAdblock Plusを始め、ブラウザの拡張機能で広告を非表示にして表示速度 …

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

プライバシーが保護されていると期待できなくなってしまった国とは? 『オトナの常識、消費者プライバシー保護(前編)』はこちらから            

Treasure Dataの新機能(Data Tank)をAudienceOneのレポート機能で利用した話

Data Tankとは? Treasure Dataの新機能でTreasure Dataのプラットフォーム上に構築されたデータマートです。 Tableau等のBIツールとの接続を想定されており、AWSでいうところのRedshift的なものだと考えるとわかりやすいかと。 Data TankはPostg …

【DMP】クッキー連携ってなに

  アドテクに関わる方であれば、必ず耳にするであろう「クッキー連携」をシンプルに説明してみようと思います。 クッキー連携は cookie sync(クッキーシンク、cookie synchronization の略)と呼ばれることも多いです。 Googleは cookie matching …