株式会社インタースペース清水様登壇資料

本日のアジェンダ
シンプルコードで実装する
piggyback処理
2015/10/06

自己紹介
* 清水伸泰
* 株式会社インタースペース
* Sierを経て、現在インタースペースで7年
* AccesstradeAdPlatform上に乗る新プロダクト
の開発PMをしています。
* 運用面では全社のP/L周りを面倒見てます。

アジェンダ
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を
いじる必要なし

よそ様のWebサイトに
開発したjsを設置して頂く場合、

何かあっては非常にまずい
(+_+)

例えば、見えてはいけないものが見える

見えなくていいものが見える

緊急事態

js開発する際に
特に気をつけること３点

①Webページ上の他のjavascript処理に影
響してはいけない
⇒とにかく、対象サイトのWebページ
（ユーザー）に影響を与えてはいけない
②Webページの読み込みが遅くなってはいけ
ない
③マルチブラウザ対応

どんな対策を実施しているか

①Webページ上の他のjavascript処理に影
響してはいけない
【対策】
・外部ライブラリは極力使用しない
※ライブラリの中身が不明なものは特に
・グローバル変数は使用しない

②Webページの読み込みが遅くなってはいけ
ない
【対策】
・ページ読み込み(load)が完了した後、
処理を開始するように開発する
・ページ表示速度に影響を与えない

③マルチブラウザ対応
【対策】
・addEventListnerがない(IE8以前)場合
attachEventで代用する、など

Overview
Accesstrade
サーバー
Webページ
①ページ読み込み完了
後、処理を開始する
JSダウンロード
②APIを実行してデー
タを受け取る
③受け取ったデータを
元にタグを組み立て、
ビーコンを実行する
API実行

①ページ読み込み完了後、処理を開始する
</html>まで読み込みが完了すると、
イベントが呼ばれて処理を開始する。
<!DOCTYPE html>
<head>
<script src=“https://example.com/js/piggy.js?pt=ABC" type="text/javascript">
</script>
</head>
<body>
</body>
</html>

// イベントリスナーセット
if (element.addEventListener) {
// IE9以降、その他ブラウザ
element.addEventListener(eventType, functionP, capture);
} else {
// IE8以前に対応
element.attachEvent('on' + eventType, functionP);
}
}
// ページロード完了後、prepareNode()を実行する
addListener(window, “load”, prepareNode, false);
①ページ読み込み完了後、処理を開始する

<!DOCTYPE html>
<head>
<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>
</head>
<body>
</body>
</html>
②APIを実行してデータを受け取る

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を実行してデータを受け取る

<!DOCTYPE html>
<head>
</head>
<body>
<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>
</head>
<body>
</body>
</html>
③受け取ったデータを元にタグを組み立て、

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]));
}
}
}
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

この仕組みをどのような
サービスで利用しているのか？

直近の開発プロジェクトOverview
各種のタグを連携して実行します。
実行結果をredisに格納し、クライアント様・メディア様の
売上拡大につながるよう広告技術に使用します。

本日のアジェンダ
ご清聴ありがとうございました！

株式会社インタースペース清水様登壇資料

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à 株式会社インタースペース清水様登壇資料

Similaire à 株式会社インタースペース清水様登壇資料 (20)

Plus de leverages_event

Plus de leverages_event (20)