最新アドテク×Java script実践活用術

1. Hitokuse Inc.© 1 JavaScript技術を高めたい方必見！最新アドテク JavaScript実践活用術株式会社ヒトクセ CTO 長尾俊

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 東大アントレプレナー道場７期準優勝、その他ビジコン多数受賞 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 第１部リッチメディア広告とJavaScript（長尾・25分） - ヒトクセの紹介 - 第３者配信とは？3rd Party JavaScriptについて - 実践テクニック① パッケージ化 - 実践テクニック② クロスドメイン対策 - 実践テクニック③ デバイス対応ケーススタディ第２部 JavaScriptで実現するインバナー動画広告（長尾・10分） - インバナー動画広告とは？ - 実践テクニック④ CSSスプライト第3部ネイティブアドを支えるPhantomJS（島田・20分） - ネイティブアドとデザイン自動最適化について - PhantomJSの仕組み(基礎編) - PhantomJSの仕組み(スクレイピング編) - CasperJSについて第4部クリエイティブ最適化アルゴリズム（濁沼・15分）

7. Hitokuse Inc.© 会社のご紹介 7 ITの力を駆使して、人々の生活に新しい体験を生み出す。株式会社

8. Smart Canvas あらゆるデバイスでリッチな広告を PC、タブレット、スマートフォンにHTML5 のリッチメディア広告を配信します。動画広告やインタラクティブな広告で、ユーザーを次のステップへ誘導します。

9. Hitokuse Inc.© Smart Canvasとは？ 9 制作配信分析 Smart Canvasは動画広告やアニメーション広告などのリッチメディア広告のプラットフォームです。制作から配信・分析まで一括して総合的にサポートを行っています。タグ出力管理画面上の制作ツールスマートフォン・PCでの出力豊富な分析データ・プログラミング不要・手軽な操作での制作・スマートフォンでも再生可能・多数の提携ネットワーク（後述）・imp数、クリック数の測定・タップ領域の可視化

10. Hitokuse Inc.© 配信広告のバリエーション 10 獲得系ブランディング系 ◎アニメーションバナー◎トランジションバナー ◎インタラクティブバナー ◎動画バナー ◎３Dバナー ◎スクラッチバナー

11. Dynamic Native Ads カメレオン Webサイトのデザイン情報を解析し、あらゆるディスプレイ広告に最適化したネイティブアドを配信します。

12. 広告が表示されるWebサイトのデザイン情報をシステム解析し、それぞれのWebサイトのデザインに最適化したネイティブアドを Programmaticに生成します。（特許出願中）技術者ならではの発想をビジネスに活かしていく！

13. Hitokuse Inc.© サービスのご紹介 13 ヒトクセはリッチメディア広告のクリエイティブ・ソリューションを提供しますクリエイティブのデータドリブン化の時代へ - アニメーション・動画広告の配信 - 制作ツール・APIの提供 - 各種計測データのレポート - ヒートマップを用いた効果解析 - 自動でデザイン変化する広告配信

15. Hitokuse Inc.© 15 第３者配信とは？

16. Hitokuse Inc.© 広告業界の基本構造 16 テレビ雑誌 Web SEO リスティングディスプレイインストリーム広告主媒体・メディア街頭広告アプリ認知ゲームアプリ化粧品自動車金融旅行通販電子書籍ユーザー：：

17. Hitokuse Inc.© 17 アドネットワークの仕組みアドネットワークとは？広告主ゲームアプリ化粧品自動車金融旅行通販電子書籍：媒体・メディア１クリック100円ユーザークリック配信アドネットワーク

18. Hitokuse Inc.© 18 アドネットワークのおさらい広告主ゲームアプリ化粧品自動車金融旅行通販電子書籍：媒体・メディア１クリック100円配信ヒトクセのビジネスモデル：第３者配信ユーザークリックアドネットワーク

19. Hitokuse Inc.© 19 概要第３者配信の仕組み ① 広告配信先Webサイトが読み込まれる ② アドネットワークのライブラリが読み込まれる ③ 第３者配信のライブラリが読み込まれる ❶広告配信先Webサイト ❷アドネットワークのDOM ❸第３者配信のDOM

20. Hitokuse Inc.© 20 第３者配信とは？第３者配信の注意点・表示先Webサイトのスクリプトとの競合「DOMのid,class名が被ってサイトのCSSが反映されてしまった」（逆も然り）「window.onloadが発火した後に広告が表示され、広告側では発動しない」「変数名が被って動作がおかしくなった」対策：パッケージ化・クロスドメイン制約「広告内からサイトの情報を取得することができない」「ユーザーのスクロール量を取得することができない」対策：postMessageによるiframe間通信・デバイス対応「XPERIA Android4.1でフルスクリーン動画が再生されない」「iOS Chromeでフルスクリーン終了の判定ができない」対策：泥臭く頑張るしかない！→ケーススタディを紹介

22. Hitokuse Inc.© 22 パッケージ化未知のWebサイト未知のDOM構造未知のスクリプトライブラリA ライブラリB ヒトクセサーバーダウンロード干渉しないように！ 3rd Party JavaScriptの課題未知のWebサイトでも動くようなライブラリ作りをする必要

23. Hitokuse Inc.© 23 パッケージ化ダメな例グローバル変数にしてしまっているので、外界に影響を与える可能性が高い var result = 0; a = 1; b = 2; result = a + b; console.log(result);

24. Hitokuse Inc.© 24 パッケージ化即時関数を用いる方法即時関数の定義即時関数の中ではローカル変数を使えるので、独立した環境を作れるローカル変数の定義 (function () { var result = 0; var a = 1; var b = 2; result = a + b; console.log(result); }());

25. Hitokuse Inc.© 25 パッケージ化オブジェクトを用いる方法オブジェクトの定義変数をぶら下げる関数をぶら下げるオブジェクトに処理をぶら下げるため、外部からオブジェクトを通じて処理を呼び出しやすい var SC = function(){}; SC.a = 1; SC.b = 2; SC.result = function(){ return SC.a + SC.b; } console.log(SC.result());

26. Hitokuse Inc.© 26 パッケージ化即時関数＋オブジェクトオブジェクトをグローバルで定義外側からもオブジェクトを介してアクセスしやすい var SC = function(){}; (function () { var a = 1; var b = 2; SC.result = function(){ return a + b; } })(); 処理は即時間数スコープ内で外からアクセスするものはオブジェクトにぶら下げる

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 } })(); アニメーション系ライブラリ参照

29. Hitokuse Inc.© 29 クロスドメイン制約クロスドメイン制約とは？「あるドメイン上で、異なるドメインのコンテンツ操作をしてはいけない」というブラウザの制約

30. Hitokuse Inc.© 30 クロスドメイン制約・他ドメインのサイトをiframeで呼び出し、iframeのコンテンツにJavaScriptでアクセスしようとするクロスドメイン制約を受けるケース aaa.com bbb.com アクセスできない！！広告表示時によく生じるケース

31. Hitokuse Inc.© 31 広告でのクロスドメイン制約スクロール iframe smartcanvas.net hitokuse.com iframe内外でドメインが異なる場合はお互いにDOMにアクセスできない（クロスドメイン制約） ※postMessageなどの機能で通信することは可能広告内（iframe内）から広告外（サイト側）のユーザーのスクロールを読み取るのが難しい広告が画面に入ってから動画広告を再生するのが難しい「スマートフォンの画面に入ったら動画広告を再生したい！」

32. postMessage() を使いましょう。クロスドメイン制約を打ち破れ！！

33. Hitokuse Inc.© 33 クロスドメイン対策 aaa.com bbb.com アクセスできない！！想定するシチュエーション iframe内部（bbb.com）からiframe外部（aaa.com）への通信

34. Hitokuse Inc.© 34 クロスドメイン対策 aaa.com（iframe外）bbb.com（iframe内）想定するシチュエーション「CrossDomain」という文字を取得したい <iframe id= ifr src= http:// bbb.com > </iframe> <div id= test"> CrossDomain </div>

35. 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

36. Hitokuse Inc.© 36 クロスドメイン対策 aaa.com（iframe外）bbb.com（iframe内）想定するシチュエーション postMessageで問い合わせ messageイベントで受け取り値を取得、 postMessageで値を送信messageイベントで受け取り

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内）

40. 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で代用する

41. 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の処理 }

42. Hitokuse Inc.© 42 デバイス対応ケーススタディ jQueryの$.ajaxを使っている場合 IEのAjax対応 (https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest) MoonScript/jQuery-ajaxTransport-XDomainRequest →IE8対応されたjQueryの追加ライブラリを使うのも手

44. Hitokuse Inc.© 44 オンライン動画広告の分類インストリーム広告インリード広告インバナー広告 YouTube、Vimeoなどの動画視聴サービスにおいて動画の前後や間に再生される動画広告領域ニュースやブログなどのテキストコンテンツの間に表示される広告領域 Webサイトのいたるところに設置される広告領域 Skip Ad >> リーチ多リーチ少認知高認知低音声や大画面を用いることで認知効果が高い ❌ 配信枠が限られてしまう、ボリュームが出ない記事内に自然に溶け込ませて見せることが可能 ❌ 記事と動画コンテンツの相性を考える必要がある枠が大量にあるため、広くリーチが可能 ❌ 視聴されない確率が高い（スマートフォンは特に）

45. Hitokuse Inc.© 45 インバナー広告の利点枠が大量にあるため、広くリーチが可能 ❌ 視聴されない確率が高い（スマートフォンは特に） Webサイトのいたるところに設置される広告領域配信ロジックと組み合わせて様々なカスタマイズが可能オーディエンスターゲティング、ホワイトリストによるプレミアム枠への配信リターゲティング、各種計測ツールの連携獲得＋ブランドリフト LP遷移会員登録アプリダウンロード商品への気づき商品への理解イメージ向上組み合わせによっては獲得だけでなくブランドリフト向上も狙うことが可能

47. Hitokuse Inc.© 47 ブラウザ・OSの制約スマートフォンでのインバナー動画の再生にはハードルがある videoタグの制約 iOSの場合、videoタグが再生マークが出てストップする再生マーク静止画全画面再生タップ・iOS：Flashが使えない。・Android：サポート対象外（2011年11月開発終了、2013年９月にアップデート終了） Flashの制約

48. Hitokuse Inc.© 48 ブラウザ・OSの仕様差 CSSスプライトとは複数の画像を一つの画像にまとめ、リクエスト数を減らす手法 sprite.png CSSの指定 .youtube{ background-image:url(sprite.png); background-position: -40px -200px; width: 120px; height: 60px; } 結果的に表示される画像 CSSで指定された値で切り取り 200px 40px 120px 60px

49. Hitokuse Inc.© 49 ブラウザ・OSの仕様差スマートフォン動画の仕組み CSSスプライトを用いてコマ送りしている background-image 可視領域可視領域をずらしてコマ送りさせる background-imageで大きなCSSスプライトを設定し、background-position をJavaScriptでずらしていくことで、コマ送りしている .movie{ background-image:url(http:// .jpg); background-position: -300px -340px; } 300px 170px

50. Hitokuse Inc.© 50 ブラウザ・OSの仕様差 background-imageで大きなCSSスプライトを設定し、background-position をJavaScriptでずらしていくことで、コマ送りしている background-image 可視領域 .movie{ background-image:url(http:// .jpg); background-position: -300px -510px; } スマートフォン動画の仕組み CSSスプライトを用いてコマ送りしている

51. Hitokuse Inc.© 51 ブラウザ・OSの仕様差 background-imageで大きなCSSスプライトを設定し、background-position をJavaScriptでずらしていくことで、コマ送りしている background-image 可視領域 .movie{ background-image:url(http:// .jpg); background-position: -300px -680px; } スマートフォン動画の仕組み CSSスプライトを用いてコマ送りしている

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

最新アドテク×Java script実践活用術

Shun Nagao

Transcript