Rails + AngularJS + FullCalendar でニコニコカレンダーっぽいの作ってみた

Motivation

会社でおこなっている TechMeeting の中で「ニコニコカレンダーとかあったよね」みたいな会話から「そういうものでライフログを取ってみたい」といった話もあがり、 AngularJS の練習も兼ねて Ruby on Rails で書いてみようと思った。結論から言うと FullCalendar の仕様に詳しくなった。そうじゃない。

Demo

http://oh-my-nicocal.herokuapp.com/

登録/更新
- 3種類のニコニコマークをカレンダーの好きな日付に Drag & Drop する感じ
削除
- 削除したい日付のニコニコマークをクリックすれば消えます

ユーザ認証とかまだ導入してないので、好き勝手触れます。

What's ニコニコカレンダー

Concept

一人用
データ集まったら解析に使えそうだけど、まだそのページは無い
- (例) 月曜日はやる気ない日が多すぎる
- (例) 金曜日はテンション高い

Requirements

FullCalendar は、AngularJS で wrap した AngularUI Calendar for AngularJS を使っています。

Burning

せっかくなので Grape とか使ってみた
- Grape で jbuilder 使うために grape-jbuilder 導入したり
- バージョニングとかする気が無かったので Controller のままでもよかったかなとも思う
- 練習と割りきった
jQuery や AngularJS は assets 系 gem で使用することにした
- bower を使ってみようかな、とも思ったが
- ui-calendar 用 gem がなかったので angular-ui-calendar-rails 作った
request spec 初めて書いた
- いつも仕事では Capybara + PHP だったもので…
CoffeeScript 初めて書いた
- foo(function() {}); からの卒業
アイコンは fontawesome を使用
- 最初は GitHub emoji 使おうと思ったけど、class 指定でアイコン表示してくれるのが便利だったから (後述)

Customize of FullCalendar

カスタマイズってほどでもないですが

FullCalendar は基本的にはイベントを日時指定で登録できるのが特徴のカレンダーなので、デモページの通り、イベントタイトルを持つ青帯っぽいやつが表示されます。

イベントの登録は

{
  title: 'event title'
  start: new Date(2014, 5, 20)
  end:   new Date(2014, 5, 30)
  allDay: true // 終日
}

みたいなオブジェクトを登録するんですが、標準で「イベントタイトルの代わりに画像を表示する」という機能はないです。

自分の想像ではアイコンだけ表示して欲しい
タイトルの部分に <i fa fa-smile-o></i> と指定できない(エスケープ)
かといって $(青帯のDOM).html('<i fa fa-smile-o></i>') はかっこわるい

というわけで

青帯の部分は表示しない
- title: '' みたいにする and height: 0px
カレンダーの各日付枠の下半分に対して fontawesome class を指定
- className に指定したやつが、イベント(タイトル以外)の class になる
- 参考: FullCalendar Documentation - Event Object

ちょっと説明しきれてないですが、とりあえずイベントオブジェクトに対して font awesome のクラスを指定したら幸福が実現したというお話でした。

そもそもなんで FullCalendar 選んだかっていうと、まあいい感じに月の移動できたからってのと、 drag&drop への hook が用意されていたからです。自分でカレンダー機構書こうかとも思ったのですが、飽きました。

Conclusion

AngularJS の必要あまり無いアプリでしたが、まあ動いたのでいいです。

Thanks Driven Life

日々是感謝