Waves チュートリアルパート4

http://www.rubywaves.com/tutorial-4
パート1の翻訳はこちら。
パート2の翻訳はこちら。
パート3の翻訳はこちら。

- - - -

パート3では，ブログにコメントが使えるようにしました。このために，モデルと URI マッピングの修正が必要でした。今度はブログに CSS と JavaScript を追加します。このためには Rack のファイルローダーをアプリに追加する必要があります。configurations ディレクトリの development.rb を開いて，中を見てください。

module Blog
  module Configurations
    class Development < Default
      host '127.0.0.1'
      port 3000
      reloadable [ Blog ]
      log :level => :debug  
      application do
        use Rack::ShowExceptions
        run Waves::Dispatchers::Default.new
      end       
    end
  end
end

前述したように，設定は（Makaby や URI マッピングと同様）Ruby のコードそのものです。いま注目するのは，application パラメータです。Rack のスタティックなファイル処理機能をアプリに追加しましょう。

application do
  use Rack::Static, :urls => [ '/css', '/javascript' ], :root => 'public'   # 追加
  use Rack::ShowExceptions
  run Waves::Dispatchers::Default.new
end

このように，CSS と JavaScript を public/css と public/javascript ディレクトリに置くことができます。次に，それらのファイルをデフォルトレイアウトでインクルードします。templates/layouts ディレクトリの default.rb を修正します。

doctype :html4_strict

html do

  head do
    title @title
    script :src => '/javascript/site.js', :type => 'text/javascript'           # 追加
    link :href => '/css/site.css', :rel => 'stylesheet', :type => 'text/css'   # 追加
  end

  body do
    layout_content
  end

end

もちろん，実際の CSS と JavaScript ファイルはまだ追加していません。site.css を使って，ブログを Web 2.0 っぽくすることから始めましょう。

body { font-family: Verdana, Arial, sans-serif; background-color: white; }
h1, h2, h3, p, label, li { margin-bottom: 20px; }

特別なものはありませんが，ちゃんと CSS が読み込まれているかを確認するには十分です。

最後に，application パラメータを変更したのでサーバを再起動します。通常 Waves は自動的になんでもリロードします（ついでにいえば，真のリロードです）。しかし，いくつのパラメータ（データベース設定など）を有効にするためには再起動が必要です。

ブラウザの画面をリロードして，新しいスタイルを見ることができます。ソースを見れば，スタイルシートと JavaScript を読み込んでいることが分かるはずです。

JavaScript の前に，"motivating our example." というやつをやりましょう。ちょっといい編集のリンクを追加することから始めます。もちろん編集のリンクはブログの持ち主にだけ見えるべきです。そのために，ちょっといいログインページを追加して，ブログの持ち主がログインして編集できるようにすべきでしょう。

しかし，ここでは複雑なところはチュートリアルのパート5（まもなく公開）に任せることにします。単にリンクを追加して，編集ページに簡単にいけるようにします。こんな感じの show.mab になるはずです。

layout :default, :title => @entry.title do
  a 'Show All Entries', :href => '/entries'
  a 'Edit This Entry', :href => "/entry/#{@entry.name}/editor"   # 追加
  h1 @entry.title
  textile @entry.content
  h1 'Comments'
  view :comment, :add, :entry => @entry
  view :comment, :list, :comments => @entry.comments
end

これでエントリーの追加も編集も簡単にできるようになりました。しかし削除はまだできません。というわけで削除リンクを作りましょう。問題は REST スタイルの削除は普通のリンクではなく HTTP DELETE を使うという点です。ここで JavaScript を使います。editor.mab をこのようにします。

layout :default, :title => 'Edit Entry' do
  form :action => "/entry/#{@entry.name}/", :method => 'POST' do
    label 'Title'; br
    input :type => :text, :value => @entry.title, :name => 'entry.title'; br
    label 'Summary'; br
    textarea @entry.summary, :name => 'entry.summary', :rows => 10, :cols => 80; br
    label 'Content'; br
    textarea @entry.content, :name => 'entry.content', :rows => 20, :cols => 80; br
    input :type => :submit, :value => 'Save'
    a.delete 'Delete', :href => "/entry/#{@entry.name}"   # 追加
  end
end

Markaby のスマートな CSS の書き方で 'delete' クラスをリンクに追加しました。この時点では，このリンクはエントリーの表示機能しか持っていません。ここにちょっとした jQuery のマジックを使い，普通の GET を HTTP DELETE に変えます。

まず jQuery を読み込む必要があります。site.js を読み込む前に，templates/layouts/default.rb にスクリプトタグを追加します。

script :src => 'http://jqueryjs.googlecode.com/files/jquery-1.2.2.min.js',
  :type => 'text/javascript'

次に site.js で，削除リンクにクリックハンドラを追加して，GET の代わりに HTTP DELETE を送信するようにします。

$(document).ready( function() {
  $('a.delete').click( function() {
    if ( confirm("Are you sure?") ) {
      var href = $(this).attr('href');
      $.ajax({ type: 'delete', url: href, 
        success: function() { window.location = '/entries'; }
      });
    }
    // this isn't really a link ...
    // so tell the browser we've handled it
    return false;
  });
});

ちゃんと動くか確かめましょう。最初のエントリーを削除してみます。
http://www.rubywaves.com/images/deleting-an-entry.png?size=medium

やりました！ jQuery のハンドラに記述したように，最後に一覧ページ（/entries）に戻っているはずです。

完成です。ちょっと Ajax をまぶした REST スタイルのブログです。カスタムモデルとカスタム URI マッピングを追加しました。スタティックなファイルを処理するために Rack ミドルウェアを使ってアプリをカスタマイズもしました。次回は，ログインページを追加し，アプリを守るためのフィルタを URI マッピングに追加します。

完成するまでは，サポートフォーラム，リファレンスドキュメント，Hang Ten ブログ（新しいチュートリアルのアナウンスをします），スクリーンキャスト，その他 Waves 関連ニュースのことを忘れないでください。同様に Wiki にも注目してください。ここには Waves を使う上でのトリックやテクニックを皆さんに投稿してもらいたいと思っています。