企業でホームページの管理をしている人であれば、「タグマネージャー」という存在を知っていると思いますが、一般的にはあまりメジャーなものではありません。
タグマネージャーから見るJavaScriptタグのあり方 | bitwave
会社のホームページなどサイト内に沢山のWEBページが存在し、それらのHTMLファイルをひとつずつ管理する事は中々難しいので、「タグマネージャー」というjavascriptタグを１つだけ貼り付けておけば、管理画面による設定を行なうだけで、どのページにどういうタグ（javascriptタグや、各種外部サービスタグ）を貼り付けるかの設定が、一括で行えるというものです。
今回は、一見便利に見えるタグマネージャーだけど、利用者からは沢山の不満の声が出ている事情を仕事を通じて聞いたので、いっその事自分のサイトだけで使えるタグマネージャーが存在すれば使う人によっては便利に使えるという事で、簡単に作ってみてソースコードを公開しておきます。
仕様について
まずタグマネージャーという事で、WEBサイトの実HTMLは、基本的に最初にJavascriptタグを設置しておいて、その後の変更などの運用はタグマネージャーのみで行なう仕様にします。
基本コアであるjavascriptと、設定jsonファイルの構成で、ページグループ毎にjsonファイルを追加作成して、そのファイル名（グループ）をHTMLに最初にセットしておくという構成です。
手抜きと思われるかも知れないが、今回は管理画面は存在しません。データであるJSONファイルは、手作業で書き換えてください。
ソースファイルとデータサンプル
own_tagman.js（コアエンジン）
/**
* Own Tag Manager
* How-to setting
<script type="text/javascript" src="modules/own_tagman.js" data-prefix="own_tagman"></script>
<script>
new $$OWNTAGMAN({
"data" : "modules/own_tagman.json",
"prefix" : "own_tagman"
});
</script>
*/
(function(){
var $$ = function(options){
if(!options){return;}
options = this.set(options);
};
// options check
$$.prototype.set = function(options){
if(!options){return;}
$$ajax({
url:options.data,
method:"GET",
onSuccess:this.dataLoaded
});
return options;
};
$$.prototype.appendModule = function(options){
if(!options){return;}
var mdl = $$.prototype.getModuleTag(options);
if(!mdl){return;}
if(options.append === "head" && typeof document.head !== "undefined"){
document.head.appendChild(mdl);
}
else if(options.type === "body" && typeof document.body !== "undefined"){
document.body.appendChild(mdl);
}
}
$$.prototype.getModuleTag = function(options){
if(!options){return;}
var mld;
if(options.type === "css"){
mdl = document.createElement("link");
mdl.rel = "stylesheet";
mdl.href = options.path;
}
else if(options.type === "js"){
mdl = document.createElement("script");
mdl.type = "text/javascript";
mdl.src = options.path;
}
return mdl;
}
$$.prototype.dataLoaded = function(res){
var data = JSON.parse(res);
if(!data){return;}
for(var i=0; i<data.length; i++){
$$.prototype.appendModule(data[i]);
}
};
// -----
// Ajax
var $$ajax = function(options){
if(!options){return}
var ajax = new $$ajax;
var httpoj = $$ajax.prototype.createHttpRequest();
if(!httpoj){return;}
// open メソッド;
var option = ajax.setOption(options);
// 実行
httpoj.open( option.method , option.url , option.async );
// type
httpoj.setRequestHeader('Content-Type', option.type);
// onload-check
httpoj.onreadystatechange = function(){
//readyState値は4で受信完了;
if (this.readyState==4){
//コールバック
option.onSuccess(this.responseText);
}
};
//query整形
var data = ajax.setQuery(option);
//send メソッド
if(data.length){
httpoj.send(data.join("&"));
}
else{
httpoj.send();
}
};
$$ajax.prototype.dataOption = {
url:"",
query:{}, // same-key Nothing
querys:[], // same-key OK
data:{}, // ETC-data event受渡用
async:"true", // [trye:非同期 false:同期]
method:"POST", // [POST / GET]
type:"application/x-www-form-urlencoded", // [text/javascript]...
onSuccess:function(res){},
onError:function(res){}
};
$$ajax.prototype.option = {};
$$ajax.prototype.createHttpRequest = function(){
//Win ie用
if(window.ActiveXObject){
//MSXML2以降用;
try{return new ActiveXObject("Msxml2.XMLHTTP")}
catch(e){
//旧MSXML用;
try{return new ActiveXObject("Microsoft.XMLHTTP")}
catch(e2){return null}
}
}
//Win ie以外のXMLHttpRequestオブジェクト実装ブラウザ用;
else if(window.XMLHttpRequest){return new XMLHttpRequest()}
else{return null}
};
$$ajax.prototype.setOption = function(options){
var option = {};
for(var i in this.dataOption){
if(typeof options[i] != "undefined"){
option[i] = options[i];
}
else{
option[i] = this.dataOption[i];
}
}
return option;
};
$$ajax.prototype.setQuery = function(option){
var data = [];
if(typeof option.query != "undefined"){
for(var i in option.query){
data.push(i+"="+encodeURIComponent(option.query[i]));
}
}
if(typeof option.querys != "undefined"){
for(var i=0;i<option.querys.length;i++){
if(typeof option.querys[i] == "Array"){
data.push(option.querys[i][0]+"="+encodeURIComponent(option.querys[i][1]));
}
else{
var sp = option.querys[i].split("=");
data.push(sp[0]+"="+encodeURIComponent(sp[1]));
}
}
}
return data;
};
// -----
// Library
var $$LIB = function(){};
$$LIB.prototype.setEvent = function(target, mode, func){
//other Browser
if (target.addEventListener){target.addEventListener(mode, func, false)}
else{target.attachEvent('on' + mode, function(){func.call(target , window.event)})}
};
// -----
$$OWNTAGMAN = $$;
})();
own_tagman.json（データ部分）
[
{
"append":"head",
"type":"css",
"path":"modules/design.css"
},
{
"append":"body",
"type":"js",
"path":"modules/common.js"
}
]
HTMLファイル記述
<script type="text/javascript" src="./own_tagman.js"></script>
<script>
new $$OWNTAGMAN({
"data" : "./own_tagman.json"
});
</script>
使い方説明と解説
まず、own_tagman.jsとown_tagman.jsonは、表示するhtmlファイルと同階層に設置していますが、変更して利用することも可能です。
HTMLへの記述内容の./own_tagman.js（.json）の箇所を対象のパスに変更するだけです。
設定の重要ポイントは２点のみです。
１、jsonファイルは、タグ管理をする際の同じ構成のページグループで１ファイルセットするようにしましょう。
２、jsonファイルの内容は、大きな配列構造になっており、それぞれの要素が下記の内容になっています。
append : headまたはbody（どのタグに追記するかのセット※デフォルトはheadに追記されます）
type : jsまたはcss
path : ファイルの設置されている絶対パス、または相対パス
物足りない人へ
実は、よく使われているタグマネサービスと比べると機能が圧倒的に少ないという事が分かりますが、今回のバージョンは、ヘッダなどに書き込むcssやjavascriptを外部ファイルで管理できるだけの機能にしています。
これだけの機能でも便利に使える人も意外といるので、敢えてこのバージョンをアップしましたが、
他に欲しい機能として以下のようなモノがあると思います。
・HTMLへの入力を全て共通にする（表示するURL毎に自動で出し分ける）
・ファイブファイルの読み込みタグだけではなく、GoogleAnalyticsなどのような、script記述も行いたい
・URLだけではなく、クエリや、ページ無いのエレメント（要素）の存在可否で出し分けたい
上記の対応版をver2として、後日公開する予定です。
そして、もちろん使っていく上で管理画面が欲しいとか、自分のサイトのシステム連動したいという要望がある人もいるかもしれません。
ご希望の要望がございましたら、構築することもできますので、お問い合わせくださいませ。
また、疑問や質問がある場合もお気軽にお問い合わせください。
0 件のコメント:
コメントを投稿