Archive for the ‘Javascript’ Category

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

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

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

1

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

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

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

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

基本的な使い方

HTML の書き方

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

1
2
3
4
5

<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)

コード

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

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 で祝日を手動で設定できるカレンダーを出力するコード

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

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

使い方

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

1
2
3
4

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

コード

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
62

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 = "<table summary=\"" + when + "のカレンダー\">\n";
	calendar += "<caption>" + when + "<\/caption>\n<tr>";
	for(i=0; i < 7; i++) calendar += "<th>" + dow[i] + "<\/th>";
	calendar+="<\/tr>\n<tr>";
	for(i=0; i < week; i++,j++) calendar += "<td><\/td>";
	for(i=1; i <= lom[month]; i++) {
		calendar+="<td";
		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<tr>";
			j=0;
		}
	}
	for(i=j; i > 6; i++) calendar += "<td><\/td>";
	calendar += "<\/tr>\n<\/table>\n";
	return calendar;
}

Amenti さんありがとう！

IE シリーズで Javascript の getYear() の値が違うための対処法

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

1

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

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

Javascript を有効にする方法

Javascript が無効になっていると、動的な表現のあるサイトを楽しめなかったり、ちょっとした便利機能を利用できなくなってしまいます。

Internet Explorer 6 で Javascript を有効にする方法

ツール -> インターネットオプション -> セキュリティ -> レベルのカスタマイズ -> セキュリティの設定

下にスクロールしていくと、アクティブスクリプトがあります。
ここを有効にするを選択し、OK ボタンを押してください。

すると警告画面が表示されますので、これを OK してください。

最後にインターネットプロパティで適用 -> OK の順にクリックしてください。

その他のブラウザは以下のページを参考にすると良いです。
Yahoo! JAPANのページ全般 ヘルプ – JavaScriptの設定方法

Javascript だけで動作する簡易ショッピングカート Javascript Cart

Javascript だけで簡易ショッピングカートを作りました。
jQuery と Javascript そのモノの勉強になりました。

Javascript Cart – Download

誰でも利用できるかは分かりませんが、もし使えたら使ってください。

簡単な仕組み

Cookie に最大20個まで商品を入れることができます。
HTML を書く段階で、決まった書き方をしていただければタグの中の情報を自動的に取得してショッピングカート機能を実装できます。
IE6、IE7、IE8、Safari、Firefox、Mac 版 Firefox、Google Chrome で動作確認済みです。

以下、使い方を説明していきます。

商品を用意する

以下は解説用にコードを最も短くしています。実際は table タグなどに summary などを指定したり、内容を増やしてコンテンツを充実させるなどしていただいても問題ありません。

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

<table id="cart_1">
   <tr>
      <th><img src="img/cake_1.jpg" alt="cake" /></th>
      <td>
         <h2>テスト商品名</h2>
         <p class="price">価格  &yen;<span>2,625</span></p>
         <dl>
            <dt class="item_1">テスト項目</dt>
            <dd>
               <select>
                  <option value="テスト1">テスト1</option>
                  <option value="テスト2">テスト2</option>
                  <option value="テスト3">テスト3</option>
               </select>
            </dd>
            <dt class="item_2">数量</dt>
            <dd>
               <select>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
               </select>
            </dd>
         </dl>
         <input type="button" tabindex="1" class="cart_button" value="買い物カゴに入れる" />
      </td>
   </tr>
</table>

#1 table に id 名を付ける

table に id 名を付けます。id 名は固定で cart_x としていきます。x は数値で連番が好ましいです。制限はありません。
また、id に cart_x と付いていれば table でなくても構いません。
ひとつずつの商品は、この id で区切って行きます。

#5 h2 に商品名を入れる

#cart_x 内の h2 内のテキストを商品名として取得します。
そのため、#cart_x 内では h2 要素を1回までの使用に制限してください。

先程の HTML であれば、商品名は「テスト商品名」です。

#6 p.price span 内に価格を書く

#cart_x 内の p.price の中の span 内に入っている数値を価格として取得します。
価格はひとつしか設定できません。また、#cart_x 内では span 要素の使用を一回に制限してください。

先程の HTML であれば、価格は ¥2,625 です。

#8 定義リストに項目名と項目を設定する

dt に class 名 item_x を付けます。
こちらにはいくつか制限があります。

  • item_x の x は1から始まり、連番である必要があります。item_1 の次の値は item_2 、item_9 の次の値は item_10 です。この連番に最大値制限はありません。
  • 項目の中で、どこでも良いので必ず数量という項目を作ります。数量によって金額の計算を行います。

dt のテキストを項目名、dd のオプションを選択項目として取得します。

#25 買い物カゴに入れるボタン

input type=”button” に対して、class 名 cart_button を付けます。
また、tabindex には最初の1行目で設定した cart_x の x の部分を入れます。
先程の HTML であれば 1 を入れる必要がありますので、1 が入っています。

ちなみに、class=”cart_button” と tabindex=”x” が付いていれば、input type=”button” である必要はありません。

ショッピングカートの設定

ショッピングカートの中身を確認する方法です。

中身を確認するだけで良い場合

以下のようなタグをどこかに書いてください。

1

<input type="button" id="print_cookie" value="Cookie Open" />

こちらをクリックしますと、アラートによって簡単なカートの中身が確認できます。ただし、金額の計算や文字列の処理などは行われません。かなり簡易的なものです。

中身を確認しつつ削除などをする場合

以下のようなタグをどこかに書いてください。

1
2
3
4

<h2>カートの状況</h2>
<div id="cart_body">
</div>
<p><input type="button" id="cookie_all_clear" value="カートを空にする" /></p>

h2 を書いておくと分かりやすくなります。
#cart_body の中に以下のように定義リストで商品が表示されます。

1
2
3
4
5
6

<dl>
  <dt class="clearfix"><input type="button" value="削除" id="cart_0_delete" class="delete_button">テスト商品1</dt>
  <dd>項目1:テスト1 / 数量:1 / ¥2,625</dd>
  <dt class="clearfix"><input type="button" value="削除" id="cart_0_delete" class="delete_button">テスト商品2</dt>
  <dd>項目1:テスト1 / 数量:1 / ¥2,625</dd>
</dl>

HTML の中に input タグがあるかと思いますが、こちらをクリックしますと、その商品をカートから削除することが可能です。

商品を注文する

簡易ショッピングカートなので注文はメールで行います。
以下の textarea タグなどを書いて起きますと、簡単にメール用の書式にした注文内容を挿入することが可能です。ユーザには、メール用書式の注文内容を確認してもらい、送信ボタンを押すことで注文をしてもらいます。

1
2
3
4
5
6
7

<div id="textcart">
   <form method="post" action="./">
      <div id="textarea"><textarea rows="10" cols="5">カートの内容をテキストベースで挿入してください。</textarea></div>
      <input type="button" id="cart_text" value="カートの内容をテキストベースで挿入" />
      <input type="submit" value="注文をする" />
   </form>
</div>

#cart_text と #textarea、それらの親である #textcart は必須です。
カートの内容をテキストベースで挿入をクリックしますと、textarea の部分にテキストベースの注文内容が挿入されます。
こちらをお好きなように加工するなり送信するなりしてください。

以上、Javascript Cart の説明でした。

Javascript Cart の制作で遭遇したバグまとめ

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種類をランダムに表示させるコード

普段は 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 とかにしておいて、そこではコメント盛りだくさんってのが私の趣味というかやり方です。

jQuery と prototype.js のコンフリクトを回避する方法

jQuery と prototype.js を同時に使うとコンフリクトを起こします。なぜなら、jQuery はprototype.js と同じく(正確には同じではないのですが) document.getElementById() のショートカットとして $() を使っているためです。
より正確な説明は以下のページが詳しいです。
prototype.jsとThickBox(jQuery)がコンフリクト｜blog｜たたみラボ

解決策としては、どちらか一方の $ function を別の文字に置き換えてしまえば良いかもしれないというわけで、今回は jQuery の $ function を j$ に変えてみましょう。

例えば以下のコードの場合。

1
2
3
4
5
6
7
8
9
10
11
12
13

$(function(){
	$("table").each(function(){
		$(this).find("tr:even").addClass("even");
	});
	$("tr").hover(
		function() {
			$(this).addClass("hover");
		},
		function() {
			$(this).removeClass("hover");
		}
	);
});

以下のように $ を j$ に置き換えることで解決できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var j$ = jQuery;
j$(function(){ 
	j$("table").each(function(){
		j$(this).find("tr:even").addClass("even");
	});
	j$("tr").hover(
		function() {
			j$(this).addClass("hover");
		},
		function() {
			j$(this).removeClass("hover");
		}
	);
});

確か j$ じゃなくても jQuery と書いても動くはずです。すいません、試してません。短いコードが好きかもなので。

return false で動作を停止させようとするとき return function() で上手くいった

ある特定条件の時だけ、return: false で動作を停止させようと思っても停止させることができませんでした。

1

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

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

1

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

まぁーなんとなく理由わかるんだけど、自分は難しい言葉とか使って説明することはできません。

もう4年くらい Web やってるんですけど、難しい言葉で説明したり、人に教えたり、人と同じものを開発したりって苦手です。自分独自の手順で作成していったり、学んだりするんで、これが正しいとかこれは間違いっていう意見をしっかり持った人は昔から苦手ですね…。

もちろん中学校では順位最下位でした…(笑)

Page 1 of 212