Posts Tagged ‘Javascript’

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

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

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

1

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

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

1

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

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

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

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

Javascript で match とかの正規表現で利用する文字列のキーワードなどなど

Javascript も match とかでパターンマッチができて、正規表現も使えるんですね。ただ、正規表現で利用する文字列のキーワードが PHP と微妙に違って結構焦りました。

以下は数字以外の文字が入力されたときだけ警告ダイアログを表示するスクリプトです。

1
2
3

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

[ から ] の中に ^ が入ってますよね。これが入ると指定した文字列以外の文字と一致になるようです。PHP とかだったらちょっと違ったような気がしたので、付いていけなくなってしまったのかと思って焦りました。
以下のページが大変役に立ちました。
match/JavaScriptリファレンス

Javascript で警告ダイアログ(アラート)を表示させる方法

Javascript でポン！とかピョイーン！という音が鳴る警告ダイアログを表示させるには以下の様にします。

1
2
3

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

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

Page 1 of 212