酔いどれエンジニアのブログ

有限会社wisdomのスタッフブログです。主にプログラミングやアプリケーション開発の話題を書いていきます。

ブログシステムを作りながらRailsを学ぶ(5) 一覧画面のレイアウトを整える

前回までの作業で、ひな形は作りました。 今回はやる気を上げるためにもレイアウトに着手したいと思います。

   

ブランチを切り替える

ブランチを作ります。

  1. 現在のブランチを確認
  2. 新しくブランチを作成そして確認
  3. ブランチを切り替えて確認

手順に沿って実行します。

$ git branch

$ git branch edit_articles_index
$ git branch

$ git checkout edit_articles_index
$ git branch

   

CSSフレームワークを取得する

今回使うCSSフレームワークFoundationにしようと思います。

  1. 以下のページから「Default CSS」をダウンロードします。 http://foundation.zurb.com/download.php

  2. 取得したzipファイルを解凍します。

  3. cssフォルダ配下にある、foundation.cssnormalize.cssを、hoge-blog/app/assets/stylesheets/フォルダにコピーします。
  4. scaffolds.css.scssはいらないので削除して下さい。
  5. http://hoge-blog.dev にアクセスして右クリックを押下し、ソースの確認から、追加したスタイルシートファイルが記述されていることを確認して下さい。

stylesheetsフォルダに追加するだけで、新しいスタイルシートが追加されたと思います。便利ですね。

   

レイアウトを決める

本来であれば情報アーキテクチャを用いてコンテンツを分析し、ゾーニングし、ワイヤーフレームを作り、デザインをのせていきますが、あくまでもRailsを学ぶことが目的ですので、いきなりデザインを決めたいと思います。 デザインはKeynoteで、作りました。

こんな感じにしようかと思います。 一覧画面

   

Viewフォルダの確認

app/views/フォルダを見てみると、articleslayoutというフォルダがあると思います。 layoutはページをまたいで共通するレイアウトが入っているフォルダ、 layout以外は個別ページのファイルが入っているフォルダとなります。 拡張子が「erb」になっているものが、レイアウト用のファイルです。 拡張子が使うテンプレートエンジンを示しています。

ERBは簡単にいえば静的でない部分(ロジック)を<% %>で囲う記法です。 RailsではERBだけではなく、HamlやSlimなども使えますが、今回はデフォルトのERBでいきたいと思います。

ちなみにHamlやSlimを使用するにはGemfileに以下のような記述を追加し、 bundle install コマンドを実行するだけで可能です。

gem "haml-rails" 
gem "slim-rails"
$ bundle install

   

修正するファイルの確認

全体画面共通のデフォルトレイアウト

  • app/assets/stylesheets/application.css
  • app/views/layouts/application.html.erb

application.html.erbの内容は以下のようになっています。

<% ... %>の記述の中にRubyの命令を書くことが出来ます。 <%= ... %>になると実行した結果を、その場に出力することが出来ます。 PHPJSPなどと似た記述が出来るということです。

  • 5行目ではスタイルシートを読み込むタグを埋め込んでいます。 stylesheet_link_tag は引数です。複数の場合は,で区切ります。
  • 6行目ではJavaScriptを読み込むタグを埋め込んでいます。
  • 7行目ではCSRF対策用のハッシュ値を設定するMetaタグを埋め込んでいます。
  • 11行目では個別レイアウトが埋め込まれるようになっています。

articles用のスタイルシートファイルと、リスト用HTMLファイル

  • app/assets/stylesheets/articles.css.scss
  • app/views/articles/index.html.erb

articles.css.scssscssとはCSSメタ言語であるSCSSを表す拡張子です。 拡張子をcss.scssにしておくことによって、scssからcssに自動的に変換されます。

次にindex.html.erbです。

このソースコードでは以下のようなことが行われています。

  • @articlesの中には0から複数のデータが入っています。 その中からデータを一つ一つ取り出しては、article入れ、2行目以降の処理を行います。
  • 3行目ではarticleのtitle属性の値が埋め込まれます。
  • 5行目ではlink_to という命令を使いリンクタグを埋め込んでいます。

   

レイアウトの修正

以上を踏まえ、レイアウトを修正していきます。 新規追加ボタンを付け忘れてたので、追加して下さい。 ちなみに以下のページを参考にしました。

修正したあとのコミットした内容は以下の通りです。 https://github.com/wataruuu/hoge-blog/commit/77e373bd782e1ca464c553c88c0a85d49cbdb621 

   

リモートリポジトリに送信する

確認ができたら、Gitに反映させましょう。 まだ出来たとは言い難いので、今回はマージは行いません。

  1. ローカルリポジトリの変更を確定します
  2. ローカルリポジトリの内容をリモートリポジトリに送ります
$ git add .
$ git commit -am "modify articles list view "
$ git push origin edit_articles_index

Keynote

Keynote

  • Apple
  • 仕事効率化
  • ¥1,000