ウェブル » Javascript

Web サイトのタイトルと URL のタグを生成するブックマークレット

Sorai — Mon, 26 Jul 2010 10:10:11 +0000

ブログに参考サイトなどを貼り付ける場合、私の場合はソースを表示してタイトルをコピーして、その後にアドレスバーから URL をコピーして、先ほど貼り付けたサイト名をリンクにするという作業をしています。

ただ、それだとかなり効率が悪いので、簡単にリンクタグを生成するブックマークレット作りました。
これでリンクタグが瞬間生成できますね。

javascript:var win1 = window.open(null, null, 'width=400, height=300, menubar=no, toolbar=no, scrollbars=no'); win1.document.write('<a href="' + window.location.href + '">' + document.title + '</a>');

jQuery で世界一簡単に画像を自動スライドすることができる simpleslide.js

Sorai — Thu, 22 Jul 2010 14:03:52 +0000

本当にスライドだけがしたい場合の jQuery のコードを書いてみました。
ul と li で画像を並べるだけで、勝手にスライドが始まります。
simpleslide.js デモサイト

ただし、作った私は Javascript 初心者なのであしからず。

基本的な使い方

HTML の書き方

以下のようにスライドしたい画像を並べます。
CSS は必要ありません、きっと simpleslide.js が自動で設定してくれます。
id を slide にしておきますと、後々便利ですが、任意の名前でも結構です。

<ul id="slide">
	<li><img src="image_01.png"></li>
	<li><img src="image_02.png"></li>
	<li><img src="image_03.png"></li>
</ul>

JS の読み込み

simpleSlide() で起動します。ページ末端に以下のようにコードを追加してください。
HTML の段階で、id 名に slide を設定した場合は simpleSlide() と空で OK です。

1 2	<script type='text/javascript' src='jquery.simpleslide.js'></script> <script type='text/javascript'>simpleSlide();</script>

※これだけで動かない場合は以下を読み進めてください…。

堅実な使い方

以上の手順だけで動くには動きますが、全自動すぎて不具合が発生することがありますので、以下の項目を設定することをおすすめします。

ID 名を指定する

HTML の段階で任意の id 名をいれた場合は、第1引数にあなたが設定した id 名を入れます。

1 2	<script type='text/javascript' src='jquery.simpleslide.js'></script> <script type='text/javascript'>simpleSlide('hoge');</script>

速度の設定

ちなみにスライドする速度を変更できます。
第2引数にミリ秒でスライドとスライドの間隔を入れます。

1 2	<script type='text/javascript' src='jquery.simpleslide.js'></script> <script type='text/javascript'>simpleSlide('hoge', 3000);</script>

枠のサイズ設定

さらに細かい設定ですが、横幅と高さを設定することができます。
要はフレーム枠のサイズです。

1 2	<script type='text/javascript' src='jquery.simpleslide.js'></script> <script type='text/javascript'>simpleSlide('hoge', 3000, 500, 300);</script>

第3引数が width、第4引数は height を設定します。
ここを設定しなければ、simpleslide.js が ul の初出の子要素のサイズを取得して、それを width と height として使用します。ですが、少し不調なので、挑戦者以外は設定してください。

ダウンロードはこちら： jquery.simpleslide.js (v1.0)

コード

jQuery.noConflict();
var j$ = jQuery;
 
function simpleSlide(myid, animateInterval, width, height) {
 
	if(typeof(myid) == "undefined") var myid = '#slide';
	var mylist = myid + ' > li';
 
	if(typeof(width) == "undefined") var width = j$(mylist + ':first-child').width();
	if(typeof(height) == "undefined") var height = j$(mylist + ':first-child').height();
 
	if(typeof(animateInterval) == "undefined") var animateInterval = 5000;
	var animeteTime = animateInterval / 5;
 
	j$(myid)
		.css('display', 'block')
		.css('position', 'relative')
		.css('width', width + 'px')
		.css('height', height + 'px')
		.css('overflow', 'hidden');
 
	j$(mylist).each(function(num) { 
		j$(this)
			.css('display', 'block')
			.css('position', 'absolute')
			.css('top', '0px')
			.css('left', (width*num) + 'px');
	});
 
	setInterval("slide('" + myid + "','" + mylist + "'," + width + "," + height + "," + animateInterval + "," + animeteTime + ")", animateInterval);
}
 
function slide(myid, mylist, width, height, animateInterval, animeteTime) {
 
	j$(myid).append(j$(mylist + ':first-child').clone());
	j$(mylist + ':last-child').css('left',(width * (j$(mylist).length - 1)) + 'px');
 
	j$(mylist).each(function(num) { 
		if(j$(mylist).length - 1 == num) {
			j$(this).animate({ left: '-=' + width + 'px' }, animeteTime, null, function() {
				j$(mylist + ':first-child').remove();
			});
		} else {
			j$(this).animate({ left: '-=' + width + 'px' }, animeteTime);
		}
	});
 
}

Javascript で祝日を手動で設定できるカレンダーを出力するコード

Sorai — Wed, 21 Jul 2010 09:58:10 +0000

Javascript でカレンダーを出力したいと思ったら既にありました。
JavaScript: カレンダー

祝日を自動的に出力するのは難しいですが、出力する段階で今月のいつが祝日かを入れることで、祝日に class=”holiday” を付加できるようにコードを少し書き換えました。
また、土曜日には class=”sat” 日曜日には class=”sun” と付くようになっています。

使い方

8日と9日が祝日の場合は、以下のように配列にデータを格納し、引数に入れ、適当な場所にこのコードを埋め込めば、そこにカレンダーが出力されます。

<script type="text/javascript">
	var array = new Array(8, 9);
	document.write(cal(array));
</script>

コード

function cal(holiday, year, month, day) {
	today = new Date();
	if(holiday) {
		var holidayNo = true;
	} else {
		var holidayNo = false;
	}
	if(!year) var year = today.getFullYear();
	if(!month) {
		var month = today.getMonth();
	} else {
		month--;
	}
	if(!day) var day = today.getDate();
	var leap_year = false;
	if((year%4 == 0 && year%100 != 0) || (year%400 == 0)) leap_year = true;
	lom = new Array(31, 28+leap_year, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
	dow = new Array("日", "月", "火", "水", "木", "金", "土");
	var days = 0;
	for(var i=0; i < month; i++) days+=lom[i];
	var week = Math.floor((year * 365.2425 + days) % 7);
	var j = 0;
	var h = 0;
	var hol = false;
	var when = year + "年 " + (month + 1) + "月";
	var calendar = "\""+ when +"のカレンダー\">\n";
	calendar +="";for(i=0; i <7; i++) calendar +="";for(i=0; i < week; i++,j++) calendar +="";
			j=0;}}for(i=j; i >6; i++) calendar +="   " + when + "<\/caption>\n
	  " + dow[i] + "<\/th>";
	calendar+="<\/tr>\n

	 <\/td>";
	for(i=1; i <= lom[month]; i++) {
		calendar+=";
		if(holidayNo) {
			for(h = 0; h < holiday.length; h++) {
				if(i == holiday[h]) {
					hol = true;
					break;
				}
			}
		}
		if(day == i) {
			calendar += " class=\"today\"";
		} else if(hol) {
			calendar += " class=\"holiday\"";
			hol = false;
		} else if(j == 0) {
			calendar += " class=\"sun\"";
		} else if(j == 6) {
			calendar += " class=\"sat\"";
		}
		if(hol) hol = false;
		calendar+=">" + i + "<\/td>";
		j++;
		if (j > 6) { 
			calendar += "<\/tr>\n

		
	
	  <\/td>";
	calendar += "<\/tr>\n<\/table>\n";
	return calendar;
}

Amenti さんありがとう！



IE シリーズで Javascript の getYear() の値が違うための対処法
Sorai — Sat, 08 May 2010 15:19:02 +0000
IE シリーズでは Javascript の getYear() で得られる値が他のブラウザと違います。

例えば Firefox や Safari などでは 110 と取得できるのに、IE では 2010 と取得できてしまいます。そのため、各ブラウザで同じ値を得るために以下のような処理を挟む必要があります。

1
if (year < 2000) { year += 1900; }

ちなみに、先程 Twitter で教えてもらったんですが、getFullYear() ってのを使う方法でも良いみたいです。そういえば昔はこれを使っていたような気がします。何がなんだか分からなくなってきました！



Javascript を有効にする方法
Sorai — Mon, 29 Mar 2010 03:43:05 +0000
Javascript が無効になっていると、動的な表現のあるサイトを楽しめなかったり、ちょっとした便利機能を利用できなくなってしまいます。
Internet Explorer 6 で Javascript を有効にする方法
ツール -> インターネットオプション -> セキュリティ -> レベルのカスタマイズ -> セキュリティの設定
下にスクロールしていくと、アクティブスクリプトがあります。

ここを有効にするを選択し、OK ボタンを押してください。
すると警告画面が表示されますので、これを OK してください。
最後にインターネットプロパティで適用 -> OK の順にクリックしてください。
その他のブラウザは以下のページを参考にすると良いです。

Yahoo! JAPANのページ全般 ヘルプ – JavaScriptの設定方法



Javascript Cart の制作で遭遇したバグまとめ
Sorai — Sat, 13 Mar 2010 15:55:20 +0000
Javascript Cart というものを作成しました。

既に使い方について説明した記事があります。

Javascript だけで動作する簡易ショッピングカート Javascript Cart | ウェブル
私は今まで PHP ばかり触ってきたので、今回のような Javascript だけっていうのは初めての体験でした。正直なところ、触るのは面倒だったし、PHP でやればいいのに、なんて思ってはいましたが、一日中触ってみて、Javascript にハマッてしまいました。
ですが、Javascript が楽しいという話をしても何も意味がないので、今回は Javascript Cart を作る上で遭遇したバグについてまとめていきたいと思います。ちなみに制作にあたって jQuery を使っていますので、Javascript の話の中に jQuery が普通に出てきますのでよろしくお願いします。
Javascript のデバッグ
Javascript のデバッグは Firebug が便利です。

Firebug を起動して、コンソールを有効にすることでエラーが発生している行などが分かります。
私は Javascript を本格的に触るまでは、適当な場所で alert() して、ここまでの行は問題ないな！なんていうテストをしていました…。
要素内のテキストを取得する text() の IE シリーズでの挙動
jQuery で要素内のテキストを取得することができます。

例えば以下のようなタグがあるとします。

1
<h2>テキスト</h2>

これは、Javascript の方で以下のように書けば、テキストという部分だけを取得することができます。

1
$('h2').text();

通常こうすれば、テキストという文字が取得できるとは思うんですが、IE シリーズで実行するとテキスト という、半角スペースが入った値が返ってきます。
とても繊細な処理、例えば文字列と文字列の比較を行う場合、半角スペースが入っていると問題が発生してきますね。
解決策ですが、私の場合は以下のように文字列内の半角スペースを全て除去するようにしています。

1
hoge.replace(/ /g, "");

textarea 内を Javascript や Ajax などで動的に文字列の書き変えを行うと改行コードが消滅する
textarea の中に改行を含めた文章を入れますと、改行コードが全て吹っ飛びます。

その場合の解決策が textarea ごと書き変えるというものがあります。
また、他の方からお聞きしたんですが、textarea に ja を設定すれば良いのではないかという話ですが、試す気力がないのでやっていません。次同じ問題にぶつかったら真っ先に試します。
Cookie の限度
Javascript とは関係のない話になってしまいますが、Cookie にも制限があります。配列にしてデータを入れたとしても、ある程度量が多くなるとエラーでページにアクセスできなくなってしまいます。

解決策としては、Cookie に情報を書き込む段階で20配列程度で、これ以上追加できませんと表示することです。
これくらいですかね。

他にもいろいろとバグがありましたが、わざわざ報告するほどでもないので割愛させていただきます。

誰かの参考になれば幸いです。



Javascript で9つの項目のうち3種類をランダムに表示させるコード
Sorai — Fri, 05 Mar 2010 13:00:07 +0000
普段は PHP ばかり書いていますが、今日は要求があったので Javascript 書いてみました。気分的に jQuery は使いません。
以下の CSS を用意しておきます。

1
2
3
.rand_item {
   display: none;
}

HTML に .rand_item と付加すればデフォルトで非表示になりますね。

要はこれを Javascript で表示に変更、class を変更してしまえば良いのですよ。

ちなみに、各項目には id で rand_01 と識別番号を付けておく必要がありますよ。

1
2
3
4
5
6
7
8
9
10
11
<ul>
	<li id="rand_01" class="rand_item">テスト</li>
	<li id="rand_02" class="rand_item">テスト</li>
	<li id="rand_03" class="rand_item">テスト</li>
	<li id="rand_04" class="rand_item">テスト</li>
	<li id="rand_05" class="rand_item">テスト</li>
	<li id="rand_06" class="rand_item">テスト</li>
	<li id="rand_07" class="rand_item">テスト</li>
	<li id="rand_08" class="rand_item">テスト</li>
	<li id="rand_09" class="rand_item">テスト</li>
</ul>

それで以下が Javascript のコード。

ページを読み込むと自動的に起動して、ランダムに3個表示します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
window.onload=function() {
   var randnum = 0;
   var exist = new Array();
   var count = 0;
   var run = 0;
   get_rand:
   while(run < 3) {
      randnum = 1+Math.floor(Math.random()*9);
      exist[count] = randnum;
      count++;
      for(var i = 0, n = exist.length; i < n-1; i++) {
         if(randnum == exist[i]) {
            continue get_rand;
         }
      }
      document.getElementById('rand_0' + randnum).className = 'rand_item_open';
      run++;
   }
}

基本的にコードにコメント書くの好きじゃないのでごめんなさい。

こういうのは裏で function とかにしておいて、そこではコメント盛りだくさんってのが私の趣味というかやり方です。



return false で動作を停止させようとするとき return function() で上手くいった
Sorai — Sat, 25 Jul 2009 09:59:50 +0000
ある特定条件の時だけ、return: false で動作を停止させようと思っても停止させることができませんでした。

1
<input type="submit" value="次のステップへ" onClick="Change()" />

でも次のようにしたら上手く行ったんですね。

1
<input type="submit" value="次のステップへ" onClick="return Change()" />

まぁーなんとなく理由わかるんだけど、自分は難しい言葉とか使って説明することはできません。
もう4年くらい Web やってるんですけど、難しい言葉で説明したり、人に教えたり、人と同じものを開発したりって苦手です。自分独自の手順で作成していったり、学んだりするんで、これが正しいとかこれは間違いっていう意見をしっかり持った人は昔から苦手ですね…。
もちろん中学校では順位最下位でした…(笑)



Javascript で match とかの正規表現で利用する文字列のキーワードなどなど
Sorai — Sun, 19 Jul 2009 12:58:26 +0000
Javascript も match とかでパターンマッチができて、正規表現も使えるんですね。ただ、正規表現で利用する文字列のキーワードが PHP と微妙に違って結構焦りました。
以下は数字以外の文字が入力されたときだけ警告ダイアログを表示するスクリプトです。

1
2
3
if(document.getElementById(name).value.match(/[^0-9]+/)){
window.alert('数字じゃないよ');
}

[ から ] の中に ^ が入ってますよね。これが入ると指定した文字列以外の文字と一致になるようです。PHP とかだったらちょっと違ったような気がしたので、付いていけなくなってしまったのかと思って焦りました。

以下のページが大変役に立ちました。

match/JavaScriptリファレンス



Javascript で警告ダイアログ(アラート)を表示させる方法
Sorai — Sun, 19 Jul 2009 12:36:51 +0000
Javascript でポン！とかピョイーン！という音が鳴る警告ダイアログを表示させるには以下の様にします。

1
2
3
function hoge(){
window.alert('空が好きな人のメモ帳');
}

最近 Javascript をやるようになりまして、かなり便利ですね。簡単なチェックや訪問者側の意味不明な動きを監視したりチェックしたり補正するのには Javascript が一番だと感じました。わざわざ PHP を使うまでもない時や PHP ではできないことなどをやるときに大活躍！



Javascript でポップアップウィンドウを開く方法と親ウィンドウへリンクを飛ばす方法
Sorai — Sat, 27 Jun 2009 09:43:14 +0000
Javascript でポップアップウィンドウを開いて、開いたポップアップウィンドウの中にあるリンクをクリックするとメインウィンドウのページが切り替わる方法と、IE と Firefox の動作の違いをメモしました。誰かの参考になれば幸いです。
Javascript でポップアップウィンドウを開く方法
JavaScript: ポップアップウインドウの開き方 | Bowz::Notebook を参考にすると以下のような感じ。

1
<a href="javascript:window.open('popup.html','windowname','width=350,height=450');">開くa>

でもこの方法だと Javascript を on にしていないとリンク先が開けないので、以下のように記述すると開けるようになったり、右クリックからのいろいろな操作ができるようになったりするそうです。

でも Javascript を on にしていない人なんてそういないだろうと思いますので、以下はここだけでの話ということで…。

1
<a href="popup.html" onClick="javascript:window.open('popup.html','windowname','width=350,height=450');return false;">開くa>

Firefox ではこのままだとポップアップウィンドウを開いた後に [object Window] が表示されてしまうと思うので、スクリプトの末尾に void(0); を追加することで回避できます。

でいご堂日記 | [Firefox] Javascript の window.open で [object Window] が表示されるときは

1
<a href="javascript:window.open('popup.html','windowname','width=350,height=450');void(0);">開くa>

ポップアップウィンドウのリンクを親ウィンドウに飛ばす
ポップアップで開いたサブウィンドウ内にあるリンクを親ウィンドウで表示させるには、いろいろ方法があります。

JavaScript/ウィンドウ/サブからメインウィンドウを操作する – TAG index Webサイト

教えて！ Watch ポップアップから親ウィンドウへリンクを飛ばす？

私の場合は親ウィンドウへ名前を付けて、target 属性で親ウィンドウに付けた名前を指定して開く方法でやりました。
1. まず以下のようにしてメインウィンドウに名前を付けておきます。

1
2
3
4
5
<script language="JavaScript">

script>

2. 開いたウィンドウ内に表示するリンクは以下のような感じです。

1
<a href="content.html" target="MainWindow">テキスト</a>

Firefox でしかテストしていないので、心配ですが多分いけると思います。

あと、以下もちょっと気になります。また今度まとめの続き書きますね。

[J] a タグの href に # とか javascript:void(0) とかする理由 – Jamz (Tech)



IE PNG Fix を組み込んだページを IE6 で閲覧しようとするとフリーズすることがある
Sorai — Tue, 21 Apr 2009 16:06:31 +0000
以前JavaScriptやCSSで簡単にIE6でアルファ画像(透過png)を使う方法で IE PNG Fix を紹介しましたが、なぜか最近これのせいで IE6 でページを閲覧しようとするとフリーズしてしまうようになってしまいました。この原因を発見するのに8時間ほどの時間を要しました。
この問題の発見までの経緯
まず私は最近 Ajax をページに組み込んだので、Ajax が原因だと思っていました。最初に Ajax で prototype.js の Ajax.Updater を使用してページを部分的に更新させようとしているのですが、これは利用者がボタンを押すと更新されるものなので、ページを表示しただけではこの部分が表示されません。なので、最初に Javascript の onload を使ってページを部分的に更新させることによって表示させています。IE では onload が何かダメだった記憶があるので、onload がいけないのだと思い onload に頑張って細工を加えたりしてみたんですが、全然ダメ。仕方無いので IE6 では Ajax を使っているコンテンツを非表示にすることにしました。そして、利用者には「IE6 では機能をご利用いただけません」という表示をすることにしました。
利用者のブラウザが IE6 かを PHP で感知して、IE6 であれば Ajax を用いた全ての機能を非表示にする。レイアウトもオシャレになるように調整する。
終わったー！と思って、IE6 で更新！あれっ！？
ページはフリーズしました。
どうやら Ajax が原因ではないらしい。通りで、Google で onload IE6 や Ajax.Updater IE6 で検索しても事例が見つからなかったわけだ。そして3歩進んで2歩下がった私は、何度か更新ボタンを押しているうちに、何を血迷ったのか Google Adsense 広告の読み込みに時間がかかっているのではないかと思いだした。幸いサイトは部分毎に切り分けて PHP で include しているので削除は簡単。でもやっぱり HTML と PHP が混じっている中から広告を削除するのには時間がかかった。でもページはフリーズした。
どうやら Google Adsense 広告は原因ではないらしい。通りで Adsense IE6 で検索しても事例が見つからなかったわけだ。そして3歩進んで2歩下がった私は、次は何を血迷ったのか Google Analytics のトラッキングコードに問題があるのではないかと思った。ちょっと削除して確認してみたがフリーズした。
おかしいなぁーということで、試しに IE6 で Javascript を無効にしてみたら一瞬で表示された。やっぱり Javascript に問題があるんだ。
headタグの中にある Javascript を削除したり弄ってるうちにとうとう発見！ IE PNG Fix が犯人だったみたい。
面倒くさかった。一時的に Ajax を IE6 のユーザーには使えないようにしていた自分が恥ずかしい。自分は Javascript 関連の問題があるといつもこうだ。Javascript って PHP と違ってとっつきにくいので苦手なんですよね。でも PHP と違ってユーザーの PC を使って動くので、どんどん使えた方が絶対良い。PHP はサーバーサイドなプログラムだから利用者が増えるとキツイ。少しずつ Javascript でもできる処理は Javascript で行わせるようにしていきたいですね。
フリーズの原因
ちなみに IE PNG Fix の何が問題だったのか、なぜ今まで問題なかったのに突然フリーズするようになってしまったかわかりません。Javascript を少しずつでも理解を深めていくうちに、原因がわかれば追記します。でも Javascript をマスターする前に、できれば英語が読めるようになりたいです。



Firebug は最強の開発ツール。もっと早く出会いたかった
Sorai — Wed, 08 Apr 2009 01:52:33 +0000


Firebug を使えば複雑なボックスを視覚化してくれるので、CSS や HTML に詳しくない初心者にはかなり役立つツールではないでしょうか。
width や padding や border を同時に指定すると、どうしても想像していたものと違ったボックスが誕生してしまうことがあります。まだまだ初心者の頃は、これらについてあまり深く理解していないので、なかなか想像通りのものを作ることができません。今では私も完全に理解しているので、ボックスの構成で悩むことはありませんが、完全に理解するまでには結構な時間がかかりました。
でももし Firebug にもっと早くから出会っていれば、もっと早く理解することができたかもしれません。
ちなみに Firebug には Javascript をリアルタイムに編集デバックすることができます。ボックスの視覚化だけではなく、こんな物凄い機能もあるみたいなので、今すぐインストールしましょう。
Firebug の使い方を説明しているページ
Ajax初心者入門講座: Step4・Firebugでデバッグする

Ajax初心者入門講座: Step5・Firebugで変数の値を変更する

Ajax初心者入門講座: Step6・FirebugでCSSを編集する

Ajax初心者入門講座: Step7・Firebugでボックスを視覚化する



初めて Cookie を PHP や Javascript で送信したり削除してサイトをパワーアップ
Sorai — Thu, 19 Mar 2009 04:55:54 +0000
Google で「カロリー」と検索すると検索結果の2番目に出てくる驚異的な個人サイト「食品の摂取カロリー計算」は知らない人はいないほどカロリー系のサイトの中では有名です。このサイトを見習って、私のサイトにもカロリー計算コーナーを設置したいと思います。
食品の摂取カロリー計算では Javascript を使用してカロリーの計算を実現しているようですが、私は Cookie を使ってカロリーデータベースに計算フォームを付けることにしました。
でも Cookie を使うのは初めてなので、いろいろと勉強してみました。一応以下のページにすべてまとめてありますが、詳しく掘り下げて知ろうと思うとこのページだけではダメなので、それを以下にまとめました。

とほほのCookie入門
Cookie には制限がある
1つのクッキーに保存できるのは最大で4096バイト、1台のサーバが同じコンピュータに対して発行できるクッキーの数は20個という制限が設けられています。
PHPスクリプト講座：クッキーについて — そふぃのphp入門より抜粋。
ここで疑問が。以下のどれが正解かわからなくなりました。

サーバーは20個発行したら、それ以上は発行できなくなる。
サーバーは20個発行した後、21個目を1個目を削除し発行する。
ブラウザは同一サーバーから20個 Cookie を受け取ったら、それ以上受け取れなくなる。
ブラウザは同一サーバーから20個 Cookie を受け取ったら、21個目を1個目を削除して受け取る。

もし1と2のどちらかが正解の場合は、共有のレンタルサーバーを使っている人には、事実上 Cookie を使えないということになり、Cookie はちゃんとしたサイトじゃないと使えなくなってしまう。そしてもし3が正解だったら最初に20個発行したもの勝ちになってしまうので絶対違う。
消去法で行くと4つ目の解釈で正しいと思うんですが、今の私にははっきりとした正解はわかりません。

でもとりあえず同じサーバー内の人のサイトには、そう簡単にめぐり合うことはないと思うので大丈夫だと思います。このまま Cookie について勉強していきます。
Cookie を送信する

1
2
3
$name = '名前';
$value = '値';
setcookie($name,$value);

単純にこのような形で送信できます。でも先ほど書いたように同一サーバーから20個しかCookieを送信することはできないので、できるだけ最小限の個数で抑えるために配列を使ったりするのが一般的みたいです。

PHP: setcookie – Manual

PHPスクリプト講座：配列を利用したクッキー — そふぃのphp入門
Javascript を使ってクッキーを送信する
PHP では  より前の部分でクッキーの送信などをしなければいけないので、訪問者にページの表示が完了してから Cookie を送信させるには PHP では不可能です。ということで自ずとJavascript を使うことになるみたいです。Javascript はめちゃくちゃ扱いにくいから、ここ本気出して考えました。
まずはイヌでもわかるJavaScript講座で紹介されているスクリプトをそのまま使ってみるパターン。このサイトはかなり役に立ちました。感謝！

1
2
3
4
5
6
7
function mySetCookie(myCookie,myValue,myDay){
   myExp = new Date();
   myExp.setTime(myExp.getTime()+(myDay*24*60*60*1000));
   myItem = "@" + myCookie + "=" + escape(myValue) + ";";
   myExpires = "expires="+myExp.toGMTString();
   document.cookie =  myItem + myExpires;
}

スクリプトの解説はイヌでもわかるJavaScript講座にありますので省きますです。

一応私が一番重要(厄介)だと思うところは escape() の部分でして、これは PHP ではデコードすることはできません。でもそれを PHP でもデコードできるようにした人がいました。すごいです。
PHP: utf8_encode – Manual

unescape(PHP)関数 Javascript版escape日本語POST対応 PEAR::HTML_AJAX – PHP::PEAR – dozo PukiWiki

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

/**
 * Function converts an Javascript escaped string back into a string with specified charset (default is UTF-8).
 * Modified function from http://pure-essence.net/stuff/code/utf8RawUrlDecode.phps
 *
 * @param string $source escaped with Javascript's escape() function
 * @param string $iconv_to destination character set will be used as second paramether in the iconv function. Default is UTF-8.
 * @return string
 */
function unescape($source, $iconv_to = 'UTF-8') {
  $decodedStr = '';
  $pos = 0;
  $len = strlen ($source);
  while ($pos &lt; $len) {
      $charAt = substr ($source, $pos, 1);
      if ($charAt == '%') {
          $pos++;
          $charAt = substr ($source, $pos, 1);
          if ($charAt == 'u') {
              // we got a unicode character
              $pos++;
              $unicodeHexVal = substr ($source, $pos, 4);
              $unicode = hexdec ($unicodeHexVal);
              $decodedStr .= code2utf($unicode);
              $pos += 4;
          }
          else {
              // we have an escaped ascii character
              $hexVal = substr ($source, $pos, 2);
              $decodedStr .= chr (hexdec ($hexVal));
              $pos += 2;
          }
      }
      else {
          $decodedStr .= $charAt;
          $pos++;
      }
  }
 
  if ($iconv_to != "UTF-8") {
      $decodedStr = iconv("UTF-8", $iconv_to, $decodedStr);
  }
 
  return $decodedStr;
}
 
/**
 * Function coverts number of utf char into that character.
 * Function taken from: http://sk2.php.net/manual/en/function.utf8-encode.php#49336
 *
 * @param int $num
 * @return utf8char
 */
function code2utf($num){
  if($num&lt;128)return chr($num);
  if($num&lt;2048)return chr(($num&gt;&gt;6)+192).chr(($num&amp;63)+128);
  if($num&lt;65536)return chr(($num&gt;&gt;12)+224).chr((($num&gt;&gt;6)&amp;63)+128).chr(($num&amp;63)+128);
  if($num&lt;2097152)return chr(($num&gt;&gt;18)+240).chr((($num&gt;&gt;12)&amp;63)+128).chr((($num&gt;&gt;6)&amp;63)+128) .chr(($num&amp;63)+128);
  return '';
}
?>

で、せっかくこういうのを見つけてからアレなんだけれども、PHP を使っているんだったら Cookie に送信する文字列を PHP で事前にエンコードしておけば、Javascript 側で escape する必要がなくなり、結果的に PHP でデコードすることができるようになるので、こっちの方が手早いんではないかと思うのですが実際はどうなんでしょうか……。
Javascript で後から追加する場合の注意点
Javascript で追加すると確かに Cookie は送信されるけどページの再読み込みを行わないと Cookie が送信されたのか訪問者にはわかりません。なので、ページを再読み込みさせる必要があります。Javascript とかいろいろ何が正しいのかわかりませんが、私は Cookie の送信をしたと同時に Javascript の location.reload() でページを再読み込みさせることにしました。

location.reload()?JavaScriptリファレンス
こちらは Web サーバのデータからリロードされ、最新の状態に更新されます。

1
<input type="button" value="計算" onclick="SetCookie('name','value');location.reload(true)" />

こちらはキャッシュからリロードされます。サーバー与える負荷を減らすためにはこちらがいいかもですね。

1
<input type="button" value="計算" onclick="SetCookie('name','value');location.reload(false)" />

Cookie を追加すると同時にページをリロードさせ、Cookie をコンテンツに反映させてます。ちなみに onclick に複数の何かを挿入する場合はセミコロンで区切るらしいです。
追記(2009/4/10): Ajax を使えばページを部分的にリロードして軽量化できる
Cookie を反映させるためにページ全体を読み込むのはスマートじゃありません。あれからいろいろと勉強をして Ajax が使えるようになったので、やる気のある人は Ajax もついでに勉強してみてはどうでしょうか？

Ajax でページの一部だけを部分的にリロードして軽量化したいのだが IE は未対応 | 空が好きな人のメモ帳
Cookie を削除する
クッキーの削除は簡単です。以下のページが丁寧でした。

PHPスクリプト講座：クッキーの削除 — そふぃのphp入門
クッキーの削除の仕方は二通りあり、１つ目は setcookie() でクッキー名のみを指定する方法。

1
setcookie('クッキー名');

2つ目は、有効期限を過去にする。

1
setcookie('クッキー名', '', time() - 1);

Cookie には path がある
とても複雑で意味が分からないんですが、これを完璧に検証してくれた人がいるみたいです。感謝！

Cookie(クッキー)の届く範囲 (あいまいモード)
ただ Javascript での path の指定の仕方がわかりかせんでしたがとほほのCookie入門のテストページのソースにわかりやすくコメントアウトして記述してくれていましたのでなんとか解決。



JavaScriptやCSSで簡単にIE6でアルファ画像(透過png)を使う方法
Sorai — Sun, 08 Mar 2009 09:25:37 +0000
IE6はアルファ画像(透過png)が使えませんが、今回紹介する方法で簡単にIE6でもアルファ画像を使うことができるみたいなので、いつも通りメモしておきます。

ちなみに透過を活用することによって、さらにデザインの幅が広がるかもしれません、あー楽しみかもです。透過を活用したウェブデザインは以下のサイトでいろいろ紹介されています。

透過をきれいに使ったウェブデザインいろいろ | DesignWalker
IE PNG Fix
IE PNG Fix(英語)で簡単にIE6でもアルファ画像を使うことができるようになります。ちなみに2008年7月17日にIE PNG Fix 2が公開されていて、さらに問題点が改善されてるようです。ちなみに以下のページでは分かりやすく導入までの手順を分かりやすく紹介されています。

IE PNG Fix Alpha 2を使ってみた。 | ちぷろぐ
ついでに私もIE PNG Fixの使い方で簡単に導入方法を説明しているので参考にしてみてください。
alphafilter.jsライブラリを使って指定した画像だけに透過処理を与える
これは導入までが簡単。解説も日本語だしclassにalphafilterと追加記述するだけで簡単に処理を行えます。ただし背景画像には対応していないので、背景画像にも透過処理を加えたい場合は先ほど紹介したIE PNG Fixを使うか、さらに追加でCSSに細工をする方法があります。CSSに細工をする方法は後ほど紹介しますです。

アルファ画像を扱うalphafilter.jsライブラリ[to-R]
CSSに細工をする。
細工というかスターハックを使ってIE6にのみ適応するスタイルを記述します。またIE6の独自拡張フィルタなどを使ってあれこれします。

透過pngを表示する-CSS TIPS
それが以下のコードです。

1
2
3
4
5
6
7
8
9
div.alpha{
	width:100px;
	height:200px;
	background:url("alpha.png");
}
* html div.alpha{
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png',sizingMethod='scale');
	background:none;
}

ですが、このままでは要素に合わせて画像がびよんびよん伸び縮みするので、画像のサイズを変更したくない人は以下のように記述してみます。太字の部分を書き換えました。

1
2
3
4
5
6
7
div.hoge{
	background:url("alpha.png");
}
* html div.hoge{
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='hoge.png',sizingMethod='crop');
	background:none;
}

IEの独自拡張機能で良く分かりませんが、以下のサイトが詳しいみたいです。

AlphaImageLoader – filter,フィルタ
いろいろと書きましたが、最初からIE6がなければこんな面倒なことはしなくて良いはず。早くIE7にみんな強制以降させないといけないかもですよ。まぁIE7にもいろいろとバグはあるし、IEを使ってるといろいろと面倒なことが多いはず。みんなが早めにモダンブラウザの良さに気づいて変えてくれれば良いと思いますです。



IE PNG Fix の使い方
Sorai — Sun, 08 Mar 2009 09:06:14 +0000
今回はIE PNG Fixを使ってみたので、使い方をついでにメモしておきました。ちなみにIE PNG Fix 2が去年登場してるみたいなので、ここではIE PNG Fix 2の使い方を紹介します。

IE6 透過PNG表示、IE PNG Fix 2登場 | エンタープライズ | マイコミジャーナル
ダウンロード
Beta Testing Areaにアクセスして、IEPNGFix v2.0 Alphaをクリックしてダウンロードします。
ファイルを組み込む
ダウンロードしたファイルを解凍したらiepngfix.htc、blank.gif、iepngfix_tilebg.jsの3つのファイルを任意のフォルダにコピーします。

そして、CSS内に以下のように記述してiepngfix.htcを読み込ませます。太字のところは自分の環境に合わせて書き換えてください。

1
img, div { behavior: url(iepngfix.htc) }

そしてHTMLのからの部分に以下のように記述します。これも自分の環境に合わせて書き換えてください。

1
<script type=”text/javascript” src=”iepngfix_tilebg.js”></script>

そして最後にblank.gifをiepngfix.htcにちゃんと読み込ませないと、IE6なので透過処理をさせたときに画像が無しみたいな状態になって困るかもなので、ちゃんと読み込ませます。太字の部分がパスになります。絶対パスでの記述が良いと思いますです。

1
IEPNGFix.blankImg = 'blank.gif';




Javascriptで表示を切り替えたり、classを変更したりする方法。
Sorai — Tue, 17 Feb 2009 13:40:21 +0000
PHPは動的なページを作る際に有効だけど、Javascriptのように小さな変化を作るのには不向きだなーと感じます。というわけでJavascriptをさっそく本格的に使うことにしたので、ちょっとしたメモを今回から開始。ついでにJavascriptのカテゴリも増設しました。
Javascriptで表示・非表示を切り替える。
以下のサイトは初心者にも分かりやすくソースをまとめてくれています。

WEBプログラム覚書::表示内容の切り替え(JavaScript)
JavascriptでCSSを変更する。
上記のページのソースを応用することで簡単にできます。

1
document.getElementById("id_name").className = "new_class_name";