Create  Edit  Diff  FrontPage  Index  Search  Changes  History  Source  RSS  Note  wikifarm  Login

Rails' Wiki - AdjusterExtension-0001 Diff

  • Added parts are displayed like this.
  • Deleted parts are displayed like this.

{{toc}}
!calendar_helperを使い拡張する
日程調整アプリをつくろう-6-
終了時点のコードに対して拡張を行っています。
!!拡張内容
今の日程調整アプリは、user_scheduleのlistで候補日を入力するとき、一々実際のカレンダーを見ながら入力しなければいけません。

また、マトリックス表ができあがっても、曜日などを表示していないのでいまいちわかりづらいです。

マトリックス表に曜日を表示、Scheduleをnewするフォームでjavascriptを使用して、カレンダーからの入力を出すでも事足りるのですが、せっかくなので?カレンダーのプラグインを使ってみましょう。

というわけで、user_scheduleのlistでカレンダー表示を行い、そのカレンダーから候補日(Schedule)をnewするように機能を拡張します。
!!手順
手順を、以下に示します。

#calendar_helperプラグインをインストール
#Eventモデルにカラムを追加
#Eventのviewを変更する
#UserScheduleコントローラにコードを追加
#UserScheduleのlistにカレンダーを追加
#Scheduleのコントローラとviewにコードを追加

!!calendar_helperプラグインをインストール
InstantRailsのメニューから”Rails Applications→Open Ruby Console Window”と選択、クリックします。

{{attach_view(ir105.gif,AdjusterTutorial-0004)}}


adjusterプロジェクトのディレクトリに移動して、”ruby script/plugin install http://topfunky.net/svn/plugins/calendar_helper”と入力して実行します。

vendor/pluginsにインストールされます。


{{attach_view(ch001.gif)}}


!!Eventモデルにカラムを追加
早速コードを記述していこうと思うのですが、その前にEventモデルにカラムを追加します。

calendar_helperでカレンダーを表示するとき、何年何月かというデータが必要になります。常に今年の今月であれば問題はないですが、実際には各イベント事に開催予定月が異なりますよね。そこで、開催予定年月の項目を増やします。

"ruby script/generate migration add_column_to_events_year_month"と入力してmigrationファイルを作成します。(画像にtypoありますが気にしないでください)

{{attach_view(ch02.gif)}}

作成された006_add_column_to_events_year_month.rbを以下のように編集します。

{{attach_view(ch003.gif)}}

"rake db:migrate"と入力、実行します。

{{attach_view(ch004.gif)}}

!!Eventのviewを変更する
カラムが増えたのでviewを変更していきます。なお、既存のeventsレコードが既にある場合は、一旦削除するか、year_monに値を設定しておいてください。
!!!Eventのlistを変更する
app/views/event/list.rhtmlの12行目から14行目を以下のように修正します。

{{attach_view(ch005.gif)}}

!!!EventのShowを変更する
app/views/event/show.rhtmlを以下のように変更します。

{{attach_view(ch006.gif)}}

!!!Eventの_formに追加する
app/views/event/_form.rhtmlに以下のように追加します。

{{attach_view(ch007.gif)}}

問題ないか確認しましょう。

{{attach_view(chkakunin1.gif)}}

{{attach_view(chkakunin2.gif)}}

{{attach_view(chkakunin3.gif)}}

!!UserScheduleコントローラにコードを追加
app/controllers/user_schedule_controller.rbのlistに以下のように追加します。

{{attach_view(ch008.gif)}}

初めの囲みでEventに新たに作成したカラムより、開催年と月を取得しています。

次の囲みはわかりづらいとの指摘が多かった部分です。初期値が空のArrayとなるHashを用意し、そこに候補日(Schedule)の日付をキーとしたScheduleモデルを入れています。
説明するより、実際にどのような形でデータが入っているのかを見た方がわかりやすいかと思います。囲みの下あたりに"raise @c_schedules.inspect"と記述して実行してみましょう表示してみましょう。終わったらもちろんコメントアウトするか消すかしてください

{{attach_view(ch009.gif)}}


{{attach_view(ch009-01.gif)}}

{{attach_view(ch009-02.gif)}}


!!UserScheduleのlistにカレンダーを追加
!!!まずは表示から
app/views/user_schedule/list.rhtmlに以下のように変更、追加します。

{{attach_view(ch010-01.gif)}}

カレンダーが表示されましたね。

{{attach_view(ch010-02.gif)}}

!!!ブロックを渡して候補日を表示
候補日もカレンダーに表示させてみましょう。以下のように追加します。

{{attach_view(ch010.gif)}}

cell_textがセル内の文字列、cell_attrsが属性のHashです。

[cell_text,cell_attrs]というArrayをブロック内で返すと、それに応じてカレンダーを表示します。

{{attach_view(ch10-03.gif)}}

!!!カレンダー用スタイルシートを追加する
表示が寂しいですね。カレンダー用のスタイルシートを追加しましょう。

"ruby script/generate calendar_styles"と入力、実行します。

{{attach_view(ch011.gif)}}

作成されたスタイルシートを適用します。

app/views/layouts/application.rhtmlに以下のように追加します。青系にしてみました。


{{attach_view(ch012.gif)}}

確認してみます。あらら、真ん中に表示されてしまいました。それに土日と重なると候補日が見えづらいです。

{{attach_view(ch012-01.gif)}}

public/stylesheets/calendar/blue/style.cssを適宜修正してください。私は.calendarのmarginと、.specialDayのcolorを変更しました。

{{attach_view(ch012-02.gif)}}

!!!カレンダーからのnewリンクを追加
さて、カレンダーから候補日を作成できるようにしましょう。
以下のように追加します。Eventのid以外に、新たに日付も渡すようにしてあります。

{{attach_view(ch013.gif)}}

確認してみます。おっと候補日を作成済みの日にもリンクが表示されています。

{{attach_view(ch013-01.gif)}}

!!!すでにScheduleがある場合の処理を記述
候補日ではリンクを表示しないように変更します。

以下のように記述します。

なお、link_to_unlessでも同じような事は出来ますが、リンクはされなくなりますがNewというテキスト自体は表示されてしまいます。今回はリンク自体を表示させたくないのでunlessを使用しています。

@schedulesからDate型のsuchedule_dateの配列を作成し、カレンダーの日付が含まれていたら、リンクを表示しないようにしています。

{{attach_view(ch014.gif)}}

確認してみます。OKですね。

{{attach_view(ch014-01.gif)}}

!!Scheduleのコントローラとviewにコードを追加
さて、newにparamsが渡ってくるときに新たに日付が追加されています。それを受けるようにScheduleのコントローラとviewを修正します。

!!!Schedule_controller.rbのnewに追加
コントローラのnewに以下のように追加します。

{{attach_view(ch015.gif)}}

!!!viewのnewに追加
app/views/schedule/new.rhtmlに以下のように追加します。

{{attach_view(ch016.gif)}}

!!!viewのformを変更
app/views/schedule/_form.rhtmlを以下のように変更します。Date.parseを使っているのは、paramsで渡ってきたときにstringになっている為です。

{{attach_view(ch017.gif)}}

確認してみます。

{{attach_view(ch017-01.gif)}}

!!!コントローラのcreateに追加
最後です。コントローラのcreateにも@s_dateの記述を追加します。

{{attach_view(ch018.gif)}}

この、コントローラのcreate部分と、new.rhtmlの追加部分は、_form.rhtmlにhiddenで日付を埋め込んでいるので、必要ないように思われたかもしれません。

正常にsave出来た時には確かに問題となりません。

しかし、validationに引っかかったときに、記述していないと@s_dateがcreateに存在していない為、newをrenderした時にnilになってしまいます。

!!終了
お疲れ様でした。

[[目次|AdjusterTutorial]]