開発のわだち（５）：カレンダービューを導入する

「カレンダービューを導入する」

目標：fullcalendarのgemを導入してカレンダービューを表示

1.FullCalendar-gemを追加

2.ブラウザからアクセスしてカレンダを表示

1.FullCalendar-gemを追加

何があるかわからないので、トピックブランチを切ります。

$ git branch
  hagehage
* master
$ git checkout -b fulcal
# 新しいブランチを作成し、同時にそのブランチに移動する。

カレンダービューを探していたら「月/週/日」表示に対応していてGoogle calendarとの連携まで準備してくれている素晴らしいものがあったので、こちらを採用しました。 full calendarというライブラリですがrails用のgemも存在していてこれを取り込むところから始めます。

こういうのは該当のgemのREADME.mdに従うに限りますw

まずはGemfileに以下の行をを追記。

gem 'fullcalendar-rails'
gem 'momentjs-rails'

そして、依存関係から先にアセットパイプラインにセットしておくべきgem 'momentjs-rails'をapplication.jsにセットします。

app/assets/javascripts/application.js

//= require moment

application.jsを編集した上でgemをインストール。

$ bundle

gemインストール後に生成されたfull calendarのjsとcssをアセットパイプラインに追加します。
app/assets/stylesheets/application.css

*= require fullcalendar

app/assets/javascripts/application.js

//= require fullcalendar

これで環境は整いました。

2.ブラウザからアクセスしてカレンダを表示

まずはカレンダービューを表示するページまでのルートを作るところから。

routes.rbを編集して最初にアクセスされるページを変更します。
config/routes.rb

Rails.application.routes.draw do
  root 'application#index'
# 最初にアクセスされる画面はapplication_controllerのindexアクションですよという設定。
end

次にapplication_controller.rbにindexアクションを設定。
app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
# indexアクションを設定。
  def index
  end
end

indexアクションに反応するviewを作成します。
app/views/application/index.html.erb

<h1>help!</h1>

これで、http://192.168.33.10:3000にアクセスすると以下のような画面が表示されるようになります。 f:id:neutligen:20160320231733p:plain

次にカレンダーを表示する画面です。bundleした際に生成されたindex.html.erbを編集します。ここでも、オフィシャルのDocsに従うためここを参考にしました。
app/views/calendar/index.html.erb

<h1>Calendar#index</h1>
<div id="calendar"></div>
# カレンダー(jquery)を表示する場所(id)を設置
<p>Find me in app/views/calendar/index.html.erb</p>

htmlに表示するデフォルトのカレンダーを生成するcalendar.coffeeを編集します。（これもbundleのタイミングで生成されている）
app/assets/javascripts/calendar.coffee

$(document).ready(function() {
    $('#calendar').fullCalendar({
    })
});

javascriptは本当にわからない。。。

何れにしても、これで準備は整ったはずなのでブラウザからカレンダービューのディレクトリにアクセスしてみます。 urlはhttp://192.168.33.10:3000/calendar/index。

すると

f:id:neutligen:20160320234530p:plain

わからないが祟ってエラー。。。

いろいろ調べてみると（"いろいろ"とか言って二日間調べましたが）ここはcoffeescriptで書かなきゃならないらしく、公式ドキュメントに書いてあるjavascriptコピーするだけじゃダメなようです。なので、Try Coffee Scriptを使って編集し直しながら、以下のように書き直しました。
app/assets/javascripts/calendar.coffee

$(document).ready -> 
 $('#calendar').fullCalendar()

こちらのサイトも参考にさせて頂きました。

改めてhttp://192.168.33.10:3000/calendar/indexにアクセス。

f:id:neutligen:20160320235657p:plain

15秒くらいガッツポーズしました。 javascriptとcoffeescript勉強しないとな。。。頑張ります。

一時期見当はずれな方向を調べ漁って、アセットパイプラインとかExecJSのRuntimeErrorとかに詳しくなりましたw。（ちなみに一緒にやってる学生は２時間くらいで出来ちゃってました。さすがや。。）

すかさずバージョンをリモートリポジトリへ。

$ git add .
$ git commit -m "got it, see calendar view"
$ git checkout master
# 冒頭で作成したトピックブランチからmasterブランチに戻ります。
$ git merge fulcal
# 作業していたトピックブランチをmasterブランチにマージします。
$ git push -u origin master

以上です。次回からは、表示の切り替えやスケジュールの登録をやっていきたいと思います。

環境

ホストOS: MacOSX 10.11.3
VirtualBox: 5.0.14
Vagrant: 1.7.4
ゲストOS: CentOS 7

ゲストOSの環境

Apache: 2.4.6
node.js: v0.10.43
ruby: 2.2.1p85
Rails: 4.2.6
fullcalendar-rails (2.6.1.0)