$(document).ready(function() {

  $('#calendar').fullCalendar({
    editable: true, 

    // カレンダーの日付クリック時に呼び出す処理(★動いている)
    dayClick: function(date, allDay, jsEvent, view) {
      // "test"のイベントを登録する
      $('#calendar').fullCalendar('addEventSource', [{
        title: "test",
        start: date,
        allDay: true
      }]);
      $(this).css('background-color', 'red');
    },

    // カレンダーのイベントクリック時に呼び出す処理(★動いていない)
    eventClick: function(calEvent, jsEvent, view) {
      // クリックしたイベントを削除する
      $('#calendar').fullCalendar('removeEvents', calEvent._id);
    },
  });
});

使用している環境

Rails 4
fullcalendar-rails (FullCalendar 1.6.4を使用)
CentOS 6.5
FireFox または Chromeで表示

Windows + xampp + FullCalendar 使用時には問題発生していなかったので、環境依存の問題のようです。。

原因

fullcalendar.js の bindDaySeg() 内で eventElementHandlers()を呼び出すことで、ハンドラの登録(eventClickも含む)を行っているのですが、その手前の以下の処理でエラーが発生していました。

function bindDaySeg(event, eventElement, segment) {

  if (isEventDraggable(event)) {
    t.draggableDayEvent(event, eventElement, segment); // use `t` so subclasses can override
  }

t.draggableDayEvent()内で、eventElement.draggable()のパラメータの登録、処理の定義を行っているのですが、今回使用している環境ではeventElement.draggable 自体がundefinedになっているため、ここで処理が中断されていました。

回避方法

fullcalendarの設定で、draggableをoffにすることで、t.draggableDayEvent()の呼び出しを回避するようにしました。。

$(document).ready(function() {

  $('#calendar').fullCalendar({
    editable: true, 
    disableDragging: true, // ★追加！！
    // カレンダーの日付クリック時に呼び出す処理
    dayClick: function(date, allDay, jsEvent, view) {
 
    ...

課題

上記の回避方法を使うと、ドラッグイベントが使えなくなります。
根本的な解決には、eventElement.draggable が undefinedになる原因を確認して、その上で解決法を考える必要があります。

クリックだけ使うので良ければこの方法で、、よければお試し下さい。

2014-05-18

RailsでFullCalendarを使う

以前作成した、FullCalendarを使った勉強記録帳の Rails版を作ろうと思い、Railsを色々いじっていたのですが、fullcalendar-railsなるものがgemで使用可能とのことなので、こちらを使ってみました。

使い方

大まかな流れは

Gemfileにfullcalendar-rails　を追加
app/assets/javascript/application.js に require fullcalendar を追加する
app/assets/stylesheets/application.css に require fullcalendar を追加する
app/assets/javascripts/任意の名前.js に fullcalendar呼び出し処理を追加する
カレンダーを表示するページのhtmlファイルに

<div id=calendar></div>

を追加する

これだけ、とっても簡単。
ファイルの内容等、詳しい手順は、こちらで紹介されています。
http://qiita.com/siguremon/items/73651af19babd22fe012

「困ったらまずgemがないか探す」と言われて(？)いますが、実際に自分がやりたいことがgemやフリーソフトから見つかるとこんな便利なのかと実感。。

2014-05-11

Railsチュートリアル感想

ずっとやってたRailsチュートリアルを一通り終えたので、感想など。

■成果物

とりあえず夏ぐらいまでは公開しておこうかと思います。
これから始める人は参考程度にどうぞ。
Herokuでの公開先

ユーザ登録、ログインからコメント投稿、別ユーザのフォロー機能まで、わりとしっかりしたアプリケーションができます。

ログイン状態で表示される、右上のAccountボタンが動作せず、ログアウト等一部操作ができない状態になってしまっていますが、、それ以外は動いています。

■作業時間

Githubのコミット記録では 4/1 ～ 5/10まで1ヵ月ちょっと。1日1時間程で進めてきたので、計40時間程度でしょうか。
各章の課題に取り組みながら進めると、もっとかかると思います。

■よかったこと

1. テスト駆動開発でのアプリ構築が行える

Rspecで
テスト作成⇒テスト失敗⇒対象機能作成⇒テスト成功
のサイクルで開発を続けるので、TDD初心者の自分には良い経験になりました。

2. モデル設計が丁寧

なぜここで、このデータを追加するのか、データの構成、他のモデルとの関係等、段階的に丁寧に解説してくれます。

3. Railsが勉強できる

これに尽きます！
ユーザ管理、ログイン画面への誘導、別ユーザとの関連構築まで、Railsのアプリ構築が経験できます。

ボリュームあったので、とりあえず終わってほっとしてます。
次は自分でアプリを作ってみよう。

2014-04-28

RailsレシピブックとMVCについて少し

Railsの勉強として読みました。

Rails3レシピブック 190の技

作者: 高橋征義,松田明,諸橋恭介
出版社/メーカー: ソフトバンククリエイティブ
発売日: 2011/07/25
メディア: 単行本
購入: 34人クリック: 966回
この商品を含むブログ (38件) を見る

Railsの基礎から、Model, View, Controlerの各項目の概念、できることをレシピとして説明してくれているので、一通り読むことで何をしたいときにどこをいじれば良いのか、イメージしやすくなってきました。
Rails使う上で、MVCの使い分けがわかってないとどのフォルダに何があるのかもわからないので、ここでしっかり意識できるようになっておいてよかった！

MVCについて補足

最近お世話になっているRailsチュートリアルからMVCについて説明している箇所をまとめておきます。
忘れてしまったときには読み直そう。

Model-View-Controller (MVC)
MVCの概念についての説明です。

MVCの挙動
ブラウザからリクエストを送った時のRailsのModel, View, Controllerの各要素の挙動についての説明をしてくれています。

2014-04-21

bundle installとupdateの使い方について

railsでGemの管理を行ってくれるbundlerですが、bundle installとbundle updateの違いがよくわからないまま、「とりあえず両方実行しちゃおう」ってなることが多いので、自分のためにも違いをまとめておきます。

■bundle install

以下、引用

「bundle install」を行なうと、「Gemfile」に書かれたGemパッケージと、そのGemパッケージが依存しているGemパッケージを自動的に調べて全てインストールしてくれます。「Gemfile.lock」はインストールされたGemパッケージの名前とバージョンが記録されたものです。

他の環境で同じアプリケーションの開発を行なう場合は、プログラムファイルに加えてこの「Gemfile.lock」ファイルを配布します。そして他の環境で「bundle install」を実行すると、今度は「Gemfile.lock」ファイルが参照され、指定されたバージョンのGemパッケージがインストールされます。

参照 : Bundlerを使ったGemパッケージの管理 - Ruby on Rails入門

■bundle update

bundle updateはGemfile.lockの記述を無視して、GemfileでのGemの指定やそのバージョン指定などに基づいて、gemを更新する。
更新時にGemfile.lockを更新する。

参照: bundlerでの運用方法 - Qiita

■補足

英語ですが、bundlerマニュアルの内容もまとめておきます。

bundle install

DESCRIPTION
Install the gems specified in your Gemfile. If this is the first time you run bundle install (and a Gemfile.lock does not exist), bundler will fetch all remote sources, resolve dependencies and install all needed gems.
If a Gemfile.lock does exist, and you have not updated your Gemfile, bundler will fetch all remote sources, but use the dependencies specified in the Gemfile.lock instead of resolving dependencies.
If a Gemfile.lock does exist, and you have updated your Gemfile, bundler will use the dependencies in the Gemfile.lock for all gems that you did not update, but will re-resolve the dependencies of gems that you did update. You can find more information about this update process below under CONSERVATIVE UPDATING.

bundle update

NAME
bundle-update - Update your gems to the latest available versions

DESCRIPTION
Update the gems specified (all gems, if none are specified), ignoring the previously installed gems specified in the Gemfile.lock. In general, you should use bundle install(1) to install the same exact gems and versions across machines.
You would use bundle update to explicitly update the version of a gem.

まとめ

Gemfile.lockがない状態で「bundle install」を行うと、Gemfileに記載されているソフトのインストールを行う
bundle installはGemfile.lockを参照して環境をインストールする
Gemfile.lockに依存せずにgemの更新を行いたい時は、bundle updateを使う
bundle updateはGemfile.lockの更新を行う

~~Gemfileを更新したときは、bundle updateを実行しておこう！~~

すみません。最後の一文が嘘でした。。。

追記

ちょっと待った! Railsでgitリポジトリから除外すべきでないファイル:Gemfile.lockとdb/schema.rb | TechRacho
ここを見て誤解があることに気づきました！

bundle installについて

Gemfileにgemが追加された場合(通常は開発時)
Gemfileに追加されたgemとそれに依存する未インストールgemのみがインストールされ、Gemfile.lockはそれらのgemについてのみ更新される。
Gemfileに変更がない場合(通常はデプロイ時)
Gemfile.lockに従ってインストールされる。Gemfileは参照されず、Gemfile.lockは更新されない。

bundle updateについて

bundle updateを実行すると現状のGemfile.lockの内容は無視され、上で言う「Gemfile.lockがない場合」と同じことが行われます。当然ながら、Gemfile.lockは、現時点の最新バージョンと依存関係を持つgemによってごっそり更新されてしまいます。

Gemfileを更新して、bundle install を行うのは正しい。
bundle updateを行うと現状の環境で使用しているgemに関しても、Gemfileの記述の範囲内で最新のものがインストールされる

Gemfile更新時も、別のgemの状態を同じにする時はbundle installを実行するのが良さそうです。

2014-04-14

Rails勉強中

Ruby、JavaScriptで作ったものをブログやGithubを使って紹介してきましたが、
そろそろサーバサイドのアプリケーションで直接動かせるものを公開したいと思い、Railsの勉強中です。

勉強ネタ

■Ruby on Rails チュートリアル：実例を使って Rails を学ぼう

Railsの仕組みから丁寧に説明してくれています。
herokuへの展開方法も説明してくれているので、これを使って公開してみよう。
現在 4章。11章までの道は長いです。。

■Railsレシピブック

Rails3レシピブック 190の技

作者: 高橋征義,松田明,諸橋恭介
出版社/メーカー: SBクリエイティブ株式会社
発売日: 2013/09/01
メディア: Kindle版
この商品を含むブログを見る

チュートリアルをやりつつ、通勤中に読んでます。
実際にRailsをいじっている時に読んでみるのが一番効果ありそうですが、「こんなことできるんだー」と、読みながらイメージできるので、けっこういいです。

目標

JavaScriptでカレンダーを作る - saj_kzの日記で紹介した、勉強記録用カレンダーのRails版を5月中に作る

何度か挫折したけど今度こそ！