電子書籍の厳選無料作品が豊富!

ウェブページにレシピを掲載しています。

週5回日替わりでメニューを載せていますが、
毎週、「お手軽20分レシピ」などとテーマわけをして、
紹介しており、そのテーマに沿った一口メモをポップアップウィンドウで表示させらるようテキストリンクをはっています。

現在このリンク先のURLは手動で修正していますが、面倒ですし、できれば深夜0:00にJavascriptで自動修正したいと思います。

が、Javascriptのなかに<a>タグをどのように張り込めばいいのかわかりません。非常に基本的な質問で心ぐるしいのですが、ネットで検索をかけても、同様の機能を使うユーザは多くないようで、ページが見つかりません…。ご教示ください。

A 回答 (6件)

補足読みました。


前回(#8)のスクリプトをそのまま生かしたい場合は、

document.write(" target=_blank>今日のレシピ</a>");

この行を、

document.write(" target=recipe onClick=window.open('','recipe','width=400,height=300')>今日のレシピ</a>");

こうすれば、希望通りの動作が得られるのではないかと思います。 こうすると、リンクタグ内に追加したJavaScriptでブランクのウィンドウを開き、そのウィンドウにリンクで指定したページを読み出すようになるはずです。

ただ、こうするよりも、関数でウィンドウを開く動作を指定しておいて、その関数をリンクから呼び出す方が、スマートなソースになると思います。
この場合は、head内のスクリプトは、以下のようにします。

<script type="text/javascript">
<!--
rcp = new Array();
rcp[1]="****1.html";
//~ 中略 ~
rcp[30]="****30.html";
rcp[31]="";

function TDR(){
al=new Date();
dd=al.getDate();
window.open(rcp[dd],"recipe","scrollbars=1,resizable=1,width=400,height=300");
}
// -->
</script>

この関数を呼び出すリンクについては、

<a href="#" onClick="TDR(); return false;">今日のレシピ</a>

これでよいはずです。 あとは、はじめに定義しているrcp[]という配列に、順次その日付のときに表示させたいHTMLファイルのURLを記述すれば、動作してくれると思います。
こちらの方が簡素で良いと思います。

これでいかがでしょうか?
    • good
    • 0
この回答へのお礼

上記2番目のNewArrayを使ったやり方で頼もしく動作したので、さっそく本番にデータあげてしまいました!ありがとうございました。

毎週月曜の朝、手作業で更新していたので、これでかなりらくになります!!

お礼日時:2003/05/20 19:40

失礼ついでにもう一つ。


#2の方の回答の補足にあるソースを改造するのであれば、

<html>
<head>
<SCRIPT language="JavaScript">
<!--
function ra(n){
this.length=n;
for(i=0;i<n;i++)this[i]="";
}
function dinrcp()
{
var dt = new Date();
dt = dt.getDate();
document.write("<a href=");
document.write(rcp[dt]);
document.write(" target=_blank>今日のレシピ</a>");
}
rcp = new ra(31);
rcp[1]="****1.html";
//~ 中略 ~
rcp[30]="****30.html";
rcp[31]="";

//-->
</SCRIPT>
</head>
<body>
<script language="JavaScript"><!--
dinrcp();
// -->
</script>
</body>
</html>

こんな感じではいかがでしょうか。
それぞれの日のリンク先のURLは、配列の画像のURLを格納している部分("****1.html"の部分)に記入してください。
こちらの場合は、リンク先のURLを手動で書き換える必要がありますが、配列の中でHTMLファイルのURLを指定できるので、HTMLファイルの名前を自由に付けることが可能になります。

たびたび失礼しました。 参考になれば幸いです。

この回答への補足

lead1976さんありがとうございます。

一口メモ(今週のテーマ)ページへリンクさせるための、テキストリンクの表示には、成功しました。

が、一口メモ(今週のテーマ)のページは、400*300pxというとても小さいサイズで作っているため、Javascriptにポップアップウィンドウのサイズを指定するスクリプト追加したいのです…。

単純に"function dinrcp() "にwindowopenのスクリプトを追加するだけだと、ページにアクセスしたときに一口メモページが開かれてしまいます。

何度も申し訳ないのですが、よろしくお願いします…。

補足日時:2003/05/20 15:36
    • good
    • 0

横槍気味に失礼します。


JavaScriptの関数で新しいウィンドウを開くように指定して、その開く先のページのURLを、リンクをクリックした時点の日付で変更する方式ではいかがでしょうか。
JavaScriptでリンクを書き出す場合、DHTML的手法を使わない限り、日付をまたいだときに、そのリンクのリンク先はページをリロードしない限りは変更されませんし、ポップアップウィンドウを利用したいというのであれば、HTMLのリンクのみでtarget指定を変えるなどしてやるよりも、JavaScriptでやった方がスマートにできると思います。

練習がてらに作ってみたのですが、もしポップアップに表示させるHTMLファイルの名前が#3の方の回答の補足にあるように年月日の連番をつけて管理されているのであれば、

<script type="text/javascript">
<!--
function TDR(){
al=new Date();
ddch=al.getDate(); //曜日にあわせたチェック用の日付を取得します。
wkd=al.getDay(); //曜日を取得します。
if (wkd==0){ al.setDate(ddch-2);} //今日が日曜日だった場合、2日前の日付に変更。
else if (wkd==6){ al.setDate(ddch-1);} //今日が土曜日だった場合、2日前の日付に変更。
yy=al.getFullYear(); yy.toString();
mm=al.getMonth()+1; mm.toString();
dd=al.getDate(); dd.toString();
if (10>mm) {mm="0"+mm;}
if (10>dd) {dd="0"+dd;}
linkURL="r_memo"+yy+mm+dd+".html";
window.open(linkURL,"recipe","scrollbars=1,resizable=1,width=500,height=500");
}
// -->
</script>

これを記述しておき、body要素のリンクを

<a href="#" onClick="TDR(); return false;">今日</a>

としてスクリプトを呼び出せば、多分お望みどおりの挙動になると思います。 読み出すHTMLファイルは、「r_memoYYYYMMDD.html」の形式で管理してください。
なお、このスクリプトでは、週5日の日替わりということのようなので、土日に更新がないものと勝手に解釈して、土日にアクセスした場合には金曜日のレシピを出すように仕掛けを入れてあります。 更新のない日がこれとは違う場合は、適宜修正してください。 ちなみに、スクリプト中で取得される曜日は、0から6までの連番で、日曜=0、月曜=1…土曜=6です。 また、こういう機能が不要であれば、コメント文がついている行をすべてそっくり削除してください。

失礼しました。
    • good
    • 0

自動修正のリンク先はどうしたいのですか?


20030519.htmみたいな感じでいいんでしょうか?
そういう感じだったら簡単に出来ますけど、

複雑なファイル名にしたい場合は自動的に修正
するのは難しいと思うので、最低でも連番みたい
な感じになると思います。そこらへんを具体的に
教えていただけると回答もしやすいのですが・・

この回答への補足

ありがとうございます。

リンク先のURLは更新日をファイル名に挿入して、"r_memoYYMMDD.html"といったものにできればと思いますが、数字以外の文字列をファイル名に使用するのはむずかしいのでしょうか…? 日付だけを入れたものでもとくに問題はないので、おしえていただければ幸いです。

補足日時:2003/05/20 11:56
    • good
    • 0

Javaスクリプトの知識はどの程度でしょうか?


ちょこっと改造ぐらいはできると考えてアドバイスさせて頂きます。

http://www.usagi-js.com/sample/jssample2.htm

ここのサイトの[間によってページを変更する]を改造すればいけそうですね。サンプルでは1日24時間を1時間ごとに1回計24回変更していますので、そこを改造してちょ!
又、このページにはヒントがいっぱいのサンプルがあるので参考にして作って下さい。

参考URL:http://www.usagi-js.com/sample/jssample2.htm

この回答への補足

ありがとうございます。

わたしいままでほとんどコピペもどきの使い方でしか使ったことないので、このarrayと、変数の指示のどこをどう書き換えたらよいものかわかりません…。

ちなみに画像の自動差し替えには次のようなスクリプトを使用しています。

***
<html>
<head>
<SCRIPT language="JavaScript">
<!--
function ma(n){
this.length=n;
for(i=0;i<n;i++)this[i]="";
}
function dinimg()
{
var dt = new Date();
dt = dt.getDate();
document.write("<img src=");
document.write(im[dt]);
document.write(" width=180 height=96 border=0>");
}
im = new ma(31);
im[ 1]="dinner/4252.jpg";
im[ 2]="dinner/4253.jpg";
im[ 3]="dinner/4253.jpg";
im[ 4]="dinner/4253.jpg";
im[ 5]="dinner/4253.jpg";
im[ 6]="dinner/4254.jpg";
im[ 7]="dinner/4255.jpg";
im[ 8]="dinner/4256.jpg";
im[ 9]="dinner/4257.jpg";
im[ 10]="dinner/4257.jpg";
im[ 11]="dinner/4257.jpg";
im[ 12]="dinner/4258.jpg";
im[ 13]="dinner/4259.jpg";
im[ 14]="dinner/4260.jpg";
im[ 15]="dinner/4261.jpg";
im[ 16]="dinner/4262.jpg";
im[ 17]="dinner/4262.jpg";
im[ 18]="dinner/4262.jpg";
im[ 19]="dinner/4263.jpg";
im[ 20]="dinner/4264.jpg";
im[ 21]="dinner/4265.jpg";
im[ 22]="dinner/4266.jpg";
im[ 23]="dinner/4267.jpg";
im[ 24]="dinner/4267.jpg";
im[ 25]="dinner/4267.jpg";
im[ 26]="dinner/4268.jpg";
im[ 27]="dinner/4269.jpg";
im[ 28]="dinner/4250.jpg";
im[ 29]="dinner/4250.jpg";
im[ 30]="dinner/4251.jpg";
im[ 31]="";

//-->
</SCRIPT>
</head>
<body>
<script language="JavaScript"><!--
dinimg();
// -->
</script>
</body>
</html>
***

これをかきかえて使えないでしょうか?

お手数おかけします…。

補足日時:2003/05/19 21:16
    • good
    • 0

ふと思ったのですがJavaスクリプトでもし可能だとしてもJavaスクリプトではローカルのシステム時計で判断しますよね?


ということはサイトを見に来たユーザさんが故意に時間を変えることで閲覧できてしまいますが問題ないですか?
    • good
    • 0
この回答へのお礼

さっそくありがとうございます。

ローカルの時計をつかった表示でかまいません。
わざわざ時間をすすめてみるということは、
それだけ熱心なユーザさんということで、
こちらとしても歓迎すべきことかと…。
レシピ自体も過去のストックからの二次掲載ですし。

よろしくお願いします。

お礼日時:2003/05/19 17:58

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!