Blogger:カレンダー(10)祝日データを作成してJSON文字列化する

年と月を渡したらその月の祝日の日を要素とする配列を返すようなデータの作成を目標とします。

前の関連記事:Blogger:カレンダー(9)Calendar2_Bloggerモジュールの導入方法とその機能


祝日を計算で求めるhdayjp.jsを利用


祝日を計算で求めることができるとは思いませんでした。

1948年以降の祝日等を計算するJavaScriptコード - Qiita

これをやってみます。

GitHub - boiledorange73/hdayjp.jsからNetBeansにgitリポジトリをクローンしました、、、

NetBeansプロジェクトでないものクローンするとプロジェクトとは別のフォルダができちゃうようです。

なのでまず最初にNetBeansのプロジェクトを作成しました。

Blogger:表示速度向上のためCSSとJavaScriptの置き場を考える:その5と同じ方法です。

プロジェクト名はjpHolidayにしました。

nbprojectフォルダとpublic_htmlフォルダ以外はすべて削除しました。

プロジェクトのプロパティで単体テストフォルダをなしにします。

これでプロジェクトが作成できました。

リポジトリをクローンします。

チーム→リモート→クローン。

GitHub - boiledorange73/hdayjp.jsからCloneのURLをコピーしてリポジトリURLに入力して、終了。

クローンしたリポジトリからプロジェクトを作成するか問われますが作成しません。

NetBeansProjectsフォルダ内にhdayjp.jpフォルダができているので、それをjpHolidayフォルダ下のpublic_htmlフォルダに移動させます。

NetBeansのプロジェクトウィンドウでhdayjp.jpフォルダを開いて、プロジェクトを実行ボタンをクリックします。

linuxBean14.04(120)NetBeans Connector Plugin for ChromeのNetBeans Connector Plugin for Chromeのインストールをしておかないといけません。

起動したChromiumのアドレスバーにhttp://localhost:8383/jpHoliday/hdayjp.js/test.htmlを入力するとhdayjp.jpのサンプルページが起動します。


YearとMonthを入力して「送信」ボタンをクリックするとその月の祝日が表示されました。

祝日の日付をいれた辞書を作成してそれをJSON文字列化する


これを利用させて頂いて、キーを年、値を1次元を月、2次元を祝日の日付とする配列の辞書を作成します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./hdayjp.js"></script>
<script type="text/javascript">
function doit() {
  var startY = parseInt(document.getElementById("startY").value);  // 開始年
  var endY = parseInt(document.getElementById("endY").value);  // 終了年
  var dic = {};  // データを入れる辞書
    for(var y=startY;y<endY+1;y++) {  // 各年について
        dic[y] = [];  // 辞書の値を配列にする。
        for(var m=0;m<12;m++) {  // 各月について
            var r = hdayjp.calculate(y,m);  // 祝日オブジェクトの配列を取得。祝日オブジェクトのmdプロパティに日付が入っている。
            var h = [];  // 祝日の日付をいれる配列。
            r.forEach(function(e){
                h.push(e.md);  // 祝日オブジェクトのmdプロパティから日付一覧を取得。
            });
            dic[y].push(h);  // 辞書の値の配列の要素に祝日の日付を追加。
        }
    }
    var json = JSON.stringify(dic);  // 辞書をJSON文字列に変換。
    document.holiday.msg.value = json;  // 変換したJSON文字列をテキストエリアに表示。
};
</script>
<title>祝日データ作成</title>
</head>
<body>
<form name="holiday" method="GET" action="javascript:void(0)">
    祝日データ作成期間 <br><br>
    開始年:   <input id="startY" type="text" size="4" value="2013">年 (1948年以後)<br>
    <br>
    終了年:   <input id="endY" type="text" size="4" value="2030">年<br>
  <br>
  JSON<br>
  <textarea name="msg" style="height: 200px; width: 100%;"></textarea><br />
  <br>
  <input type="submit" onclick="doit()">
</form>
</body>
</html>
これをhdayjp.jsのtest.htmlに入れて「送信」をクリックすると指定した期間の祝日の辞書をJSON文字列化したものをテキストエリアに表示します。
(2017.1.14追記。コピーボタンを追加してHolidayJSON.htmに変更しました。)


祝日データ作成期間

開始年: 年 (1948年以後)

終了年:

祝日JSON出力



「コピーする」ボタンはiOSでは動作しません。

あとはこのJSON文字列化したものをどう利用するか考えないといけません。

(2017.1.18追記。2017年1月2日の振替休日が出力されていませんでしたので、修正も兼ねて休日のJSONの作成ツール、日数計算ツールを作成しました。)

参考にしたサイト


1948年以降の祝日等を計算するJavaScriptコード - Qiita
祝日を算出するJavaScript。

GitHub - boiledorange73/hdayjp.js
上記のソース。

2条項BSDライセンス ‐ 通信用語の基礎知識
hdayjp.jsのライセンス。

Javascriptからクリップボードへコピーする方法 | ぶろぐち
iOSのブラウザではtextareaの中身がうまくselectできずコピーできませんでした。

次の関連記事:Blogger:カレンダー(11)祝日対応などCalendar4_Bloggerモジュール

PR

0 件のコメント:

コメントを投稿