Webサイトを閲覧していると、一体どこがクリック出来るエリアなのか分からないことがあります。
このプラグインは、画面をスクロールしていって、該当の要素が画面内に登場するとハイライトしてくれるというプラグインです。

デモ
ダウンロード

仕組みとしては、指定した要素の上にdivの透明レイヤーを配置して、ハイライト時に一瞬だけ表示という方法で実現しています。
もともとはaタグにバインドして利用することを想定していましたが、他の任意の要素にもバインドできます。

基本的な使い方

html

オプションを指定した例

オプション

hlColor
ハイライトされる色を#ffffffなどで指定します。色名では指定できません。

cnt
連続してハイライトする回数を指定します。

指定された要素は、ページに登場すると一度だけハイライトされます。

今後のアップデート予定

登場回数指定オプション
その他要望があれば。
不具合、ご要望はこちらからどうぞ。

ライセンス

MITライセンスで公開します。ご自由に。

蛇足

このプラグインは、一般的なWebサイトに対しての提案だと思ってます。
一般的に、クリッカブルな領域であるかどうかを表現するには、デザインでの見せ方が必要と言われますが、そもそも平面でクリッカブルか否かを判断させるのは無理があります。
ならば、動作で見せてもいいんじゃないの？と思って作ったのがこちらのプラグイン。
UIに対する提案はいろいろ考えたいところですね。

扱いやすさから大流行しているjQuery。
装飾からアニメーション、フォームのバリデーションなど、幅広く利用されています。

今回は、このjQueryを自分の開発とかコーディングを助けてくれるツールを作ってみました。
MITライセンスで公開しますので、よろしければ使ってみてください。
改変も自由です。

１）指定要素全てにボーダーを指定してくれるプラグイン

ctrlキー（windows）の2回押下で表示／非表示を切り替えられるようにします。
HTMLコーディング中にレイアウト崩れを直す時などに役立つかと。
ボーダーの分、幅が広がっちゃうけどね。背景色とか変えてみるのもアリかも。

他のキーを割り当てたい場合はこちらのサイトなどでキーコードを調べて変更すると良いです。
下のコードの「e.keyCode==17」の数字部分を該当するキーコードに置き換えればOK。
（2箇所ありますので気をつけてください。）

ダウンロードはこちら。
デモはこちら。

jQueryのコードは以下。

(function($){
	$.fn.debugline=function(options){
		var c=$.extend({
			classname:"displine"
		}, options);

		var t=this;
		var displine = function(e){
			if(e.keyCode==17){
				t.each(function() {
					target=$(this);
					if(target.attr("class")==c.classname){
						target.removeClass(c.classname);
					}else{
						target.addClass(c.classname);
					}
				});
			}
		}
		$(window).keydown(function(e){
			if(e.keyCode==17){
				$(window).bind("keydown",displine);
				setTimeout(function(){ $(window).unbind("keydown",displine); },500);
			}
		});
	};
})(jQuery);

CSS

.displine{
	border:1px red solid;
}

HTMLにjavascriptで指定要素に割り当てれば完了。

２）input type=”hidden”の値を表示してくれるプラグイン

hiddenの値を見るためだけに、いちいちソース見るのはダルいです。
こちらも同様にctrlキー2回押下で表示／非表示を切り替えられるようにします。
こちらはプラグインではなく、読み込むだけで実行可能。

ダウンロードはこちら。
デモはこちら。

jQueryのコードは以下。

$(function(){
	var t=$("input[type=hidden]");
	var flag = 0;

	var disp = function(e){
		if(e.keyCode==17){
			if(flag==1){
				t.each(function() {
					target=$(this);
					var val = target.attr("value");
					var name = target.attr("name");

					$(".hiddenVals").remove();
				});
				flag=0;
			}else{
				t.each(function() {
					target=$(this);
					var val = target.attr("value");
					var name = target.attr("name");

					target.after("
[name] "+name+"[value] "+val+"

");
				});
				flag=1;
			}
		}
	}

	$(window).keydown(function(e){
		if(e.keyCode==17){
			$(window).bind("keydown",disp);
			setTimeout(function(){ $(window).unbind("keydown",disp); },500);
		}
	});
});

CSS

.hiddenVals{
	padding:3px;
	background-color:#FDFF9B;
	border:1px #ccc solid;
	text-align:left;
}

HTMLはjavascriptとcssを読み込むだけなので省略。

以上です。

こんなコードが欲しい！という要望とかあったらリクエストしてくだされば作るかもしれません。

ではまた。

いつも拝見している 5509 さんのブログで、「誰が使うの？何の役にも立たないjQueryプラグイン10選」というエントリが公開されています。
独創的な発想に満ちたjQueryプラグインで、たぶん使うことはないけど多いに笑えます。

その中の一つ、「これからの新標準LightBox jDTLightBox.js」というLightboxのプラグインがあります。
こちらもご多分に漏れず大変ユニークなプラグインなのですが、そういえば自分でLightbox的なものを作ったことがないなと思い、これを参考に作ってみることにしました。

デモ
ダウンロード（140KB）

特徴

かなりシンプルなLightboxです。jQuery利用。
画像(jpg,gif,png)とiframeコンテンツに対応してます。
内容のサイズを取得して、表示サイズが自動で調整されます。
表示の際のアニメーションはありません。
（コメントアウトしてあるところをいじるとアニメーションのヒントになるかも？）

使い方

１）シンプルな利用法（画像の場合）
（HTML）

画像を表示

（JavaScript）

$("#hoge").qBox();

２）オプションを指定
（HTML）

画像を表示

（JavaScript）

$("#hoge").qBox({
   href:"http://quoit.jp/",
   width:500,
   height:400
});

実装課題

・iframeコンテンツを表示した際の履歴の管理。
　→iframe内でsubmitイベントが発生したときに制御しきれていない
　→完全に制御する必要に迫られなければ問題はないのだろうか。。

ご注意

このスクリプトが原因で発生した不利益、不具合に関しての責任は一切負いません。
ご利用にあたっては自己責任でお願い致します。

ライセンス

ライセンスはjDTLightboxを継承してMITです。
基本的にどんなに改造してもらっても構いません。
構造がシンプルなので、初めてLightboxを作ってみようという方にはオススメだと思います。

問題点、改善要望は下記コメント欄かTwitterまで。

自分のためのメモ。

参考にしたページはこちら。

http://ja.forums.wordpress.org/topic/3053

まず最初に疑うのは、.htaccess。

僕の場合も、.htaccessでDirectoryIndexを指定する作りになってたので、これが原因。

引き継いだ案件は困る要素が盛りだくさんです。。。orz

ボックス内をスクロールすると自動でコンテンツをロードするjQuery – かちびと.net

を読んで、ちょっとやってみたくなったので作った。
言ってもたいしたことやってませんがｗ

かちびと.netのシロさんには許可を頂いてます。

詳細は以下。

上記記事では、下までスクロールしたあとにワンテンポ置いてから（タイマー処理で）コンテンツがロードされる形になってます。

しかし、IEで見てみるとわかるのですが、内側のスクロールが完了した時点で外側のスクロールも動いちゃうんですね。

なので、ロードされる前にページの下に行ってしまう。

これをちょっと改善できないかなーと思って作ったのがこちら。

Auto Scroll Test

コードは以下。

<script type=”text/javascript”>
$(function(){
function updatestatus(){
//ロードしたアイテムの数を表示
var totalItems=$(‘#content p’).length;
$(‘#status’).text(‘現在、 ‘+totalItems+’ 個を表示しています。’);
}
function scrollalert(){
var scrolltop=$(‘#scrollbox’).attr(‘scrollTop’);
var scrollheight=$(‘#scrollbox’).attr(‘scrollHeight’);
var windowheight=$(‘#scrollbox’).attr(‘clientHeight’);
var scrolloffset=300;
if(scrolltop>=(scrollheight-(windowheight+scrolloffset)))
{
//新しいアイテムのロード
$(‘#status’).text(‘続きを読み込んでいます・・’);
$.get(‘./hoge.txt’, ”, function(newitems){
var arr = newitems.split(“\n”);
for(var i=0;i<arr.length;i++){
$(‘#content’).append(“<p>”+arr[i]+”</p>”);
}
updatestatus();
});
}
}
scrollalert();
$(‘#scrollbox’).scroll(function(){scrollalert();});
});
</script>

HTMLは元記事と同じです。

処理の変更ポイントは、

１）スクロールが一番下に行く前にロードするようにした
var scrolloffset=300;
の部分ですね。
この数値は「スクロールの一番下のポイントからどのくらい離れた位置でロードするか」という設定になってますので、
「20」になってたのを「300」に増やしました。

２）タイマーをやめて、スクロールイベントにバインドした
元スクリプトでは、タイマー処理で1.5秒毎に関数が実行されるようになってました。
これを変更して、スクロールしたら関数を実行するように変えました。
こうすることで、ちょっとはIE対策になってるはず。。

３）おまけ：　読み込み元のテキストを書き方を変えた
読み込む元テキストが

<p>hoge</p>
<p>hogehoge</p>
<p>hogehogehoge</p>

となってて、元テキストにHTMLタグが含まれてるのが気に入らないのでｗ

hoge
hogehoge
hogehogehoge

を読み込んで、JavaScript側で<p>タグをつけるように変更しました。
完全に好みの問題ですけどｗ

こんな感じです。

こうしたほうがいいんじゃない？という意見は随時募集！＾＾

jQueryは簡単に変更できるのが面白いですねー＾＾

前：HTMLメールの是非(1)

HTMLメールは、そのセキュリティの甘さが一般に認識されていないから、まかり通っているのではないか、というお話。

前回一例をあげましたが、他にも危険がいっぱいですよ、という第二回のお話です。

まずはこちらをどうぞ。

ウェブビーコン – Wikipedia

意味がわからない方は飛ばしていいですｗ

じゃあこのウェブビーコン。今でも通用するもんなのでしょうか。

早速このウェブビーコンを仕込んだメールを作ってみました。

…さすがに公開するわけには行きませんがｗ

仕組みとしては、
１）HTMLメールのソースにimgタグを入れる
２）imgタグのsrcで読み込んでるのはPHPファイル。
３）PHPは何か悪いことをするｗ
ってな感じで。

さすがに悪いことをするのはアレなので、アクセスした情報をログファイルに書き出すことにしましたｗ

これでどうなるとマズイって、アクセスしちゃってたらマズイわけです。

自分の意図しないプログラムにアクセスしちゃってる＝悪意のあるコードも実行できる

っていうことですからね。

で、メーラーで確認。

結果から言うと、アクセスできちゃってました。

PHPは見事にログファイルを吐き出し、自分がアクセスした情報が記録されてしまいました。
（IPアドレスはPHPの置いてあるサーバのIPアドレスでしたが）

これ、簡単に怖いこと出来ちゃいますよ。

普通の人はメールのソースなんて見ませんよね。

どうするんですかコレ。

ちなみに、未だにHTMLメールを利用してメルマガを送ってきてるのは、大手だとアマゾンと楽天。

まあ普通に考えて、私は強く思うわけですよ。

アマゾン、楽天は即刻HTMLメールでのメルマガをやめろと。

それとも、大手とされる企業ですから、その危険性を充分にご理解された上で、
マーケティングのために脆弱性を利用されていらっしゃるんでしょうかねえ？

そうだとしたら、犯罪スレスレの行為だと思うんですが、まさか実際やってませんよねえ？

でも、疑われても仕方ないですよ。

そう思われても仕方のない理由がHTMLメールには存在するわけですから。

企業のメルマガなどでよく使われているHTMLメール。
通常のWEBページより制限があるものの、視覚的に訴えやすくなるので、よく使われている。
携帯電話であれば、「デコメ」という名称でHTMLメールのやり取りを出来る機種もある。

だが、セキュリティ的に問題視されている点が多いのも事実。
まぁ知ってる人も多いと思いますが、何が一体問題なのか、ざらっとまとめてみます。

この問題は今に始まったことではなく、だいぶ前から議論されてます。

初めての手順書—第5回　HTMLメールは使用しない – ［インターネットセキュリティ］All About

2003年の記事ですね。
HTMLの問題点について解説し、使わない設定にしましょうと促しています。

古い記事だし、今は問題なくなっただろうかというと、そんなことは全然ないです。

例えば上記記事の「プライバシー上の問題」。

具体的にはHTMLメールの中に、送信するユーザ一人一人に対してすべて異なるURLを持つ、サイズ1×1の透明GIF画像へのリンクを書き込んでおくという手法が使われます。
たとえば「hogehoge@usoyonen.com」に対して「123456789.gif」を割り当てておいてアクセスを見張り、「123456789.gif」にアクセスがあれば、「hogehoge@usoyonen.com」を持つユーザがHTMLメールを見たことがわかる、という仕組みです。
（中略）
上記の手法を使った迷惑HTMLメールを開いてしまうとそれだけで、迷惑メールに返信したのと同じ結果になってしまいます。

これは今でも充分可能な手法ですし、問題は何ら改善されていません。
メーラーによって、デフォルトではHTMLメール形式のメールを表示しないようになっていたりしますが、根本的な解決には全くなってません。

じゃあ何でHTMLメールを使うのか。

一番大きい理由は知らないからだと僕は思います。

PCではメールとインターネットだけしかやらない、という人の多くは知らないでしょう。

だからまかり通っているのです。

おかしな話しだと思いませんか…？

（続きます。続きはまた後日）

このところWordPressをいじる日々が続いたので、備忘録のためにもメモ。

今回はフィードについて。

いつものように、ツッコミお待ちしております。

WordPressのフィードはGETの引数として「?feed=rss」とかつけると取得できます。

このブログであれば、

このブログのRSS
http://ken.quoit.jp/?feed=rss

これでRSSを取得できますが、カテゴリなどで検索した結果をRSSとして取得したい場合もあります。

その場合も同様に、

このブログの「HTML／CSS」カテゴリのRSS
http://ken.quoit.jp/category/htmlcss/?feed=rss

こうすればそのカテゴリのRSSを取得できます。

カテゴリなどのURLがGETの引数「?category=htmlcss」になっている場合は、

このブログの「HTML／CSS」カテゴリのRSS
http://ken.quoit.jp/category/htmlcss/?category=htmlcss&feed=rss

こうやって＆（アンパサンド）で繋げば大丈夫。
とても簡単。

また、「現在表示中のページ」のRSSを出力したい場合は、下記のコードを使えば取得できます。
※GETの値をチェックするスクリプトは省いています。セキュリティには各自気をつけてください。

<?php
$getquery=array();
if($_GET){
foreach($_GET as $k=>$v){
if($k!=”paged”){# ページングの引数は除く
array_push($getquery,$k.”=”.$v);
}
}
}
array_push($getquery,”feed=rss2″);
$getquery=join(“&”,$getquery);
?>
<a href=”?<?php echo $getquery; ?>”>フィードを取得</a>

＜　追記：20100409 18:10　＞
ついったーで指摘頂きました。@shiroutoSEOさんありがとうございます。
@shiroutoSEOさんの運営されてるかちびと.netにはWordPress関連の貴重な情報がたくさんあります。
WordPress使いは是非見ておくべき！

で、追記。
htaccessでURLを変更している場合には、下記の方法でもフィードを取得できます。

このブログの「HTML／CSS」カテゴリのRSS
http://ken.quoit.jp/category/htmlcss/feed/rss/

または

このブログの「HTML／CSS」カテゴリのRSS
http://ken.quoit.jp/category/htmlcss/feed/

後述の方法で「/rss/」を省略した場合、RSS1.0が出力されるようです。

ついでに。

RSS2.0を出力する場合は「?feed=rss2」
ATOMフィードの場合は「?feed=atom」

とすると、それぞれ出力されます。

※自分用のメモです

WordPressのページングで、最初のページにあえて引数「?paged=1」とつけたいとき。
WordPressのバージョンは 2.9.2。

【wp-includes/link-template.php】
function get_pagenum_link内の1305行目にある

if ( $pagenum > 1 ) {
$result = add_query_arg( ‘paged’, $pagenum, $base . $request );
} else {
$result = $base . $request;
}

これを

$result = add_query_arg( ‘paged’, $pagenum, $base . $request );

こうする。

以上。

セキュリティについてのことは以前から記事を書いておりましたが、
あまりに驚くことがありましたので、一言申し上げたい。

タイトルが釣りなのは鼻から承知。

携帯サイトの開発の方には既に知れている問題なのかもしれませんが…

気付いたのはユーザからの問い合わせがあったから。

「携帯電話のキャリアを変更したらログインが出来なくなった」というものです。

「以前のメールアドレスとパスワードを入力しようとしたら、パスワードが数字しか入力できないみたいなんですよ」

…え？

そんなバカなことあるかいな、はっはっはと思っていたら

そんなバカなことありました。

公式サイトに注目。

KDDI au: 入力フォーム変換仕様 > <input type=”password”>/<input type=”radio”>/<input type=”checkbox”>

簡単に言いますと、

<input type=”password” />

↑これは

<ENTRY KEY=”PASSWD” FORMAT=”*N” NOECHO=”TRUE” NAME=”__card4″>
<ACTION TYPE=”ACCEPT” TASK=”GO” DEST=”#__card2″> PASSWORD:
</ENTRY>

↑こう変換されるんですって。

HDMLっていう、日本ではauだけが採用している記述方法です。

で、何が問題かと言うと、この部分。

<ENTRY KEY=”PASSWD” FORMAT=”*N” NOECHO=”TRUE” NAME=”__card4″>

僕はHDML知らないので調べてみました。

EZweb XHTML<input>

なになに。「FORMAT=”*N”」は数字のみの入力を受け付ける…

待って下さいよ。

なーんでそう変換しちゃったんでしょうかね！？

これはHDMLの仕様が問題なのではなく、

auが <input type=”password” /> を勝手に数字のみでいいよねって解釈しちゃったのが問題です。

そりゃあ、知ってればHDMLで組めばいいんでしょうけど、なんでauがこういう仕様にしたのか全く意味がわかりません。

教えてえらいひと。