#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
（過去に同じ様な記事を書いていました）
最後に、ユーザー情報の編集ファイルにユーザー名の編集項目を追加しました。
現在の状態
参考
#11 ransackで検索機能を作成
第11回では、検索機能をつくります。今回はransackを使います。
Gemfileに追加
gem 'ransack'
$ bundle install
以下のリンクを参考にしながら作業を進めていきます。
当初の実装
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を利用して検索フォームと検索結果ページを作成し、検索機能を作成しました。
現在の状態
参考
#9 Bitbucketでプロジェクト管理
第9回では、ソースコードをGitで管理します。三日坊主で終わるかもしれないと思っていたこの開発も地道に継続できているので、Bitbucketにリポジトリを作成して管理していきます。
$ cd /path/to/your/project $ git init $ git remote add origin git@bitbucket.org:foo/bar.git $ git add ./ $ git commit -m 'Initial commit' $ git push -u origin master
下記のエラーが表示されたので、~/.ssh/configに設定を追加します。
Permission denied (publickey). fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists.
~/.ssh/config
Host bitbucket.org HostName bitbucket.org IdentityFile ~/.ssh/id_rsa User git
$ pbcopy < ~/.ssh/id_rsa.pub
Bitbucketに公開鍵を登録
$ git push -u origin master
無事に作成できました。
参考
#7 ログインページのスタイリング
第7回ではログイン画面のデザインを整えます。今回はBootstrapのスニペットを集めたbootsnippを使います。サイト内からログイン画面に利用できそうなコードを検索して、erb2slim.comでHTMLからslimに変換して使用しました。bootsnippではキーワード検索だけでなく、「login」など利用シーンに応じたタグからも探す事が出来ます。
Before
After
参考
#6 RailsでBootstrapを導入
前回、Pingendoで作成した画面を適用していきます。事前にbootstrap-sassを追加してTwitter Bootstrapを使えるようにします。このタイミングでFont Awesomeを使うためにfont-awesome-railsも追加します。インストール方法・使い方はそれぞれ以下のリンクを参考にしました。
Gemfileに追加
gem 'bootstrap-sass', '~> 3.3.6' gem "font-awesome-rails"
$ bundle install
CSSファイルをリネーム
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
application.scssの以下の項目を削除
*= require_tree . *= require_self
BootstrapとFont Awesomeの読み込みを追加
@import "font-awesome"; @import "bootstrap-sprockets"; @import "bootstrap";
app/assets/javascripts/application.jsに追加
//= require bootstrap-sprockets
再起動後、Bootstrapが反映されていることを確認できました。application.cssをリネームせずに使いたい場合は、Twitter Bootstrapのファイルを直接配置して読み込むという方法もある様です。
Pingendoで生成されたHTMLをerb2slimを利用してブラウザ上でslimに変換します。
あとは変換されたslimのコードをコツコツと反映していきます。たまに変換がうまくいっていない箇所があったので、その場合は直接修正しました。
現在の状態
