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

2015.07.20

その他

ツール

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

ブックマークレット

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

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

使い方

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

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

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

とりあえず、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);
}

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

【参考サイト】

日	月	火	水	木	金	土
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

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

ブックマークレット

使い方

判別内容

■meta/ogpなど

title

keywords

description

og:

og:○○

twitter:

twitter:○○

canonical

alternate

■画像

alt

width

height

圧縮前コード

JavaScript

コメントを残すコメントをキャンセル

Category

Tag

Recent

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

ブックマークレット

使い方

判別内容

■meta/ogpなど

title

keywords

description

og:

og:○○

twitter:

twitter:○○

canonical

alternate

■画像

alt

width

height

圧縮前コード

JavaScript

関連記事

v0を使ってみる

Cursorを使ってみる

Puppeteerを使ってみる

axe DevToolsを使ってみる

chromeのDevToolsでスクリーンショットを取得する

コメントを残す コメントをキャンセル

Category

Tag

Recent

コメントを残すコメントをキャンセル