ランダムリンクの作り方

[新着] Webテンプレートを仮オープンしました



0   名前: naito : 2007/01/04(木) 16:32  ID:oSJutNkO
http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=880に続いて連続での質問申し訳ありません。
外部JavaScriptを使用してバナーに画像を用いクリックの度に
リンク先の変わるランダムリンクを作ろうと思っているのですが、
出来ないで苦戦しております。

(jsというフォルダにrandom_link.jsという外部JavaScriptを作っております。)
僕の細やかの知識上では
外部JavaScriptに
myCnt = 5; // リンク先の数
myTable = new Array( // リンク先の登録
"hajimeni.htm", // はじめに のアドレス
"step1.htm", // Step.1 のアドレス
"aisatu.htm", // Step.2 のアドレス
"getdate.htm", // Step.3 のアドレス
"function.htm" // Step.4 のアドレス
);
function myRndLink(){ // 適当に選んでリンクする関数
myRnd = Math.floor(Math.random()*myCnt); // 0〜(myLine-1)の乱数を求める
location.href = myTable[myRnd]; // リンクする
と記載。

htmに
<script src="js/random_link.js" type="text/javascript"></script>
と記載すれば出来ると思ったのですが、出来ずに四苦八苦しております。
何方かご教授のほどよろしくお願い致します。

1   名前: カヅサツ : 2007/01/04(木) 16:32  [URL]  ID:lY9L7AMa
状況は理解できましたが、それでご質問は何でしょう?
例示されたソースの何が不味いのかを指摘すれば良いですか?

とりあえず

・{に対応する閉じカッコがない
・関数が定義されているだけ(どこからも呼び出されていない)
・location.href は何のために記述したのですか?

2   名前: naito : 2007/01/04(木) 16:32  ID:oSJutNkO
カヅサツさん・・
申し訳ありませんが、関数の呼び出し等が理解出来ないので、
私が始めに書いたタグを訂正頂けると幸いです。

3   名前: カヅサツ ◆ThCi95HEzw : 2007/01/04(木) 16:32  [URL]  ID:lY9L7AMa
> 関数の呼び出し等が理解出来ない

普通に関数名を書けばよいです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title>test</title>
<script type="text/javascript">
//関数を定義
function TestJs(){
	alert("test 1");
}
//関数を呼び出す
TestJs();
//関数を使わずに処理
alert("test 2");
</script>
</head>
<body>
<p>test</p>
</body>
</html>


4   名前: naito : 2007/01/04(木) 16:32  ID:oSJutNkO
カヅサツさん・・
ご回答有難うございます
ですが私が考えておりますランダムリンクの主旨とは
若干外れていますのでよろしければ再回答の程お願い致します。
私が考えているランダムリンクは例えますと
http://user.shikoku.ne.jp/isi0100/randam.htmと同じ物を求めております。

5   名前: カヅサツ : 2007/01/04(木) 16:32  [URL]  ID:lY9L7AMa
> ですが私が考えておりますランダムリンクの主旨とは
> 若干外れていますのでよろしければ再回答の程お願い致します。

はい、何を回答しましょう?

> http://user.shikoku.ne.jp/isi0100/randam.htmと同じ物を求めております。

上記サイトサーバサイドスクリプトです。「同じ物」はクライアントサイドスクリプトである JavaScript では残念ながら不可能です。例えばLynxでは利用できません。
JavaScriptで「同じような物」を作る場合、非対応環境下でどうなって欲しいかを考える必要があります。

6   名前: naito : 2007/01/04(木) 16:32  ID:oSJutNkO
>JavaScriptで「同じような物」を作る場合、非対応環境下でどうなって欲しいかを考える必要があります。

非対応環境下におきましては、「ご観覧中のブラウザでは正常な作動が出来ません」等の
メッセージを表示出来るようにしたいと思っております。

7   名前: 匿名 : 2007/01/04(木) 16:32  ID:fUX02C0H
> ご観覧中のブラウザでは正常な作動が出来ません

そんな失礼なメッセージを書いてはいけない。noscript 要素でデフォルト時のリンク先を用意した方が、まだマシだと思う。

で、>>0 に原案があり、>>1 に修正点があり、>>3 に関数の呼び出し方がある。これだけあれば、とりあえず自分で書けると思うんだ。うまくいかなかったら、またそのソースコードを見せてほしい。

とにかく、自分の手で書いて「実感」しないと、プログラミングは身に着かない。

別にプログラミングなど身に着けるつもりはない、一から十まで作成を依頼するということなら、その旨はっきり書いた方が良い。簡単なものなら、親切な人が作ってくれるかもしれない。その際は仕様書をしっかり書くこと。

8   名前: naito : 2007/01/04(木) 16:32  ID:oSJutNkO
>そんな失礼なメッセージを書いてはいけない。
何処が失礼なのでしょうか?ブラウザが対応していないという事実を述べるだけどあって何ら問題は無いと思うのですが・・

>これだけあれば、とりあえず自分で書けると思うんだ。
JavaScriptに関しては完全な素人であるゆえ、タグの何処を変えたら>>4で示したような物になるのかが全く理解出来ません。なので関数の呼び出し方を教えて頂きましても完成の結論には至りませんでした。

9   名前: Z ◆XTzyosZXcL : 2007/01/04(木) 16:32  ID:SAZVxjjY
>>8
>ブラウザが対応していないという事実を述べるだけどあって何ら問題は無いと思うのですが・・
 いいえ。クライアント側スクリプト非対応環境に「代替手段を提供する」のがNOSCRIPT要素の役目です(余談ですが、同様にフレーム非対応環境に「代替手段を提供する」のがNOFRAMES要素の役目ですね)。

HTML4.01仕様書該当部分:
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/interact/scripts.html#h-18.3
http://www.w3.org/TR/html401/interact/scripts.html#h-18.3

ウェブコンテンツアクセシビリティガイドライン(WCAG1.0)該当部分:
http://www.zspc.com/documents/wcag10/#gl-new-technologies

10   名前: カヅサツ : 2007/01/04(木) 16:32  [URL]  ID:lY9L7AMa
>>7-8
とはいっても「ランダムリンク」みたいな「ゲーム」に、代替なんて書きようがないと思うのですが。
いやまぁ、「全リンクを並べる」でも良いのですけれど、意味があるとは思えません。

あえて言うなら「JavaScriptを利用できる環境では、ランダムリンクが表示されます」というように、「利用するため何が必要なのか」書いた方が適切でしょうけれど。

---

ええと「何を回答しましょう?」という私の質問はスルー?

11   名前: 匿名 : 2007/01/04(木) 16:32  ID:fUX02C0H
>>8
> 何処が失礼なのでしょうか?ブラウザが対応していないという事実を述べるだけ

そうは言うけど、実際に遭遇すると割と不快だよ、そういうメッセージって。スクリプトが動作しないのは利用者の責任ではないし、ましてブラウザのせいでもない。九割方は製作者の責任だし、多くは代替手段を用意すれば済む話なんだ。ただ、

>>10
> とはいっても「ランダムリンク」みたいな「ゲーム」に、代替なんて書きようがないと思うのですが。

それは全く同意。>>7 を投稿した後に、この件に関しては、むしろ代替が無い方が良かったかな、と反省した。余計な混乱を与えたことをお詫びする。

で、再び >>8

> なので関数の呼び出し方を教えて頂きましても完成の結論には至りませんでした

いくら何でも >>0 のまま何もしてないということはないだろうから、試したソースコードを片っ端から見せてくれれば良いのに。それについては誰も笑ったりしないよ。分からない部分はまた聞けば良いのだし、参考文献が必要なら紹介する。

// 外部前提
var L = [ 'hajimeni.htm', 'step1.htm', 'aisatu.htm', 'getdate.htm', 'function.htm'];
document.write ('<p><a href="' + L[ Math.floor (Math.random () * L.length) ] + '">アンカー</a></p>');


難しい部分があるとしたら、外部スクリプトにした際の相対 URI 同士をどう解決するか、だと思う。あとで確認しようと思ってたけど、この外部スクリプトを呼び出す HTML と、ランダムリンクに関わる HTML ファイルの階層関係(サイト構成)をできるだけ詳しく教えてほしい。

一口に「分からない」と言ってもいろんな段階があるから、こちらもいろいろ確認して、一歩一歩解決していかなきゃいけないんだ。そこの所は分かってほしい。私も、これ以上余計な口を挟まないようにするから。

12   名前: naito : 2007/01/04(木) 16:32  ID:oSJutNkO
>>9
>代替手段を提供する
この件に付きましては代替手段が無いような気がするのですが・・
リンク先をアドレスを表示した所でリンクを踏むか疑問符が付きますし。
私が述べた「ご観覧中のブラウザでは正常な作動が出来ません」やカヅサツさんが述べた「JavaScriptを利用できる環境では、ランダムリンクが表示されます」等のメッセージが出た方が良いのでは無いでしょうか?

>>10
>ええと「何を回答しましょう?」という私の質問はスルー?
申し訳ないです。レスを付け忘れていました。
JavaScriptを用いたhttp://user.shikoku.ne.jp/isi0100/randam.htmと同じような物の作り方を私が理解できるように教えて頂くか、作って頂きたいです。

>>11
<noscript>の件に付きましてはメッセージが出るようにしたいと思っています。

>試したソースコードを片っ端から見せてくれれば良いのに
JavaScriptは
myCnt = 5; // リンク先の数
myTable = new Array( // リンク先の登録
"hajimeni.htm", // はじめに のアドレス
"step1.htm", // Step.1 のアドレス
"aisatu.htm", // Step.2 のアドレス
"getdate.htm", // Step.3 のアドレス
"function.htm" // Step.4 のアドレス
);
function myRndLink(){ // 適当に選んでリンクする関数
myRnd = Math.floor(Math.random()*myCnt); // 0〜(myLine-1)の乱数を求める
}
>>1で注意された点を変更しました。

>参考文献が必要なら紹介する。
申し訳ないですけど、この参考文献の意味は全く理解できないので触れようがありません。

>外部スクリプトを呼び出す HTML と、ランダムリンクに関わる HTML ファイルの階層関係(サイト構成)をできるだけ詳しく教えてほしい。
サイト階層
sample----index.html
+---------css-------style.css
+---------image-----省略
+---------images----省略
+---------img-------省略
+---------banner----省略
+---------js--------syabon.js
+---------top_image.js

外部スクリプトを呼び出す HTML
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta http-equiv="content-style-type" content="text/css" />

<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
---省略---
<meta http-equiv="Content-Script-Type" content="text/javascript" />

</head>

<body>

<!--シャボン玉の設定-->
<script src="js/syabon.js" type="text/javascript"></script>
<!--シャボン玉の設定終わり-->

<!--サイト中央表示の設定-->
<div style="text-align:center;border:black;">
<div style="margin-left:auto;margin-right:auto;width:740px;text-align:left;text-align:justify;border:red;">
<!--サイト中央表示の設定終わり-->

<div id="wrapper">

<div id="content">

<div id="top">

<!--トップ画像の設定-->
<script src="js/top_image.js" type="text/javascript"></script>
<noscript><p>ご使用中のパソコンは当サイトの観覧基準に満たしておりません。</p></noscript>
<!--トップ画像の設定終わり-->

<!--メニューの設定-->
<div id="menu">
---省略---
</div>
<!--メニューの設定終わり-->

<div id="left">
---省略---
</div>

<div id="diary">

<div class="section">
---省略---
</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>
長くなりすぎるので関係の無い部分は省略しています。

13   名前: 通りすがり : 2007/01/04(木) 16:32  ID:gtLg21Nn
>>11に答えそのものが書いてあるじゃないか・・・

それから、匿名氏が言うサイト構成ってのは多分、
"hajimeni.htm", "step1.htm"等の場所のことだと思うんだが。
>>0を見ると、外部スクリプトがフォルダに入れるようだから
基底アドレスがずれないよう修正する処理が必要かもしれない
ということだと俺は解釈した。

ついでに
>ご使用中のパソコンは当サイトの観覧基準に満たしておりません。
さすがに、このメッセージは考え直すべきだろう。

14   名前: カヅサツ ◆ThCi95HEzw : 2007/01/04(木) 16:32  [URL]  ID:lY9L7AMa
> JavaScriptを用いたhttp://user.shikoku.ne.jp/isi0100/randam.htmと同じような物の作り方を私が理解できるように教えて頂くか、作って頂きたいです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function randomLink(){
	//urlのリスト
	var urlList = new Array(
		"http://www.google.co.jp/",
		"http://www.yahoo.co.jp"
	);
	//処理
	location.href = urlList[Math.floor(Math.random()*urlList.length)];
}
//リンク画像
var imageUrl = "http://www.google.co.jp/hws/static/fenrir//powered_by_google.gif";
//リンクテキスト
var imageAlt = "ランダムリンク";
//alert(url); 
document.write("<ul>");
document.write("<li><a href=\"javascript:randomLink();\"><img src=\"");
document.write(imageUrl);
document.write("\" alt=\"");
document.write(imageAlt);
document.write("\"></a></li>");
document.write("</ul>");
</script>
<noscript>
	<p>JavaScriptを利用できる環境では、ランダムリンクが表示されます。</p>
</noscript>
</body>
</html>


15   名前: naito : 2007/01/04(木) 16:32  ID:oSJutNkO
>>13
返信有難うございます。ですがこの件につきましては>>14で解決致しました。
>>14
有難うございます。無事ランムダリンクを作成出来ました。最後にもう1つ質問があるのですが、このランダムリンクを他サイトに置いてもらう場合は直リンクをするしか方法はないのでしょうか?よろしければこの場合の直リンクの仕方も教えていただきたいです。私は下記のように考えたのですが、私が考えた方法ですとrandom_link.jsをダウンロードする事になってしまいます。(jsフォルダにrandom_link.js、bannerフォルダにrandom1.jpgというバナーが入っています。)

<a href="トップのurl/js/random_link.js"><img src="http://トップのurl/banner/random1.jpg" alt="ランダムリンク" width="200" height="40" /></a>

16   名前: カヅサツ ◆ThCi95HEzw : 2007/01/04(木) 16:32  [URL]  ID:O5hEMlpW
> このランダムリンクを他サイトに置いてもらう場合は直リンクをするしか方法はないのでしょうか?

>>14のどこに「直リンク」がありますか?(絶対URLの意味で使われているのですか?)

17   名前: ぽち袋 : 2007/01/04(木) 16:32  ID:tBU.rpgK
>16
>絶対URLの意味で使われているのですか?


絶対URLってナニ?
いい加減なことをいってはいけません。

18   名前: カヅサツ ◆ThCi95HEzw : 2007/01/04(木) 16:32  [URL]  ID:O5hEMlpW
> 絶対URLってナニ?

ググれ。

19   名前: ぽち袋 : 2007/01/04(木) 16:32  ID:tBU.rpgK
>18
URLというものがわかっていない?

20   名前: カヅサツ ◆ThCi95HEzw : 2007/01/04(木) 16:32  [URL]  ID:O5hEMlpW
>>18
とりあえず、http://www5d.biglobe.ne.jp/~stssk/nro/rfc1738_j.txt で定義されている程度の理解はあるつもりですが。

え? 何? 何がいいたいのですか?

とりあえず、>>16の私の発言に何か誤りがあると遠まわしに言っているような気がするのですが、その場合は http://www.tagindex.com/bbs/note.html#h401 で指摘されているとおり、「正解も」併記してください。

21   名前: Script41 : 2007/01/04(木) 16:32  ID:A3n49R0s
とりあえず、「URL」という単語のみで、プロトコルから始まる記述の全部を指し示すものであるから、「絶対」は不要でないか?と、「ぽち袋」氏は言いたいのかもしれない。

また文書自体を基点とした「相対パス」と、サーバー上でのドキュメントルートを基点とした「絶対パス」という表現もあるが、これまたサーバー上の階層という考え方も一般的には敷居が高く、さらに「ドキュメントルート」に至っては、普通の人に理解して貰うのは非常に困難ではないだろうか。

で、その結果として、巷には相対URL、絶対URLという単語が溢れているし、一般的にはそれで通用しているので、まあ良いのでは無いだろうか。
聞く人の側で、相手が何を言っているのか理解すれば、特に問題はないかと。

※「ホームページ」という単語にも反応してしまう人も少なからず居ますからね。
ただ、rfc自体が実質上は規約となっていますが、Request For Comments の頭文字であることからも判るように「コメントを求めます(提言があれば追加してください)」というような「相互運用のためのガイドライン」がベースですからね。あまりにもrfcを絶対的に振りかざすように見えてしまうと「w3c原理主義者」的に見えてしまって、かえって宜しくないかと。

22   名前: カヅサツ ◆ThCi95HEzw : 2007/01/04(木) 16:32  [URL]  ID:O5hEMlpW
> とりあえず、「URL」という単語のみで、プロトコルから始まる記述の全部を指し示すものであるから、「絶対」は不要でないか?と、「ぽち袋」氏は言いたいのかもしれない。

あー、なるほど。超納得しました。

一覧へ戻る