よく、「プログラミング出来るなんてすごいねー！」と言われますが、言われるたびに「全然すごくないですよ」と言ってしまい、「すごいって言ってるんだから余計な謙遜しなきゃいいのに…」みたいな微妙な空気になることがあります。

まぁそもそも僕がプログラマとしてそんなにすごくないというのはありますが、気にしない方向で…

なんで「すごい」「すごくない」の感覚はこんなにも違うのか。

プログラミングは魔法ではない

これを言われるのって、勉強出来る人が「勉強出来てすごいねー！」と言われるのと同じ構造です。

勉強が出来る人は何故すごくないと思うか？　勉強したからです。

やったんだから出来るのは当たり前です。

それなのに「すごい」と言われるのは、マニュアルに書いてある通りに刺身にタンポポを乗せてたら「君はタンポポ乗せの才能があるね！どう？うちにこない？」って突然言われるくらいの違和感があるわけです。

嘘です。言い過ぎました。

しかし、ここで強く言っておきますがプログラミングのコードは呪文ではありません。

あるルールに従って書かれた文字の羅列です。

分かってる人にはそりゃそうだろ、っていうことですが…

ではなぜ、「プログラミングはすごい」という感覚が生まれるのか。

辞書があれば英語を読める？

僕は、英語の勉強が好きでした。

そこまで成績が良いわけではなかったですが、長文を読むことにも抵抗はあまりありませんでした。

長文と言っても、和英辞書があれば、正確じゃなくても何とか読めます。

もしかしたら、大事なのはこの感覚なのかもしれないと思います。

英語もPHPも、ルールに従って書かれた文章です。

基本的ないくつかのルールを覚えてしまえば、あとは単語を調べるだけで済みます。

英語なら辞書があればいいですし、PHPならほとんどの場合関数リファレンスを見れば良いだけです。

スラスラ読めたらカッコイイかもしれませんが、どんくさくても辞書を片手に読み解くことは、忍耐力があれば出来ることだと思います。

それなのに、挫折する人が多いのは何故でしょうか？

覚えることが多い…ように見える

感覚値ですが、「基本的ないくつかのルール」を覚えるのに挫折する人は意外と少ないです。

ただ、「基本的ないくつかのルールを覚えること」と「単語を覚えること」を混同して挫折する人は多いです。

「こんなに覚えることがあるのか…」と思った瞬間に、やる気が失われてしまうのです。

英語もプログラミングも、同じ傾向にあると思います。

こういう理由ですから、プログラミングを覚えるのは大変なことじゃないですよ

…っていうまとめになるわけですが、何故今回、この文章を書くに至ったかを書いておきます。

端的に言えば、WebデザイナはjQueryを学んだほうが良いと感じているからです。

jQueryと一口に言っても様々なことが可能です。

学ぶなら、主に表示系のインターフェースに関わる部分を学ぶのが良いと思います。

要素の表示／非表示、アニメーションの操作、レイヤーの考え方。

インターフェースの設計については場合によってはSEの範疇かもしれませんが、Webデザイナとしてもインターフェースへの考慮は必須になっていくでしょう。
（僕はデザインと設計は同義語だと考えています）

英語は話せますか？

英語を話せますか？と誰かに聞かれたとき、基本的に僕は「話せます」と答えています。

話せる英語は中学校で習うような基本的なものばかりですが、生活に困ることは無い程度には話せます。

ほとんどの場合、「相手に何を伝えれば良いか」だけ考れば、実際伝えるべき部分は簡単な英語で済むものです。

それはプログラミングの場合、設計に当たります。

jQueryで自分が意図する動作を作り出すには、どのように書いたら良いか、少し考えてみてください。

場合によっては（というよりはほとんどの場合）、インターネット上にヒント（または答え）が転がっていますが、あえて見ないで考えてみてください。

それが実現出来たら、プログラミングの設計から構築まで一人の力で出来る、と言って良いと思いますし、Webデザイナとしてのスキルに一つのエッセンスを加えることが出来るのではないでしょうか。

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

デモ
ダウンロード

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

基本的な使い方

html

オプションを指定した例

オプション

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

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

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

今後のアップデート予定

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

ライセンス

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

蛇足

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

TumblrやGmail、Googleリーダーなどで実装されている、「j」や「k」で次の記事／前の記事に移動できるインターフェースが便利だなーと思って、作ってみました。

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

MITライセンスですので、どうぞご自由にいじってください。商用も可です。

※全角モードになっていると動きません。

使い方は簡単なので、デモのソースを見れば分かるとは思います。
移動したい要素に同じクラス名をつけておいて、そのクラスにkeyMoveファンクションを実行するだけ。

デフォルトでは「j」で次の位置、「k」で前の位置に移動します。

オプションで、キーコードを設定すれば、違うキーで移動できます。
（キーコードはこのサイトとかで調べてみてください）
ただ、ブラウザ／OSによってキーコードって変わるみたい。
そのへんは、よしなにやってちょうだい。

例）次の位置に「a」で移動、前の位置に「s」で移動する場合

不具合、疑問などありましたらコメントにてどうぞ。

扱いやすさから大流行している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まで。

ボックス内をスクロールすると自動でコンテンツをロードする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は簡単に変更できるのが面白いですねー＾＾

はまったのでメモ書き。

＜やりたいこと＞
jQueryを使ってAJAXでPHPに配列を渡したい

＜10/26：追記しました＞

＜前提＞
・CentOS5.3
・PHP5.2.11
・jquery-1.3.2.min.js

＜サンプルソース＞

$.ajax({
type: “GET”,
url: “test.php”,
data: {
id:[1,2,3,4,5,6,7]
},
success: function(){
alert(‘成功しました’);
},
error: function(){
alert(‘エラーです’);
}
});

＜問題点＞
・jQueryは上記のソースで「id=1&id=2&id=3&id=4&id=5&id=6&id=7」というリクエストを行う
→同じキーで複数の値を送信する
・PHPは同じキーで複数の値が送信されていた場合、後から受け取ったものだけが有効になる
→上記ソースで受け取れるのは「array(1) { ["id"]=> string(1) “7″ } 」のみ

＜解決方法＞
見当たらない。
ので、別の方法を使えということか。

仕方ないので、当面は「カンマ区切りの文字列にしてPHP側で分割」という方法で回避しようと思いますが、
どうにかならないんだろうか？これは…

＜10/26：追記＞
コメントにて提案頂いた方法

data: {
“id[]“:[1,2,3,4,5,6,7]
},

で取得できました…！
これでvar_dumpの結果は

array(1) {
["id"]=>
array(20) {
[0]=>
string(1) “1″
[1]=>
string(1) “2″
[2]=>
string(1) “3″
……
}

となりました！！
HOGE-CHONさん、ありがとうございます！

＜さらに追記＞
var_dumpの結果を他のソースから持ってきて不思議なことになってしまっていたので修正しました。失礼しました。