03 piggyback -by-simple-code-public
TRANSCRIPT
![Page 1: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/1.jpg)
本日のアジェンダ
シンプルコードで実装する piggyback処理
2015/10/06
![Page 2: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/2.jpg)
自己紹介
* 清水 伸泰 * 株式会社インタースペース * Sierを経て、現在インタースペースで7年 * AccesstradeAdPlatform上に乗る新プロダクト の開発PMをしています。 * 運用面では全社のP/L周りを面倒見てます。
![Page 3: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/3.jpg)
アジェンダ
1. piggybackとは
2. javascript開発時の注意点
3. piggyback処理仕様
4.どのようなサービスで利用するのか
![Page 4: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/4.jpg)
アジェンダ
1. piggybackとは
2. javascript開発時の注意点
3. piggyback処理仕様
4.どのようなサービスで利用するのか
![Page 5: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/5.jpg)
1. piggybackとは
piggyback(ピギーバック)
ネット広告の世界では、javascriptが次々にWebビーコン(scriptまたはimgタグ)を呼び出して動作させる処理のことを言います。
英語スラングで「おんぶする」の意。
![Page 6: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/6.jpg)
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”>
・ ・ ・
次々に別のタグが呼び出され実行されます。
![Page 7: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/7.jpg)
1. piggybackとは
piggybackのメリット
Webページにjsタグが設置されていれば、 別のタグの追加・変更・削除がサーバ側で コントロール可能。 ⇒タグの貼り替えが不要
![Page 8: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/8.jpg)
<!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を いじる必要なし
![Page 9: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/9.jpg)
アジェンダ
1. piggybackとは
2. javascript開発時の注意点
3. piggyback処理仕様
4.どのようなサービスで利用するのか
![Page 10: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/10.jpg)
2. javascript開発時の注意点
よそ様のWebサイトに 開発したjsを設置して頂く場合、
![Page 11: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/11.jpg)
2. javascript開発時の注意点
何かあっては非常にまずい (+_+)
![Page 12: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/12.jpg)
2. javascript開発時の注意点
例えば、見えてはいけないものが見える
![Page 13: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/13.jpg)
2. javascript開発時の注意点
見えなくていいものが見える
![Page 14: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/14.jpg)
2. javascript開発時の注意点
緊急事態
![Page 15: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/15.jpg)
2. javascript開発時の注意点
js開発する際に 特に気をつけること3点
![Page 16: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/16.jpg)
2. javascript開発時の注意点
①Webページ上の他のjavascript処理に影響してはいけない
⇒とにかく、対象サイトのWebページ(ユーザー)に影響を与えてはいけない
②Webページの読み込みが遅くなってはいけない
③マルチブラウザ対応
![Page 17: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/17.jpg)
2. javascript開発時の注意点
どんな対策を実施しているか
![Page 18: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/18.jpg)
2. javascript開発時の注意点
①Webページ上の他のjavascript処理に影響してはいけない
【対策】 ・外部ライブラリは極力使用しない ※ライブラリの中身が不明なものは特に ・グローバル変数は使用しない
![Page 19: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/19.jpg)
2. javascript開発時の注意点
②Webページの読み込みが遅くなってはいけない
【対策】 ・ページ読み込み(load)が完了した後、 処理を開始するように開発する ・ページ表示速度に影響を与えない
![Page 20: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/20.jpg)
2. javascript開発時の注意点
③マルチブラウザ対応
【対策】 ・addEventListnerがない(IE8以前)場合 attachEventで代用する、など
![Page 21: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/21.jpg)
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);}; }());
例えば、
ページ読み込み完了後、処理を開始する
即時関数を使用してスコープをローカルに限定
マルチブラウザに対応
![Page 22: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/22.jpg)
アジェンダ
1. piggybackとは
2. javascript開発時の注意点
3. piggyback処理仕様
4.どのようなサービスで利用するのか
![Page 23: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/23.jpg)
3. piggyback処理仕様
Overview
Accesstradeサーバー
Webページ
①ページ読み込み完了後、処理を開始する
JSダウンロード
②APIを実行してデータを受け取る
③受け取ったデータを元にタグを組み立て、ビーコンを実行する
API実行
![Page 24: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/24.jpg)
①ページ読み込み完了後、処理を開始する
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>
![Page 25: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/25.jpg)
// イベントリスナーセット 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処理仕様
![Page 26: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/26.jpg)
<!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処理仕様
![Page 27: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/27.jpg)
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処理仕様
![Page 28: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/28.jpg)
<!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処理仕様
![Page 29: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/29.jpg)
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処理仕様
![Page 30: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/30.jpg)
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);}; }());
![Page 31: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/31.jpg)
javascript(piggy.js)の中身
GitHub@nbyssmz
![Page 32: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/32.jpg)
アジェンダ
1. piggybackとは
2. javascript開発時の注意点
3. piggyback処理仕様
4.どのようなサービスで利用するのか
![Page 33: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/33.jpg)
4. どのようなサービスで利用するのか
この仕組みをどのような サービスで利用しているのか?
![Page 34: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/34.jpg)
直近の開発プロジェクトOverview
各種のタグを連携して実行します。 実行結果をredisに格納し、クライアント様・メディア様の売上拡大につながるよう広告技術に使用します。
4. どのようなサービスで利用するのか
![Page 35: 03 piggyback -by-simple-code-public](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ef59411a28ab5e478b4643/html5/thumbnails/35.jpg)
本日のアジェンダ
ご清聴ありがとうございました!