ある項目の、受付開始と同時に掲載を行い、受付終了後にメッセージを変更したいという要望がありました。

PHPで作ろうと思ったら、PHPが動かないサーバだったので、JavaScriptで作ったメモです。

配列を設定したり、時間を取得して操作したり、jQueryでDOM操作したり、基礎的な内容が詰まっているような気がしたので書いておきます。

必要な機能のまとめ

  • 告知開始日になったら情報を表示させる。
  • 告知終了日には、備考欄のテキストを変化させる。
  • 表示される情報は複数になる。

実際これだけなので、割とわかりやすいと思います！

実際に作ってみる。

とりあえず、HTMLでテーブルを作って、テーブル内をDOM操作することで書き換える感じでやってみることに。

実際に作ってみたデモはこんな感じです。

HTMLの準備

HTMLでテーブルの雛形を作っていきます。

<table id="table">
<tbody>
<tr>
<th>タイトル</th>
<th>公開日</th>
<th>締切日</th>
<th>備考</th>
</tr>
</tbody>
</table>

こんなhtmlにしてみました。

thタグのあるhrの下の段以降に

<table id="table">
<tbody>
<tr>
<th>タイトル</th>
<th>公開日</th>
<th>締切日</th>
<th>備考</th>
</tr>
<tr>
<td>タイトルA</td>
<td>2013年4月1日</td>
<td>2013年4月5日</td>
<td>詳細はこちら！</td>
</tr>
</tbody>
</table>

というような感じにHTMLを追加して、現在受付中のものを表示させることにします。

JavaScriptでお手軽にDOM操作するなら、お約束でjQueryを使いたいので、

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

こんな感じでjQueryはさくっと読み込んでおきましょう。

実際にJavaScriptを書いてみる。

ここからはJavaScriptで色々書いてみました。


$(function(){
// 配列で処理するデータを設定
var items = new Array();
//タイトル,開始日,終了日,受付中の備考,受付終了後の備考 時刻は月/日/年 時間で設定
items[0] = new Array("タイトルA", "3/1/2013 9:00:00", "4/5/2024 17:00:00", "詳細はこちら！", "受付は終了しました！");
items[1] = new Array("タイトルB", "3/1/2013 9:00:00", "3/5/2013 17:00:00", "詳細はお電話で！", "受付は終了しました！");
items[2] = new Array("タイトルC", "3/1/2013 9:00:00", "4/5/2024 17:00:00", "詳細はメールで！", "受付は終了しました！");
$.each(items,function(i){
//日付の取得
var today = new Date();
//開始日取得
var start = new Date(items[i][1]);
//開始日整形
var syear = start.getFullYear();
var smonth = start.getMonth()+1;
var sdate = start.getDate();
//終了日取得
var limit = new Date(items[i][2]);
//終了日整形
var lyear = limit.getFullYear();
var lmonth = limit.getMonth()+1;
var ldate = limit.getDate();
if(today >= start){
if(today <= limit){
$("#table").append("<tr><td>"+items[i][0]+"</td><td>"+syear+"年"+smonth+"月"+sdate+"日</td><td>"+lyear+"年"+lmonth+"月"+ldate+"日</td><td>"+items[i][3]+"</td></tr>");
}else{
$("#table").append("<tr class="finished"><td>"+items[i][0]+"</td><td>"+syear+"年"+smonth+"月"+sdate+"日</td><td>"+lyear+"年"+lmonth+"月"+ldate+"日</td><td>"+items[i][4]+"</td></tr>");
}
}
});
});

2次元配列でデータを格納し、jQueryのeachでループして表示。
その際に、現在の日付・時刻の情報と照らし合わせて表示を書き換えています。

公開日を過ぎている場合
→表示

公開日を過ぎているが、締切日も過ぎている
→参照先を変更して表示

という感じですね。

ここまでやっておいてなんですけど、正直PHPでやれるならPHPでやりますよね。
ソース見たら情報全部見えちゃうし！

というわけで、実用性はほぼないですが、jQueryのちょっとしたチュートリアルくらいにはなるのかなあ。

配列をJSONから取ってきたり、フォームから操作したり、いろいろ書き足せばAjaxを覚えるための基礎になったりするのかなあと思ったり。