最新アドテク×java script実践活用術
TRANSCRIPT
Hitokuse Inc.© 1
JavaScript技術を高めたい方必見! 最新アドテク×JavaScript実践活用術
株式会社ヒトクセ CTO 長尾俊
Hitokuse Inc.©
自己紹介
2
長尾 俊株式会社ヒトクセ 最高技術責任者 (Co-Founder / CTO) 東京大学大学院情報理工学系研究科 修士 IPA未踏クリエータ
得意領域 C, C++, C#, Objective-C,JAVA, PHP,Ruby,Python,HTML,CSS,JS,Flash,Lisp,VB,SQL,lua… Web, スマートフォンアプリ, 機械工作, マイコン, 音声信号処理, CG, 機械学習…
略歴 2011.4 東京大学工学部 機械情報工学科学士 2011 東大アントレプレナー道場7期 準優勝、その他ビジコン多数受賞 2012.4 株式会社ヒトクセ設立 Co-Founder CTO就任 2012 IPA未踏クリエータ 2012 SIGGRAPHでの学会発表 2013.4 東京大学大学院 情報理工学系研究科電子情報工学科 修士
趣味 ブレイクダンス、ヘヴィメタル、アート
Hitokuse Inc.©
自己紹介 (裏)
3
ポートフォリオ ・メタラー起業家 SHUNのブログ:http://shun0750.tumblr.com ・ヘヴィメタルダンスチーム「マソソソマソソソ」: https://www.youtube.com/watch?v=I0iI_EqJYWA https://www.youtube.com/watch?v=Jbh0aYLfWn4
頭で回ったり・・ メタルでダンスしたり・・ カクテル作ったり・・
長尾 俊株式会社ヒトクセ 最高技術責任者 (Co-Founder / CTO) 東京大学大学院情報理工学系研究科 修士 IPA未踏クリエータ
Hitokuse Inc.©
自己紹介 - ポートフォリオ
4
MRsionCase (Hanyuool Kim, Shun Nagao, Satoshi Maekawa, Takeshi Naemura)
多方向鑑賞可能な空中像展示ショーケース ハーフミラーと超指向性スピーカを用いて、鑑賞方向に応じて異なる空中像や指向音を提示。
デジタルコンテンツEXPO 2012 採択
SIGGRAPH ASIA 2012 Emerging Technology, Tech Brief, Posters 採択
sARound - Talking Shadow (長尾 俊、若間 弘典、渡邊 翔太)
実物体音像定位プラットフォーム 超指向性スピーカを用いて、任意の位置に指向音を当てて拡散させ音源を作る。
2012年 IPA未踏人材育成プログラム 採択
Hitokuse Inc.© 5
第1部 リッチメディア広告とJavaScript(長尾・25分) - ヒトクセの紹介 - 第3者配信とは?3rd Party JavaScriptについて - 実践テクニック① パッケージ化 - 実践テクニック② クロスドメイン対策 - 実践テクニック③ デバイス対応ケーススタディ
第2部 JavaScriptで実現するインバナー動画広告(長尾・10分) - インバナー動画広告とは? - 実践テクニック④ CSSスプライト
第3部 ネイティブアドを支えるPhantomJS(島田・20分) - ネイティブアドとデザイン自動最適化について - PhantomJSの仕組み(基礎編) - PhantomJSの仕組み(スクレイピング編) - CasperJSについて
第4部 クリエイティブ最適化アルゴリズム(濁沼・15分)
Hitokuse Inc.© 6
第1部 リッチメディア広告とJavaScript(長尾・25分) - ヒトクセの紹介 - 第3者配信とは?3rd Party JavaScriptについて - 実践テクニック① パッケージ化 - 実践テクニック② クロスドメイン対策 - 実践テクニック③ デバイス対応ケーススタディ
第2部 JavaScriptで実現するインバナー動画広告(長尾・10分) - インバナー動画広告とは? - 実践テクニック④ CSSスプライト
第3部 ネイティブアドを支えるPhantomJS(島田・20分) - ネイティブアドとデザイン自動最適化について - PhantomJSの仕組み(基礎編) - PhantomJSの仕組み(スクレイピング編) - CasperJSについて
第4部 クリエイティブ最適化アルゴリズム(濁沼・15分)
Hitokuse Inc.©
会社のご紹介
7
ITの力を駆使して、人々の生活に 新しい体験を生み出す。
株式会社
Smart Canvas
あらゆるデバイスで リッチな広告を
PC、タブレット、スマートフォンにHTML5のリッチメディア広告を配信します。 動画広告やインタラクティブな広告で、ユーザーを次のステップへ誘導します。
Hitokuse Inc.©
Smart Canvasとは?
9
制作 配信 分析
Smart Canvasは動画広告やアニメーション広告などのリッチメディア広告のプラットフォームです。 制作から配信・分析まで一括して総合的にサポートを行っています。
タグ出力
管理画面上の制作ツール スマートフォン・PCでの出力 豊富な分析データ・プログラミング不要 ・手軽な操作での制作
・スマートフォンでも再生可能 ・多数の提携ネットワーク(後述)
・imp数、クリック数の測定 ・タップ領域の可視化
Hitokuse Inc.©
配信広告のバリエーション
10
獲得系
ブランディング系◎アニメーションバナー◎トランジションバナー ◎インタラクティブバナー
◎動画バナー ◎3Dバナー ◎スクラッチバナー
Dynamic Native Ads
カメレオンWebサイトのデザイン情報を解析し、 あらゆるディスプレイ広告に 最適化したネイティブアドを配信します。
広告が表示されるWebサイトのデザイン情報をシステム解析し、 それぞれのWebサイトのデザインに最適化したネイティブアドを Programmaticに生成します。(特許出願中)
技術者ならではの発想をビジネスに活かしていく!
Hitokuse Inc.©
サービスのご紹介
13
ヒトクセはリッチメディア広告のクリエイティブ・ソリューションを提供します
クリエイティブのデータドリブン化の時代へ
- アニメーション・動画広告の配信 - 制作ツール・APIの提供 - 各種計測データのレポート
- ヒートマップを用いた効果解析 - 自動でデザイン変化する広告配信
Hitokuse Inc.© 14
第1部 リッチメディア広告とJavaScript(長尾・25分) - ヒトクセの紹介 - 第3者配信とは?3rd Party JavaScriptについて - 実践テクニック① パッケージ化 - 実践テクニック② クロスドメイン対策 - 実践テクニック③ デバイス対応ケーススタディ
第2部 JavaScriptで実現するインバナー動画広告(長尾・10分) - インバナー動画広告とは? - 実践テクニック④ CSSスプライト
第3部 ネイティブアドを支えるPhantomJS(島田・20分) - ネイティブアドとデザイン自動最適化について - PhantomJSの仕組み(基礎編) - PhantomJSの仕組み(スクレイピング編) - CasperJSについて
第4部 クリエイティブ最適化アルゴリズム(濁沼・15分)
Hitokuse Inc.© 15
第3者配信とは?
Hitokuse Inc.©
広告業界の基本構造
16
テレビ
雑誌
WebSEO
リスティング
ディスプレイインストリーム
広告主 媒体・メディア
街頭広告
アプリ
認知
ゲーム
アプリ
化粧品
自動車
金融
旅行
通販
電子書籍
ユーザー
: :
Hitokuse Inc.© 17
アドネットワークの仕組み
アドネットワークとは?
広告主
ゲーム
アプリ
化粧品
自動車
金融
旅行
通販
電子書籍
:
媒体・メディア
1クリック100円
ユーザー
クリック
配信
アド ネットワーク
Hitokuse Inc.© 18
アドネットワークのおさらい
広告主
ゲーム
アプリ
化粧品
自動車
金融
旅行
通販
電子書籍
:
媒体・メディア
1クリック100円
配信
ヒトクセのビジネスモデル:第3者配信
ユーザー
クリック
アド ネットワーク
Hitokuse Inc.© 19
概要第3者配信の仕組み
① 広告配信先Webサイトが読み込まれる ② アドネットワークのライブラリが読み込まれる ③ 第3者配信のライブラリが読み込まれる
❶広告配信先Webサイト
❷アドネットワークのDOM
❸第3者配信のDOM
Hitokuse Inc.© 20
第3者配信とは?第3者配信の注意点
・表示先Webサイトのスクリプトとの競合 「DOMのid,class名が被ってサイトのCSSが反映されてしまった」(逆も然り) 「window.onloadが発火した後に広告が表示され、広告側では発動しない」 「変数名が被って動作がおかしくなった」 対策:パッケージ化
・クロスドメイン制約 「広告内からサイトの情報を取得することができない」 「ユーザーのスクロール量を取得することができない」 対策:postMessageによるiframe間通信
・デバイス対応 「XPERIA Android4.1でフルスクリーン動画が再生されない」 「iOS Chromeでフルスクリーン終了の判定ができない」 対策:泥臭く頑張るしかない!→ケーススタディを紹介
Hitokuse Inc.© 21
第1部 リッチメディア広告とJavaScript(長尾・25分) - ヒトクセの紹介 - 第3者配信とは?3rd Party JavaScriptについて - 実践テクニック① パッケージ化 - 実践テクニック② クロスドメイン対策 - 実践テクニック③ デバイス対応ケーススタディ
第2部 JavaScriptで実現するインバナー動画広告(長尾・10分) - インバナー動画広告とは? - 実践テクニック④ CSSスプライト
第3部 ネイティブアドを支えるPhantomJS(島田・20分) - ネイティブアドとデザイン自動最適化について - PhantomJSの仕組み(基礎編) - PhantomJSの仕組み(スクレイピング編) - CasperJSについて
第4部 クリエイティブ最適化アルゴリズム(濁沼・15分)
Hitokuse Inc.© 22
パッケージ化
未知のWebサイト
未知のDOM構造
未知のスクリプト
ライブラリA ライブラリB
ヒトクセサーバー
ダウンロード干渉しないように!
3rd Party JavaScriptの課題
未知のWebサイトでも動くようなライブラリ作りをする必要
Hitokuse Inc.© 23
パッケージ化
ダメな例
グローバル変数にしてしまっているので、外界に影響を与える可能性が高い
var result = 0; a = 1; b = 2;
result = a + b; console.log(result);
Hitokuse Inc.© 24
パッケージ化
即時関数を用いる方法
即時関数の定義
即時関数の中ではローカル変数を使えるので、独立した環境を作れる
ローカル変数の定義
(function () { var result = 0; var a = 1; var b = 2; result = a + b; console.log(result); }());
Hitokuse Inc.© 25
パッケージ化
オブジェクトを用いる方法
オブジェクトの定義
変数をぶら下げる関数をぶら下げる
オブジェクトに処理をぶら下げるため、外部から オブジェクトを通じて処理を呼び出しやすい
var SC = function(){}; SC.a = 1; SC.b = 2; SC.result = function(){ return SC.a + SC.b; } console.log(SC.result());
Hitokuse Inc.© 26
パッケージ化
即時関数+オブジェクト
オブジェクトを グローバルで定義
外側からもオブジェクトを介してアクセスしやすい
var SC = function(){}; (function () { var a = 1; var b = 2; SC.result = function(){ return a + b; } })();
処理は即時間数スコープ内で
外からアクセスするものは オブジェクトにぶら下げる
Hitokuse Inc.© 27
パッケージ化
即時関数+オブジェクトの例
//sctool.js var SCTool = function(){}; (function () { var a = 1; var b = 2; SCTool.makeLink = function(){ //リンク作成処理// return url; //最終的なURL } })();
ユーティリティ系ライブラリ
//scanimation.js var SCAnimation = function(){}; (function () { var a = 1; var b = 2; SCAnimation.makeDOM = function(){ var href = SCTool.makeLink(); //アニメーションDOM作成// return url; //最終的なURL } })();
アニメーション系ライブラリ
参照
Hitokuse Inc.© 28
第1部 リッチメディア広告とJavaScript(長尾・25分) - ヒトクセの紹介 - 第3者配信とは?3rd Party JavaScriptについて - 実践テクニック① パッケージ化 - 実践テクニック② クロスドメイン対策 - 実践テクニック③ デバイス対応ケーススタディ
第2部 JavaScriptで実現するインバナー動画広告(長尾・10分) - インバナー動画広告とは? - 実践テクニック④ CSSスプライト
第3部 ネイティブアドを支えるPhantomJS(島田・20分) - ネイティブアドとデザイン自動最適化について - PhantomJSの仕組み(基礎編) - PhantomJSの仕組み(スクレイピング編) - CasperJSについて
第4部 クリエイティブ最適化アルゴリズム(濁沼・15分)
Hitokuse Inc.© 29
クロスドメイン制約
クロスドメイン制約とは?
「あるドメイン上で、異なるドメインの コンテンツ操作をしてはいけない」
というブラウザの制約
Hitokuse Inc.© 30
クロスドメイン制約
・他ドメインのサイトをiframeで呼び出し、iframeのコンテンツにJavaScriptでアクセスしようとする
クロスドメイン制約を受けるケース
aaa.com
bbb.com
アクセスできない!!
広告表示時によく生じるケース
Hitokuse Inc.© 31
広告でのクロスドメイン制約
スクロール
iframe
smartcanvas.net
hitokuse.com
iframe内外でドメインが異なる 場合はお互いにDOMに アクセスできない (クロスドメイン制約)
※postMessageなどの機能で通信することは可能
広告内(iframe内)から 広告外(サイト側)のユーザーの スクロールを読み取るのが難しい
広告が画面に入ってから動画広告 を再生するのが難しい
「スマートフォンの画面に入ったら動画広告を再生したい!」
postMessage() を使いましょう。
クロスドメイン制約 を打ち破れ!!
Hitokuse Inc.© 33
クロスドメイン対策
aaa.com
bbb.com
アクセスできない!!
想定するシチュエーションiframe内部(bbb.com)からiframe外部(aaa.com)への通信
Hitokuse Inc.© 34
クロスドメイン対策
aaa.com(iframe外)bbb.com(iframe内)
想定するシチュエーション
「CrossDomain」という文字を取得したい
<iframe id=“ifr” src=“http://bbb.com”> </iframe> <div id=“test"> CrossDomain </div>
Hitokuse Inc.© 35
クロスドメイン対策
aaa.com(iframe外)bbb.com(iframe内)
想定するシチュエーション
<iframe id=“ifr” src=“http://bbb.com”> </iframe> <div id=“test"> CrossDomain </div>
window.parent.document.get ElementById("test").innerHTML
Hitokuse Inc.© 36
クロスドメイン対策
aaa.com(iframe外)bbb.com(iframe内)
想定するシチュエーション
postMessageで問い合わせ messageイベントで受け取り
値を取得、 postMessageで値を送信messageイベントで受け取り
window.parent.postMessage("getHTML:test", “*”);
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
var message = event.data; if(message.split(“:”)[0]==“getHTML”) var response = document.getElementById(message.split(“:”)[1]).innerHTML; document.getElementById(“ifr”).contentWindow.postMessage(response,”*”);
}
Hitokuse Inc.© 37
クロスドメイン対策
aaa.com(iframe外)
bbb.com(iframe内)
iframe内→iframe外の通信
送信先のドメイン (特に指定しない場合は*とする)
送信先(親DOM) メッセージ
messageイベントで受け取り
送信先のiframe
window.addEventListener("message", receiveMessage, false); function receiveMessage(event) {
var message = event.data; console.log(message);
}
Hitokuse Inc.© 38
クロスドメイン対策
aaa.com(iframe外)
messageイベントで受け取り
iframe外→iframe内の通信
「CrossDomain」
window.addEventListener("message", receiveMessage, false); function receiveMessage(event) {
var message = event.data; if(message.split(“:”)[0]==“getHTML”) var response = document.getElementById(message.split(“:”)[1]).innerHTML; document.getElementById(“ifr”).contentWindow.postMessage(response,”*”);
}
bbb.com(iframe内)
Hitokuse Inc.© 39
第1部 リッチメディア広告とJavaScript(長尾・25分) - ヒトクセの紹介 - 第3者配信とは?3rd Party JavaScriptについて - 実践テクニック① パッケージ化 - 実践テクニック② クロスドメイン対策 - 実践テクニック③ デバイス対応ケーススタディ
第2部 JavaScriptで実現するインバナー動画広告(長尾・10分) - インバナー動画広告とは? - 実践テクニック④ CSSスプライト
第3部 ネイティブアドを支えるPhantomJS(島田・20分) - ネイティブアドとデザイン自動最適化について - PhantomJSの仕組み(基礎編) - PhantomJSの仕組み(スクレイピング編) - CasperJSについて
第4部 クリエイティブ最適化アルゴリズム(濁沼・15分)
Hitokuse Inc.© 40
デバイス対応ケーススタディ
CSS3 3D Transforms
Android 4.1以降 (CSS 3D Transform)
Android 4.0以前 (HTML5 Canvas)
Android 4.0以前でCSS 3Dが使えない!!
Android 4.0以前はHTML5 Canvasで代用する
Hitokuse Inc.© 41
デバイス対応ケーススタディ
非同期でJSで通信をする場合
IEのAjax対応
IE8, IE9 IE10~
XDomainRequest XMLHttpRequest
両方対応できる送り方
if(window.XDomainRequest){ var xdr = new XDomainRequest(); // XDomainRequestの処理 }else{ var xhr = new XMLHttpRequest(); // XMLHttpRequestの処理 }
Hitokuse Inc.© 42
デバイス対応ケーススタディ
jQueryの$.ajaxを使っている場合
IEのAjax対応
(https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest)
MoonScript/jQuery-ajaxTransport-XDomainRequest
→IE8対応されたjQueryの追加ライブラリを使うのも手
Hitokuse Inc.© 43
第1部 リッチメディア広告とJavaScript(長尾・25分) - ヒトクセの紹介 - 第3者配信とは?3rd Party JavaScriptについて - 実践テクニック① パッケージ化 - 実践テクニック② クロスドメイン対策 - 実践テクニック③ デバイス対応ケーススタディ
第2部 JavaScriptで実現するインバナー動画広告(長尾・10分) - インバナー動画広告とは? - 実践テクニック④ CSSスプライト
第3部 ネイティブアドを支えるPhantomJS(島田・20分) - ネイティブアドとデザイン自動最適化について - PhantomJSの仕組み(基礎編) - PhantomJSの仕組み(スクレイピング編) - CasperJSについて
第4部 クリエイティブ最適化アルゴリズム(濁沼・15分)
Hitokuse Inc.© 44
オンライン動画広告の分類
インストリーム広告 インリード広告 インバナー広告
YouTube、Vimeoなどの動画視聴サービスにおいて動画の前後や間に再生される動画広告領域
ニュースやブログなどのテキストコンテンツの間に表示される
広告領域
Webサイトのいたるところに設置される広告領域
Skip Ad >>
リーチ多リーチ少
認知高 認知低
音声や大画面を用いることで認知効果が高い
❌配信枠が限られてしまう、ボリュームが出ない
記事内に自然に溶け込ませて見せることが可能
❌記事と動画コンテンツの 相性を考える必要がある
枠が大量にあるため、広くリーチが可能
❌視聴されない確率が高い(スマートフォンは特に)
Hitokuse Inc.© 45
インバナー広告の利点
枠が大量にあるため、広くリーチが可能
❌視聴されない確率が高い(スマートフォンは特に)
Webサイトのいたるところに設置される広告領域
配信ロジックと組み合わせて様々なカスタマイズが可能
オーディエンスターゲティング、ホワイトリストによるプレミアム枠への配信 リターゲティング、各種計測ツールの連携
獲得 + ブランドリフト
LP遷移 会員登録
アプリダウンロード
商品への気づき 商品への理解 イメージ向上
組み合わせによっては獲得だけでなくブランドリフト向上も狙うことが可能
Hitokuse Inc.© 46
第1部 リッチメディア広告とJavaScript(長尾・25分) - ヒトクセの紹介 - 第3者配信とは?3rd Party JavaScriptについて - 実践テクニック① パッケージ化 - 実践テクニック② クロスドメイン対策 - 実践テクニック③ デバイス対応ケーススタディ
第2部 JavaScriptで実現するインバナー動画広告(長尾・10分) - インバナー動画広告とは? - 実践テクニック④ CSSスプライト
第3部 ネイティブアドを支えるPhantomJS(島田・20分) - ネイティブアドとデザイン自動最適化について - PhantomJSの仕組み(基礎編) - PhantomJSの仕組み(スクレイピング編) - CasperJSについて
第4部 クリエイティブ最適化アルゴリズム(濁沼・15分)
Hitokuse Inc.© 47
ブラウザ・OSの制約
スマートフォンでのインバナー動画の再生にはハードルがある
videoタグの制約iOSの場合、videoタグが再生マークが出てストップする
再生マーク静止画 全画面再生
タップ
・iOS:Flashが使えない。 ・Android:サポート対象外(2011年11月開発終了、2013年9月にアップデート終了)
Flashの制約
Hitokuse Inc.© 48
ブラウザ・OSの仕様差
CSSスプライトとは複数の画像を一つの画像にまとめ、リクエスト数を減らす手法
sprite.png
CSSの指定
.youtube{ background-image:url(sprite.png); background-position: -40px -200px; width: 120px; height: 60px; } 結果的に表示される画像
CSSで指定された値で切り取り
200px
40px120px
60px
Hitokuse Inc.© 49
ブラウザ・OSの仕様差
スマートフォン動画の仕組みCSSスプライトを用いてコマ送りしている
background-image
可視領域
可視領域をずらしてコマ送りさせる
background-imageで大きなCSSスプライトを設定し、background-positionをJavaScriptでずらしていくことで、コマ送りしている
.movie{ background-image:url(http://~~~.jpg); background-position: -300px -340px; }
300px
170p
x
Hitokuse Inc.© 50
ブラウザ・OSの仕様差
background-imageで大きなCSSスプライトを設定し、background-positionをJavaScriptでずらしていくことで、コマ送りしている
background-image
可視領域
.movie{ background-image:url(http://~~~.jpg); background-position: -300px -510px; }
スマートフォン動画の仕組みCSSスプライトを用いてコマ送りしている
Hitokuse Inc.© 51
ブラウザ・OSの仕様差
background-imageで大きなCSSスプライトを設定し、background-positionをJavaScriptでずらしていくことで、コマ送りしている
background-image
可視領域.movie{ background-image:url(http://~~~.jpg); background-position: -300px -680px; }
スマートフォン動画の仕組みCSSスプライトを用いてコマ送りしている
Hitokuse Inc.© 52
その他
・ストリーミング処理 ・インビュー再生 / アウトビュー停止 ・回線速度によって画質を出し分け ・音声との同期 ・コストを食わないような仕組み
ヒトクセで行っている工夫