More Related Content Similar to 最新アドテク×Java script実践活用術
Similar to 最新アドテク×Java script実践活用術 (20) 最新アドテク×Java script実践活用術2. 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 東京大学大学院 情報理工学系研究科電子情報工学科 修士
趣味
ブレイクダンス、ヘヴィメタル、アート
3. 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未踏クリエータ
4. 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未踏人材育成プログラム
採択
5. Hitokuse Inc.© 5
第1部 リッチメディア広告とJavaScript(長尾・25分)
- ヒトクセの紹介
- 第3者配信とは?3rd Party JavaScriptについて
- 実践テクニック① パッケージ化
- 実践テクニック② クロスドメイン対策
- 実践テクニック③ デバイス対応ケーススタディ
第2部 JavaScriptで実現するインバナー動画広告(長尾・10分)
- インバナー動画広告とは?
- 実践テクニック④ CSSスプライト
第3部 ネイティブアドを支えるPhantomJS(島田・20分)
- ネイティブアドとデザイン自動最適化について
- PhantomJSの仕組み(基礎編)
- PhantomJSの仕組み(スクレイピング編)
- CasperJSについて
第4部 クリエイティブ最適化アルゴリズム(濁沼・15分)
6. Hitokuse Inc.© 6
第1部 リッチメディア広告とJavaScript(長尾・25分)
- ヒトクセの紹介
- 第3者配信とは?3rd Party JavaScriptについて
- 実践テクニック① パッケージ化
- 実践テクニック② クロスドメイン対策
- 実践テクニック③ デバイス対応ケーススタディ
第2部 JavaScriptで実現するインバナー動画広告(長尾・10分)
- インバナー動画広告とは?
- 実践テクニック④ CSSスプライト
第3部 ネイティブアドを支えるPhantomJS(島田・20分)
- ネイティブアドとデザイン自動最適化について
- PhantomJSの仕組み(基礎編)
- PhantomJSの仕組み(スクレイピング編)
- CasperJSについて
第4部 クリエイティブ最適化アルゴリズム(濁沼・15分)
9. Hitokuse Inc.©
Smart Canvasとは?
9
制作 配信 分析
Smart Canvasは動画広告やアニメーション広告などのリッチメディア広告のプラットフォームです。
制作から配信・分析まで一括して総合的にサポートを行っています。
タグ出力
管理画面上の制作ツール スマートフォン・PCでの出力 豊富な分析データ
・プログラミング不要
・手軽な操作での制作
・スマートフォンでも再生可能
・多数の提携ネットワーク(後述)
・imp数、クリック数の測定
・タップ領域の可視化
14. Hitokuse Inc.© 14
第1部 リッチメディア広告とJavaScript(長尾・25分)
- ヒトクセの紹介
- 第3者配信とは?3rd Party JavaScriptについて
- 実践テクニック① パッケージ化
- 実践テクニック② クロスドメイン対策
- 実践テクニック③ デバイス対応ケーススタディ
第2部 JavaScriptで実現するインバナー動画広告(長尾・10分)
- インバナー動画広告とは?
- 実践テクニック④ CSSスプライト
第3部 ネイティブアドを支えるPhantomJS(島田・20分)
- ネイティブアドとデザイン自動最適化について
- PhantomJSの仕組み(基礎編)
- PhantomJSの仕組み(スクレイピング編)
- CasperJSについて
第4部 クリエイティブ最適化アルゴリズム(濁沼・15分)
21. Hitokuse Inc.© 21
第1部 リッチメディア広告とJavaScript(長尾・25分)
- ヒトクセの紹介
- 第3者配信とは?3rd Party JavaScriptについて
- 実践テクニック① パッケージ化
- 実践テクニック② クロスドメイン対策
- 実践テクニック③ デバイス対応ケーススタディ
第2部 JavaScriptで実現するインバナー動画広告(長尾・10分)
- インバナー動画広告とは?
- 実践テクニック④ CSSスプライト
第3部 ネイティブアドを支えるPhantomJS(島田・20分)
- ネイティブアドとデザイン自動最適化について
- PhantomJSの仕組み(基礎編)
- PhantomJSの仕組み(スクレイピング編)
- CasperJSについて
第4部 クリエイティブ最適化アルゴリズム(濁沼・15分)
27. 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
}
})();
アニメーション系ライブラリ
参照
28. Hitokuse Inc.© 28
第1部 リッチメディア広告とJavaScript(長尾・25分)
- ヒトクセの紹介
- 第3者配信とは?3rd Party JavaScriptについて
- 実践テクニック① パッケージ化
- 実践テクニック② クロスドメイン対策
- 実践テクニック③ デバイス対応ケーススタディ
第2部 JavaScriptで実現するインバナー動画広告(長尾・10分)
- インバナー動画広告とは?
- 実践テクニック④ CSSスプライト
第3部 ネイティブアドを支えるPhantomJS(島田・20分)
- ネイティブアドとデザイン自動最適化について
- PhantomJSの仕組み(基礎編)
- PhantomJSの仕組み(スクレイピング編)
- CasperJSについて
第4部 クリエイティブ最適化アルゴリズム(濁沼・15分)
37. 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
38. 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内)
39. Hitokuse Inc.© 39
第1部 リッチメディア広告とJavaScript(長尾・25分)
- ヒトクセの紹介
- 第3者配信とは?3rd Party JavaScriptについて
- 実践テクニック① パッケージ化
- 実践テクニック② クロスドメイン対策
- 実践テクニック③ デバイス対応ケーススタディ
第2部 JavaScriptで実現するインバナー動画広告(長尾・10分)
- インバナー動画広告とは?
- 実践テクニック④ CSSスプライト
第3部 ネイティブアドを支えるPhantomJS(島田・20分)
- ネイティブアドとデザイン自動最適化について
- PhantomJSの仕組み(基礎編)
- PhantomJSの仕組み(スクレイピング編)
- CasperJSについて
第4部 クリエイティブ最適化アルゴリズム(濁沼・15分)
43. Hitokuse Inc.© 43
第1部 リッチメディア広告とJavaScript(長尾・25分)
- ヒトクセの紹介
- 第3者配信とは?3rd Party JavaScriptについて
- 実践テクニック① パッケージ化
- 実践テクニック② クロスドメイン対策
- 実践テクニック③ デバイス対応ケーススタディ
第2部 JavaScriptで実現するインバナー動画広告(長尾・10分)
- インバナー動画広告とは?
- 実践テクニック④ CSSスプライト
第3部 ネイティブアドを支えるPhantomJS(島田・20分)
- ネイティブアドとデザイン自動最適化について
- PhantomJSの仕組み(基礎編)
- PhantomJSの仕組み(スクレイピング編)
- CasperJSについて
第4部 クリエイティブ最適化アルゴリズム(濁沼・15分)
44. Hitokuse Inc.© 44
オンライン動画広告の分類
インストリーム広告 インリード広告 インバナー広告
YouTube、Vimeoなどの動画視
聴サービスにおいて動画の前後
や間に再生される動画広告領域
ニュースやブログなどのテキス
トコンテンツの間に表示される
広告領域
Webサイトのいたるところに
設置される広告領域
Skip Ad >>
リーチ多リーチ少
認知高 認知低
音声や大画面を用いること
で認知効果が高い
❌ 配信枠が限られてしまう、
ボリュームが出ない
記事内に自然に溶け込ませ
て見せることが可能
❌ 記事と動画コンテンツの
相性を考える必要がある
枠が大量にあるため、広く
リーチが可能
❌ 視聴されない確率が高い
(スマートフォンは特に)
45. Hitokuse Inc.© 45
インバナー広告の利点
枠が大量にあるため、
広くリーチが可能
❌ 視聴されない確率が高い
(スマートフォンは特に)
Webサイトのいたるところに設置される広告領域
配信ロジックと組み合わせて様々なカスタマイズが可能
オーディエンスターゲティング、ホワイトリストによるプレミアム枠への配信
リターゲティング、各種計測ツールの連携
獲得 + ブランドリフト
LP遷移
会員登録
アプリダウンロード
商品への気づき
商品への理解
イメージ向上
組み合わせによっては獲得だけでなくブランドリフト向上も狙うことが可能
46. Hitokuse Inc.© 46
第1部 リッチメディア広告とJavaScript(長尾・25分)
- ヒトクセの紹介
- 第3者配信とは?3rd Party JavaScriptについて
- 実践テクニック① パッケージ化
- 実践テクニック② クロスドメイン対策
- 実践テクニック③ デバイス対応ケーススタディ
第2部 JavaScriptで実現するインバナー動画広告(長尾・10分)
- インバナー動画広告とは?
- 実践テクニック④ CSSスプライト
第3部 ネイティブアドを支えるPhantomJS(島田・20分)
- ネイティブアドとデザイン自動最適化について
- PhantomJSの仕組み(基礎編)
- PhantomJSの仕組み(スクレイピング編)
- CasperJSについて
第4部 クリエイティブ最適化アルゴリズム(濁沼・15分)