糸島企画

ホームページ作成、糸島お助け屋、etc.

代表ブログ

JavaScriptでカレンダー作ってみた

 Twitterを眺めていて、面白いツイートを発見しました。

 この、JavaScriptでカレンダーを作ったというツイート。作り方はぼんやり思いつくけど、自分ならどんな感じで作るだろう、と興味深く思い、実際に作ってみました!

Calender

 完成品が、これ。
 HTMLとCSSとJavaScript(jQuery)でできてます。

<>


 動くかな? 少なくともパソコンでは動くんじゃないかと思います!
 年月の左右にある<や>をクリックしてみてください。

 Twitterで、動画で動きを撮ったツイートもしました。

どのくらいで、どうやって、作ったか

 所要時間は時間気にせずやって40分くらいだったはず。ソースを見ればどうやってるか分かりますが、結構適当です。jQueryで整えたHTMLの部分、どう考えても週ごとに分けたほうが良かったよなぁと思ったり。
 今は曜日ごとに縦に分かれてるので、音声読み上げとかを使おうとすると順番が……。よくないですね。
 曜日で色付けとかはCSSでやりやすい形ですが、それはnth-childを使うなりすればどうとでもなるので、言い訳にならないしなと思います。

 まぁ、そんなところもありますが、とりあえず動くものができたのでよかったです。
 JavaScriptのDateはわりと面倒くさいイメージがあり、実際使ったら面倒くさかったですが、動くので良し。

 月を動かしたときに、その月のデータを既に作っていたらそのデータを使い、初めて見る時はいろいろ作成して配列に入れてます。
 JavaScriptの中でだけ保持しているので、更新したらまた作り直しますが、そう大した量でもないと思うので、適当に。

 仕事で使うから作ったというわけではなく、ただ面白そうだし勉強になりそうだから作っただけなので、動けばいいのです。目的は達しました。
 完成です。

フットワーク軽く、いろんな技術を身につけよう

 気になったら調べる。
 思いついたら作る。
 必要なら勉強する。
 不要でも遊ぶ。

 そんな感じで、技術力を伸ばしていきたいと思います。時間は有限だからそればかりもできないけど、持ってて困るものではありませんしね。技術って。

 というわけで、カレンダーを作ったよという記事でした。用途? 特にない!
 面白かったので満足です。また何か作るもの無いかなー?

(代表 落合裕太)

よかったらぜひシェアをお願いします!