Home > Web > JavaScript

JavaScript Archive

jQueryを利用したalt、description、keywordチェック

WordPressのログイン画面で2回パスワード間違えたsunitiです。前にエントリー書いたのいつだろ・・・?

少し前の話になりますが、linker journalの「普段読んでるRSS一覧でも<Web制作系編>」というエントリーにこのブログが載ってるのを見かけて心苦しくなったので何か書こうと思った次第です。
deliciousが自動更新するブログになっていてホントすんまへん。へこへこ。

さて、皆さんはalt、description、keywordsのチェックはどうされてますか?
下階層で同じようなレイアウトのページが続くと前回作ったものをコピーして作ったりしますが、その際にalt、description、keywordsを更新し忘れてて公開後にギャースとなることがまれにあります。

数ページのサイトであればチェックも手間では無いのですが、数百ページとかになるとaltチェックだけでもかなりの手間になります。
そこで自分はjQueryでコードを書きテストサーバーにアップ後、それを読み込ませてブラウジングしながらチェックしています。

alt_description_keyword

左の画像がJSを読み込ませる前、右が今回のコードを読み込ませた後

右の左側(わかりにくいな)の画像にはaltが入っているので画像の左上にaltテキストが表示されます。
右の右側の画像はaltが抜けていたので画像に枠がつきます。

また、body直下にdescriptionとkeywordが出力されます。
bodyに背景画像でごにょごにょしてる場合は崩れる可能性大!(まぁチェックだからいいよね)

$(function(){
//description、keywordチェック
	$("body").prepend('<div>description: ' + $("meta:[name^='description']").attr("content") + '</div>');
	$("body").prepend('<div>keywords   : ' + $("meta:[name^='keywords']").attr("content") + '</div>');

//altチェック
	$("img").each(function(){
		var h = $(this).height();
		if($(this).attr("alt")){
			$(this).after('<div style="z-index:999;position: absolute;background-color: #333; color:#FFF; font-size:10px; padding:5px;margin-top:-' + h + 'px;">' + $(this).attr("alt") + '</div>');
		}
		else{
			$(this).css({ backgroundColor:"#F00", padding:"5px" });
		}
	});
});

無理やり出力させてたりするので、画像の上にaltテキストが乗らなかったりしますが、その辺は見なかった体でお願いします。

jQuery1.3.2&Firefox以外ではめんどくさくてチェックしてませんので動かなかったらごめんなさい。

MyMiniCityがちょっと便利になるGreasemonkey

先日から巷で話題のMyMiniCityがちょっと便利になるGreasemonkeyがあったので、紹介します。

コメント機能もついて、他の街にコメントとかが書き込めるのですが、コメントとかもらっても、相手の街に行くのにコピペしないといけないのでめんどくさいです。

そこで、コメントの名前を自動的にリンクに変更するグレースモンキースクリプトを作りました。

MyMiniCityを楽しむためのGMスクリプト[to-R]

[to-R]さんのグリモンは、コメント欄に書き込まれた名前の部分をリンクに変えてくれるグリモン。

これ便利だなーと思って入れた矢先に、もう一つ発見><

to-Rさんで公開されているぐりもんは,ユーザ名からURLへの置換方法が不十分だったで正規表現で設定しなおしました.具体的には,_(アンダスコア)とか:(コロン)とか,URLに使える文字として許されているのに,MyMiniCityのURLでは削られる文字をユーザ名に含むときにうまくいってませんでした.

また,ついでなのでコメント投稿時間も時差を考慮して国際対応にしてみました.このぐりもんを使う人の国の時間で表示しなおします.

We Ain’t Seen Nothin’ Yet. : MyMiniCityを楽しむためのGMスクリプト+α

We Ain’t Seen Nothin’ Yet.さんのグリモンは、さらに時間も日本時間で表示してくれるようになるのでもっと便利に><

関連リンク
MyMiniCity

MyMiniCityを楽しむためのGMスクリプト[to-R]

We Ain’t Seen Nothin’ Yet. : MyMiniCityを楽しむためのGMスクリプト+α

USTREAM.tvのダラ見を防止するグリモンを書いてみた

最近、Twitter界隈で大人気のUSTREAM.tv。面白すぎる!
面白すぎて、ついついダラ見しちゃって、「やっべ!仕事してねーじゃん!><」という事がしばしば。

そんなダラ見を防ぐグリモンを書いたよ!(n’∀’)η
やってることは簡単、5分おきにアラートが出るだけ!自分で好きな時間とメッセージに書き換えて使うといいよ!(n’ω’n)

ustream_timer.jsをダウンロードする!(要Greasemonkey


// ==UserScript==
// @name        USTREAM_TIMER
// @namespace   http://blog.grayash.com/
// @include     http://www.ustream.tv/*
// @include     http://ustream.tv/*
// @version     1.0
// ==/UserScript==
(function(){
	var UT_timeID;
	var sec=0;
	UT_settime = 5; //アラートを出す間隔(分)
	UT_message = new Array( "経過。そんなに見ちゃダメ!><",
				"経過したけど、仕事は?",
				"経過したよ?仕事しようよ!",
				"も見てるんだけど・・・",
				"経過。USTREAM自重wwww");
	function UT_interval(){
		sec = sec+UT_settime;
		window.alert(sec + "分" + UT_message[Math.floor( Math.random() * UT_message.length )]);
	}
	UT_timeID = setInterval( UT_interval, (UT_settime*60000) );
})();

あんまり動作確認していないので、動かなかったらこっそり教えてくだしあ><
ちなみに自分はカメラ持ってないので見る専門ですよ(n’∀’)η

jQueryでナウでヤングなポップアップを開く

今日、「ポップアップ」を連呼するクライアントと話しました。久しぶりに聞いたぜ「ポップアップ」。

最近jQueryの勉強をしてるので、ソレで昼休みに作ってみました。
ポップアップするファイルを1つのフォルダにまとめておけば、自動的にポップアップでやってくれるよ!
これはナウい。ただし、ウィンドウサイズは固定なのでチョベリバ。


//ポップアップで開く
<a href="./shop/popup.html">ポップアップで開く</a>
//同じウィンドウで開く
<a href="./food/apple.html">同じウィンドウで開く</a>

//A要素のURLに「./shop/」と入っていればポップアップでウィンドウを開く。
$(function(){
$('a[@href~="./shop/"]').click(function(){
window.open(this.href, "shop","width=400,height=300");
return false;
});
});

もちろんネタですよ?

Home > JavaScript

Search
Google
Feeds
Meta
あわせて読む
あわせて読みたい
Yahoo! ログール読む

Return to page top