#17 質問閲覧ページの作り込み

旅行に出かけていた関係で開発が滞っていました。 今日からまた再開したいと思います。

質問閲覧ページ

今回は質問閲覧ページを作り込んでいきます。まずは、質問部分です。今回はYahoo知恵袋を参考に構成図を作成しました。

今回作成しているサイトに合わせて整理します。

回答部分もほぼ同じフォーマットだったので、質問部分の構成図を再利用しました。

アイコンは神ツールのiconmonsterで作成しました。

現在の状態

参考サイト

• iconmonstr

#16 ユーザー名を表示

ユーザー名を表示します。現状ユーザー名の入力が必須項目ではないので、入力がない場合は匿名表示する処理をヘルパーに定義しました。これを各所で利用したいと思います。

  def username(user)
    user.try(:name) || 'Anonymous'
  end

参考

• 【Rails】Helperを使ってよりDRYなviewを書こう

#15 トップページの作り込み

第15回では、トップページに表示する質問一覧部分のレイアウトや要素を作り込んでいきます。日頃お世話になっているteratailを参考にしました。

ワイヤーフレームの作成

teratailのトップページの質問部分の構成をざっくりと書き起こしてみました。

今回、開発しているサイトで対応できる項目を整理して以下を構成図としました。これを繰り返し表示して、質問一覧のコンテンツとして扱えるようにしたいと思います。

このあと、bootsnippで適当なスニペットを探したのですが、合うものが見つからなかったためBootstrapの公式サイトを見ながらコーディングしました。

現在の状態

次回は一部の処理をヘルパーに移したいと思います。

#14 フッターの作成

第14回ではフッターを作成します。Bootstrap公式サイト内のサンプルの中から以下のテーマを参考にして作成しました。

• Jumbotron

フッターを最下部に固定するテーマ「Sticky footer」と悩みましたが、プロトタイプでは極力CSSに手を加えたくなかったので、今回はJumbotron内のフッターを利用しました。

現在の状態

#13 ドロップダウンメニューの作成

ドロップダウンメニューを作成します。ヘッダーエリアの中に要素が増えてきたので一部をドロップダウンメニューにまとめたいと思います。Bootstrapの公式サイトにそのまま使えるドロップダウンメニューのサンプルが置いてあったので、こちらを利用しました。

Before

After

参考

• Theme Template for Bootstrap

その他

個人開発に関する記事の数が増えてきたので、タイトルの付け方の見直しを行い変更しました。（過去記事のタイトルも修正しました）

#12 deviseでカラムを追加

ユーザー名を表示するためのカラムを追加します。

$ rails g migration AddNameToUser name:string

内容を確認して実行します。

$ rake db:migrate

ユーザー名を編集するためにstrong parametersを設定します。

application_controller.rb

  before_filter :configure_permitted_parameters, if: :devise_controller?

  protected

  def configure_permitted_parameters
    devise_parameter_sanitizer.for(:account_update) << :name
  end

（過去に同じ様な記事を書いていました）

tsyknsr.hatenablog.com

最後に、ユーザー情報の編集ファイルにユーザー名の編集項目を追加しました。

現在の状態

参考

• 新しいマイグレーションを追加してテーブルを変更
• deviseをユーザー名で登録・ログインできるように修正する

#11 ransackで検索機能を作成

第11回では、検索機能をつくります。今回はransackを使います。

Gemfileに追加

gem 'ransack'

$ bundle install

以下のリンクを参考にしながら作業を進めていきます。

• activerecord-hackery/ransack

当初の実装

application_controller.rb

  before_filter :set_search

  def set_search
    @q = Question.ransack(params[:q])
  end

questions_controller.rb

  def index
    @q = Question.ransack(title_or_content_cont: params[:q])
    @questions = @q.result
  end

application.html.slim

= search_form_for @q, url: questions_path do |f|
  = f.search_field :title_or_content_cont

公式のリファレンスを読みながらつくってみたのですが、ransackを利用して検索フォームをヘッダーに設置するにはApplicationControllerのbefore_filterで変数をセットするなど手を加える範囲が広かったため、下記の方法に修正しました。

修正後

questions_controller.rb

  def index
    @questions = Question.ransack(title_or_content_cont: params[:q]).result
  end

application.html.slim

= form_tag questions_path, method: :get do
  = text_field_tag :q, (params[:q] or nil)

search_form_forの使用をやめてform_tagに変更しました。次に「/search?q=キーワード」のようなURLでアクセスするためにルーティングの設定を行います。

routes.rb

get 'search' => 'questions#index', as: :search

無事に動作を確認できたのでbootsnippを利用して検索フォームと検索結果ページを作成し、検索機能を作成しました。

現在の状態

参考

• activerecord-hackery/ransack
• ransackでRailsアプリのヘッダーに検索機能をつける
• [Ruby]Rails+ransackで検索機能作る
• Text_field_tag default value if params are empty?