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

日程調整アプリを拡張しよう-1-

calendar_helperを使い拡張する

日程調整アプリをつくろう-6- 終了時点のコードに対して拡張を行っています。

拡張内容

今の日程調整アプリは、user_scheduleのlistで候補日を入力するとき、一々実際のカレンダーを見ながら入力しなければいけません。

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

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

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

手順

手順を、以下に示します。

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

calendar_helperプラグインをインストール

InstantRailsのメニューから”Rails Applications→Open Ruby Console Window”と選択、クリックします。

ir105.gif

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

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

ch001.gif

Eventモデルにカラムを追加

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

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

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

ch02.gif

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

ch003.gif

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

ch004.gif

Eventのviewを変更する

カラムが増えたのでviewを変更していきます。なお、既存のeventsレコードが既にある場合は、一旦削除するか、year_monに値を設定しておいてください。

Eventのlistを変更する

app/views/event/list.rhtmlの12行目から14行目を以下のように修正します。

ch005.gif

EventのShowを変更する

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

ch006.gif

Eventの_formに追加する

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

ch007.gif

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

chkakunin1.gif chkakunin2.gif chkakunin3.gif

UserScheduleコントローラにコードを追加

app/controllers/user_schedule_controller.rbのlistに以下のように追加します。

ch008.gif

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

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

ch009.gif ch009-01.gif ch009-02.gif

UserScheduleのlistにカレンダーを追加

まずは表示から

app/views/user_schedule/list.rhtmlに以下のように変更、追加します。

ch010-01.gif

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

ch010-02.gif

ブロックを渡して候補日を表示

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

ch010.gif

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

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

ch10-03.gif

カレンダー用スタイルシートを追加する

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

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

ch011.gif

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

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

ch012.gif

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

ch012-01.gif

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

ch012-02.gif

カレンダーからのnewリンクを追加

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

ch013.gif

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

ch013-01.gif

すでにScheduleがある場合の処理を記述

候補日ではリンクを表示しないように変更します。

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

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

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

ch014.gif

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

ch014-01.gif

Scheduleのコントローラとviewにコードを追加

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

Schedule_controller.rbのnewに追加

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

ch015.gif

viewのnewに追加

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

ch016.gif

viewのformを変更

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

ch017.gif

確認してみます。

ch017-01.gif

コントローラのcreateに追加

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

ch018.gif

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

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

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

終了

お疲れ様でした。

目次

Last modified:2008/03/29 02:20:36
Keyword(s):
References:[日程調整アプリを作ろう]