Rails memo
Railsの話聞いてきた。
Railsの学びとキャリア02 ～未経験から無料のワンポイント研修とキャリアのノウハウ～ - Railsの学びと就業 | Doorkeeper
お手軽に環境が作れる話とRails(Silver)問題集が1000円で買えるという話につられてつい。
ネット環境(Wifi)がなかったので自前のテザリングで参加。
※会場での借りる手続きがうまくされていなかった模様。
お手軽に環境作る話
- Cloud9
割りとお手軽に環境を作れるサービス。
Web上で動いてる。
サーバーはUbuntu。
c9.io
- Cloud9内のRailsはバージョンが古いので
新しい方いれとく(古いままだと動かないことがあるらしい)
gem install rails -v 4.2.2
- DBはPostgres。
installしとく（Postgres）
sudo service postgresql start
ログ：
shinomiya_1:~/workspace $ sudo service postgresql start * Starting PostgreSQL 9.3 database server ...done. shinomiya_1:~/workspace $ sudo service postgresql stop * Stopping PostgreSQL 9.3 database server ...done. shinomiya_1:~/workspace $
- Cloud9コマンド
Cloud9の中のパラメータを引数として渡さんとあかんらしい。
→サーバー起動時のコマンド例
rails s -b $IP -p $PORT
- Railsの試験勉強するにはCloud9はらくだね。
Railsの擬似問題
＠ITに結構のっているので練習するにはOK。
- Cloud9 上でRailsを作成する
今回は「achieve」という名前で作成。DBはpostgresql
rails _4.2.2_ new achieve -d postgresql
ログ：
shinomiya_1:~/workspace $ rails _4.2.2_ new achieve -d postgresql create (省略) run bundle install Fetching gem metadata from https://rubygems.org/ Fetching version metadata from https://rubygems.org/ Fetching dependency metadata from https://rubygems.org/ Resolving dependencies.......... Installing rake 11.1.2 Using i18n 0.7.0 Using json 1.8.3 Installing minitest 5.9.0 Using thread_safe 0.3.5 Using builder 3.2.2 Using erubis 2.7.0 Using mini_portile2 2.0.0 Using rack 1.6.4 Using mime-types-data 3.2016.0221 Using arel 6.0.3 Installing debug_inspector 0.0.2 with native extensions Using bundler 1.12.4 Installing byebug 9.0.4 with native extensions Installing coffee-script-source 1.10.0 Installing execjs 2.7.0 Using thor 0.19.1 Using concurrent-ruby 1.0.2 Installing multi_json 1.12.1 Installing pg 0.18.4 with native extensions Installing sass 3.4.22 Installing tilt 2.0.4 Installing spring 1.7.1 Installing rdoc 4.2.2 Using tzinfo 1.2.2 Using nokogiri 1.6.7.2 Using rack-test 0.6.3 Using mime-types 3.0 Installing binding_of_caller 0.7.2 with native extensions Installing coffee-script 2.4.1 Installing uglifier 3.0.0 Using sprockets 3.6.0 Installing sdoc 0.4.1 Using activesupport 4.2.2 Using loofah 2.0.3 Using mail 2.6.4 Using rails-deprecated_sanitizer 1.0.3 Using globalid 0.3.6 Using activemodel 4.2.2 Installing jbuilder 2.4.1 Using rails-html-sanitizer 1.0.3 Using rails-dom-testing 1.0.7 Using activejob 4.2.2 Using activerecord 4.2.2 Using actionview 4.2.2 Using actionpack 4.2.2 Using actionmailer 4.2.2 Using railties 4.2.2 Using sprockets-rails 3.0.4 Installing coffee-rails 4.1.1 Installing jquery-rails 4.1.1 Using rails 4.2.2 Installing sass-rails 5.0.4 Installing web-console 2.3.0 Installing turbolinks 2.5.3 Bundle complete! 12 Gemfile dependencies, 55 gems now installed. Use `bundle show [gemname]` to see where a bundled gem is installed. Post-install message from rdoc: Depending on your version of ruby, you may need to install ruby rdoc/ri data: <= 1.8.6 : unsupported = 1.8.7 : gem install rdoc-data; rdoc-data --install = 1.9.1 : gem install rdoc-data; rdoc-data --install >= 1.9.2 : nothing to do! Yay! run bundle exec spring binstub --all * bin/rake: spring inserted * bin/rails: spring inserted shinomiya_1:~/workspace $
Cloud9内部にGitが入っている
nameと emailは適当でもOK。
HerokuのToolbeltが入っているので
Cloud9で作成したアプリをHerokuに公開することもできる。
(Herokuのアカウントを作っておくこと)
Swaggerは64bitマシン＋IEで動かない
32bitは動く。
64bitだと画面が真っ白。
※原因は不明。
data-のカスタム属性に対してtoggleClassしたかったんだけどやり方がわからなかった
環境
jQuery v2.1.4
Google Chrome
やりたいこと
よくECサイトで商品のレビューに☆が５つあって、該当する星を塗るという項目があるが、これをjQueryで実装してみた。
クリックした場所をdata-starで取得して、
それより低い数値のliに「glyphicon-star」(★)を、そうではないliに「glyphicon-star-empty」(☆)をセットしようと考えてみたが、他のdata-startのset方法がよくわからなかった。
<ul id="stars" class="star_list"> <li class="glyphicon glyphicon-star-empty" data-star="1"></li> <li class="glyphicon glyphicon-star-empty" data-star="2"></li> <li class="glyphicon glyphicon-star-empty" data-star="3"></li> <li class="glyphicon glyphicon-star-empty" data-star="4"></li> <li class="glyphicon glyphicon-star-empty" data-star="5"></li> </ul>
$(function () {
$('#stars').on("click","li",function () {
for (var i = 4; i >= 0; i--) {
if (i < $(this).data("star")|0 ) {
// 要素の書き方が分からない・・・
???.toggleClass("glyphicon glyphicon-star");
} else {
???.toggleClass("glyphicon glyphicon-star-empty");
}
}
});
});
結局、idを振ってattrする方法で実現できたけど、data-に対してクラスをsetする方法ってどうやるんだろう？？
rake でversion違うYOっていきなり怒られた。
朝、出社して リモートのmasterをpullして最新にしたのち、branchを作ってローカルで確認していた。
でもこれはcommitするものではなかったので、しばらくしてリモートでローカルを上書きしようとして最新を取り込もうとしたらどうやらこれはまずかったのかもしれない。
statusで確認してコミットしないファイルを
git rm --cached ファイル名
で変更履歴を削除したらそのファイルごと無くなってしまった。
予想と違う動きでちょっと焦り、
git reset --hard origin/master
で変更をなかったことにして、再度branchを切ってrake を実行したら下記のエラーが出た。
rake aborted! Gem::LoadError: You have already activated rake 10.5.0, but your Gemfile requires rake 10.4.2. Prepending `bundle exec` to your command may solve this.
Gemfile.lockを見たら確かに10.4.2って書いてあるけど、いつのまに10.5.0が有効になっていたのか。。。
$ gem list rake *** LOCAL GEMS *** rake (10.5.0, 10.4.2, 10.1.0)
入ってる。
updateした記憶も入れた記憶もないけど、どこで10.5.0を覚えてきたのか。
とりあえず起動時にversionを指定できるので、下記のコマンドで確認はできたが、面倒なのでどうにかしたい。
rake _10.4.2_ routes
modal画面上のボタンが,とある幅だと機能しない(解決)
発覚
同じ開発チームの人からログイン画面のログインがクリックしても反応しないという連絡を受けて、自分の環境で検証したが再現しなかった。
その画面の一部を作ったのは私だが、そんなdisabled仕込んでないぞ？と思って不思議に思っていた。
そしたら別の人も再現し、現象が判明した。
現象
環境は、
Bootstrap3
Google Chrome
で発生。
入り口の画面にあるログインボタンをクリックするとmodalでログイン画面を出し、二枚のdivを使ってログインとサインアップを兼用していた。
<div class="container"> <form > <button data-target="#login" data-toggle="modal" onclick="$('#signup').hide(); $('#login').show()" type="button"> Log in</button> </form> <!-- ログイン --> <div aria-hidden="true" id="login" tabindex="-1" style="display: none;"> <div class="modal-dialog"> <modal-content> (省略) <form action="login" method="post"> <div class="col-sm-12"> <div class="row"> <div class="col-xs-4"> <button class="btn btn-primary" id="btn-login" type="submit">Log In</button> </div> </div> </div> </form> (省略) <!-- サインアップ --> <div id="signup" style="display: none;"> (省略)
ところが、幅が890pxあたりになると急にLog Inボタンが機能しなくなる。
その前後の幅では問題なくログインできる。
表示幅のデザインが変わってから押せなくなるので、幅が切り替わった時に何か悪さをしているのかと思いきや、下部にあるdivのサインアップ側は正常に機能している。
サインアップ側は項目数などデザインは多少変わるが、ボタン周りはログインと同じ。
なぜログインは押せなくなるのか理由がわからないが、いろいろ調査したら原因が分かった。
原因
<div class="col-sm-12">
よく使うこれ。
これを外すとボタンが機能する。
原因がわからないのでどなたかご存知だったら教えて下さい。
ひとりごと：
メイン画面の幅とmodal側の幅が違うタイミングで幅が変わるのが悪さしてるのかも。
見た目は正常機能時と変わってないけど、modalの幅が変わったタイミングで実はformの外にボタンが飛び出してるんじゃないかという疑惑があったりなかったり。(未確認)
追記：
原因判明。
rowタグが一個足りなかったYO!
<!-- ログイン --> (省略) <form action="login" method="post"> これ→<div class="row"> <div class="col-sm-12"> <div class="row"> <div class="col-xs-4"> <button class="btn btn-primary" id="btn-login" type="submit">Log In</button> </div> </div> </div> </div> </form> (省略)
git のbranchで二人が作業してConflictが起きた
基本はpull
とあるブランチに対してAさんとBさんがそれぞれ作業をしてAさんがpushした。
BさんはAさんの変更を取り込みつつもブランチにpush したい。
pullしてみた。
$ git pull origin firstbranch:firstbranch remote: Counting objects: 1, done. remote: Compressing objects: 100% (1/1), done. remote: Total 1 (delta 0), reused 0 (delta 0) Unpacking objects: 100% (1/1), done. From xx.xx.xx.xx:myProject ! [rejected] firstbranch -> firstbranch (non-fast-forward)
rejected、拒否されたので次はマージを試みた。
$ git merge origin firstbranch Already up-to-date. Yeeah!
やけにテンション高い。
でも差分がないわけはないので、コマンドを調べてみた。
$ git pull origin firstbranch From xx.xx.xx.xx:myProject * branch firstbranch -> FETCH_HEAD Auto-merging README.md CONFLICT (content): Merge conflict in README.md Automatic merge failed; fix conflicts and then commit the result.
次はConflict、一歩前進。
どうやらREADME.mdが競合しているらしいので手で修正。
再度、ローカルのブランチに対してコミット。
$ git commit -m "コミット"
コミットができればあとはpullしてリモートに反映させる。
git pull origin firstbranch
これでリモートに変更を取り込んだ状態でpushできた。
