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

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

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

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

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

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

ってことで作りました。

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

ameba

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

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

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

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

【同日 12:40 追記】

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

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

/*
 * こぴーらいと @2009
 * 作成者 : aulta
 * 配布元 : http://blog.aulta.net/
 * ツイッター : @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の必要性を感じたのも、その辺りが理由ですので。

広告