Ruby on Railsを基礎から学ぶ 第４回
～モックと部分テンプレート～
前回、埋め込み（テンプレート）の基本を学びました。
この段階に入ると、そろそろサイトらしい見栄えのものが欲しくなってきます。
近年のシステムサービスでは、ＷＥＢサービスを利用したサービスが多くなりました。
これは、ＷＥＢブラウザ経由でシステムの青写真を見れば、使用するお客さん（ユーザ）もわかりやすいからです。
しかし、実態のシステムが作り途中の場合、ユーザさんにどんなシステムなのか知ってもらうのは難しいものです。
そこで、先にサービスの概観となるプロトタイプ（試作画面）を作ってしまうわけです。
１．モックとは？
Mockとは偽者という意味です。
製造の工程においては、主に外見を本物そっくりにした模型のことで、
ＷＥＢサービスの場合、コンテンツの中身を適当な文字列で埋めた見てくれだけの試作画面をいいます。
■どんな画面にするか？
ＷＥＢサービスにも、流行廃りがあり、現ザ稼動しているいろいろなＷＥＢ画面のトップページをまずは参考にしましょう。
全体的に、画面左上部に全体メニューを配置し、中央にメインコンテンツがあります。
再度メニュの位置は、ユーザ個人のサブメニュー使用頻度によって、左側に配置するか、右にするか変えているようです。
また、画面には見えませんが、画面最下団右には、著作情報（Copyright）が掲載されています。
■必要そうな部品と画面区切り（div）
ということで、とりあえず必要そうな部品と画面の区切りを考えておきます。
①ヘッダー
・ サイトロゴ（バナー、gifまたはjpgで）
・ メニューバー（全体）メニュー
②サイドメニュー
・ ログイン情報（ログアウト時はログインフォーム、ログイン時は基本ステータス）
・ 検索エンジン（今回必要かどうかはまだ不明）
・ 最新トピック（主人公の直近の行動ログ）
・ 訪問者ログ（訪問した人のリスト）
③コンテンツ
・ 本文（メイントピック、ゲーム本体となる）
④フッター
・ 著作情報
モバイルゲームなどを見ると、ステータス画面は右側が多いようです。
ステータスは需要なので、ゲーム本体が入る左中央でもよさそうですが、今回は右側に配置してみます。
また、検索エンジンはいるのかどうか、現在は未定です。
使用する場合、友人検索ということになるでしょう。
■ＨＴＭＬの雛形
今まで、renderしてきたlessonコントローラのアクションはなぜ、自動的にＨＴＭＬに変換されているのでしょう。
実は、コントローラを実行する際に使用する雛形となるファイルが存在するのです。
★格納先
開くと下記のようになっています。
|
<!DOCTYPE
html> <html> <head> <title>Dragon</title> <%= stylesheet_link_tag "application",
:media => "all" %> <%= javascript_include_tag
"application" %> <%= csrf_meta_tags %> </head> <body> <%=
yield %> </body> </html> |
この状態だとあまりよろしくないので、一般的なＨＴＭＬタグ、ＣＳＳ（スタイルシート）、javascripｔが使用できるようにファイルの中身を書き換えます。
|
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta
http-equiv="Content-Type" content="text/html;
charset=UTF-8" /> <title><%= page_title
%></title> <%= stylesheet_link_tag "application"
%> <%= javascript_include_tag
"application" %> <%= csrf_meta_tags %> </head> |
ここで、一度トップページを表示してみてもいいと思います。
その際は、ブラウザのメニューからソースの表示を行って、上記のソースがＨＴＭＬに記載されているか確認しておくと良いでしょう。
２．ページタイトルの規則
少し話を戻して、各ページのタイトルを考えます。
上記の大手サイトなどを参考に特徴を見てみると、ページの詳細画面名とサイト名をくっつけて表示していることが多いのに木がつきます。
ログイン – DragonSite Windows Internet Explorer
DragonSite
– ログイン Windows Internet Explorer
これを自動的に作成するために、下記のapplication_helper.rbにpage_titleというアクションを追加します。、
■格納先
C:\rails\dragon\app\helpers
→application_helper.rb
|
module
ApplicationHelper def page_title title =
"Valkyrie" title = @page_title +
" - " + title if @page_title title end （中略） end |
こっちが実際のビューabout. html.erbです。
page_titleがこのサイトについてになっています。
|
<%
@page_title = "このサイトについて" %> <h1><%=
@page_title %></h1> <p>Valkyrieへようこそ！<br />ここは竜の財宝を目指す冒険者のギルドだ。登録画面から冒険者の申請をおこなってくれ。<br />登録すれば害獣退治や馬小屋掃除なんかのへぼいクエストから、ドラゴン退治までさまざまなクエストが受けられるぜ。<br />まずは登録してみてくれ。 </p> |
ここで、aboutページを見てみます。
サイトの総合名称はValkyrieとしてます。仮称です。
赤枠のとおり、詳細画面（このサイトについて） - サイト名（Valkyrie）となっていますね。
２．ページをdivタグで分割していく
考えたモックをもとに、<div>を用いて、使用するテンプレートを区切ってみます。
|
<body> <div
id="container"> <div id="header"> <%=
render "shared/header" %> </div> <div id="content"> <%=
yield %> </div> <div id="sidebar"> <%=
render "shared/sidebar" %> </div> <div id="footer"> <%=
render "shared/footer" %> </div> </div> </body> |
２．スタイルシートを充ててみる
最後にスタイルシートを当てて見ます。
これでようやくそれっぽい見てくれのサイトになります。
もちろんまだ外観のみですが・・・。
■ 格納先
C:\rails\dragon\app\assets\stylesheets
application.css
|
/* * This is a manifest file that'll be
compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory,
lib/assets/stylesheets, vendor/assets/stylesheets, * or vendor/assets/stylesheets of
plugins, if any, can be referenced here using a relative path. * * You're free to add application-wide
styles to this file and they'll appear at the top of the * compiled file, but it's generally
better to create a new file per style scope. * *= require_self *= require_tree . */ |
上記のようなコメントが記載されています。
これはそのまま残しておきます。
その先に、以下のコードを記載します。
|
/* ページ全体 */ body { background-color: white; color: black; margin: 0; padding: 0; font-family: Meiryo, sans-serif; } /* リンク */ a:link {
color: #00c; } a:visited {
color: #a08; } a:hover {
color: #ccf; } a img {
border: none; } /* ブロック要素 */ p, h1, h2,
h3, table, ul { margin: 0 0 1em; } /* 全体の枠 */ div#container
{ margin: 0 auto; padding-top: 5px; width: 780px; } /* 左の枠（コンテンツを入れる） */ div#content
{ float: left; width: 530px; padding: 10px 10px 10px 0; } /* 右の枠（サイドバーを入れる） */ div#sidebar
{ float: left; width: 230px; background-color: #e8ffff; padding: 5px; font-size: 86%; } /* ヘッダー */ div#header
{ border-top: 4px solid #6bb; } /* フッター */ div#footer
{ clear: both; font: 11px Verdana; color: #888; padding: 8px 0; border-top: 4px solid #6bb; text-align: center; } /* メニューバー */ div.menubar
{ padding: 2px; background-color: #000; color: #ccc; font-size: 80%; padding: 8px 16px; } /* メニューバーのリンク */ div.menubar
a { text-decoration: none; } /* メニューバーのリンク（未訪問） */ div.menubar
a:link { color: #ccc; } /* メニューバーのリンク（訪問済） */ div.menubar
a:visited { color: #ecc; } /* メニューバーのリンク（マウスを合わせたとき） */ div.menubar
a:hover { color: #f88; text-decoration: underline; } /* メニューバーのリンク（現在のページ） */ div.menubar
span { color: #ff8; font-weight: bold; } /* メインコンテンツ */ div#content
h1 { color: #88c; font-weight: normal; font-size: 150%; border-bottom: 2px solid #88c; margin-bottom: 0.5em; } div#content
h2 { color: #99d; font-weight: bold; font-size: 120%; margin-bottom: 0.5em; border-bottom: 1px solid #ccf; } div#content
p, div#content ul { font-size: 90%; line-height: 1.5; } /* サイドバー */ table#login_form
td { font-size: 12px; } div#sidebar
h2 { color: #080; font-weight: bold; border-bottom: 1px dotted #080; margin-bottom: 0.5em; font-size: 100%; } div#sidebar
ul { padding-left: 1em; list-style-type: none; } div#sidebar
li { margin-bottom: 0.3em; } |
今回はまとめソースはありません。上記のソースを参考に作ってください。
次回は、いよいよデータベーストモデルについて検討していきます。
・・・が更新は少し先になると思います。お楽しみに！。
■ 参考テキスト■
サ改定新版 基礎 Ruby on Rails オイアクス監修 インプレスジャパン
■ 参考サイト■
ニコニコ動画
http://www.nicovideo.jp/video_top
FC2ブログ
mixi ソーシャルネットワークサービス
Raccoon's homepage Copyright
(C) 2000-2013 あらいベアー