ある程度動くようになってきたので、デバッグを兼ねた動作確認のためにテストデータを生成します。 Gemfile gem 'ffaker' seeds.rb 10.times do User.create(name: FFaker::Name.name, email: FFaker::Internet.safe_email, password: FFaker::Internet.pass…

旅行に出かけていた関係で開発が滞っていました。 今日からまた再開したいと思います。 質問閲覧ページ 今回は質問閲覧ページを作り込んでいきます。まずは、質問部分です。今回はYahoo知恵袋を参考に構成図を作成しました。 今回作成しているサイトに合わせ…

ユーザー名を表示します。現状ユーザー名の入力が必須項目ではないので、入力がない場合は匿名表示する処理をヘルパーに定義しました。これを各所で利用したいと思います。 def username(user) user.try(:name) || 'Anonymous' end 参考 【Rails】Helperを使…

第15回では、トップページに表示する質問一覧部分のレイアウトや要素を作り込んでいきます。日頃お世話になっているteratailを参考にしました。 ワイヤーフレームの作成 teratailのトップページの質問部分の構成をざっくりと書き起こしてみました。 今回、開…

第14回ではフッターを作成します。Bootstrap公式サイト内のサンプルの中から以下のテーマを参考にして作成しました。 Jumbotron フッターを最下部に固定するテーマ「Sticky footer」と悩みましたが、プロトタイプでは極力CSSに手を加えたくなかったので、今…

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

ユーザー名を表示するためのカラムを追加します。 $ rails g migration AddNameToUser name:string 内容を確認して実行します。 $ rake db:migrate ユーザー名を編集するためにstrong parametersを設定します。 application_controller.rb before_filter :co…

第11回では、検索機能をつくります。今回はransackを使います。 Gemfileに追加 gem 'ransack' $ bundle install 以下のリンクを参考にしながら作業を進めていきます。 activerecord-hackery/ransack 当初の実装 application_controller.rb before_filter :se…

質問投稿ページのデザインを整えます。まずはヘッダーのボタンに質問投稿ページへのリンクを設定します。 application.html.slim = link_to 'Ask', new_question_path ユーザー情報ページで使用したスニペットを利用して、質問投稿ページに適用します。 質問…

第9回では、ソースコードをGitで管理します。三日坊主で終わるかもしれないと思っていたこの開発も地道に継続できているので、Bitbucketにリポジトリを作成して管理していきます。 Bitbucketで新規リポジトリの作成 「ローカルディレクトリを設定する」のガ…

第8回では、前回と同じ要領でサインアップ画面・ユーザー情報画面のデザインを整えていきます。Bootsnipp でスニペットを検索して、修正を加えながら適用していきます。 サインアップ Before After ユーザー情報 Before After

第7回ではログイン画面のデザインを整えます。今回はBootstrapのスニペットを集めたbootsnippを使います。サイト内からログイン画面に利用できそうなコードを検索して、erb2slim.comでHTMLからslimに変換して使用しました。bootsnippではキーワード検索だけ…

前回、Pingendoで作成した画面を適用していきます。事前にbootstrap-sassを追加してTwitter Bootstrapを使えるようにします。このタイミングでFont Awesomeを使うためにfont-awesome-railsも追加します。インストール方法・使い方はそれぞれ以下のリンクを参…

モックレベルの動作を目指して、要素の配置を確認するためにレイアウトを作成します。今回は、知人の紹介で気になっていたPingendoを使ってみたいと思います。 以下の2画面をつくります。 トップページ 質問閲覧ページ 早速Pingendoのサイトからダウンロード…