前几天用Ruby on Rails框架做了个剪刀石头布的小应用程序。
下面放出程序过程。
-------------------
1. Appを作成
-------------------
>rails janken
>cd janken
>ruby script/generate controller Top index
>ruby script/generate controller Game start result
-------------------
2. ルーティング設定
-------------------
http://localhost:3000/にアクセスすると、直接アプリのメイン画面で開くように、以下の設定を行う。
config/routes.rbファイルに以下の1行を追加する
map.root :controller => 'top', :action => 'index'
こうすると、public/index.htmlを削除してもOK。
ActiveRecordモジュールの無効化
このアプリではデータベースを使用しませんので、ActiveRecordモジュールを無効にするため、以下の設定を行う。
config/enviroment.rbの29行目をコメントアウトにする。
config.frameworks -= [ :active_record, :active_resource, :action_mailer ]
ps:弄到这里不禁有种恍然大悟的感觉。以前为不使用数据库的程序苦恼了好久,后来没办法以为必须要使用数据库结果就硬是装了个sqlit3。傻啊~~~~
-------------------
3. ビューの作成
-------------------
1) レイアウトを作成
app/view/layoutsの下にapplication.html.erbを新規して次のような内容で作成する。
-------------------
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title><%= h @document_title %></title>
</head>
<body>
<div class="header">じゃんけんゲーム</div>
<div class="main">
<%= yield %>
</div>
<div class="footer">
Powered by Ruby on Rails
</div>
</body>
</html>
-------------------
<%= yield %>というのはWebページ本体です。
2) スタイルシートの適用
public/stylesheets/main.cssファイルを次のような内容で作成する。
-------------------
div.header, div.footer {
color: #fff;
background-color: #666;
padding: 5px;
text-align: center;
}
div.header {
font-size: 200%;
}
div.footer {
font-size: 90%;
}
div.main {
margin: 10px;
padding: 40px;
border: solid 2px #666;
text-align: center;
font-size: 120%;
}
-------------------
このスタイルをアプリ全体に適用するには、レイアウトapplication.html.erbのtitle用素に以下のような記述を追加する。
<%= stylesheet_link_tag 'main' %>
3) topページ作成
app/views/top/index.html.erbを次のように修正する。
-------------------
<% @document_title = 'じゃんけんゲーム' %>
<p>
<%= link_to 'ゲーム開始',:controller => 'game', :action => 'start' %>
</p>
-------------------
4) startページを作成
app/views/game/start.html.erbを次のように修正する。
-------------------
<% @document_title = 'ゲーム開始'
hand_names = %w(gu choki pa)
alt_texts = %w(グーチョキパー)
%>
<p>あなたの手を選んでください。</p>
<div>
<% 0.upto(2) do |index| %>
<%= link_to(image_tag(hand_names[index] + '.png',
:size => '200x200', :alt => alt_texts[index]),
:action => 'result', :hand => index) %>
<% end %>
</div>
-------------------
%w(...)は文字列の配列
0.upto(2) do |indxe|...endは、0から2までの繰り返し。
5) じゃけんの画像ファイルを用意
public/imagesのフォルダにgu.png、choki.png、pa.png三つのファイルを設置する。
ここまでで、「http://localhost:3030」にアクセスして、画面を確認する。
-----------------------------
4. ユーザー入力処理と結果表示
-----------------------------
1) 入力処理:コントローラ作成
app/controllers/game_controller.rbのresultメソッドを次のように修正する。
-------------------
def result
@player_hand = params[:hand].to_i
@computer_hand = rand(3)
case @computer_hand - @player_hand
when 0
@result = 'aiko'
when 1, -2
@result = 'kachi'
else
@result = 'make'
end
end
-------------------
2) 結果表示:result画面
app/views/game/result.html.erbを次ように修正する。
-------------------
<%
@document_title = 'ゲーム結果'
hand_names = %w(gu choki pa)
alt_texts = %w(グーチョキパー)
%>
<p>あなたの手は…</p>
<div>
<%= image_tag(hand_names[@player_hand] + '.png',
:size => '200x200',
:alt => alt_texts[@player_hand]) %>
</div>
<p>コンピュータの手は…</p>
<div>
<%= image_tag(hand_names[@computer_hand] + '.png',
:size => '200x200',
:alt => alt_texts[@computer_hand]) %>
</div>
<p>
<%=
case @result
when 'aiko'
'あいこです。'
when 'kachi'
'あなたの勝ちです。'
when 'make'
'コンピュータの勝ちです。'
end
%>
</p>
<p>
<%= link_to 'トップページへ', root_path %>
<%= link_to 'もう一度', :action => 'start' %>
</p>
-------------------
じゃ、これで完成。
適当な手を選んでコンピュータと遊びましょう。