読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

import { Fun } from 'programming'

日付を扱うJavaScriptプラグイン「moment.js」を試す + jCanvasを使ってカンタンなアナログ時計を作った

どうも!chuckです。

 

先日はてブでこちらの記事を拝見しました。

b.hatena.ne.jp

 

あれですね。

JavaScriptで日付を扱う関数。ちょっとややこしいんですよね。

 

ところが、ブクマにはこんなコメントが。

JavaScript による日付・時刻・時間の計算・演算のまとめ - hoge256ブログ

No! 2007年の情報。今はすぐにmoment.jsを使うべき

2015/06/08 06:36

b.hatena.ne.jp

 

ん??moment.js...?

 

 

なんか便利そう!!!゚+.(◕ฺ ω◕ฺ )゚+.

 

というわけでさっそく試してみました!

 

公式サイト↓↓

Moment.js

f:id:chuck0523:20150609204454p:plain

 

http://momentjs.com

 

ダウンロードは2種類。

f:id:chuck0523:20150609204940p:plain

f:id:chuck0523:20150609204950p:plain

 

いざ使ってみる

うーん、、、

たしかに便利なんだろうけど、「これはすごい!!」という感覚はなかった。かも。

いや、自分が未熟なだけなんですが…(´;ω;`) 

 

強いて言えば、日付や時刻を取り出しやすいかなと感じました!

このように↓↓

gist.github.com

ただし難しいことはしませんでした(・∀・;)

 

 

そうだ!時計を作ろう!

ドキュメントを見ているだけではアレだったので、実際に作ってみました笑

作るものはカンタンなアナログ時計です♪

 

完成図

f:id:chuck0523:20150609234744p:plain

ホントにカンタンですねw

 

コード

gist.github.com

 

moment.jsを使って時刻を取得しています。

そしてサインコサインを使って時計の針の角度を設定しています(`・ω・´)ゞ

 

時計のロジックに関してはこちらのサイトを参考にしました↓↓

www.oikawa-sekkei.com

 

素敵なお手本のおかげで2時間ほどで完成させることが出来ました!(´;ω;`)

 

裏テーマ

上記のサイトではJavaScriptで書いてあるんですが、今回はそのコードをjQueryで書き直しました。

というのも、jCanvasの練習もしたかったからですw

 

というわけで、今回のコーディングを通して少しはjCanvasと仲良く慣れたような気がします♪

個人的には、複雑なレンダリングになるほどjQueryのDOM操作が活きるように感じます(?_?)

 

そして、日付・時刻を扱いやすいmoment.jsもバリバリ活用していきたいと思います !

では!

 

今回書いたコード 

gist.github.com

 

DEMO

http://chuck0523.github.io/canvasClock/canvasClock.html

 

 jCanvasデビューはこちら↓↓

chuckwebtips.hatenablog.com