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

日程調整アプリを作ろう-6-

今回分実装済みのサンプル:adjuster.zip

実装 -4-

作成手順

今回実装する内容、手順を、以下に示します。

  1. BASIC認証用にhtpasswdプラグインをインストール。認証をかける
  2. トップページをメニュー画面に変更
  3. スケジュールのnewに遷移するリンクをuser_schedules/listに追加、コントローラを変更する
  4. スケジュールの並び順を変更する
  5. validationをかける(user,event)
  6. menuへのリンクを共通化する
  7. スケジュールの日付の表示を修正する

1.BASIC認証用にhtpasswdプラグインをインストール。認証をかける

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

ir105.gif

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

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

06-01.gif

今回はアプリケーション全体に認証をかけます。

app/controllers/application.rbを開き、以下のように記述します。

なお、ユーザ名とパスワードは適宜書き換えましょう。

06-03.gif

サーバを起動して、menuやuserのページにアクセスしてみましょう。ダイアログが出ましたね。設定したユーザ名とパスワードを入力して認証を確認しましょう。

06-04.gif

2.トップページをメニュー画面に変更

http://localhost:3000/にアクセスすると、最初から用意されているトップページが表示されますが、メニューに変更しましょう。

06-05.gif

config/routes.rbを開き、コメントアウトを外し、以下の用に記述します。

この記述を行っても静的なページがあるとそちらが優先されてしまいます。

というわけで、public/index.htmlも削除します。

06-02.gif

http://localhost:3000/にアクセスしてみましょう。オーケーですね。

ちなみにconfig/routes.rbの22行目の記述があるためにuser/edit/2といった風にマッピングされているんですね。

06-06.gif

3.スケジュールのnewに遷移するリンクをuser_schedules/listに追加、コントローラを変更する

さて、一通り動きを確認できるようになったら、スケジュール(候補日入力)の場所が気にかかります。スケジュールの場所について検討してみましょう。

まず現状の操作の確認です。

event/list→schedule/list→候補日入力→event/list→user_schedule/list

うーん、ちょっと煩雑です。入力して、戻って開いてと画面遷移も多いですね。

06-07.gif

これ、user_schedule/listからschedule/newに遷移して、user_schedule/listにリダイレクトしちゃえば一々schedule/listに遷移しなくていいので操作も直感的じゃないでしょうか?

06-08.gif

viewに追加(user_schedule)

app/views/schedule/list.rhtmlからnewのlink_toを、app/views/user_schedule/list.rhtmlにコピーします。

06-09.gif

確認してみましょう。おっと、user_schedule/newと判断されてしまいました。

06-10.gif

どのコントローラーのアクションなのか、ちゃんとコントローラーを指定しましょう。

controller => 'user_schedule'を追加します。
06-11.gif

controllerを修正(schedule)

createしたら、user_schedule/listにリダイレクトするように修正しましょう。以下の用に記述します。

06-12.gif

新しくスケジュールを入力して確認してみましょう。正しくリダイレクトされてますね。

あれ?日付の並びがおかしいですね。あ!そういえば並び順を指定していませんでした。

06-13.gif

4.スケジュールの並び順を変更する

スケジュールを日付順に並ぶように変更します。

user_scheduleコントローラーの@event.schedulesという部分を@event.schedules.find(:all,:order =>'schedule_date')とすれば並び順は変更できます。

しかし、ここを変更の場合、他の場所でも同じようにスケジュールを取得するコードを書いた場合、その都度記述しなければならずDRYではありません。

そもそもeventからschedulesを取得する場合、普通は常に日付順に並ばせる事になるかと思います。

というわけでeventモデルのアソシエーション部分を変更します。app/models/event.rbを以下のように修正します。このように記述すると、event.schedulesとhas_manyで取得してくる時にorderされて取得されます。

06-14.gif

オーケーですね。

06-15.gif

5.validationをかける(user,event)

userやeventを作成するときに、名前や内容が空白だったら困りますよね。validationをかける事にしましょう。

app/models/user.rbに以下の用に記述します。

06-16.gif

validationがかかっているか確認してみましょう。オーケーですね。

06-17.gif

app/models/event.rbも以下の用に記述、同じように確認します。

06-18.gif

6.menuへのリンクを共通化する

前回、各画面を繋いだのですが、メニューへのリンクがuserとeventにあってDRYではないとの突っ込みが。

確かにDRYではないですね。それにメニューへのリンクは全てのページにあって別に構わないですよね。

というわけで、各コントローラ事に作ったレイアウトファイルを一つに共通化して、そこにメニューへのリンクを書くことにします。

javascriptの読み込みも書いてあるので、user_scheduleのレイアウトファイルを生かすことにします。

app/views/layouts/user_schedule.rhtmlをapplication.rhtmlにリネーム、他のuser.rhtml,event.rhtml,schedule.rhtmlは削除してしまいます。

userとeventのlist.rhtmlからメニューへのlink_toを削除します。

app/views/layouts/application.rhtmlに以下のように記述します。なお、全部のコントローラーで共通化したので、コントローラーネームも動的に表示するように変更してあります。

06-19.gif

確認してみましょう。オーケーでしょうか?あー、メニューを表示してるときもリンクを表示しちゃいますね。

06-20.gif

メニューを開いている時はリンクされないように変更しましょう。app/views/layouts/application.rhtmlのlink_toをlink_to_unless_currentに変更します。

06-21.gif

ただの文字になりましたね。

06-22.gif

7.スケジュールの日付の表示を修正する

スケジュールのlist,new,edit,showでの日付表示ですけど、月名が英語で時間と分も表示されてますよね。これを修正しましょう。

06-23.gif 06-24.gif

listの修正

app/views/schedule/list.rhtmlを以下のように修正します。

06-25.gif

確認してみましょう。オーケーですね。

06-26.gif

showの修正

app/views/schedule/show.rhtmlを以下のように修正します。こちらも確認してください。

06-27.gif

new,editの修正

app/views/schedule/_form.rhtmlを以下のように修正します。use_month_numbersが月名を数字表記に変えるオプション、:discard_hourが時間と分を表示しないオプションです。

06-28.gif

確認してみましょう。オーケーですね。

06-29.gif

次は?

次回はメール配信、テスト、日本語化、1.2系から2.0系への移行のいずれかを行います。

目次前ページへ次ページへ