#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のコードをコツコツと反映していきます。たまに変換がうまくいっていない箇所があったので、その場合は直接修正しました。
現在の状態
参考
#5 Pingendoでレイアウトの作成
#4 回答機能の作成
第4回では、質問に回答する機能をつくります。
質問への回答機能
scaffoldを使用してテンプレートを作成します。
$ rails g scaffold answer user:references question:references content:text
生成されたマイグレーションファイルのquestion項目にnull: falseを追加して実行します。
$ rake db:migrate
routes.rbにルーティングの設定を追加します。色々な考え方があると思いますが、今回は下記のように設定しました。
resources :questions do resources :answers end
現在の状態を確認します。ルーティングの設定は、開発の過程で変更する可能性もあります。
question_answers GET /questions/:question_id/answers(.:format) answers#index
POST /questions/:question_id/answers(.:format) answers#create
new_question_answer GET /questions/:question_id/answers/new(.:format) answers#new
edit_question_answer GET /questions/:question_id/answers/:id/edit(.:format) answers#edit
question_answer GET /questions/:question_id/answers/:id(.:format) answers#show
PATCH /questions/:question_id/answers/:id(.:format) answers#update
PUT /questions/:question_id/answers/:id(.:format) answers#update
DELETE /questions/:question_id/answers/:id(.:format) answers#destroy
questions GET /questions(.:format) questions#index
POST /questions(.:format) questions#create
new_question GET /questions/new(.:format) questions#new
edit_question GET /questions/:id/edit(.:format) questions#edit
question GET /questions/:id(.:format) questions#show
PATCH /questions/:id(.:format) questions#update
PUT /questions/:id(.:format) questions#update
DELETE /questions/:id(.:format) questions#destroy
参考リンクを見ながらコントローラとそれに関連するviewを編集して、回答できる状態をつくりました。この辺りの動作はUIも含めて検討中のものが多いので、ある程度まとまったら整理したいと思います。
参考： RailsのScaffoldでネストしたResourceを作る
現在の状態
新規回答画面
質問閲覧画面
