JavaScriptを使ってWeb上の日めくり論語カレンダーを作った。
サイトは、こちら
個人的に「子曰く～」で始まる論語が好きなので毎日違う孔子の言葉が表示されたらいいかなあと思っていた。
ただし作り始めは、365日違う言葉をと意気込んでいたのだがまだデータが下のデータしか入れていないためあまり日めくりっぽくはない。
JSON呼び出しにjQueryを利用している。かなり前に作ったので利用しているバージョンも古いです。
どなたかもっと論語データを入れてくれるならぜひ利用してください。（一式ダウンロード）
作りは、JSONファイルにこんな感じでデータを保存してランダムで呼び出しているだけです。
[
{"caption":"子曰く、君子は義に喩（さと）り、小人は利に喩る。","summary":"孔子は言った。<br>徳のある人は、何をなすべきかを考え、器の小さいものは、何をすれば得かを考える。"},
{"caption":"子曰く、朝（あした）に道を聞かば、夕（ゆうべ）に死すとも可なり","summary":"孔子は言った。<br>もし朝に真実の道を知ることができたならば、その日の夜に死んでもかまわない。"},
{"caption":"子曰く、<br>これを知る者はこれを好む者に如(し)かず。<br>これを好む者はこれを楽しむ者に如かず。","summary":"孔子はいった。<br>ある事に知識のある人でも、それを好む人には及ばない。また、その事を好む人であっても、それを楽しんでいる人にはかなわない。 "},
{"caption":"和して同ぜず","summary":"人と仲よく交際はしても，おもねって自説を曲げるようなことはしない。 "},
{"caption":"子曰く、<br>人の己を知らざるを患(うれ)えず、人を知らざるを患うるなり。","summary":"孔子はいった。<br>他人が自分を分かってくれない事を嘆くよりも、自分が他人の価値を認めようとしない事を心配しなさい。"},
{"caption":"我れ三人行えば必ず我が師を得。其の良き者を択(えら)びてこれに従う。其の善からざる者にしてこれを改む","summary":"わたしは三人で行動したら、きっとそこに自分の師を見つける。善い人を選んでそれに見ならい、善くない人にはその善くないことをわが身について直すからだ。"},
{"caption":"過ちて改めざる、是れを過ちと謂う。","summary":"過ちをしても改めない。これを本当の過ちというのだ。"},
{"caption":"巧言令色、鮮（すく）なし仁。","summary":"言葉巧みな人ほど、おもいやりの心にかけているものだ。"},
{"caption":"義を見て為(せ)ざるは、勇なきなり。","summary":"行うべきことを前にして、何もしないのは臆病ものである。"},
{"caption":"子曰く、君子は周して比せず。小人は比して周せず。","summary":"孔子は言った。<br>徳のある人は誰とでも分け隔てなくつき合うが、器の小さい人は狭い関りしか持つことができないものだ。"},
{"caption":"子曰く、異端を攻（おさ）むるは斯（こ）れ害あるのみ。","summary":"孔子は言った。<br>自分と異なる考えを持つ人を攻撃しても、害があるばかりである。"},
{"caption":"子曰く、人の過ちや、各々其（そ）の党に於（お）いてす。過ちを観みて斯（ここ）に仁を知る。","summary":"孔子は言った。<br>人の過ちにはそれぞれ癖がある。過ちを見れば、その人がどういう人間であるか分かるものだ。"},
{"caption":"徳は孤ならず。必ず隣あり。","summary":"道徳のあるものは孤立しない。きっと親しい仲間ができる。"}
]
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=320,user-scalable=yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <link rel="stylesheet" href="mystyle.css"> <title>日めくり 論語カレンダー</title> <script src="lib/jquery-1.11.2.min.js"></script> <script src="main.js"></script> </head> <body> <div id="wrapper"> <div id="title">日めくり 論語カレンダー</div> <div id="calendar"> <p id="month"></p> <p id="day"></p> <p id="youbi"></p> <div id="caption"></div> <div id="summary"></div> </div> </div> </body> </html>
JavaScript部分（毎日違う言葉にしようとしたので現時点でpassedDaysという関数が余計です）
// 今年何日経過したか？
function passedDays() {
var today = new Date() ;
var gantan = today.getFullYear() + "/1/1";
// 今日の日から1月１日までの日数を計算する
var days = Math.floor((today.getTime() - Date.parse(gantan)) / (24*60*60*1000));
return days;
}
$(function(){
// 今日の日付を取得
var strYoubi = new Array ("日", "月", "火", "水", "木", "金", "土" );
var date = new Date(); // 現在の日付取得
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var youbi = strYoubi[date.getDay()]; // 曜日処理 getDayは0～6の数値を返す
// 日付表示
$("#month").html(month + "月");
$("#day").html(day);
$("#youbi").html(youbi);
// 今年何日経過したかを取得
var passed = Number(passedDays());
console.log("passed = " + passed);
// JSONファイル読み込みと表示
$.getJSON("data.json", function(data){
// $("#caption").html(data[passed].caption);
// $("#summary").html(data[passed].summary);
var no = Math.floor(Math.random() * data.length);
console.log("no = " + no + "data.length = " + data.length);
$("#caption").html(data[no].caption);
$("#summary").html("【意味】<br>" + data[no].summary);
});
});
しかし論語は、心にしみますね。
コメント