Ruby Freaks Lounge

第12回 Ramazeを使って120行で作る単語帳アプリ

この記事を読むのに必要な時間:およそ 2.5 分

はじめに

第11回は自由で素直なフレームワークRamazeの特徴について紹介しました。今回は,実際にRamazeでアプリケーションを作ってみます。

プロジェクトの始め方

まず,Ramazeでは「ramaze create <プロジェクト名>」でひな形を作る方法と,全てを自分で書いていく方法があるのでした。どちらを選んでも構いませんが,最初はひな形を使わず,1ファイルから少しずつ書いていくことをおすすめします。ramaze createを使うとたくさんのファイルが生成されるため,どれが何なのか分からなくなりがちです。

自動生成を使うのは,Ramazeにある程度慣れて,ディレクトリ構成などが分かってきてからで良いでしょう。今回も,自動生成は使わず,必要なファイルだけを用意することにしました。

ソースコード

今回は,英単語を登録したり,ランダムに一つ表示したりできる単語帳アプリケーションを作ってみました。githubにてソースコードの全文を公開しています。といっても,HTMLを入れても100行程度しかないので,読むのに時間はかからないと思います。ファイル構成は以下のようになっています。

app.rb
アプリケーションの本体(64行)。
view/index.html.erb
単語一覧画面のHTML(13行)。
view/new.html.erb
単語追加画面のHTML(9行)。
view/show.html.erb
単語表示画面のHTML(19行)。
layout/default.html.erb|
HTMLのレイアウトの定義(15行)。
public/
スタイルシートとJavaScript。

app.rbを実行するとサーバが起動するので,http://localhost:7999/にアクセスしてください。動作例は以下のようになります。

図1 今回制作する,単語帳アプリケーション

図1 今回制作する,単語帳アプリケーション

モデル

Ramazeはいろいろな部分が「選択可能」になっているフレームワークでした。今回はDataMapperをモデル用のライブラリとして使うことにしました。app.rbの中から,モデルを定義している部分を見てみましょう。

リスト1 DataMapperによるモデル定義の例(app.rb)

DataMapper.setup(:default, "sqlite3://#{__DIR__('words.db')}")
class Word
  include DataMapper::Resource
  property :id, Serial
  property :name, String
  property :description, Text

  validates_is_unique :name
end
DataMapper.auto_upgrade!

まずDataMapper.setupでデータベースに接続します。「__DIR__」はRamazeの提供する便利なメソッドで,現在のファイル(ここではapp.rb)のあるディレクトリを起点としたパス名を返してくれます。

次に,単語帳の単語を表すモデルクラスWordを定義しています。DataMapperでは,継承ではなくMixinでモデルクラスを定義します。 DataMapper::ResourceをMixinすると,「Text」「Serial」といった定数が参照できるようになり,これを使ってプロパティの型を指定します(モデルクラスに直接プロパティの情報を書くのもDataMapperの特徴です)。

最後に「DataMapper.auto_upgrade!」テーブルを作成しています。auto_upgrade!は,モデルクラスの構造からテーブルを自動生成するDataMapperのメソッドです。

ビュー

Ramazeではテンプレートエンジンもさまざまなものを選ぶことができます。今回は,RailsでおなじみのERBを使うことにします。テンプレートエンジンの指定は,コントローラクラスに「engine :ERB」等と書くことで行います。テンプレートファイルはview/以下に設置します(このディレクトリは設定で変更可能です)。

レイアウト

Rails同様,HTMLの共通部分を「レイアウト」としてまとめて定義することができます。レイアウトファイルはlayout/以下に設置します(このディレクトリも設定可能です)。今回は,全ページで使われるレイアウトをlayout/default.html.erbとして定義しています。

コントローラでどのレイアウトを使うかは,コントローラクラスに「layout 'default'」等と書くことで指定します。

著者プロフィール

原悠(はらゆたか)

NaClこと「ネットワーク応用通信研究所」勤務。さまざまなプログラミング言語に興味を持つ。最近触っている言語はRuby,Scheme,JavaScript,Englishあたり。

URL:http://route477.net/

著書

コメント

コメントの記入