株式会社インタースペース 清水様 登壇資料
TRANSCRIPT
本日のアジェンダ
シンプルコードで実装する piggyback処理
2015/10/06
自己紹介
* 清水 伸泰 * 株式会社インタースペース * Sierを経て、現在インタースペースで7年 * AccesstradeAdPlatform上に乗る新プロダクト の開発PMをしています。 * 運用面では全社のP/L周りを面倒見てます。
アジェンダ
1. piggybackとは
2. javascript開発時の注意点
3. piggyback処理仕様
4.どのようなサービスで利用するのか
アジェンダ
1. piggybackとは
2. javascript開発時の注意点
3. piggyback処理仕様
4.どのようなサービスで利用するのか
1. piggybackとは
piggyback（ピギーバック）
ネット広告の世界では、javascriptが次々にWebビーコン（scriptまたはimgタグ）を呼び出して動作させる処理のことを言います。
英語スラングで「おんぶする」の意。
1. piggybackとは
<script type=“text/javascript” src=“https://example.com/js/piggy.js?pt=ABC0123"></script>
Webページにjavascriptタグを貼り、 ブラウザがページを読み込むと、
<script type=“text/javascript” src=“https://example.com/js/piggy.js?pt=ABC0123"></script> <script type=“text/javascript” src=“https://dummy.abc.net/abc.js?id=3738"></script> <img style=“width:1px;height:1px;” src=“https://img.jp/test/?id=abc”>
・ ・ ・
次々に別のタグが呼び出され実行されます。
1. piggybackとは
piggybackのメリット
Webページにjsタグが設置されていれば、 別のタグの追加・変更・削除がサーバ側で コントロール可能。 ⇒タグの貼り替えが不要
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src=“https://example.com/js/piggy.js?pt=ABC0123" type="text/javascript">
</script>
</head>
<body>
</body>
</html>
htmlソース
1. piggybackとは
jsタグさえ貼っておけば、以降htmlを いじる必要なし
アジェンダ
1. piggybackとは
2. javascript開発時の注意点
3. piggyback処理仕様
4.どのようなサービスで利用するのか
2. javascript開発時の注意点
よそ様のWebサイトに 開発したjsを設置して頂く場合、
2. javascript開発時の注意点
何かあっては非常にまずい (+_+)
2. javascript開発時の注意点
例えば、見えてはいけないものが見える
2. javascript開発時の注意点
見えなくていいものが見える
2. javascript開発時の注意点
緊急事態
2. javascript開発時の注意点
js開発する際に 特に気をつけること３点
2. javascript開発時の注意点
①Webページ上の他のjavascript処理に影響してはいけない
⇒とにかく、対象サイトのWebページ（ユーザー）に影響を与えてはいけない
②Webページの読み込みが遅くなってはいけない
③マルチブラウザ対応
2. javascript開発時の注意点
どんな対策を実施しているか
2. javascript開発時の注意点
①Webページ上の他のjavascript処理に影響してはいけない
【対策】 ・外部ライブラリは極力使用しない ※ライブラリの中身が不明なものは特に ・グローバル変数は使用しない
2. javascript開発時の注意点
②Webページの読み込みが遅くなってはいけない
【対策】 ・ページ読み込み(load)が完了した後、 処理を開始するように開発する ・ページ表示速度に影響を与えない
2. javascript開発時の注意点
③マルチブラウザ対応
【対策】 ・addEventListnerがない(IE8以前)場合 attachEventで代用する、など
2. javascript開発時の注意点
var ns_piggy = (function () { var EXEC_URL = "https://example.net/ex.n?callback=ns_piggy"; function addListener(element, eventType, functionP, capture) { if (element.addEventListener) { // IE9以降、その他ブラウザ element.addEventListener(eventType, functionP, capture); } else { // IE8以前に対応 element.attachEvent('on' + eventType, functionP); } } addListener(window, “load”, 処理開始メソッド, false); function startNode(result) {} var element = this; return function (result) { startNode.apply(element, arguments);}; }());
例えば、
ページ読み込み完了後、処理を開始する
即時関数を使用してスコープをローカルに限定
マルチブラウザに対応
アジェンダ
1. piggybackとは
2. javascript開発時の注意点
3. piggyback処理仕様
4.どのようなサービスで利用するのか
3. piggyback処理仕様
Overview
Accesstradeサーバー
Webページ
①ページ読み込み完了後、処理を開始する
JSダウンロード
②APIを実行してデータを受け取る
③受け取ったデータを元にタグを組み立て、ビーコンを実行する
API実行
①ページ読み込み完了後、処理を開始する
3. piggyback処理仕様
</html>まで読み込みが完了すると、 イベントが呼ばれて処理を開始する。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src=“https://example.com/js/piggy.js?pt=ABC" type="text/javascript">
</script>
</head>
<body>
</body>
</html>
// イベントリスナーセット function addListener(element, eventType, functionP, capture) { if (element.addEventListener) { // IE9以降、その他ブラウザ element.addEventListener(eventType, functionP, capture); } else { // IE8以前に対応 element.attachEvent('on' + eventType, functionP); } } // ページロード完了後、prepareNode()を実行する addListener(window, “load”, prepareNode, false);
①ページ読み込み完了後、処理を開始する
3. piggyback処理仕様
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src=“https://example.com/js/piggy.js?pt=ABC" type="text/javascript"></script>
</head>
<body>
<script type=”text/javascript” src=“https://example.net/ex.n?callback=ns_piggy&pt=ABC"></script>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src=“https://example.com/js/piggy.js?pt=ABC" type="text/javascript"></script>
</head>
<body>
</body>
</html>
②APIを実行してデータを受け取る
3. piggyback処理仕様
var EXEC_URL = "https://example.net/ex.n?callback=ns_piggy"; function prepareNode() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = EXEC_URL + javascriptのパラメータ値; body = document.getElementsByTagName("body")[0]; body.appendChild(script); }
②APIを実行してデータを受け取る
3. piggyback処理仕様
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src=“https://example.com/js/piggy.js?pt=ABC" type="text/javascript"></script>
</head>
<body>
<script type=”text/javascript” src=“https://example.net/ex.n?callback=ns_piggy&pt=ABC"></script>
<script src="https://dummy.abc.net/abc.js?id=3738&211" type="text/javascript"></script>>
<img src="https://img.jp/test/?id=abc&210" style="width: 1px; height: 1px;">
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src=“https://example.com/js/piggy.js?pt=ABC" type="text/javascript"></script>
</head>
<body>
<script type=”text/javascript” src=“https://example.net/ex.n?callback=ns_piggy&pt=ABC"></script>
</body>
</html>
③受け取ったデータを元にタグを組み立て、ビーコンを実行する
3. piggyback処理仕様
function createNode(result) { var element = document.createElement(result.tag); if (result.src) { element.src = result.src; } if (result.type) { element.type = result.type; } if (result.style) { element.style = result.style; } body.appendChild(element); }
■jsonpレスポンス ns_piggy({ "nstag": [ { "tag": "script", "src": "https://dummy.abc.net/abc.js?id=3738", "type": "text/javascript", "style": "" } ] })
③受け取ったデータを元にタグを組み立て、ビーコンを実行する
3. piggyback処理仕様
javascript(piggy.js)の中身
var ns_piggy = (function () { var EXEC_URL = "https://example.net/exec.json?jsoncallback=ns_piggy"; var SELF_URL = "https://example.com/js/piggy.js"; var body; function prepareNode() { var scripts = document.getElementsByTagName("script"); var parameter = ""; for (var i = 0; i < scripts.length; i++) { if (scripts[i].src.indexOf(SELF_URL) == 0) { var data = scripts[i].src.split("?"); if (data.length === 2) { parameter = "&" + data[1]; } break; } } body = document.getElementsByTagName("body")[0]; var script = document.createElement("script"); script.src = EXEC_URL + parameter + "&" + new Date().getMilliseconds(); body.appendChild(script); } function createNode(result) { var element = document.createElement(result.tag); if (result.src) { element.src = result.src + "&" + new Date().getMilliseconds(); } if (result.type) { element.type = result.type; } if (result.style) { element.style = result.style; } body.appendChild(element); } function startNode(result) { if (result.nstag) { for (var i = 0; i < result.nstag.length; i++) { (function (arg) { window.setTimeout(function () { createNode(arg);}, 0); }(result.nstag[i])); } } } function addListener(element, eventType, functionP, capture) { if (element.addEventListener) { element.addEventListener(eventType, functionP, capture); } else { element.attachEvent('on' + eventType, functionP); } } addListener(window, "load", prepareNode, false); var element = this; return function (result) { startNode.apply(element, arguments);}; }());
javascript(piggy.js)の中身
GitHub@nbyssmz
アジェンダ
1. piggybackとは
2. javascript開発時の注意点
3. piggyback処理仕様
4.どのようなサービスで利用するのか
4. どのようなサービスで利用するのか
この仕組みをどのような サービスで利用しているのか？
直近の開発プロジェクトOverview
各種のタグを連携して実行します。 実行結果をredisに格納し、クライアント様・メディア様の売上拡大につながるよう広告技術に使用します。
4. どのようなサービスで利用するのか
本日のアジェンダ
ご清聴ありがとうございました！