- ベストアンサー
記念日紹介みたいなホームページを作りたいのですが
いつもお世話になっております。 ホームページを作成し早5年以上経って今では簡単なJAVAスクリプトもどうにかなるようにはなってきたのですが、今回ばかりはちとお手上げです。 作りたい形としてはこのような形です。 上下にフレームでわけ、上にはJAVAで閲覧日の月がカレンダー形式で表示。 下には今日とその前後1週間分の記念日が表示され、上のカレンダーの月や日を変更すると （月はカレンダーの上に＜＜前月・来月＞＞みたいな形で移動できるように設定。日はカレンダー上の日付をクリックすると自動でその日を中心に↑の規則で表示。） となるようにできればと思います。 プロバイダ上のホームページスペースのため、自作CGIは設置できないのですが、必要であれば無料サイトなど利用してCGIを置くことも考えてます。 また、記念日の登録については、面倒でもHTMLで書いていく方法なのかなと思います。これは、自作CGIが設置できない＝掲示板のようにWEB上で登録が難しいのでは？という考えからです。 また、記念日設定していない日については、あらかじめ登録しておいたメッセージが自動で埋まるようにできればと。 上のような細かい内容ではありますが、付き合って1年になる彼女と「毎日が記念日になればいいね」という話から、このようなものの製作に思い立ったわけでして、私個人ののろけに付き合っていただけるようであれば、ぜひともご教授いただけますよう、よろしくお願いします。 どこかで、似たようなことをやっている例のようなサイトがあれば、そちらも教えていただければ幸いです。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
>改行、リンク、文字の装飾などはできるのでしょうか？ この場合、 最終的にdocument.writeを使って出力されるということを考えると、 data["2/10"]="にとーの日<br><a href='#'>リンク</a><br><span style='color:red'>赤</span>"; などのよう（通常のようにタグにて）にして <br>で改行 <a>でリンク styleやタグで文字修飾 できます。 また、javascriptで文字列に対してメソッドを用いてリンクや修飾をすることができます。
その他の回答 (3)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
>具体的にはどのようにすればよろしいでしょうか？ あくまで一例で、本当は好きにすればいいのですけど。 例えばfunction anniversary()を以下のようにします。 function anniversary(){ var m=parseInt(DispMonth.childNodes[0].nodeValue); var d=parseInt(this.childNodes[0].nodeValue); var data = new Array; data["2/11"]="祝日"; data["2/14"]="バレンタイン"; var wkDate=new Date(); wkDate.setMonth(m); wkDate.setDate(d-7);//１週間前の日付 var win=window.open(); for(var i=0;i<14;i++){ //２週間のデータの表示 var aDay=wkDate.getMonth()+"/"+wkDate.getDate(); // alert(aDay); if(data[aDay]!=undefined){//記念日 // alert(data[aDay]); win.document.write(aDay+":"+data[aDay]+"<br>"); } else { win.document.write(aDay+":普通の日<br>"); } wkDate.setDate(wkDate.getDate()+1); } } このようにしておいて、例えば２月１４日をクリックすると別窓が開いて、前後１週間の記念日と無い場合はあらかじめ設定したメッセージが埋まります。 質問文の場合は、別フレームということなので var win=parent.下のフレームに付けた名前; にすればいいと思います。
- steel_gray
- ベストアンサー率66% (1052/1578)
そのようなCGIを配布しているところもあるようです。 参考URL１→サンプル、参考URL２→配布サイト カレンダーということで、それっぽいものを紹介しましたが、他にも「日記」として探せば色々見つかります。 ただ、無料サイトの場合はCGIだけをおくことを許可しているケースは少ないので難しいかもしれません。 また、最近流行のBlogサービスを利用することも考えてもいいかもしれませんね。
- 参考URL：
- http://cgi.tky.3web.ne.jp/~missm/cgi-missm/calendar.cgi,http://www.tky.3web.ne.jp/~missm/cgi_script/
お礼
ありがとうございます。 たしかにブログもいい方法かもしれません。 参考になりました。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
とりあえず、カレンダー部分をjavascriptで作ってみました。 日付をクリックすると、function anniversary()を呼び出して、月／日を表示するようになっていますが、 この部分に、記念日のデータを持たせて、したフレームのウインドウにdocument.writeで書き込むようにすればいいと思います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>calendar</title> </head> <body> <style> <!-- TD { height:16px;text-align:center;} TD.sunday { color:red;} TD.saturday { color:blue;} //--> </style> <TABLE BORDER="1" WIDTH="200px" HEIGHT="100px" CELLSPACING="0" align="center"> <CAPTION><SPAN ID="yearValue" STYLE="font-size:16pt">西暦</SPAN>年 <SPAN ID="monthValue" STYLE="font-size:16pt">Ｘ月</SPAN>月</CAPTION> <COL SPAN="7" WIDTH="20px" VALIGN="top"> <THEAD> <TR><TH style="color:red">日</TH><TH>月</TH><TH>火</TH><TH>水</TH><TH>木</TH><TH>金</TH><TH style="color:blue">土</TH></TR> </THEAD> <TFOOT> <TR><TD COLSPAN="7"> <DIV ID="YMControl" style="text-align:center"> <SPAN style="cursor:w-resize" onClick="preYear()">＜＜</SPAN> <SPAN STYLE="font-size:18pt;vertical-align:middle;">年</SPAN> <SPAN style="cursor:e-resize" onClick="nextYear()">＞＞</SPAN> <BR> <SPAN style="cursor:w-resize" onClick="preMonth()">＜</SPAN> <SPAN STYLE="font-size:18pt;vertical-align:middle;">月</SPAN> <SPAN style="cursor:e-resize" onClick="nextMonth()">＞</SPAN> </DIV> </TD></TR> </TFOOT> <TBODY> <TR><TD class=sunday><a ID="No0" href="test.html#">０</a></TD><TD><a ID="No1" href="#">１</a></TD><TD><a ID="No2" href="#">２</a></TD><TD><a ID="No3" href="#">３</a></TD><TD><a ID="No4" href="#">４</a></TD><TD><a ID="No5" href="#">５</a></TD><TD class=saturday><a ID="No6" href="#">６</a></TD></TR> <TR><TD class=sunday><a ID="No7" href="#">７</a></TD><TD><a ID="No8" href="#">８</a></TD><TD><a ID="No9" href="#">９</a></TD><TD><a ID="No10" href="#">１０</a></TD><TD><a ID="No11" href="#">１１</a></TD><TD><a ID="No12" href="#">１２</a></TD><TD class=saturday><a ID="No13" href="#">１３</a></TD></TR> <TR><TD class=sunday><a ID="No14" href="#">１４</a></TD><TD><a ID="No15" href="#">１５</a></TD><TD><a ID="No16" href="#">１６</a></TD><TD><a ID="No17" href="#">１７</a></TD><TD><a ID="No18" href="#">１８</a></TD><TD><a ID="No19" href="#">１９</a></TD><TD class=saturday><a ID="No20" href="#">２０</a></TD></TR> <TR><TD class=sunday><a ID="No21" href="#">２１</a></TD><TD><a ID="No22" href="#">２２</a></TD><TD><a ID="No23" href="#">２３</a></TD><TD><a ID="No24" href="#">２４</a></TD><TD><a ID="No25" href="#">２５</a></TD><TD><a ID="No26" href="#">２６</a></TD><TD class=saturday><a ID="No27" href="#">２７</a></TD></TR> <TR><TD class=sunday><a ID="No28" href="#">２８</a></TD><TD><a ID="No29" href="#">２９</a></TD><TD><a ID="No30" href="#">３０</a></TD><TD><a ID="No31" href="#">３１</a></TD><TD><a ID="No32" href="#">３２</a></TD><TD><a ID="No33" href="#">３３</a></TD><TD class=saturday><a ID="No34" href="#">３４</a></TD></TR> <TR><TD class=sunday><a ID="No35" href="#">３５</a></TD><TD><a ID="No36" href="#">３６</a></TD><TD><a ID="No37" href="#">３７</a></TD><TD><a ID="No38" href="#">３８</a></TD><TD><a ID="No39" href="#">３９</a></TD><TD><a ID="No40" href="#">４０</a></TD><TD class=saturday><a ID="No41" href="#">４１</a></TD></TR> </TBODY> </TABLE> <script type="text/javascript"> <!-- var i; var no = new Array(42); for(i=0;i<42;i++){ no[i] = document.getElementById("No" + i.toString()); } var today = new Date(); var DispYear = document.getElementById("yearValue"); var DispMonth = document.getElementById("monthValue"); DispYear.childNodes[0].nodeValue=today.getFullYear().toString(); DispMonth.childNodes[0].nodeValue=(today.getMonth()+1).toString(); setCalendar(); function preYear(){ var y; y= parseInt(DispYear.childNodes[0].nodeValue); if( y > 1){ y = y -1; } DispYear.childNodes[0].nodeValue = y.toString(); setCalendar(); } function nextYear(){ var y; y = parseInt(DispYear.childNodes[0].nodeValue); y = y + 1; DispYear.childNodes[0].nodeValue = y.toString(); setCalendar(); } function preMonth(){ var m; m = parseInt(DispMonth.childNodes[0].nodeValue); if( m == 1){ m = 12; preYear(); } else { m = m - 1; } DispMonth.childNodes[0].nodeValue= m.toString(); setCalendar(); } function nextMonth(){ var m; m = parseInt(DispMonth.childNodes[0].nodeValue); if( m == 12){ m = 1; nextYear(); } else { m = m + 1; } DispMonth.childNodes[0].nodeValue= m.toString(); setCalendar(); } function isLeapYear(y){ return((y % 400 == 0) || ((y % 4 == 0) && (y % 100 != 0))) } function monthDay(y, m){ // m : 0 origin var d = new Array(12); d[ 0]=31; d[ 1]=28; d[ 2]=31; d[ 3]=30; d[ 4]=31; d[ 5]=30; d[ 6]=31; d[ 7]=31; d[ 8]=30; d[ 9]=31; d[10]=30; d[11]=31; if(isLeapYear(y)) d[1] += 1; return(d[m]); } function setCalendar(){ var y,m; var textY,textM,textD; var today,wkday,now; var youbi; var i,j; now = new Date(); y = parseInt(DispYear.childNodes[0].nodeValue); m = parseInt(DispMonth.childNodes[0].nodeValue); today = new Date (y, m - 1, 1); // month is 0 origin youbi = today.getDay(); //getDay return value is 0:sun 1:mon ... for(i=0;i < youbi;i++){ //初めの空白を作る no[i].childNodes[0].nodeValue=" "; } for(j=1;j <= monthDay(y,m - 1);j++){ // jはその日 no[i].childNodes[0].nodeValue=j.toString(); wkday = new Date(y, m - 1, j); no[i].href = "#"; no[i].onclick=anniversary; i += 1; } for(;i <= 41 ;i++){ no[i].childNodes[0].nodeValue=" "; } } function anniversary(){ alert(DispMonth.childNodes[0].nodeValue+"/"+this.childNodes[0].nodeValue); } // --> </script> </body> </html>
お礼
うわーありがとうございます！！ さっそく使ってみようと思います。 ありがとうございます～
補足
たびたび申し訳ありません。 日付をクリックすると、function anniversary()を呼び出して、月／日を表示するようになっていますが、 この部分に、記念日のデータを持たせて、したフレームのウインドウにdocument.writeで書き込むようにすればいいと思います。 この部分についてですが、具体的にはどのようにすればよろしいでしょうか？
お礼
たびたびありがとうございます。 こうやってどんどん知識が入っていくというのはとてもうれしいです＾＾ とても参考になりました。 ところで、この data["2/14"]="バレンタイン"; のところなのですが、改行、リンク、文字の装飾などはできるのでしょうか？ できることならばある程度の文章を書いたりしていきたいもので・・・ となると、やっぱりCGIのほうが楽だったりするんですかねぇ