metaタグを確認するグリモン

久しぶりにグリモン書いてみました。

今回作ったものは、webサイト制作で必須?のようなグリモン。

metaタグ確認用のグリモンです。

metaタグって画面上に表示されないから確認するの面倒ですよね。
確認するのが面倒なだけに、見落としになりがち。

だからもっと楽しましょ。
いや、プログラム的に自動確認させてもいいんだけど、
やっぱ目視確認も必要だよね。

ってことで作りました。

イメージとしては、こんな感じです。
グリモンを有効にしておくと、ページを開いたと同時にこんなふうに出現します。
うっとうしいと思ったら、ダブルクリックで消えます。

ameba

※グリースモンキーを利用しますので、先にグリースモンキーを入れておく必要があります。

グリースモンキーについては、【http://google-mania.net/archives/213】 こちらのページか、Googleで【グリースモンキー】と検索してみてください。

下記のURLをクリックすると、インストール確認画面が出てきます。
【aulta twitter user status】
https://aulta.co.jp/gremon/meta_view.user.js

ソースコードに興味ある方へ

【同日 12:40 追記】

本ツールを利用されるだけの方は、↑のURLをクリックしてインストールして頂ければOKです。
ここからは、技術的な内容になりますので、興味がある方は読んでみてください。

// ==UserScript==
// @name meta view
// @namespace aulta
// @include http://*
// ==/UserScript==

/*
* こぴーらいと @2009
* 作成者 : aulta
* 配布元 : https://aulta.co.jp/
* ツイッター : @aulta : http://twitter.com/aulta/
* 改変、再配布などは自由です。
*/

(function(){

var d = document,
b = d.body,
n = "<br />n",
fT = function(o, e){
return o.getElementsByTagName(e)
},
fG = function(o, a){
return (o ? o+a : '');
},
fJ = function(o){
if (typeof(o) == 'string'){
if (o.substr(0,1) == '#'){
// 将来の拡張用
} else if (o.substr(0,1) == '.'){
// 将来の拡張用
} else if (o.substr(0,1) == '@'){
o = d.createElement(o.substr(1));
} else {
// 将来の拡張用
}
}
o.s = function(s, v){
var p;
while((p = s.indexOf('-')) > -1){
s = s.substr(0, p) + s.substr(p + 1, 1).toUpperCase() + s.substr(p + 2);
}
eval('this.style.' + s + ' = "' + v + '";');
return this;
};
o.h = function(h){
this.innerHTML = h;
return this;
};
o.f = function(e,f){
if (this.addEventListener)
this.addEventListener(e, f, false);
else
this.attachEvent('on' + e, function() { f.call(this, window.event); });
return this;
};
o.a = function(o){
this.appendChild(o);
return this;
};
return o;
},
fS = function(o, s, v){
eval('o.style.' + s + ' = "' + v + '";');
return o;
},
h = fT(d, 'head')
;
if (h.length == 0) return;
var m = fT(h[0], 'meta'),
jH = fJ('@dl')
.s('margin', '0px')
.s('padding', '0px'),
c = {
'generator' : '#2276BB',
'robots' : '#73AD3B',
'keywords' : '#F29443',
'description' : '#9257A0',
'theme' : '#D86475',
'author' : '#85B598',
'viewport' : '#2276BB',
'verify-v1' : '#73AD3B',
'page' : '#F29443',
'session-loggedin' : '#9257A0',
'session-userid' : '#D86475',
'session-user-screen_name' : '#85B598',
'page-user-screen_name' : '#2276BB',
'' : '#73AD3B', // なんかあった時の予備
'' : '#F29443',
'' : '#9257A0',
'' : '#D86475',
'' : '#85B598'
}
;
for (var i in m){
var o = m[i];
if (!o.name)continue;
jH
.a(
fJ('@dt')
.s('padding', '5px')
.s('background-color', c[o.name.toLowerCase()])
.s('color', 'white')
.s('font-weight', 'bold')
.s('font-size', '16px')
.h(o.name)
)
.a(
fJ('@dd')
.s('font-size', '12px')
.s('line-height', '18px')
.s('margin', '5px 10px 15px 20px')
.h(o.content)
)
;
}

fJ(b)
.a(
fJ('@div')
.s('position', 'absolute')
.s('top', '10px')
.s('right', '10px')
.s('width', '500px')
.s('height', '450px')
.s('overflow', 'auto')
.s('margin', '0px')
.s('padding', '15px')
.s('border', 'solid #2276BB 5px')
.s('z-index', '36000')
.s('background-color', '#eaeaea')
.s('textAlign', 'left')
.f('dblclick', function(){
fJ(this).s('display', 'none');
})
.a(
fJ('@h1')
.s('position', 'relative')
.s('top', '0px')
.s('left', '0px')
.s('text-align', 'center')
.s('font-size', '28px')
.s('font-weight', 'bold')
.s('color', '#2276BB')
.s('padding', '0px')
.s('margin-bottom', '10px')
.h('meta view <a href="http://twitter.com/aulta" target="_blank">@aulta</a>')
)
.a(
fJ('@p')
.s('background-color', 'white')
.s('text-align', 'center')
.s('color', 'red')
.s('font-size', '12px')
.s('font-weight', 'bold')
.s('padding', '10px')
.s('margin', '10px')
.s('border', 'solid silver 1px')
.s('width', '90%')
.h('●こいつを閉じるには、エリア内でダブルクリックです!●')
)
.a(
fJ('@div')
.a(jH)
)
);

})();

というわけで、ソースはこんな感じです。
コメント、ほとんどないですが、別に消したわけじゃありません。
ルールさえ理解すれば、コメントは不要だと思いますので、最初から書いてませんでした。

ということで、ルールのご紹介から。

1文字の英字は、変数を表す。
2文字の英字で、fから始まるものは、funciton。
2文字の英字で、jから始まるものは、・・・まぁjQueryもどきでってことで。

で、キモとなるのが、fJです。

これ、ニセjQueryです。

ずーっと読み飛ばして、118行目をご確認ください。
なんか見たことのある形じゃありませんか?

そう。jQuery。
26~62行目までで、jQueryもどきを作ってます。
ここを読むだけでも、jQueryに一歩近づけるかもしれません。

じゃ、118行目に戻りましょう。

fJ(b)
b というのは、18行目にありますね。
b = document.body;
です。

ニセjQueryにbodyをセットしてます。

で、
.s() は、 .css() と同じです。jQueryのようにjavascriptの書き方でも、cssの書き方でもOKです。

.f() で、イベントを登録します。
133行目は、ダブルクリックの時のイベントです。

.a() これは、 .append() と同じです。

.h() これは。 .html() です。

さて、137行目。
fJ('@h1')
なんだか、見慣れないものが出てきました。

これをjQuery風に書くと、
jQuery(document.createElement('h1'))
という意味になります。

引数のタグ名の前に、@ を付けると、createElementになるわけです。
もちろんjQueryのように、ドット、シャープ、タグ名での書き方も・・・は、このスクリプトでは不要なので作りませんでした。
そういう拡張性を考えての、29行目のコメントです。

えっと、まーこんな感じで、以上です。
ありがとうございました。

あっあと、行数こそ長いものの、そのほとんどがCSSの指定だってこともポイントです。
ニセjQueryの必要性を感じたのも、その辺りが理由ですので。