【Ruby on Rails】 cocoon gemで動的に要素を追加・削除できるフォームを作る

今回はRecipeとIngredientというモデルがあり、その中間テーブルとしてRecipeItemというモデルがあります。
RecipeItemにはamountという属性があり、Recipeのフォーム画面において、関連するIngredientをセレクトボックスから選び、その量(amount)も登録できるようにします。
動的に関連する要素（今回はIngredient）を追加していけるフォームを作成したいので、cocoonというgemを導入することにします。

• Rails version 4.2.4
• Ruby version 2.2.1-p85 (x86_64-linux)
• RubyGems version 2.4.6

まず画像から

レシピの詳細画面はこんなです。

新規作成画面。わかりにくいですが、セレクトボックスで「Bacon」を選択し、その下の「Amount」に100を入力しています。

さらに「add Ingredient」というリンクをクリックすると、フォームが追加されます。

そしてレシピを作成すると「Bacon」と「Chicken fat」が登録されています。

クリックするとアイコンが変化するiconate.jsを使ってみた

デモページを見てみると一発でわかるのですが、

iconate.js

アイコンをクリックすると別のアイコンに変化します。

使い方

https://github.com/bitshadow/iconate#basic-usage

公式ページより

インストール

以下の３つの方法があります。

---

• NPM: npm install iconate
• Bower: bower install iconate
• Download zip.

Note: iconate.js also supports AMD and commonJS module pattern.

---

今回はCodepenでやってみましたのでRawGitを使用しました（あんまりよくないかもしれんけど）

スタイルシートとjsファイルの設定

<link rel="stylesheet" href="iconate.min.css">
<script type="text/javascript" src="iconate.min.js">

アイコンの要素を作る

fontawsomeを使用しているようなのでその導入も忘れず。

<i id="icon" class="fa fa-bars fa-lg"></i>

アニメーションの設定

var iconElement = document.getElementById('icon');
var options = {
    from: 'fa-bars',
    to: 'fa-arrow-right',
    animation: 'rubberBand'
};

iconate(iconElement, options);

optionsのfrom:に始めのアイコン（ここではハンバーガーアイコン）、to:に右矢印を設定。
animation:はrubberBand（ゴムみたいにみょ〜んと動く）
そしてiconate関数の第一引数に対象となる要素、第二引数にオプションを渡します（第三引数にコールバック関数を設定することも可能）

---

というわけでCodepenでこんなのを作ってみました。

Bootstrapのアコーディオンパネル(collapse)でページ遷移の際に開いた状態を維持する

Bootstrap3でのアコーディオンパネル（今回は.list-groupを使用）を作成したのですけど、

http://getbootstrap.com/javascript/#collapse-example-accordion

ページ遷移が起こった際に、パネルが閉じた状態になる。これを開いたままにしたい。特にパネルを複数用意した場合に便利かと。

調べてみると「Cookie使え」みたいな記事が出てくるので、js-cookieというものを使います。

github.com

【Ruby on Rails】 bundler1.11.2に更新したら？rails g migration, rails cなどができなくなって困った

rails g migrationとかrails cの突然の死

bundle installした際に「bundler古いよ」と言われたので、その後rbenv exec gem update bundlerで1.11.2に更新しました。

すると今度は(bundle exec)rails g migrationやrails cでエラーが出るようになりました（なぜかrails sは大丈夫ですが）

（でも結局bundlerを更新したせいなのかどうかはわかりません）

• Rails version 4.2.4
• Ruby version (rbenvで管理) 2.2.3-p173 (x86_64-darwin14)
• RubyGems version 2.4.5.1

/Users/noriyo_tcp/.rbenv/versions/2.2.3/lib/ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in `require': cannot load such file -- bundler/setup (LoadError)
from /Users/noriyo_tcp/.rbenv/versions/2.2.3/lib/ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in `require'
from /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/spring-1.6.0/lib/spring/commands.rb:33:in `<module:Spring>'
from /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/spring-1.6.0/lib/spring/commands.rb:4:in `<top (required)>'
from /Users/noriyo_tcp/.rbenv/versions/2.2.3/lib/ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in `require'
from /Users/noriyo_tcp/.rbenv/versions/2.2.3/lib/ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in `require'
from /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/spring-1.6.0/lib/spring/application.rb:77:in `preload'
from /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/spring-1.6.0/lib/spring/application.rb:143:in `serve'
from /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/spring-1.6.0/lib/spring/application.rb:131:in `block in run'
from /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/spring-1.6.0/lib/spring/application.rb:125:in `loop'
from /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/spring-1.6.0/lib/spring/application.rb:125:in `run'
from /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/spring-1.6.0/lib/spring/application/boot.rb:18:in `<top (required)>'
from /Users/noriyo_tcp/.rbenv/versions/2.2.3/lib/ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in `require'
from /Users/noriyo_tcp/.rbenv/versions/2.2.3/lib/ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in `require'
from -e:1:in `<main>'

ググっても「bundler入れろ」的な記事しか見つからない。よく見るとSpring関係で怒れらているのかなあとは思うのですが・・・。

Spring止めてみる、というのも試したのですけど、ダメでした。

【Ruby On Rails】 「rails generate」が動かない | approad

railsのコマンドが動かない時はspringを(stop|kill)してみよう - Qiita