マークアップ後の画像やmetaをチェックするブックマークレットを作ってみた

2015.07.20

imgのaltやサイズ、metaのチェックなどを行えるブックマークレットを作ってみました。

ブックマークレット

altをチェックできるツールを探していて、こちらのサイトのブックマークレットを見つけました。
使いやすくて愛用していたのですが、JavaScriptでこういう事ができるのなら、metaや画像サイズのチェックも自作でできるのでは？と思い作ってみました。

WordPressでうまくリンクを設置できなかったので、こちらのページにあるリンクをブックマークに登録して使用して下さい。
　

使い方

試しにがっこうぐらし！のサイトで実行してみます。
検証したいページを開いて、ブックマークレットを実行します。

markup-check-tool01

透過画像で文字が見えにくい場合などは、左上で背景色の変更を行えます。
閉じたい場合は、右上の×をクリックしてください。

markup-check-tool02

背景色を変更した場合です。
問題がありそうな部分は黄色または赤色の背景色になります。

markup-check-tool03

とりあえず、OGP画像がないのとalt指定が結構抜けてるのが気になりました。
　

判別内容

■meta/ogpなど

title

条件 表示内容
titleタグがないとき titleタグがありません。
titleタグが空のとき titleタグが空です。
上記以外 title表示

keywords

条件 表示内容
keywordsタグがないとき keywordsタグがありません。
keywordsタグが空のとき keywordsタグが空です。
上記以外 keywords表示

description

条件 表示内容
descriptionタグがないとき descriptionタグがありません。
descriptionタグが空のとき descriptionタグが空です。
上記以外 description表示

og:

条件 表示内容
metaのproperty属性に「og:」が含まれるものがないとき ogp関連の項目非表示
上記以外 ogp関連の項目表示

og:○○

条件 表示内容
og:○○が空のとき og:○○が空です。
og:urlのとき og:url表示
og:imageのとき og:image表示
上記以外 og:○○表示

twitter:

条件 表示内容
metaのname属性に「twitter:」が含まれるものがないとき twitter関連の項目非表示
上記以外 twitter関連の項目表示

twitter:○○

条件 表示内容
twitter:○○が空のとき twitter:○○が空です。
twitter:siteのとき twitter:site表示
twitter:imageのとき twitter:image表示
上記以外 twitter:○○表示

canonical

条件 表示内容
canonicalがないとき canonical関連の項目非表示
canonicalが空のとき canonicalが空です。
上記以外 canonical表示

alternate

条件 表示内容
alternateがないとき alternate関連の項目非表示
alternateが空のとき alternateが空です。
上記以外 alternate表示

■画像

alt

条件 表示内容
alt属性がないとき alt がありません。
alt属性が空のとき alt が空です。
上記以外 altテキスト表示

width

条件 表示内容
width属性がないとき width がありません。
width属性が空のとき width が空です。
widthの指定と実サイズの半分の誤差が0.5以下のとき Retina対応っぽいです。

実際:○○px
半分:△△px
指定:××px
widthの指定が実サイズと一致していないとき width が実サイズと一致していません。

実際:○○px　指定:××px
上記以外 widthテキスト表示

height

条件 表示内容
height属性がないとき height がありません。
height属性が空のとき height が空です。
heightの指定と実サイズの半分の誤差が0.5以下のとき Retina対応っぽいです。

実際:○○px
半分:△△px
指定:××px
heightの指定が実サイズと一致していないとき height が実サイズと一致していません。

実際:○○px　指定:××px
上記以外 heightテキスト表示

　

圧縮前コード

圧縮前のコードです。
動作検証用にtestament();で実行されるようにしています。
圧縮するときは、function testament() { ～ 処理内容 ～ } を　javascript:(function(){ ～ 処理内容 ～ })() に書き換えて、/packer/で圧縮をしています。

JavaScript

function testament() {

/* ------------------------------------------------------------

	ベース部分の設定

------------------------------------------------------------ */

/* ----------------------------------------
	既にツールを開いていないか確認
---------------------------------------- */
if(document.getElementById('markupCheck') != null) {
	document.body.removeChild(document.getElementById('markupCheck'));
}

/* ----------------------------------------
	ベース部分の挿入
---------------------------------------- */
var bg = document.createElement('div');
var bar = document.createElement('div');
var wht = document.createElement('span');
var blk = document.createElement('span');
var cls = document.createElement('span');
var bgStyle = 'position:absolute;top:0;left:0;z-index:9999;width:100%;line-height:1.2;padding-top:50px;color:#000000;font-size:14px;font-family:MS PGothic;text-align:left;background:#ffffff;';
barStyle = 'position:fixed;top:0;left:0;width:100%;height:50px;background:#34495e;';
whtStyle = 'position:absolute;bottom:5px;left:10px;width:20px;height:20px;background:#ffffff;cursor:pointer;';
blkStyle = 'position:absolute;bottom:5px;left:40px;width:20px;height:20px;background:#000000;cursor:pointer;';
clsStyle = 'position:absolute;top:15px;right:10px;width:20px;height:20px;color:#000000;font-size:18px;text-align:center;background:#999999;cursor:pointer;';
bg.id = 'markupCheck';
bg.style.cssText = bgStyle;
bar.style.cssText = barStyle;
blk.style.cssText = blkStyle;
wht.style.cssText = whtStyle;
cls.style.cssText = clsStyle;
cls.innerHTML = '×';
bar.innerHTML = '<span style="position:absolute;top:5px;left:10px;color:#ffffff;font-size:12px;">背景色変更</span>';
document.body.appendChild(bg).appendChild(bar).appendChild(cls);
bar.appendChild(blk);
bar.appendChild(wht);


/* ------------------------------------------------------------

	イベント

------------------------------------------------------------ */

/* ----------------------------------------
	ページトップへ戻す
---------------------------------------- */
window.scrollTo(0,0);

/* ----------------------------------------
	閉じるボタン
---------------------------------------- */
cls.onclick = function() {
	document.body.removeChild(bg);
};

/* ----------------------------------------
	背景色変更(黒)
---------------------------------------- */
blk.onclick = function() {
	bg.style.backgroundColor = '#000000';
	bg.style.color = '#ffffff';
};

/* ----------------------------------------
	背景色変更(白)
---------------------------------------- */
wht.onclick = function() {
	bg.style.backgroundColor = '#ffffff';
	bg.style.color = '#000000';
};


/* ------------------------------------------------------------

	イメージリスト

------------------------------------------------------------ */
var imgAlt = new Array(), imgSrc = new Array(), imgAW = new Array(), imgNW = new Array(), imgAH = new Array(), imgNH = new Array(),
images = document.getElementsByTagName('img');

/* ----------------------------------------
	画像のデータ取得
---------------------------------------- */
for (var i = 0; i < images.length; i++) {
	imgAlt[i] = images[i].getAttribute('alt');
	imgSrc[i] = images[i].src;
	imgAW[i] = images[i].getAttribute('width');
	imgNW[i] = images[i].naturalWidth;
	imgAH[i] = images[i].getAttribute('height');
	imgNH[i] = images[i].naturalHeight;
}

/* ----------------------------------------
	画像の挿入
---------------------------------------- */

/* -------------------------
	画像挿入の設定
------------------------- */
var imageIns = '';
var ttlStyle = 'margin:0 0 10px;font-size:28px;font-weight:bold;',
imgBoxStyle = 'overflow:hidden;margin-bottom:15px;border-bottom:#999999 1px dotted;padding-bottom:15px;',
srcStyle = 'margin-bottom:5px;padding-right:40%;',
imgWrStyle = 'margin-bottom:10px;',
imgStyle = 'max-width:60%;max-height:250px;',
altStyle = 'max-width:60%;margin-bottom:10px;',
dataStyle = 'float:right;width:40%;',
typStyle = 'font-weight:bold;',
itemStyle = 'display:inline-block;width:4em;margin-right:5px;padding:2px 0;font-size:16px;font-weight:bold;text-align:center;background:#999999;',
sizeStyle = 'display:inline-block;padding:3px 2px;',
dataSpcStyle = 'display:inline-block;margin-right:10px;margin-bottom:10px;',
errStyle = 'color:#ffffff;background:#ff0000;',
attStyle = 'color:#000000;background:#ffff00;';

/* image list title */
imageIns += '<p style="' + ttlStyle + '">■画像リスト</p>';

for (var i = 0; i < images.length; i++) {

/* imgBox start */
	imageIns += '<div style="' + imgBoxStyle + '">';

/* ファイルパス */
	imageIns += '<div style="' + srcStyle + '">';
	imageIns += imgSrc[i];
	imageIns += '</div>';

/* 画像 */
	imageIns += '<div style="' + imgWrStyle + '">';
	imageIns += '<img src="' + imgSrc[i] + '" style="' + imgStyle + '" />';
	imageIns += '</div>';

/* alt */
	imageIns += '<div class="alt" style="' + altStyle + '">';
/* alt属性が無いとき */
	if(imgAlt[i] == null) {
		imageIns += '<span style="' + errStyle + '">alt がありません。</span>';
/* alt属性が空のとき */
	} else if(imgAlt[i] == '') {
		imageIns += '<span style="' + attStyle + '">alt が空です。</span>';
/* 上記以外 */
	} else {
		imageIns += '<span>' + imgAlt[i] + '</span>';
	}
	imageIns += '</div>';

/* width */
	imageIns += '<div class="sizew" style="' + dataSpcStyle + '">';
	imageIns += '<div style="' + itemStyle + '">width</div>';
/* width属性が無いとき */
	if(imgAW[i] == null) {
		imageIns += '<span style="' + sizeStyle + attStyle + '">width がありません。</span>';
/* width属性が空のとき */
	} else if(imgAW[i] == '') {
		imageIns += '<span style="' + sizeStyle + attStyle + '">width が空です。</span>';
/* width属性が%指定のとき */
	} else if(imgAW[i].indexOf('%') != -1) {
		imageIns += '<span style="' + sizeStyle + '">' + imgAW[i] + '</span>';
/* width属性が実際の値と異なるとき */
	} else if(imgAW[i] != imgNW[i]) {
/* 実際のサイズの半分くらいのとき */
		if(Math.abs(imgAW[i] - imgNW[i] / 2) <= 0.5) {
			imageIns += '<span style="' + sizeStyle + '">Retina対応っぽいです。</span>';
			imageIns += '<span style="' + sizeStyle + typStyle + '">実際:</span>' + '<span>' + imgNW[i] + 'px</span> ';
			imageIns += '<span style="' + sizeStyle + typStyle + '">半分:</span>' + '<span>' + imgNW[i] / 2 + 'px</span> ';
			imageIns += '<span style="' + sizeStyle + typStyle + '">指定:</span>' + '<span>' + imgAW[i] + 'px</span>';
/* 実際のサイズの半分ではないとき */
		} else {
			imageIns += '<span style="' + sizeStyle + attStyle + '">実サイズと一致していません。</span>';
			imageIns += '<span style="' + sizeStyle + typStyle + '">実際:</span>' + '<span>' + imgNW[i] + 'px</span> ';
			imageIns += '<span style="' + sizeStyle + typStyle + '">指定:</span>' + '<span>' + imgAW[i] + 'px</span>';
		}
/* 上記以外 */
	} else {
		imageIns += '<span style="' + sizeStyle + '">' + imgAW[i] + 'px</span>';
	}
	imageIns += '</div>';

/* height */
	imageIns += '<div class="sizeh" style="' + dataSpcStyle + '">';
	imageIns += '<div style="' + itemStyle + '">height</div>';
/* height属性が無いとき */
	if(imgAH[i] == null) {
		imageIns += '<span style="' + sizeStyle + attStyle + '">height がありません。</span>';
/* height属性が空のとき */
	} else if(imgAH[i] == '') {
		imageIns += '<span style="' + sizeStyle + attStyle + '">height が空です。</span>';
/* height属性が%指定のとき */
	} else if(imgAH[i].indexOf('%') != -1) {
		imageIns += '<span style="' + sizeStyle + '">' + imgAH[i] + '</span>';
/* height属性が実際の値と異なるとき */
	} else if(imgAH[i] != imgNH[i]) {
/* 実際のサイズの半分くらいのとき */
		if(Math.abs(imgAH[i] - imgNH[i] / 2) <= 0.5) {
			imageIns += '<span style="' + sizeStyle + '">Retina対応っぽいです。</span>';
			imageIns += '<span style="' + sizeStyle + typStyle + '">実際:</span>' + '<span>' + imgNH[i] + 'px</span> ';
			imageIns += '<span style="' + sizeStyle + typStyle + '">半分:</span>' + '<span>' + imgNH[i] / 2 + 'px</span> ';
			imageIns += '<span style="' + sizeStyle + typStyle + '">指定:</span>' + '<span>' + imgAH[i] + 'px</span>';
/* 実際のサイズの半分ではないとき */
		} else {
			imageIns += '<span style="' + sizeStyle + attStyle + '">実サイズと一致していません。</span>';
			imageIns += '<span style="' + sizeStyle + typStyle + '">実際:</span>' + '<span>' + imgNH[i] + 'px</span> ';
			imageIns += '<span style="' + sizeStyle + typStyle + '">指定:</span>' + '<span>' + imgAH[i] + 'px</span>';
		}
/* 上記以外 */
	} else {
		imageIns += '<span style="' + sizeStyle + '">' + imgAH[i] + 'px</span>';
	}
	imageIns += '</div>';

/* imgBox-end */
	imageIns += '</div>';
};


/* ------------------------------------------------------------

	meta・title系のリスト

------------------------------------------------------------ */

/* ----------------------------------------
	変数とかの設定
---------------------------------------- */
var metaData = document.getElementsByTagName('meta'),
metaTitle = document.getElementsByTagName('title'),
linkData = document.getElementsByTagName('link'),
keywords, description, canonical, alternate,
ogArray = [], twArray = [],
ogFlag = false, twFlag = false;

/* -------------------------
	metaデータ取得
------------------------- */
for(var i = 0; i < metaData.length; i++) {
	switch(metaData[i].getAttribute('name')) {
/* meta keywordsのとき */
		case 'keywords':
			keywords = metaData[i].getAttribute('content');
			break;
/* meta descriptionのとき */
		case 'description':
			description = metaData[i].getAttribute('content');
			break;
		default:
			break;
	}
	if(metaData[i].getAttribute('property') != null) {
/* ogp情報のとき */
		if(metaData[i].getAttribute('property').match(/og:/)) {
			var ogFlag = true;
			ogArray.push([metaData[i].getAttribute('property'), metaData[i].getAttribute('content')]);
		}
	}
	if(metaData[i].getAttribute('name') != null) {
/* twitter情報のとき */
		if(metaData[i].getAttribute('name').match(/twitter:/)) {
			var twFlag = true;
			twArray.push([metaData[i].getAttribute('name'), metaData[i].getAttribute('content')]);
		}
	}
};

/* -------------------------
	linkデータ取得
------------------------- */
for(var i = 0; i < linkData.length; i++) {
	switch(linkData[i].getAttribute('rel')) {
/* canonicalのとき */
		case 'canonical':
			canonical = linkData[i].getAttribute('href');
			break;
/* alternateのとき */
		case 'alternate':
			alternate = linkData[i].getAttribute('href');
			break;
		default:
			break;
	}
};

/* ----------------------------------------
	metaの挿入
---------------------------------------- */

/* -------------------------
	meta挿入の設定
------------------------- */
var metaIns = '';
var dlStyle = 'margin-bottom:10px;',
dtStyle = 'display:inline-block;width:10em;margin-right:10px;padding:2px;font-size:16px;font-weight:bold;background:#999999;',
ddStyle = 'padding:2px;',
linkStyle = 'color:#0000ff;';

/* meta list title */
metaIns += '<p style="' + ttlStyle + '">■meta情報</p>';
metaIns += '<div style="margin-bottom:30px;">';

/* title */
metaIns += '<div style="' + dlStyle + '"><span style="' + dtStyle + '">title</span>';
/* titleが無いとき */
if(!metaTitle.length) {
	metaIns += '<span style="' + errStyle + '">titleタグがありません。</span>';
/* titleが空のとき */
} else if(!metaTitle[0].childNodes.length) {
	metaIns += '<span style="' + errStyle + '">titleタグが空です。</span>';
/* 上記以外 */
} else {
	metaIns += '<span style="' + ddStyle + '">' + metaTitle[0].childNodes[0].nodeValue + '</span>';
}
metaIns += '</div>';
/* keywords */
metaIns += '<div style="' + dlStyle + '"><span style="' + dtStyle + '">keywords</span>';
/* keywordsが無いとき */
if(keywords == undefined) {
	metaIns += '<span style="' + attStyle + '">keywordsタグがありません。</span>';
/* keywordsが空のとき */
} else if(keywords == '') {
	metaIns += '<span style="' + attStyle + '">keywordsタグが空です。</span>';
/* 上記以外 */
} else {
	metaIns += '<span style="' + ddStyle + '">' + keywords + '</span>';
}
metaIns += '</div>';
/* description */
metaIns += '<div style="' + dlStyle + '"><span style="' + dtStyle + '">description</span>';
/* descriptionが無いとき */
if(description == undefined) {
	metaIns += '<span style="' + attStyle + '">descriptionタグがありません。</span>';
/* descriptionが空のとき */
} else if(description == '') {
	metaIns += '<span style="' + attStyle + '">descriptionタグが空です。</span>';
/* 上記以外 */
} else {
	metaIns += '<span style="' + ddStyle + '">' + description + '</span>';
}
metaIns += '</div>';

/* ogp情報が何かあるとき */
if(ogFlag) {
	for (var i = 0; i < ogArray.length; i++) {
		metaIns += '<div style="' + dlStyle + '"><span style="' + dtStyle + '">' + ogArray[i][0] + '</span>';
/* 値が空のとき */
		if(ogArray[i][1] == '') {
			metaIns += '<span style="' + attStyle + '">' + ogArray[i][0] + 'が空です。</span>';
/* 値が空でないとき */
		} else {
/* og:urlのとき */
			if(ogArray[i][0] == 'og:url') {
				metaIns += '<span style="' + ddStyle + '"><a href="' + ogArray[i][1] + '" target="_blank" style="' + linkStyle + '">' + ogArray[i][1] + '</a></span>';
/* og:imageのとき */
			} else if(ogArray[i][0] == 'og:image') {
				metaIns += '<span style="' + ddStyle + '">';
				metaIns += '<a href="' + ogArray[i][1] + '" target="_blank" style="' + linkStyle + '">' + ogArray[i][1] + '</a><br />';
				metaIns += '<img src="' + ogArray[i][1] + '" style="max-width:100%;max-height:250px" />';
				metaIns += '</span>';
/* 上記以外 */
			} else {
				metaIns += '<span style="' + ddStyle + '">' + ogArray[i][1] + '</span>';
			}
		}
		metaIns += '</div>';
	};
}

/* twitter情報が何かあるとき */
if(twFlag) {
	for (var i = 0; i < twArray.length; i++) {
		metaIns += '<div style="' + dlStyle + '"><span style="' + dtStyle + '">' + twArray[i][0] + '</span>';
/* 値が空のとき */
		if(twArray[i][1] == '') {
			metaIns += '<span style="' + attStyle + '">' + twArray[i][0] + 'が空です。</span>';
/* 値が空でないとき */
		} else {
/* twitter:siteのとき */
			if(twArray[i][0] == 'twitter:site') {
				metaIns += '<span style="' + ddStyle + '">';
				metaIns += '<a href="https://twitter.com/' + twArray[i][1].replace('@', '') + '" target="_blank" style="' + linkStyle + '">';
				metaIns += twArray[i][1];
				metaIns += '</a>';
				metaIns += '</span>';
/* twitter:imageのとき */
			} else if(twArray[i][0] == 'twitter:image') {
				metaIns += '<span style="' + ddStyle + '">';
				metaIns += '<a href="' + twArray[i][1] + '" target="_blank" style="' + linkStyle + '">';
				metaIns += twArray[i][1];
				metaIns += '</a><br />';
				metaIns += '<img src="' + twArray[i][1] + '" style="max-width:100%;max-height:250px" />';
				metaIns += '</span>';
/* 上記以外 */
			} else {
				metaIns += '<span style="' + ddStyle + '">' + twArray[i][1] + '</span>';
			}
		}
		metaIns += '</div>';
	};
}

/* canonicalが何かあるとき */
if(canonical != undefined) {
	metaIns += '<div style="' + dlStyle + '"><span style="' + dtStyle + '">canonical</span>';
/* canonicalが空のとき */
	if(canonical == '') {
		metaIns += '<span style="' + attStyle + '">canonicalが空です。</span>';
/* canonicalが空でないとき */
	} else {
		metaIns += '<span style="' + ddStyle + '"><a href="' + canonical + '" target="_blank" style="' + linkStyle + '">' + canonical + '</a></span>';
	}
	metaIns += '</div>';
}

/* alternateが何かあるとき */
if(alternate != undefined) {
	metaIns += '<div style="' + dlStyle + '"><span style="' + dtStyle + '">alternate</span>';
/* alternateが空のとき */
	if(alternate == '') {
		metaIns += '<span style="' + attStyle + '">alternateが空です。</span>';
/* alternateが空でないとき */
	} else {
		metaIns += '<span style="' + ddStyle + '"><a href="' + alternate + '" target="_blank" style="' + linkStyle + '">' + alternate + '</a></span>';
	}
	metaIns += '</div>';
}
metaIns += '</div>';


/* ------------------------------------------------------------

	ベース部分へ挿入

------------------------------------------------------------ */

/* ----------------------------------------
	meta Insert
---------------------------------------- */
var metaList = document.createElement('div');
metaList.id = 'metaList';
metaList.innerHTML = metaIns;
bg.appendChild(metaList);

/* ----------------------------------------
	img Insert
---------------------------------------- */
var imgList = document.createElement('div');
imgList.id = 'imglist';
imgList.innerHTML = imageIns;
bg.appendChild(imgList);
}

結構行き当たりばったりで作っているので、時間のある時にでも項目の追加や削除をできればしたいと思います。
　

【参考サイト】

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2024年4月
日 月 火 水 木 金 土
 123456
78910111213
14151617181920
21222324252627
282930