まず普通のを作ってみる。

ruby rails

参加してるMLの小江戸らぐの人たちで集まって毎月Railsの勉強会をやっていて、
そこで講師みたいな事させて頂いたりしているのですが、
8月の時にそこでデモンストレーションしたAjaxを使ったサンプルサイトの解説を書こうかと。*1


RailsとAjaxって結構親和性高いよーって話をしました。
超適当な名簿管理システムを作ります。

こんなサイトになります。

名前登録した後、項目をクリックすれば編集したり、
削除を押してデータを削除させたり、
D&Dで並び替えできるようなサイトです。

以下、開発手順とか。*2

途中、順番にやってるので手順が多くなってますが、
面倒な人は1〜4と、11〜を実行してください。
完成します。

1.Railsでプログラムを作ります。

$ rails ajax

つらつらーっとファイルが出来上がりますね。

      create
      create  app/controllers
      create  app/helpers
      create  app/models
      create  app/views/layouts
      create  config/environments
      create  components
      create  db
      create  doc
      create  lib
      create  lib/tasks
      create  log
      create  public/images
      create  public/javascripts
      create  public/stylesheets
      create  script/performance
      create  script/process
      create  test/fixtures
      create  test/functional
      create  test/integration
      create  test/mocks/development
      create  test/mocks/test
      create  test/unit
      create  vendor
      create  vendor/plugins
      create  tmp/sessions
      create  tmp/sockets
      create  tmp/cache
      create  tmp/pids
      create  Rakefile
      create  README
      create  app/controllers/application.rb
      create  app/helpers/application_helper.rb
      create  test/test_helper.rb
      create  config/database.yml
      create  config/routes.rb
      create  public/.htaccess
      create  config/boot.rb
      create  config/environment.rb
      create  config/environments/production.rb
      create  config/environments/development.rb
      create  config/environments/test.rb
      create  script/about
      create  script/breakpointer
      create  script/console
      create  script/destroy
      create  script/generate
      create  script/performance/benchmarker
      create  script/performance/profiler
      create  script/process/reaper
      create  script/process/spawner
      create  script/process/inspector
      create  script/runner
      create  script/server
      create  script/plugin
      create  public/dispatch.rb
      create  public/dispatch.cgi
      create  public/dispatch.fcgi
      create  public/404.html
      create  public/500.html
      create  public/index.html
      create  public/favicon.ico
      create  public/robots.txt
      create  public/images/rails.png
      create  public/javascripts/prototype.js
      create  public/javascripts/effects.js
      create  public/javascripts/dragdrop.js
      create  public/javascripts/controls.js
      create  public/javascripts/application.js
      create  doc/README_FOR_APP
      create  log/server.log
      create  log/production.log
      create  log/development.log
      create  log/test.log


2.DBを作成します。

$ mysql -u ユーザー名
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 66 to server version: 5.0.22

Type 'help;' or '\h' for help. Type '\c' to clear the buffer.

mysql> create database ajax_development character set utf8;

大体めんどくさいので、いつもアプリ名_環境でDBを作ってます。
今回はajax_developmentです。
この辺の、DB環境は、自分の作ったrailsの環境に合わせて適当に書き換えてください。*3


3.名簿用のモデルを作成します。
generateを実行。

$ ruby script/generate model Member name:string atitude:string position:integer

これでマイグレートファイルとかモデルが出来上がりました。*4

      exists  app/models/
      exists  test/unit/
      exists  test/fixtures/
      create  app/models/member.rb
      create  test/unit/member_test.rb
      create  test/fixtures/members.yml
      exists  db/migrate
      create  db/migrate/001_create_members.rb

db:migrateを実行します。

rake migrate

テーブル出来上がれば成功です。

== CreateMembers: migrating ===================================================
-- create_table(:members)
   -> 0.0633s
== CreateMembers: migrated (0.0650s) ==========================================

4.コントローラを作成します。
generateを実行*5

ruby script/generate controller Test list

必要なファイルが出来上がります。

      exists  app/controllers/
      exists  app/helpers/
      create  app/views/test
      exists  test/functional/
      create  app/controllers/test_controller.rb
      create  test/functional/test_controller_test.rb
      create  app/helpers/test_helper.rb
      create  app/views/test/list.rhtml


5.まずは一覧表を作ってみる。
まずは普通に、list と 追加だけ作ります。
4で作成された app/controllers/test_controller.rb を編集します。

class TestController < ApplicationController
  def list
    @members = Member.find(:all)
  end

  def add
    @member = Member.new(params[:member])
    @member.save! unless @member.name.blank?

    redirect_to :action=>'list'
  end
end

<html>
  <head>
    <title>
      名簿管理アプリケーション
    </title>
  </head>
  <body>
    <hr>
    <ul id="members">
      <% for @member in @members %>
      <li id="member_<%=@member.id %>" >
         名前 : <%= h @member.name  %> /
         どんな人 : <%= h @member.atitude %>
      </li>
      <% end %>
    </ul>

    <hr>
    <%= form_tag :action => 'add' , :id => @member %>
      <p>名前 <%= text_field 'member','name' %>どんな人 <%= text_field 'member','atitude' %><%= submit_tag '登録' %></p>
    <%= end_form_tag %>
  </body>
</html>

これで、名簿に名前を追加していくだけのアプリケーションが出来上がりました。

まだ、全然Ajaxっぽくないので、ちょっとずつこれにカスタマイズしていきたいと思います。

*1:一ヶ月半遅れ。どれだけ遅れてるんだ……。

*2:linuxで開発やっているので、windowsの人は適度に読み替えてください。

*3:日本語を使う人はconfig/environment.rbに$KCODE='u'とかの記載もよろしくお願いします。

*4:generaterは便利すぎます。

*5:list.rhtmlを作らなきゃいけないので今のうちに指定してます。