Log.log(work)

いろんな作業メモ

宣言

2016年6月末までにRails4シルバー試験を受験します!

せっかく業務でも触れたので受験しようと思います。


追記:
キャンペーンで本がもらえるというのがあったので応募しようと思ったが、住所と氏名を送るフォームがセキュリティなしっぽいので自腹で買おうか考え中。

data-のカスタム属性に対してtoggleClassしたかったんだけどやり方がわからなかった

環境

jQuery v2.1.4
Google Chrome

やりたいこと

よくECサイトで商品のレビューに☆が5つあって、該当する星を塗るという項目があるが、これを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

参考:
バージョンを指定してRakeを実行する - /var/log/kozy4324

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できた。


参考

qiita.com

gitで新しく増えたファイル(untracked files)のみ一括で追加する

これはべんり。

git ls-files --others --exclude-standard | xargs git add
  • ls-files → 管理しているファイルを見る
  • --others → 追跡されていないファイルの一覧を表示
  • --exclude-standard → .gitignore にマッチするファイルを含めない
  • xargs → 上記を「git add」の引数にする