カレンダーをつくってみる その２

前回から引き続きカレンダーをつくってみます。matildatilda.hatenablog.com

今回の改善点は以下のとおり。

1. クライアントコードをjQueryに変更
2. カレンダー表示時にサーバーサイドにリクエストして祝日情報を取得

です。完成はこんな感じで。

jQueryに変更するのはそれほど大変ではなかったけど、サーバーサイドのphpでコードを書くのがけっこう大変でした。文法はそれほど難しくないけど、微妙にCに似ていたりすると思い込みで書いてしまうので気をつけたいですね。

それではクライアントコードの変更した部分を抜粋して載せてみます。

$(document).ready(function()
{
    $("#lastMonth").on("click", function()
    {
        onLastMonth();      
    });
    
    $("#nextMonth").on("click", function()
    {
        onNextMonth();    
    });
    
    onLoad();
});

読み込み時はこんな感じで。
次にリクエスト部分です。祝日情報はパラメータmonth=を用意して、月ごとに取得できるようにしました。

function onGeHolidays()
{
    var url = "php/holidaylist.php/?month=" + (month + 1);
    $.get(url, function(data)
    {
        $("#holidaylist").html(data);        
    });
}

jQueryのgetメソッドを使ってリクエスト、コールバックでdataとして祝日情報を受け取ります。祝日情報はシンプルな文字列です。

続いては、サーバーサイドのholidaylist.php。このように書きました。

<?php
$holidaylist = array
(
    "1/1" => "元日",
    "1/12" => "成人の日",
    "2/11" => "建国記念の日",
    "3/21" => "春分の日",
    "4/29" => "昭和の日",
    "5/3" => "昭和の日",
    "5/4" => "みどりの日",
    "5/5" => "こどもの日",
    "5/6" => "振替休日",
    "7/20" => "海の日",
    "9/21" => "敬老の日",
    "9/22" => "国民の休日",
    "9/23" => "秋分の日",
    "10/12" => "体育の日",
    "11/3" => "文化の日",
    "11/23" => "勤労感謝の日",
    "12/23" => "天皇誕生日",
);
    header("Content-Type: text/html; charset=UTF-8");

    $mon = $_GET["month"]."/";
    $index = 0;
    foreach($holidaylist as $key => $value)
    {
        $index = strpos($key, $mon);
        if ($index === 0)
        {
            echo $key.":".$value;
        }
    }
?>

まだデータベースの使い方が分からないので配列にすべて入れてます。配列は日付（月/日）をキーとしたハッシュテーブルです。headerはエンコードを確実にUTF-8にするために入れました。どこかに設定があるようなのですがちょっと調べきれてないです。
処理本体は、受け取ったパラメータ$_GET["month"]の値と配列のキーの月の部分を比較しています。このあたりがちょっと時間かかりました。キーを数値で比較するのではなく、後ろに/を付けた文字として比較しているため、1月を取得しようとすると11月も取得してしまったりするんですね。それでstrposで取得した位置が必ず先頭（0）のものを出力するようにしています。
このやり方が良いかどうかは疑問ですが、とりあえずはこれで。

ようやく小さいながらもwebアプリケーションらしくサーバーとやり取りするものができました。これらは先日も書いたCloud9上ですべて実装しています。ちょっとデバッグが分かりにくいところもあるけど、ローカルに一切環境を用意しないでブラウザだけでここまで出来るのは本当にすごいですね。

今日はこの辺で。