http://q.hatena.ne.jp/1367919371#a1200234 のつづきですみません。


ベストアンサーの方のご回答に挑戦したいのですが、現時点で 
もうさっぱりです。m(_ _)m
いったい、何からはじめて いいか?????

 jQueryを読み込み
 cube.jsを読み込む

↑の時点で、自分の頭は???????です。。。。。

ご教示いただけないでしょうか。 当方Windows7です。
今の時点で、わかっているのは、jQueryというのをダウンロードし
なにかしら するだろうということだけです。

よろしくお願いします。jQueryって いうのは、無料ですよね・・・

もう少し おおまか(ではないかm(_ _)m) ご教示ください。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2013/05/08 16:22:36
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:a-kuma3 No.1

回答回数4974ベストアンサー獲得回数2154

ポイント250pt

「javascript のファイルを読み込む」は、HTML に script タグを書く、のと同じ意味です。

<script type="text/javascript" src="スクリプトファイル"></script>

jQuery やら cube.js をダウンロードして、Webサーバから見える位置に置きます。
例えば、HTML ファイルと同じディレクトリにスクリプトのファイルを置いたなら、こんな感じのコードを HTML の head タグの中に書きます。

<head>
...
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="cube.js"></script>
...
</head>


jQuery は、ダウンロードページから取ってきても良いですが、Google がホスティングしてる(みんなが見える場所に置いて、使って良いよ、って言ってくれてる)ものがあります。
例えば、こんな感じ。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


cube.js の方は、クローバーの画像を使うように変更しなきゃいけないので、↓をブラウザで開いて、保存して使う必要があります。
http://nejimaki-act.com/lab/cube/js/cube.js



追記です。

ぽけっとしすてむ さんが、はてなブログに書いたのと被っちゃいましたが、jsFiddle でサンプルを作ってみました。
cube.js の処理内容をコピペして、クローバーの画像を使うように、ちょこちょこ変えてます。
http://jsfiddle.net/a_kuma3/MbDTy/2/embedded/result/
元の cube.js から、変更した部分には、「★」を付けたコメントを入れてます。

他3件のコメントを見る
id:meichi

これで、どうか ご容赦ください。

2013/05/08 16:21:14
id:a-kuma3

前の質問もそうでしたけど、一週間あるので、ゆっくりと確認して、それから終了すれば良いのに、なんて思いました。
後出しの質問追加が嫌われるときもありますけれど、前の質問は、動かし方を質問しているわけですから、javascript がよく分からないので、組み込み方をもっと噛み砕いて、と言うのは、質問の範疇内だと思いますけどね。

質問を開きっぱなしにしてると、わけの分かんない回答が付くこともありますけど、ポイント配分をしなければ良いだけの話ですし。

2013/05/08 17:00:50

その他の回答1件)

id:a-kuma3 No.1

回答回数4974ベストアンサー獲得回数2154ここでベストアンサー

ポイント250pt

「javascript のファイルを読み込む」は、HTML に script タグを書く、のと同じ意味です。

<script type="text/javascript" src="スクリプトファイル"></script>

jQuery やら cube.js をダウンロードして、Webサーバから見える位置に置きます。
例えば、HTML ファイルと同じディレクトリにスクリプトのファイルを置いたなら、こんな感じのコードを HTML の head タグの中に書きます。

<head>
...
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="cube.js"></script>
...
</head>


jQuery は、ダウンロードページから取ってきても良いですが、Google がホスティングしてる(みんなが見える場所に置いて、使って良いよ、って言ってくれてる)ものがあります。
例えば、こんな感じ。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


cube.js の方は、クローバーの画像を使うように変更しなきゃいけないので、↓をブラウザで開いて、保存して使う必要があります。
http://nejimaki-act.com/lab/cube/js/cube.js



追記です。

ぽけっとしすてむ さんが、はてなブログに書いたのと被っちゃいましたが、jsFiddle でサンプルを作ってみました。
cube.js の処理内容をコピペして、クローバーの画像を使うように、ちょこちょこ変えてます。
http://jsfiddle.net/a_kuma3/MbDTy/2/embedded/result/
元の cube.js から、変更した部分には、「★」を付けたコメントを入れてます。

他3件のコメントを見る
id:meichi

これで、どうか ご容赦ください。

2013/05/08 16:21:14
id:a-kuma3

前の質問もそうでしたけど、一週間あるので、ゆっくりと確認して、それから終了すれば良いのに、なんて思いました。
後出しの質問追加が嫌われるときもありますけれど、前の質問は、動かし方を質問しているわけですから、javascript がよく分からないので、組み込み方をもっと噛み砕いて、と言うのは、質問の範疇内だと思いますけどね。

質問を開きっぱなしにしてると、わけの分かんない回答が付くこともありますけど、ポイント配分をしなければ良いだけの話ですし。

2013/05/08 17:00:50
id:psne No.2

回答回数605ベストアンサー獲得回数334

ポイント200pt

うーん…
psne's diary
上記ブログに適当に実装してみました。(そのうち元に戻ります。)

以下をぺたりと貼り付けると「とりあえず」動きます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" >
window.onload = function(){

	var settings = {
		interval : 300, // cubeを出す間隔
		dur : 30000, // 	cubeが持続する時間
		windowWidth : $(window).width(),
		windowHeight : $(window).height()
	}
	
	// cubeの最終スタイル設定
	var styleFor = {
		height : 29, // cubeの高さ
		width : 22, // cubeの幅
		'border-width' : 0 // cubeの罫線幅
	}
	
	// cubeの初期スタイル設定
	var styleInit = {
		position:'absolute',
		'z-index' : 1,
		display : 'inline-block',
		border : 'solid 0px #eaeaea',
		height : 29,
		width : 22,
		adj : 0,
		'background-image' : 'url( "http://q.hatena.ne.jp/images/question/1367919/1367919371_thumbnail.gif")'
	}
	
	var cube = {
		init : function(){
			$('body')
				.wrapInner('<div style="position:relative;z-index:2">')
				.append('<div style="position:fixed;top:0;left:0;z-index:1" id="cube-area"></div>');
			
			$('#cube-area').css({
				height : settings.windowHeight,
				width : settings.windowWidth
			});
			
			styleInit.adj = styleFor['border-width'] + styleFor['width'];
		},
		add : function(){
			var initX = cube.getRandomX();
			var initY = cube.getRandomY();
	
			var endX = cube.getRandomX();
			var endY = cube.getRandomY();
			
			styleFor.left = endX;
			styleFor.top = endY;
			
			$('#cube-area').append($('<div class="block" />')
				.css(styleInit) // end init
				.css({
					top : initY,
					left : initX,
				})
				.animate(styleFor,{
						easing : 'linear',
						duration : settings.dur,
						complete : function(){
							$(this).fadeOut(300,function(){
								$(this).remove();
							});
						}
					}
				)
			);
		},
		getRandomX : function(){
			return Math.floor( Math.random() * settings.windowWidth - styleInit.adj);
		},
		getRandomY : function(){
			return Math.floor( Math.random() * settings.windowHeight );
		}
	}


	// execute
	cube.init();
	setInterval(function(){
		cube.add();
	},settings.interval);
}


</script>

http://q.hatena.ne.jp/images/question/1367919/1367919371_thumbnail.gif
という部分を、ご自身のサイトにコピーしたクローバーの画像のURLに書き換える必要があります。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません