ハイパーニートプログラマーへの道
頑張ったり頑張らなかったり
2017-11-14T15:28:34+09:00
noriyo_tcp
Hatena::Blog
hatenablog://blog/11696248318755309454
【Ruby on Rails】dyld: lazy symbol binding failed: Symbol not found: というエラーが出たので
hatenablog://entry/8599973812317686013
2017-11-14T15:28:34+09:00
2017-11-14T15:28:34+09:00 Rails version 4.2.10 Ruby version 2.2.8-p477 (x86_64-darwin17) Mac OS X 10.13.1 bin/rake spec を走らせた時に以下のようなエラーが出るようになりました $ ./bin/rake spec dyld: lazy symbol binding failed: Symbol not found: __ZN2v82V821AddGCPrologueCallbackEPFvNS_6GCTypeENS_15GCCallbackFlagsEES1_ Referenced from: /Users/noriyo_tcp…
<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a> version 4.2.10</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby">Ruby</a> version 2.2.8-p477 (<a class="keyword" href="http://d.hatena.ne.jp/keyword/x86">x86</a>_64-darwin17)</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac%20OS%20X">Mac OS X</a> 10.13.1</li>
</ul>
<p><code>bin/rake spec</code> を走らせた時に以下のようなエラーが出るようになりました</p>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ ./bin/rake spec
dyld: lazy symbol binding failed: Symbol not found: __ZN2v82V821AddGCPrologueCallbackEPFvNS_6GCTypeENS_15GCCallbackFlagsEES1_
Referenced from: /Users/noriyo_tcp/workspace/some-project/vendor/bundle/ruby/2.2.0/extensions/x86_64-darwin<span class="synConstant">-17</span>/2.2.0-static/therubyracer-0.12.1/v8/init.bundle
Expected <span class="synError">in</span>: flat namespace
dyld: Symbol not found: __ZN2v82V821AddGCPrologueCallbackEPFvNS_6GCTypeENS_15GCCallbackFlagsEES1_
Referenced from: /Users/noriyo_tcp/workspace/some-project/vendor/bundle/ruby/2.2.0/extensions/x86_64-darwin<span class="synConstant">-17</span>/2.2.0-static/therubyracer-0.12.1/v8/init.bundle
Expected <span class="synError">in</span>: flat namespace
</pre>
<h2>therubyracer, libv8, v8 の再インストール</h2>
<p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2Fcowboyd%2Ftherubyracer%2Fissues%2F420" title="dyld: lazy symbol binding failed: Symbol not found · Issue #420 · cowboyd/therubyracer" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://github.com/cowboyd/therubyracer/issues/420">github.com</a></cite></p>
<p>この記事では <code>therubyracer</code>, <code>libv8</code>, <code>v8</code> の再インストールを行なっているが、今回の場合</p>
<p><code>.bundle/config</code> で以下のような設定にしているので、実際には<code>libv8</code> のアンインストールと再インストールはしませんでした</p>
<pre class="code lang-sh" data-lang="sh" data-unlink><span class="synComment"># v8@3.15 をbrew でインストールしてあり、オプションでそちらを見に行くように設定</span>
BUNDLE_BUILD__LIBV8: <span class="synStatement">"</span><span class="synConstant">--with-system-v8</span><span class="synStatement">"</span>
BUNDLE_BUILD__THERUBYRACER: <span class="synStatement">"</span><span class="synConstant">--with-v8-dir=/usr/local/opt/v8@3.15</span><span class="synStatement">"</span>
</pre>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ bundle <span class="synStatement">exec</span> gem uninstall therubyracer
$ brew reinstall v8@3.15
$ bundle
</pre>
<hr />
<p>ちなみに <code>therubyracer</code> のアンインストール時に <code>undefined method `delete' for #<Bundler::SpecSet:0x007f8613c354b0></code></p>
<p>って出るけど大丈夫っぽい <a href="http://smellman.hatenablog.com/entry/20121025/1351162613">http://smellman.hatenablog.com/entry/20121025/1351162613</a></p>
<hr />
<p>しかしこれでもダメだった・・・。その他<a class="keyword" href="http://d.hatena.ne.jp/keyword/MacOS">MacOS</a> の<code>rootless</code> を切ってみるなどしたが、うまく行きませんでしたorz</p>
<h2>結局therubyracer をアップデート(0.12.1 -> 0.12.3)</h2>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ bundle update therubyracer
</pre>
noriyo_tcp
【Rails】ファイルアップロードのテスト時のFactoryGirl (FactoryBot) の設定
hatenablog://entry/8599973812315018574
2017-11-06T17:31:03+09:00
2017-11-06T17:31:03+09:00 Mac OS X Sierra 10.12.6 Ruby version 2.1.2-p95 (x86_64-darwin16.0) Rails version 4.1.16 このようにしていまして FactoryGirl.define do # 中略 factory :content_figure do content do ActionDispatch::Http::UploadedFile.new( filename: 'figure.png', type: 'image/png', tempfile: File.open(Rails.root.join('spec', 'files',…
<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac%20OS%20X">Mac OS X</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Sierra">Sierra</a> 10.12.6</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby">Ruby</a> version 2.1.2-p95 (<a class="keyword" href="http://d.hatena.ne.jp/keyword/x86">x86</a>_64-darwin16.0)</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a> version 4.1.16</li>
</ul>
<p>このようにしていまして</p>
<pre class="code lang-ruby" data-lang="ruby" data-unlink><span class="synType">FactoryGirl</span>.define <span class="synStatement">do</span>
<span class="synComment"># 中略</span>
factory <span class="synConstant">:content_figure</span> <span class="synStatement">do</span>
content <span class="synStatement">do</span>
<span class="synType">ActionDispatch</span>::<span class="synType">Http</span>::<span class="synType">UploadedFile</span>.new(
<span class="synConstant">filename</span>: <span class="synSpecial">'</span><span class="synConstant">figure.png</span><span class="synSpecial">'</span>,
<span class="synConstant">type</span>: <span class="synSpecial">'</span><span class="synConstant">image/png</span><span class="synSpecial">'</span>,
<span class="synConstant">tempfile</span>: <span class="synType">File</span>.open(<span class="synType">Rails</span>.root.join(<span class="synSpecial">'</span><span class="synConstant">spec</span><span class="synSpecial">'</span>, <span class="synSpecial">'</span><span class="synConstant">files</span><span class="synSpecial">'</span>, <span class="synSpecial">'</span><span class="synConstant">figure.png</span><span class="synSpecial">'</span>))
)
<span class="synStatement">end</span>
<span class="synStatement">end</span>
<span class="synStatement">end</span>
end
</pre>
<p>こんな感じで <code>ActionDispatch::Http:UploadedFile.new</code> するのもいいんですが、
<code>fixture_upload_path</code> を使うのもアリかと</p>
<pre class="code lang-ruby" data-lang="ruby" data-unlink><span class="synPreProc">include</span> <span class="synType">ActionDispatch</span>::<span class="synType">TestProcess</span>
<span class="synType">FactoryGirl</span>.define <span class="synStatement">do</span>
factory <span class="synConstant">:content_figure</span> <span class="synStatement">do</span>
content { fixture_file_upload(<span class="synType">Rails</span>.root.join(<span class="synSpecial">'</span><span class="synConstant">spec</span><span class="synSpecial">'</span>, <span class="synSpecial">'</span><span class="synConstant">files</span><span class="synSpecial">'</span>, <span class="synSpecial">'</span><span class="synConstant">figure.png</span><span class="synSpecial">'</span>), <span class="synSpecial">'</span><span class="synConstant">png</span><span class="synSpecial">'</span>), <span class="synSpecial">'</span><span class="synConstant">image/png</span><span class="synSpecial">'</span> }
<span class="synStatement">end</span>
<span class="synStatement">end</span>
</pre>
<p>しかし<code>ActionDispatch::TestProcess</code> をインクルードするのを忘れると困ります<br/>
<a href="https://qiita.com/tbaba/items/6e97508de30e3d307507">この記事のコメント</a>によると<code>fixture_file_upload</code> はほとんど何もやっていないそうなので、<code>Rack::Test::UploadedFile.new</code>を直接呼んでしまってもいいらしい</p>
<pre class="code lang-ruby" data-lang="ruby" data-unlink>content { <span class="synType">Rack</span>::<span class="synType">Test</span>::<span class="synType">UploadedFile</span>.new(<span class="synType">Rails</span>.root.join(<span class="synSpecial">'</span><span class="synConstant">spec</span><span class="synSpecial">'</span>, <span class="synSpecial">'</span><span class="synConstant">files</span><span class="synSpecial">'</span>, <span class="synSpecial">'</span><span class="synConstant">figure.png</span><span class="synSpecial">'</span>), <span class="synSpecial">'</span><span class="synConstant">png</span><span class="synSpecial">'</span>), <span class="synSpecial">'</span><span class="synConstant">image/png</span><span class="synSpecial">'</span> }
</pre>
<p><code>fixture_file_upload</code> は呼び出し元のクラスが<code>fixture_path</code> を持っていれば自動的に<code>spec/fixtures</code> までのパスを追加してくれますが、
<code>FactoryGirl</code> からでは参照してくれないので、別途<code>fixture_path</code> の設定が必要になります</p>
<p>今回は<code>spec/files</code> 配下にイメージを置いてしまっていますし、別途<code>fixture_path</code> を設定するのも面倒なので、このように直接パス指定する形でいいかと</p>
<p><iframe src="https://hatenablog-parts.com/embed?url=http%3A%2F%2Ftanihiro.hatenablog.com%2Fentry%2F2014%2F01%2F09%2F004022" title="【ruby】Railsでファイルアップロードをテストする - tanihiro.log" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://tanihiro.hatenablog.com/entry/2014/01/09/004022">tanihiro.hatenablog.com</a></cite></p>
<p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fqiita.com%2Ftbaba%2Fitems%2F6e97508de30e3d307507" title="FactoryGirlでファイルアップロードを偽装する - Qiita" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://qiita.com/tbaba/items/6e97508de30e3d307507">qiita.com</a></cite></p>
<p>こちらの記事のコメントでは、FactoryGirl からパスを参照させるために<code>fixture_path</code> を設定していたり</p>
<p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fqiita.com%2Fkon_yu%2Fitems%2Ff532b67fb78aaa3df0ee" title="paperclipでファイルアップロードをRspecでテスト w/ factory_girl - Qiita" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://qiita.com/kon_yu/items/f532b67fb78aaa3df0ee">qiita.com</a></cite></p>
noriyo_tcp
【Rails】ファイルアップロードのテストにてMiniMagickのValidationがfailedするとき
hatenablog://entry/8599973812315011309
2017-11-06T17:11:23+09:00
2017-11-06T17:11:23+09:00 Mac OS X Sierra 10.12.6 Ruby version 2.1.2-p95 (x86_64-darwin16.0) Rails version 4.1.16 carrierwave (0.10.0) RSpec + FactoryGirl (FactoryBot) でファイルアップロードが絡むテストを走らせたときに、以下のようなエラーに遭遇 Validation failed: Figures content Failed to manipulate with MiniMagick, maybe it is not an image? Original Error: Mini…
<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac%20OS%20X">Mac OS X</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Sierra">Sierra</a> 10.12.6</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby">Ruby</a> version 2.1.2-p95 (<a class="keyword" href="http://d.hatena.ne.jp/keyword/x86">x86</a>_64-darwin16.0)</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a> version 4.1.16</li>
<li>carrierwave (0.10.0)</li>
</ul>
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/RSpec">RSpec</a> + FactoryGirl (FactoryBot) でファイルアップロードが絡むテストを走らせたときに、以下のようなエラーに遭遇</p>
<pre class="code lang-sh" data-lang="sh" data-unlink>Validation failed: Figures content Failed to manipulate with MiniMagick, maybe it is not an image? Original Error: MiniMagick::Invalid
</pre>
<p>factory のほうはこんな感じ</p>
<pre class="code lang-ruby" data-lang="ruby" data-unlink><span class="synType">FactoryGirl</span>.define <span class="synStatement">do</span>
factory <span class="synConstant">:figure</span> <span class="synStatement">do</span>
<span class="synComment"># 中略</span>
factory <span class="synConstant">:content_figure</span> <span class="synStatement">do</span>
content <span class="synStatement">do</span>
<span class="synType">ActionDispatch</span>::<span class="synType">Http</span>::<span class="synType">UploadedFile</span>.new(
<span class="synConstant">filename</span>: <span class="synSpecial">'</span><span class="synConstant">figure.png</span><span class="synSpecial">'</span>,
<span class="synConstant">type</span>: <span class="synSpecial">'</span><span class="synConstant">image/png</span><span class="synSpecial">'</span>,
<span class="synConstant">tempfile</span>: <span class="synType">File</span>.open(<span class="synType">Rails</span>.root.join(<span class="synSpecial">'</span><span class="synConstant">spec</span><span class="synSpecial">'</span>, <span class="synSpecial">'</span><span class="synConstant">files</span><span class="synSpecial">'</span>, <span class="synSpecial">'</span><span class="synConstant">figure.png</span><span class="synSpecial">'</span>))
)
<span class="synStatement">end</span>
<span class="synStatement">end</span>
<span class="synStatement">end</span>
<span class="synStatement">end</span>
</pre>
<p>うーん、<code>CarrierWave::MiniMagick</code> をインクルードしている<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%C3%A5%D7%A5%ED%A1%BC%A5%C0">アップローダ</a>でも <code>extension_white_list</code> に <code>png</code> は入ってる</p>
<pre class="code lang-ruby" data-lang="ruby" data-unlink> <span class="synPreProc">def</span> <span class="synIdentifier">extension_white_list</span>
<span class="synSpecial">%w(</span><span class="synConstant">jpg jpeg gif png</span><span class="synSpecial">)</span>
<span class="synPreProc">end</span>
</pre>
<p><code>convert -list configure</code> で <code>DELEGATES</code> の部分を見てみる</p>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ convert <span class="synSpecial">-list</span> configure
DELEGATES bzlib mpeg freetype jng jpeg lzma png tiff xml zlib
</pre>
<p>んな〜、<code>png</code> は入っているようですぞ?</p>
<h1><a class="keyword" href="http://d.hatena.ne.jp/keyword/brew">brew</a> upgrade で<a class="keyword" href="http://d.hatena.ne.jp/keyword/imagemagick">imagemagick</a> の更新</h1>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ brew doctor
arning: You have unlinked kegs <span class="synError">in</span> your Cellar
Leaving kegs unlinked can lead to build-trouble and cause brews that depend on
those kegs to fail to run properly once built. Run <span class="synSpecial">`brew link`</span> on these:
imagemagick
Warning: Some keg-only formula are linked into the Cellar.
Linking a keg-only formula, such as gettext, into the cellar with
<span class="synSpecial">`brew link <formula>`</span> will cause other formulae to detect them during
the <span class="synSpecial">`./configure`</span> step. This may cause problems when compiling those
other formulae.
Binaries provided by keg-only formulae may override system binaries
with other strange results.
You may wish to <span class="synSpecial">`brew unlink`</span> these brews:
imagemagick@<span class="synConstant">6</span>
</pre>
<p>あー、<code>imagemagick@6</code> 系にリンクしてたのが悪いのかなあ</p>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ brew unlink imagemagick@<span class="synConstant">6</span>
$ brew link imagemagick
</pre>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ identify spec/files/figure.png
identify: unable to load module <span class="synStatement">'</span><span class="synConstant">/usr/local/Cellar/imagemagick/7.0.5-0/lib/ImageMagick//modules-Q16HDRI/coders/png.la</span><span class="synStatement">'</span>: file not found @ error/module.c/OpenModule/1279.
</pre>
<p>でもまだ<code>identify</code>でこけますぞ</p>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ brew upgrade imagemagick
$ identify spec/files/figure.png
spec/files/figure.png PNG 64x64 64x64+<span class="synConstant">0</span>+<span class="synConstant">0</span> <span class="synConstant">8</span>-bit sRGB 155B 0.000u <span class="synConstant">0</span>:00.000
</pre>
<p>うむ、良さそう。これでspec が通るようになりました</p>
<hr />
<p>参考記事:</p>
<p><code>convert -list configure</code> で確認してたり</p>
<p><a href="https://stackoverflow.com/questions/10810356/carrierwave-error-msg-failed-to-manipulate-with-minimagick-maybe-it-is-not-an">ruby on rails 3.2 - Carrierwave Error Msg: Failed to manipulate with MiniMagick, maybe it is not an image? - Stack Overflow</a></p>
<p>PDF 変換をできるようにする、という記事ですが<br/>
<code>identify</code> で確認したり、<code>imagemagick</code> を入れ直したりしてます</p>
<p><a href="https://qiita.com/sato_ryu/items/ead8c15d67c1d8e0b23e">ImageMagickでPDFを変換できるようにする。 - Qiita</a></p>
noriyo_tcp
【Ruby on Rails】content_tagでmultipleなselectタグを生成する
hatenablog://entry/8599973812309792156
2017-10-20T21:45:29+09:00
2019-05-29T02:50:34+09:00 要するにこういう感じです https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple 複数の要素を選択できる select タグを作ろうと こちらを参考にやってみました https://rubyplus.com/articles/3411-Tag-View-Helpers-in-Rails-5 Rails version 5.1.2 Ruby version 2.4.0-p0 (x86_64-darwin16) Rails console 上で試したので、頭に helper をつけます array = %w…
<p>要するにこういう感じです</p>
<p><a href="https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple">https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple</a></p>
<p>複数の要素を選択できる <code>select</code> タグを作ろうと</p>
<p>こちらを参考にやってみました</p>
<p><a href="https://rubyplus.com/articles/3411-Tag-View-Helpers-in-Rails-5">https://rubyplus.com/articles/3411-Tag-View-Helpers-in-Rails-5</a></p>
<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a> version 5.1.2</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby">Ruby</a> version 2.4.0-p0 (<a class="keyword" href="http://d.hatena.ne.jp/keyword/x86">x86</a>_64-darwin16)</li>
</ul>
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a> console 上で試したので、頭に <code>helper</code> をつけます</p>
<pre class="code lang-sh" data-lang="sh" data-unlink>array <span class="synStatement">=</span> %w<span class="synPreProc">(</span><span class="synSpecial">a b c</span><span class="synPreProc">)</span>
helper.content_tag :select, multiple: <span class="synStatement">true</span> <span class="synStatement">do</span>
array.collect <span class="synStatement">do</span> <span class="synStatement">|</span>item<span class="synStatement">|</span>
helper.content_tag<span class="synPreProc">(</span>:option, item<span class="synPreProc">)</span>
end.join.html_safe
end
<span class="synStatement">=></span> <span class="synStatement">"</span><span class="synConstant"><select multiple=</span><span class="synSpecial">\"</span><span class="synConstant">multiple</span><span class="synSpecial">\"</span><span class="synConstant">><option>a</option><option>b</option><option>c</option></select></span><span class="synStatement">"</span>
</pre>
<p>冒頭のw3schools のコードに合わせてみます。ついでに見やすいように結果を整形しました</p>
<pre class="code lang-sh" data-lang="sh" data-unlink>array <span class="synStatement">=</span> %w<span class="synPreProc">(</span><span class="synSpecial">volvo saab opel audi</span><span class="synPreProc">)</span>
html_output <span class="synStatement">=</span>
helper.content_tag :select, name: <span class="synStatement">'</span><span class="synConstant">cars</span><span class="synStatement">'</span>, multiple: <span class="synStatement">true</span> <span class="synStatement">do</span>
array.collect <span class="synStatement">do</span> <span class="synStatement">|</span>item<span class="synStatement">|</span>
helper.content_tag :option, item.capitalize, value: item
end.join.html_safe
end
<span class="synStatement">=></span> <span class="synStatement">"</span><span class="synConstant"><select name=</span><span class="synSpecial">\"</span><span class="synConstant">cars</span><span class="synSpecial">\"</span><span class="synConstant"> multiple=</span><span class="synSpecial">\"</span><span class="synConstant">multiple</span><span class="synSpecial">\"</span><span class="synConstant">><option value=</span><span class="synSpecial">\"</span><span class="synConstant">volvo</span><span class="synSpecial">\"</span><span class="synConstant">>Volvo</option><option value=</span><span class="synSpecial">\"</span><span class="synConstant">saab</span><span class="synSpecial">\"</span><span class="synConstant">>Saab</option><option value=</span><span class="synSpecial">\"</span><span class="synConstant">opel</span><span class="synSpecial">\"</span><span class="synConstant">>Opel</option><option value=</span><span class="synSpecial">\"</span><span class="synConstant">audi</span><span class="synSpecial">\"</span><span class="synConstant">>Audi</option></select></span><span class="synStatement">"</span>
require <span class="synStatement">'</span><span class="synConstant">cgi</span><span class="synStatement">'</span>
puts CGI.pretty<span class="synPreProc">(</span>html_output<span class="synPreProc">)</span>
<span class="synStatement"><select </span><span class="synIdentifier">name</span>=<span class="synStatement">"</span><span class="synConstant">cars</span><span class="synStatement">"</span> <span class="synIdentifier">multiple</span>=<span class="synStatement">"</span><span class="synConstant">multiple</span><span class="synStatement">"></span>
<span class="synStatement"><</span>option <span class="synIdentifier">value</span>=<span class="synStatement">"</span><span class="synConstant">volvo</span><span class="synStatement">"></span>
Volvo
<span class="synStatement"><</span>/option<span class="synStatement">></span>
<span class="synStatement"><</span>option <span class="synIdentifier">value</span>=<span class="synStatement">"</span><span class="synConstant">saab</span><span class="synStatement">"></span>
Saab
<span class="synStatement"><</span>/option<span class="synStatement">></span>
<span class="synStatement"><</span>option <span class="synIdentifier">value</span>=<span class="synStatement">"</span><span class="synConstant">opel</span><span class="synStatement">"></span>
Opel
<span class="synStatement"><</span>/option<span class="synStatement">></span>
<span class="synStatement"><</span>option <span class="synIdentifier">value</span>=<span class="synStatement">"</span><span class="synConstant">audi</span><span class="synStatement">"></span>
Audi
<span class="synStatement"><</span>/option<span class="synStatement">></span>
<span class="synStatement"><</span>/select<span class="synStatement">></span>
</pre>
<p>上記の例だと <code>join</code> と<code>html_safe</code> を忘れるのが怖い<br/>
<code>collect</code> ではなく<code>each</code> を使用し、その中で生成されたそれぞれの<code>option</code> タグを<code>concat</code> helper で連結します<br/>
なおかつ、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a> 5.1 で導入された<code>tag</code> helper も使ってみます</p>
<pre class="code lang-ruby" data-lang="ruby" data-unlink><span class="synComment"># Using each with tag helper</span>
helper.tag.select <span class="synConstant">name</span>: <span class="synSpecial">'</span><span class="synConstant">cars</span><span class="synSpecial">'</span>, <span class="synConstant">multiple</span>: <span class="synConstant">true</span> <span class="synStatement">do</span>
array.each <span class="synStatement">do</span> |<span class="synIdentifier">item</span>|
helper.concat(helper.tag.option, item.capitalize, <span class="synConstant">value</span>: item)
<span class="synStatement">end</span>
<span class="synStatement">end</span>
</pre>
<hr />
<p>参考:</p>
<p><a href="https://rubyplus.com/articles/3411-Tag-View-Helpers-in-Rails-5">https://rubyplus.com/articles/3411-Tag-View-Helpers-in-Rails-5</a></p>
<p><a href="https://blog.bigbinary.com/2017/08/23/new-syntax-for-tag-helpers-in-rails-5-1.html">New Syntax for HTML Tag helpers in Rails 5.1 | BigBinary Blog</a></p>
<p><a href="http://rubytips86.hatenablog.com/entry/2014/03/23/071548">RubyでHTMLを整形する - Ruby Tips!</a></p>
<p><a href="https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple">https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple</a></p>
noriyo_tcp
【Ubuntu 16.04】MySQLを自動起動できるようにする
hatenablog://entry/10328749687223197180
2017-03-04T11:22:38+09:00
2017-03-04T11:22:38+09:00 sysv-rc-confのインストール $ sudo apt-cache search sysv-rc-conf sysv-rc-conf - SysV init runlevel configuration tool for the terminal $ sudo apt-get install sysv-rc-conf mysql の自動起動設定 $ sudo sysv-rc-conf --list (中略) mysql # なんにもない $ sudo sysv-rc-conf mysql on $ sudo sysv-rc-conf --list | grep mysql mysql 2…
<h2>sysv-rc-confのインス<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A1%BC%A5%EB">トール</a></h2>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ sudo apt-cache search sysv-rc-conf
sysv-rc-conf - SysV init runlevel configuration tool <span class="synStatement">for</span> the terminal
$ sudo apt-get install sysv-rc-conf
</pre>
<h2><a class="keyword" href="http://d.hatena.ne.jp/keyword/mysql">mysql</a> の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BC%AB%C6%B0%B5%AF%C6%B0">自動起動</a>設定</h2>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ sudo sysv-rc-conf <span class="synSpecial">--list</span>
(中略)
mysql <span class="synComment"># なんにもない</span>
$ sudo sysv-rc-conf mysql on
$ sudo sysv-rc-conf <span class="synSpecial">--list</span> | <span class="synStatement">grep</span> mysql
mysql <span class="synConstant">2</span>:on <span class="synConstant">3</span>:on <span class="synConstant">4</span>:on <span class="synConstant">5</span>:on
</pre>
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/vagrant">vagrant</a>上に<a class="keyword" href="http://d.hatena.ne.jp/keyword/Ubuntu">Ubuntu</a>を入れているので、一旦 <code>exit -> vagrant halt</code> する。<br/>
そして<a class="keyword" href="http://d.hatena.ne.jp/keyword/vagrant">vagrant</a>にログインしなおすと</p>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ sudo service mysql <span class="synStatement">status</span>
● mysql.service - LSB: Start and <span class="synStatement">stop</span> the mysql database server <span class="synStatement">daemon</span>
Loaded: loaded <span class="synPreProc">(</span><span class="synSpecial">/etc/init.d/mysql</span><span class="synStatement">;</span><span class="synSpecial"> bad</span><span class="synStatement">;</span><span class="synSpecial"> vendor preset: enabled</span><span class="synPreProc">)</span>
Active: active <span class="synPreProc">(</span><span class="synSpecial">exited</span><span class="synPreProc">)</span> since Sat <span class="synConstant">2017-03-04</span> <span class="synConstant">02</span>:<span class="synConstant">10</span>:<span class="synConstant">14</span> UTC; 8min ago
...
</pre>
<p><code>active</code> になっている。</p>
<p>参考記事:</p>
<p><a href="http://ccby.hatenablog.com/entry/2014/11/16/004757">Ubuntu 14.04 LTSでApache2やMySQLを自動起動する設定 - PHPやるお</a></p>
<p><a href="http://atatte55.blog62.fc2.com/blog-entry-205.html">当たって砕け散れ [mysql]ubuntuへmysqlの自動起動の登録</a></p>
noriyo_tcp
【RSpec】 Capybara + poltergeist にて rspec failed to detect theversion of the executable at '/usr/bin/phantomjs'
hatenablog://entry/10328749687222734600
2017-03-02T19:42:15+09:00
2017-03-02T19:44:35+09:00 Ubuntu16.04上に構築しているRailsにてfeature spec (capybara + poltergeist) を走らせたときに rspec failed to detect theversion of the executable at '/usr/bin/phantomjs' とかなんとかエラーでこける。 ちょっと古いですがこちらを見ると stackoverflow.com apt-getでインストールしたphantomjsは削除して、npmで入れてるみたい? さらに調べると、apt-getで入れるphantomjsだと問題があるみたい。 obel.hatenablog.j…
<p>Ubuntu16.04上に構築している<a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a>にてfeature spec (capybara + poltergeist) を走らせたときに</p>
<p><code>rspec failed to detect theversion of the executable at '/usr/bin/phantomjs'</code> とかなんとかエラーでこける。</p>
<p>ちょっと古いですがこちらを見ると</p>
<p><iframe src="//hatenablog-parts.com/embed?url=http%3A%2F%2Fstackoverflow.com%2Fa%2F33327291%2F6623139" title="Cannot connect PhantomJS and Poltergeist in Rails application" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://stackoverflow.com/a/33327291/6623139">stackoverflow.com</a></cite></p>
<p><code>apt-get</code>でインス<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A1%BC%A5%EB">トール</a>したphantomjsは削除して、npmで入れてるみたい?</p>
<p>さらに調べると、<code>apt-get</code>で入れるphantomjsだと問題があるみたい。</p>
<p><iframe src="http://obel.hatenablog.jp/embed/20161025/1477379807" title="PhantomJS を Ubuntu 16.04 LTS にインストールする - 約束の地" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://obel.hatenablog.jp/entry/20161025/1477379807">obel.hatenablog.jp</a></cite></p>
<p>この方も<code>npm</code>で入れていますね。</p>
<p>というわけでまず<a class="keyword" href="http://d.hatena.ne.jp/keyword/Ubuntu">Ubuntu</a>にnpmをインス<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A1%BC%A5%EB">トール</a>しました。</p>
<p>しかし<code>apt-get</code> だと入るバージョンが古かったり、<code>node</code> でなくて <code>nodejs</code> コマンドだったりします。</p>
<p>よって <code>n package</code> を使用します。</p>
<p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2Ftj%2Fn" title="GitHub - tj/n: Node version management" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://github.com/tj/n">github.com</a></cite></p>
<hr />
<p>Specs</p>
<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Ubuntu">Ubuntu</a> 16.04.1 LTS (<a class="keyword" href="http://d.hatena.ne.jp/keyword/MacOS">MacOS</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/vagrant">vagrant</a>上に構築)</li>
</ul>
<p><code>rails about</code> で確認(バージョン古め・・・)</p>
<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby">Ruby</a> version 2.1.10 (<a class="keyword" href="http://d.hatena.ne.jp/keyword/x86">x86</a>_64-<a class="keyword" href="http://d.hatena.ne.jp/keyword/linux">linux</a>)</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/RubyGems">RubyGems</a> version 2.2.5</li>
<li>Rack version 1.5.5</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a> version 4.0.13</li>
</ul>
<hr />
<h2>n packageの導入 〜 node のインス<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A1%BC%A5%EB">トール</a>まで</h2>
<h3>まずは普通に<code>apt-get</code> で<code>nodejs</code> & <code>npm</code> のインス<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A1%BC%A5%EB">トール</a></h3>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ sudo apt-get install <span class="synSpecial">-y</span> nodejs npm
</pre>
<h3>次に n packageの導入</h3>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ sudo n stable
$ <span class="synStatement">echo</span><span class="synConstant"> </span><span class="synPreProc">$PATH</span> <span class="synComment"># /usr/local/bin が含まれているかどうか確認 詳しくは後述</span>
$ <span class="synStatement">exec</span> <span class="synPreProc">$SHELL</span> <span class="synComment"># shellの再読み込み</span>
</pre>
<hr />
<p>参考にしたのはこちらの記事ですが</p>
<p><a href="http://qiita.com/seibe/items/36cef7df85fe2cefa3ea">http://qiita.com/seibe/items/36cef7df85fe2cefa3ea</a></p>
<p><code>sudo n stable</code> の後にsymlink を張っていますが、コメントにて</p>
<blockquote><p>/usr/local/binが$PATHに含まれている環境においてはこのsymlinkは不要で、exec $SHELLでシェルを読み込み直すだけで使うことができました。</p></blockquote>
<p>とありましたので、それを採用することにしました。</p>
<hr />
<h4>node, npm のバージョン確認</h4>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ node <span class="synSpecial">-v</span>
v7.6.0
$ npm <span class="synSpecial">-v</span>
4.1.2
</pre>
<p>古いほうのバージョンは忘れてしまった・・・。</p>
<h4>はじめに入れた(古いほうの)nodejs, npm の削除</h4>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ sudo apt-get purge <span class="synSpecial">-y</span> nodejs npm
</pre>
<h3>phantomjs のインス<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A1%BC%A5%EB">トール</a></h3>
<pre class="code" data-lang="" data-unlink>$ sudo npm install -g phantomjs</pre>
<p><code>nodejs-legacy</code> は入れていません。</p>
<p>参考記事:</p>
<p><iframe src="http://obel.hatenablog.jp/embed/20161025/1477379807" title="PhantomJS を Ubuntu 16.04 LTS にインストールする - 約束の地" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://obel.hatenablog.jp/entry/20161025/1477379807">obel.hatenablog.jp</a></cite></p>
<p>これでfeature testsが走るようになったぞい。ふぅ・・・。</p>
noriyo_tcp
CrystalでOSを作ってみた
hatenablog://entry/10328749687200982338
2016-12-25T21:47:33+09:00
2016-12-25T21:47:33+09:00 この記事は Crystal Advent Calendar 2016 の25日目の記事です。 OSと言っても、ブートして文字を表示してるだけですが・・・こんなんです。 リポジトリはこちら github.com 軽く自己紹介 普段はフリーランスのRailsエンジニア(無職ともいう) OS作りたい、という願望は以前からあった(話すとちょっと長くなるので割愛) アセンブリ、C言語、Crystal に関しては初心者同然 参考にしたもの Writing an OS in Rust Set Up Rustまで そしてRustの部分をCrystalで置き換えればいいやろ、と思っていましたがそんな甘い話がある…
<p>この記事は <a href="http://qiita.com/advent-calendar/2016/crystal">Crystal Advent Calendar 2016</a> の25日目の記事です。</p>
<p>OSと言っても、ブートして文字を表示してるだけですが・・・こんなんです。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20161225/20161225004431.png" alt="f:id:noriyo_tcp:20161225004431p:plain" title="f:id:noriyo_tcp:20161225004431p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>はこちら</p>
<p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2FUteroOS%2Futero" title="UteroOS/utero" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://github.com/UteroOS/utero">github.com</a></cite></p>
<h2>軽く自己紹介</h2>
<ul>
<li>普段は<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D5%A5%EA%A1%BC%A5%E9%A5%F3%A5%B9">フリーランス</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a>エンジニア(無職ともいう)</li>
<li>OS作りたい、という願望は以前からあった(話すとちょっと長くなるので割愛)</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%BB%A5%F3%A5%D6%A5%EA">アセンブリ</a>、<a class="keyword" href="http://d.hatena.ne.jp/keyword/C%B8%C0%B8%EC">C言語</a>、Crystal に関しては初心者同然</li>
</ul>
<h2>参考にしたもの</h2>
<h4><a href="http://os.phil-opp.com/">Writing an OS in Rust</a></h4>
<ul>
<li><a href="http://os.phil-opp.com/set-up-rust.html">Set Up Rust</a>まで</li>
</ul>
<p>そしてRustの部分をCrystalで置き換えればいいやろ、と思っていましたがそんな甘い話があるわけもなく・・・。</p>
<p>ざっくり言うと、<a href="https://github.com/phil-opp/blog_os/tree/set_up_rust">blog_os</a>では、Rust側で <code>rust_main()</code> という関数を用意します。</p>
<p><a href="https://github.com/phil-opp/blog_os/blob/set_up_rust/src/lib.rs">src/lib.rs</a></p>
<pre class="code lang-rust" data-lang="rust" data-unlink>.
.
<span class="synStatement">extern</span> <span class="synStatement">crate</span> <span class="synIdentifier">rlibc</span>;
<span class="synPreProc">#[no_mangle]</span>
<span class="synStatement">pub</span> <span class="synStatement">extern</span> <span class="synConstant">"C"</span> <span class="synStatement">fn</span> <span class="synIdentifier">rust_main</span>() {
<span class="synComment">// ATTENTION: we have a very small stack and no guard page</span>
<span class="synStatement">let</span> hello <span class="synStatement">=</span> <span class="synConstant">b"Hello World!"</span>;
<span class="synStatement">let</span> color_byte <span class="synStatement">=</span> <span class="synConstant">0x1f</span>; <span class="synComment">// white foreground, blue background</span>
<span class="synStatement">let</span> <span class="synType">mut</span> hello_colored <span class="synStatement">=</span> [color_byte; <span class="synConstant">24</span>];
<span class="synStatement">for</span> (i, char_byte) <span class="synStatement">in</span> hello.<span class="synIdentifier">into_iter</span>().<span class="synIdentifier">enumerate</span>() {
hello_colored[i<span class="synType">*</span><span class="synConstant">2</span>] <span class="synStatement">=</span> <span class="synType">*</span>char_byte;
}
<span class="synComment">// write `Hello World!` to the center of the VGA text buffer</span>
<span class="synStatement">let</span> buffer_ptr <span class="synStatement">=</span> (<span class="synConstant">0xb8000</span> <span class="synStatement">+</span> <span class="synConstant">1988</span>) <span class="synStatement">as</span> <span class="synType">*mut</span> _;
<span class="synStatement">unsafe</span> { <span class="synType">*</span>buffer_ptr <span class="synStatement">=</span> hello_colored };
<span class="synStatement">loop</span> {}
}
.
.
</pre>
<p><code>#[no_mangle]</code>付けて <code>pub extern "C" fn rust_main()</code> していると。</p>
<p>それを<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%BB%A5%F3%A5%D6%A5%EA">アセンブリ</a>側からこのように呼び出しています。</p>
<p><a href="https://github.com/phil-opp/blog_os/blob/set_up_rust/src/arch/x86_64/long_mode_init.asm">arch/x86_64/long_mode_init.asm</a></p>
<pre class="code lang-asm" data-lang="asm" data-unlink><span class="synIdentifier">global</span> <span class="synIdentifier">long_mode_start</span>
<span class="synIdentifier">extern</span> <span class="synIdentifier">rust_main</span>
<span class="synIdentifier">section</span> <span class="synStatement">.text</span>
<span class="synIdentifier">bits</span> <span class="synConstant">64</span>
<span class="synIdentifier">long_mode_start</span>:
<span class="synComment">; call rust main</span>
<span class="synIdentifier">call</span> <span class="synIdentifier">rust_main</span>
.
.
</pre>
<p>全く同じことをCrystalでやろうとしましたが、上手く出来なかった・・・。<code>pub extern "C"</code> みたいなのはどうやるの・・・。<a href="https://ja.wikipedia.org/wiki/%E5%90%8D%E5%89%8D%E4%BF%AE%E9%A3%BE">name mangling</a> を防ぐのどうするの・・・。</p>
<p>そこで次に参考にしたのはこれです。</p>
<h4><a href="https://github.com/ysbaddaden/crystal_library">crystal_library</a></h4>
<blockquote><p>Write C static (or shared) libraries in Crystal. This is just a Proof of Concept that exemplifies how to expose a Crystal library to the outside world, eg: C or any language with bindings to C.</p></blockquote>
<p>ふむ、Crystalで静的(or 共有)ライブラリ作って、それを<a class="keyword" href="http://d.hatena.ne.jp/keyword/C%B8%C0%B8%EC">C言語</a>に食わせればいいんだろうか。</p>
<p>ということはこんな感じ? <code>assembly <- C lang <- Crystal</code></p>
<p>で、やってみましたが、リンク時に <code>-no-stdlib</code> オプションをつけているので当然、あれもないこれもないでコケまくります。<br/>
blog_osでも結局は、<a href="https://crates.io/crates/rlibc">rlibc</a> というcrateを導入することで、この問題を回避しています(しかしその後も色々問題は発生するようですが)</p>
<p><a href="http://os.phil-opp.com/set-up-rust.html#rlibc">http://os.phil-opp.com/set-up-rust.html#rlibc</a></p>
<p>つ、詰んだ・・・。と思っていたところへ</p>
<h4><a href="https://github.com/lbguilherme/os-crystal">os-crystal</a></h4>
<p>そのものズバリなプロジェクトを発見します。</p>
<p>ここでは <a href="https://github.com/lbguilherme/os-crystal/blob/master/src/x86/loader.cr">src/x86/loader.cr</a> にて</p>
<pre class="code lang-crystal" data-lang="crystal" data-unlink><span class="synPreProc">@[</span><span class="synType">Naked</span><span class="synPreProc">]</span>
<span class="synPreProc">fun</span> <span class="synIdentifier">__entry</span>()
asm(<span class="synSpecial">"</span><span class="synConstant">mov $0, %esp</span><span class="synSpecial">"</span> : : <span class="synSpecial">"</span><span class="synConstant">Z</span><span class="synSpecial">"</span>(<span class="synConstant">0x00100000</span> + <span class="synConstant">0x1000</span>));
asm(<span class="synSpecial">"</span><span class="synConstant">push 0</span><span class="synSpecial">"</span>);
asm(<span class="synSpecial">"</span><span class="synConstant">push 0</span><span class="synSpecial">"</span>);
asm(<span class="synSpecial">"</span><span class="synConstant">call main</span><span class="synSpecial">"</span>)
asm(<span class="synSpecial">"</span><span class="synConstant">hlt</span><span class="synSpecial">"</span>)
end
</pre>
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%E9%A5%A4%A5%F3%A5%A2%A5%BB%A5%F3%A5%D6%A5%EA">インラインアセンブリ</a>からシンプルに <code>call main</code> しています。で、呼び出される側は</p>
<p><a href="https://github.com/lbguilherme/os-crystal/blob/master/src/main.cr">src/main.cr</a></p>
<pre class="code lang-crystal" data-lang="crystal" data-unlink><span class="synPreProc">require</span> <span class="synSpecial">"</span><span class="synConstant">./x86/loader</span><span class="synSpecial">"</span>
<span class="synPreProc">require</span> <span class="synSpecial">"</span><span class="synConstant">./x86/OutputConsole</span><span class="synSpecial">"</span>
puts <span class="synSpecial">"</span><span class="synConstant">Kernel booting with Crystal!</span><span class="synSpecial">"</span>
puts
puts <span class="synSpecial">"</span><span class="synConstant"><3</span><span class="synSpecial">"</span>
</pre>
<p>こうなっているのですが、不思議なのは<code>main</code>という関数ではなく、<code>main.cr</code> というファイルが呼び出されている?ということです。<br/>
いや、ほんとわかんない。でも確かに呼び出されている。<br/>
これで助かった・・・。</p>
<h2>TODOs</h2>
<p>というわけでまだまだこれからですが、最後は自分を叱って終わりにしたいと思います。</p>
<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%BB%A5%F3%A5%D6%A5%EA">アセンブリ</a>部分はほぼblog_osからのパクリじゃないですか。ちゃんと理解しているんですか? 低レベル言語をしっかりと勉強しなさい</li>
<li>Crystalの部分はほぼos-crystalからのパクリじゃないですか。なんとかしなさい</li>
<li>OSと言っても、ブートして文字出してるだけじゃないですか。カッコつけてオーガニゼーションアカウント取得して、よくわからないままリリースもしてしまっているんだから、行けるところまで行きなさい</li>
<li>そもそももっと早くから取り組んでいればこんなことには・・・。 見積もりの甘さと腰の重さをいい加減直しなさい</li>
<li><a href="https://github.com/pine">pine</a>さんから<a class="keyword" href="http://d.hatena.ne.jp/keyword/github">github</a>でフォローしてもらっているのに、すっかり忘れて放置しているじゃないですか。今すぐフォロバしなさい</li>
<li>コミニュティにも参加しなさい。「他人の輪の中に入っていく」という発想がごっそり抜け落ちてしまっているのは致命的です。もういい歳なんだからしっかりしなさい</li>
<li>仕事が全然進んでいない。このままではクライアントに顔向けできないし、何より<strong>安心して年を越せないので仕事しなさい</strong></li>
</ul>
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%B3%A4%C1%A4%E9%A4%AB%A4%E9%A4%CF%B0%CA%BE%E5%A4%C7%A4%B9">こちらからは以上です</a>・・・。</p>
noriyo_tcp
【Crystal】ランダムな数の中から最も差が小さい2つの数を取得する
hatenablog://entry/10328749687197912561
2016-12-08T11:54:30+09:00
2016-12-08T11:54:30+09:00 Crystal 0.20.0 crystal play上で実行 def closest_two_numbers xx, yy, dd = 0, 0, 0 dd = Float64::INFINITY seq = (1..100).map { Random.rand(10**10) }.sort.uniq seq.each_cons(2) do |cons| x, y = cons[0], cons[1] d = (x - y).abs if d < dd xx, yy, dd = x, y, d end end return [xx, yy, dd] end results = closest…
<p>Crystal 0.20.0<br/>
crystal play上で実行</p>
<pre class="code lang-crystal" data-lang="crystal" data-unlink><span class="synPreProc">def</span> <span class="synIdentifier">closest_two_numbers</span>
xx, yy, dd = <span class="synConstant">0</span>, <span class="synConstant">0</span>, <span class="synConstant">0</span>
dd = <span class="synType">Float64</span>::<span class="synType">INFINITY</span>
seq = (<span class="synConstant">1</span>..<span class="synConstant">100</span>).map { <span class="synType">Random</span>.rand(<span class="synConstant">10</span>**<span class="synConstant">10</span>) }.sort.uniq
seq.each_cons(<span class="synConstant">2</span>) <span class="synStatement">do</span> |<span class="synIdentifier">cons</span>|
x, y = cons[<span class="synConstant">0</span>], cons[<span class="synConstant">1</span>]
d = (x - y).abs
<span class="synStatement">if</span> d < dd
xx, yy, dd = x, y, d
<span class="synStatement">end</span>
<span class="synStatement">end</span>
<span class="synStatement">return</span> [xx, yy, dd]
<span class="synPreProc">end</span>
results = closest_two_numbers
puts <span class="synSpecial">"</span>
<span class="synConstant">the closest two numbers</span>
<span class="synConstant">-----------------------</span>
<span class="synConstant">1st number: </span><span class="synSpecial">#{</span>results[<span class="synConstant">0</span>]<span class="synSpecial">}</span>
<span class="synConstant">2nd number: </span><span class="synSpecial">#{</span>results[<span class="synConstant">1</span>]<span class="synSpecial">}</span>
<span class="synConstant">difference: </span><span class="synSpecial">#{</span>results[<span class="synConstant">2</span>]<span class="synSpecial">}</span>
<span class="synSpecial">"</span>
</pre>
<p>なぜ<code>dd = Float64::INFINITY</code>で正の無限大を用意しているかというと、1番最初の<code>d < dd</code> の比較に使用するため。<br/>
以降は、2つの数の差(d) を<code>dd</code>に格納しておき、それをまた新たな2つの数の差と比較していくと。</p>
<p>実行結果は</p>
<pre class="code lang-sh" data-lang="sh" data-unlink>the closest two numbers
-----------------------
1st number: <span class="synConstant">414497986</span>
2nd number: <span class="synConstant">414546754</span>
difference: <span class="synConstant">48768</span>
</pre>
<p>こちらがPython3バージョン</p>
<pre class="code lang-python" data-lang="python" data-unlink><span class="synPreProc">from</span> random <span class="synPreProc">import</span> randrange
seq = <span class="synIdentifier">sorted</span>([randrange(<span class="synConstant">10</span>**<span class="synConstant">10</span>) <span class="synStatement">for</span> i <span class="synStatement">in</span> <span class="synIdentifier">range</span>(<span class="synConstant">100</span>)])
dd = <span class="synIdentifier">float</span>(<span class="synConstant">"inf"</span>)
<span class="synStatement">for</span> i <span class="synStatement">in</span> <span class="synIdentifier">range</span>(<span class="synIdentifier">len</span>(seq)-<span class="synConstant">1</span>):
x, y = seq[i], seq[i+<span class="synConstant">1</span>]
<span class="synStatement">if</span> x == y:
<span class="synStatement">continue</span>
d = <span class="synIdentifier">abs</span>(x-y)
<span class="synStatement">if</span> d < dd:
xx, yy, dd = x, y, d
result = <span class="synConstant">"""</span>
<span class="synConstant">the closest two numbers</span>
<span class="synConstant">-----------------------</span>
<span class="synConstant">1st number: %d</span>
<span class="synConstant">2nd number: %d</span>
<span class="synConstant">difference: %d</span>
<span class="synConstant">"""</span> % (xx, yy, dd)
<span class="synIdentifier">print</span>(result)
</pre>
<pre class="code lang-sh" data-lang="sh" data-unlink>the closest two numbers
-----------------------
1st number: <span class="synConstant">6437661962</span>
2nd number: <span class="synConstant">6438850998</span>
difference: <span class="synConstant">1189036</span>
</pre>
<p>元ネタはこちらの <em>Chapter 4 - INDUCTION AND RECURSION ... AND REDUCTION</em> より</p>
<p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/148420056X/noriyotcp-22/"><img src="http://ecx.images-amazon.com/images/I/51-LdeF492L._SL160_.jpg" class="hatena-asin-detail-image" alt="Python Algorithms: Mastering Basic Algorithms in the Python Language" title="Python Algorithms: Mastering Basic Algorithms in the Python Language"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/148420056X/noriyotcp-22/">Python Algorithms: Mastering Basic Algorithms in the Python Language</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span> Magnus Lie Hetland</li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> Apress</li><li><span class="hatena-asin-detail-label">発売日:</span> 2014/09/04</li><li><span class="hatena-asin-detail-label">メディア:</span> ペーパーバック</li><li><a href="http://d.hatena.ne.jp/asin/148420056X/noriyotcp-22" target="_blank">この商品を含むブログを見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p>
noriyo_tcp
CrystalでMerge Sort
hatenablog://entry/10328749687197059330
2016-12-02T23:39:25+09:00
2016-12-02T23:46:35+09:00 Crystal 0.20.0 こちらのRuby versionを参考にしました。 stackoverflow.com def merge_sort(array) return array if array.size <= 1 mid = (array.size / 2).round left, right = array[0...mid], array[mid..-1] merge(merge_sort(left), merge_sort(right)) end def merge(left, right) res = [] of Int32 until left.empty? || righ…
<p>Crystal 0.20.0</p>
<p>こちらの<a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby">Ruby</a> versionを参考にしました。</p>
<p><iframe src="//hatenablog-parts.com/embed?url=http%3A%2F%2Fstackoverflow.com%2Fquestions%2F9812206%2Fruby-stack-level-too-deep-systemstackerror-implementing-merge-sort-with-inver" title="Ruby: stack level too deep (SystemStackError) implementing merge sort with inversions counting" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://stackoverflow.com/questions/9812206/ruby-stack-level-too-deep-systemstackerror-implementing-merge-sort-with-inver">stackoverflow.com</a></cite></p>
<pre class="code lang-crystal" data-lang="crystal" data-unlink>
<span class="synPreProc">def</span> <span class="synIdentifier">merge_sort</span>(array)
<span class="synStatement">return</span> array <span class="synStatement">if</span> array.size <= <span class="synConstant">1</span>
mid = (array.size / <span class="synConstant">2</span>).round
left, right = array[<span class="synConstant">0</span>...mid], array[mid..<span class="synConstant">-1</span>]
merge(merge_sort(left), merge_sort(right))
<span class="synPreProc">end</span>
<span class="synPreProc">def</span> <span class="synIdentifier">merge</span>(left, right)
res = [] <span class="synStatement">of</span> <span class="synType">Int32</span>
<span class="synStatement">until</span> left.empty? || right.empty?
<span class="synStatement">if</span> left.first <= right.first
res.push(left.shift)
<span class="synStatement">else</span>
res.push(right.shift)
<span class="synStatement">end</span>
<span class="synStatement">end</span>
res + left + right
<span class="synPreProc">end</span>
</pre>
<p>もう一つ。上記のと変数名やメソッド名揃えてなくてアレですけど・・・。</p>
<p>これの元ネタは<em><a class="keyword" href="http://d.hatena.ne.jp/keyword/Python">Python</a> Algorithms, Listing 3-2</em></p>
<pre class="code lang-crystal" data-lang="crystal" data-unlink>
<span class="synPreProc">def</span> <span class="synIdentifier">mergesort2</span>(seq)
mid = (seq.size / <span class="synConstant">2</span>).round
lft, rgt = seq[<span class="synConstant">0</span>...mid], seq[mid..<span class="synConstant">-1</span>]
lft = mergesort2(lft) <span class="synStatement">if</span> lft.size > <span class="synConstant">1</span>
rgt = mergesort2(rgt) <span class="synStatement">if</span> rgt.size > <span class="synConstant">1</span>
res = [] <span class="synStatement">of</span> <span class="synType">Int32</span>
<span class="synStatement">until</span> lft.empty? || rgt.empty?
<span class="synStatement">if</span> lft.first <= rgt.first
res.push(lft.shift)
<span class="synStatement">else</span>
res.push(rgt.shift)
<span class="synStatement">end</span>
<span class="synStatement">end</span>
<span class="synStatement">return</span> res + lft + rgt
<span class="synPreProc">end</span>
</pre>
<p><code>crystal play</code>上で実行してみます。</p>
<pre class="code lang-crystal" data-lang="crystal" data-unlink><span class="synPreProc">require</span> <span class="synSpecial">"</span><span class="synConstant">benchmark</span><span class="synSpecial">"</span>
.
.
.
seq = [<span class="synConstant">5</span>,<span class="synConstant">3</span>,<span class="synConstant">6</span>,<span class="synConstant">9</span>,<span class="synConstant">1</span>,<span class="synConstant">4</span>,<span class="synConstant">2</span>,<span class="synConstant">8</span>,<span class="synConstant">7</span>]
<span class="synType">Benchmark</span>.bm <span class="synStatement">do</span> |<span class="synIdentifier">x</span>|
x.report(<span class="synSpecial">"</span><span class="synConstant">merge_sort:</span><span class="synSpecial">"</span>) <span class="synStatement">do</span>
p merge_sort(seq)
<span class="synStatement">end</span>
x.report(<span class="synSpecial">"</span><span class="synConstant">merge_sort2:</span><span class="synSpecial">"</span>) <span class="synStatement">do</span>
p mergesort2(seq)
<span class="synStatement">end</span>
<span class="synStatement">end</span>
</pre>
<pre class="code lang-sh" data-lang="sh" data-unlink> user system total real
merge_sort: <span class="synStatement">[</span><span class="synConstant">1</span>, <span class="synConstant">2</span>, <span class="synConstant">3</span>, <span class="synConstant">4</span>, <span class="synConstant">5</span>, <span class="synConstant">6</span>, <span class="synConstant">7</span>, <span class="synConstant">8</span>, <span class="synConstant">9</span><span class="synStatement">]</span>
0.000000 0.010000 0.010000 <span class="synPreProc">(</span><span class="synSpecial"> 0.014788</span><span class="synPreProc">)</span>
merge_sort2: <span class="synStatement">[</span><span class="synConstant">1</span>, <span class="synConstant">2</span>, <span class="synConstant">3</span>, <span class="synConstant">4</span>, <span class="synConstant">5</span>, <span class="synConstant">6</span>, <span class="synConstant">7</span>, <span class="synConstant">8</span>, <span class="synConstant">9</span><span class="synStatement">]</span>
0.000000 0.010000 0.010000 <span class="synPreProc">(</span><span class="synSpecial"> 0.011958</span><span class="synPreProc">)</span>
</pre>
<p>いま気づいたけど、<code>crystal play</code>のログにめっちゃ警告でてるじゃあないですか・・・。</p>
<p><code>Warning: benchmarking without the `--release` flag won't yield useful results</code></p>
<p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/148420056X/noriyotcp-22/"><img src="http://ecx.images-amazon.com/images/I/51-LdeF492L._SL160_.jpg" class="hatena-asin-detail-image" alt="Python Algorithms: Mastering Basic Algorithms in the Python Language" title="Python Algorithms: Mastering Basic Algorithms in the Python Language"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/148420056X/noriyotcp-22/">Python Algorithms: Mastering Basic Algorithms in the Python Language</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span> Magnus Lie Hetland</li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> Apress</li><li><span class="hatena-asin-detail-label">発売日:</span> 2014/09/04</li><li><span class="hatena-asin-detail-label">メディア:</span> ペーパーバック</li><li><a href="http://d.hatena.ne.jp/asin/148420056X/noriyotcp-22" target="_blank">この商品を含むブログを見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p>
noriyo_tcp
Bootstrap4 Alpha3 - チェックボックスボタンがfocusedの時もoutlineなスタイルにする
hatenablog://entry/10328749687180192969
2016-08-21T20:56:48+09:00
2016-08-21T21:37:01+09:00 な、何を言っているのかわからねーと思うが・・・ http://v4-alpha.getbootstrap.com/components/buttons/#checkbox-and-radio-buttons 上のリンクをチェックしていただけるとわかるかと思いますが、チェックボックスがボタン型になったボタングループを用意します。 ボタングループを用意 <div class="btn-group" data-toggle="buttons"> <label class="btn btn-outline-success btn-block"> <input type="checkbox" autoc…
<p>な、何を言っているのかわからねーと思うが・・・</p>
<p><a href="http://v4-alpha.getbootstrap.com/components/buttons/#checkbox-and-radio-buttons">http://v4-alpha.getbootstrap.com/components/buttons/#checkbox-and-radio-buttons</a></p>
<p>上のリンクをチェックしていただけるとわかるかと思いますが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C1%A5%A7%A5%C3%A5%AF%A5%DC%A5%C3%A5%AF%A5%B9">チェックボックス</a>がボタン型になったボタングループを用意します。</p>
<h3>ボタングループを用意</h3>
<pre class="code lang-html" data-lang="html" data-unlink><span class="synIdentifier"><</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"btn-group"</span><span class="synIdentifier"> </span><span class="synType">data</span><span class="synIdentifier">-toggle=</span><span class="synConstant">"buttons"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">label</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"btn btn-outline-success btn-block"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">input</span><span class="synIdentifier"> </span><span class="synType">type</span><span class="synIdentifier">=</span><span class="synConstant">"checkbox"</span><span class="synIdentifier"> autocomplete=</span><span class="synConstant">"off"</span><span class="synIdentifier">></span> Checkbox 2
<span class="synIdentifier"></</span><span class="synStatement">label</span><span class="synIdentifier">></span>
.
.
.
<span class="synIdentifier"></</span><span class="synStatement">div</span><span class="synIdentifier">></span>
</pre>
<p><code>btn-group</code>クラスがあるdivに、<code>data-toggle="buttons"</code>を追加します。これでボタンがトグル可能になるわけです。<code>buttons</code>が複数形であることに注意。</p>
<p>ボタンは<code>btn-outline-success</code>でアウトラインスタイルに、<code>btn-block</code>でブロック型にします。<br/>
注意としては<code>input</code>要素ではなく<code>label</code>のクラスに定義する点ですかね。</p>
<p><code>input</code>要素は<code>type="checkbox"</code>としておきます。</p>
<p>これだけで<code>active(checked)</code>な場合は緑地に白字、そうでない場合は<code>outline</code>なスタイルになってくれるのですが、一つ問題があります。</p>
<h3>focusが当たっている時は白地になってくれない</h3>
<p>クリックして<code>active</code>から<code>non-active</code>にした場合、フォーカスがかかっている状態では色が変わってくれません。フォーカスを外した時に初めて、白地のアウトラインスタイルになってくれます。<br/>
下のCodepenの例でいうと左側(または上側)のグループです。ちょっと試していただけると良いかと。</p>
<p data-height="592" data-theme-id="0" data-slug-hash="ZOkNXv" data-default-tab="result" data-user="noriyotcp" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/noriyotcp/pen/ZOkNXv/">Bootstrap4 Alpha3 - Keep non-active buttons with outline style when focused</a> by Noriyo Akita (<a href="http://codepen.io/noriyotcp">@noriyotcp</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
<p>さて、これをどうするかなと</p>
<h3>non-activeかつfocusが当たっている時のスタイル定義</h3>
<p>フォーカスが当たっている時は擬似要素<code>:focus</code>だけではなく、<code>focus</code>というクラスが追加されるようです。<br/>
調べてみると<code>.btn-outline-success</code>にはどちらの場合もこのようなスタイルが定義されています。</p>
<pre class="code lang-css" data-lang="css" data-unlink><span class="synIdentifier">.btn-outline-success.focus</span><span class="synSpecial">,</span> <span class="synIdentifier">.btn-outline-success</span>:<span class="synPreProc">focus</span> <span class="synIdentifier">{</span>
<span class="synType">color</span>: <span class="synConstant">#fff</span>;
<span class="synType">background-color</span>: <span class="synConstant">#5cb85c</span>;
<span class="synType">border-color</span>: <span class="synConstant">#5cb85c</span>;
<span class="synIdentifier">}</span>
</pre>
<p>これでは緑地に白字になってしまうわけですね。これを次のような通常の状態にできればいいわけです。</p>
<pre class="code lang-css" data-lang="css" data-unlink><span class="synIdentifier">.btn-outline-success</span> <span class="synIdentifier">{</span>
<span class="synType">color</span>: <span class="synConstant">#5cb85c</span>;
<span class="synType">background-image</span>: <span class="synConstant">none</span>;
<span class="synType">background-color</span>: <span class="synConstant">transparent</span>;
<span class="synType">border-color</span>: <span class="synConstant">#5cb85c</span>;
<span class="synIdentifier">}</span>
</pre>
<p>なので、このようにしました。</p>
<pre class="code lang-sass" data-lang="sass" data-unlink><span class="synSpecial">.</span><span class="synType">btn-outline-success</span>:<span class="synIdentifier">not(</span>.active<span class="synIdentifier">)</span> <span class="synIdentifier">{</span>
<span class="synConstant">&</span><span class="synSpecial">.</span><span class="synType">focus</span><span class="synSpecial">,</span> <span class="synConstant">&</span>:<span class="synPreProc">focus</span> <span class="synIdentifier">{</span>
<span class="synType">color</span>: <span class="synConstant">#5cb85c</span>;
<span class="synType">background-image</span>: <span class="synConstant">none</span>;
<span class="synType">background-color</span>: <span class="synConstant">transparent</span>;
<span class="synType">border-color</span>: <span class="synConstant">#5cb85c</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">}</span>
</pre>
<p><code>active</code>でない(選択されていない)状態でなおかつ<code>.focus</code>か<code>:focus</code>が付いている場合にも、アウトラインスタイルにします。<br/>
それが右(下)側のグループになります。<br/>
ご参考までに・・・。</p>
noriyo_tcp
Bootstrapのalertのようなものを作ってみる
hatenablog://entry/10328749687179846112
2016-08-19T16:00:00+09:00
2016-08-19T16:00:01+09:00 要はこういう風なものです。 http://getbootstrap.com/components/#alerts See the Pen Notification Bar Examples by Noriyo Akita (@noriyotcp) on CodePen.
<p>要はこういう風なものです。</p>
<p><a href="http://getbootstrap.com/components/#alerts">http://getbootstrap.com/components/#alerts</a></p>
<p data-height="499" data-theme-id="0" data-slug-hash="YWrPpL" data-default-tab="result" data-user="noriyotcp" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/noriyotcp/pen/YWrPpL/">Notification Bar Examples</a> by Noriyo Akita (<a href="http://codepen.io/noriyotcp">@noriyotcp</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
<h2>使った技術など</h2>
<h3>バツボタンを右に寄せる</h3>
<p>単純に<code>float: right</code>でいいのかなあと思ったのですが、アラートの幅が狭くなった時にはみ出てしまいます。</p>
<p>そこで参考にしたのはこちら</p>
<p><a href="http://phiary.me/css-multi-line-vertical-middle/">CSS にて複数行(高さが可変)の要素に対して縦揃えを中央に配置する方法 | phiary</a></p>
<p>本文では</p>
<blockquote><p>まずセンタリングしたい要素の親要素に対して, position:absolute; を指定します.</p></blockquote>
<p>とありますが、多分<code>position: relative</code>の間違いなのでは。</p>
<p>まず親要素を<code>position: relative</code>にします。今回の場合、<code>.alert</code>です。</p>
<pre class="code lang-css" data-lang="css" data-unlink><span class="synIdentifier">.alert</span> <span class="synIdentifier">{</span>
<span class="synType">position</span>: <span class="synConstant">relative</span>;
...
<span class="synIdentifier">}</span>
</pre>
<p>子要素である<code>.close</code>をこのように定義します。</p>
<pre class="code lang-css" data-lang="css" data-unlink><span class="synIdentifier">.close</span> <span class="synIdentifier">{</span>
<span class="synType">position</span>: <span class="synConstant">absolute</span>;
<span class="synType">top</span>: <span class="synConstant">50%</span>;
<span class="synType">right</span>: <span class="synConstant">1%</span>;
<span class="synType">transform</span>: <span class="synIdentifier">translateY(</span><span class="synConstant">-50%</span><span class="synIdentifier">)</span>;
...
<span class="synIdentifier">}</span>
</pre>
<blockquote><p>position: absolute と top: 50% で親要素の中央にtop の座標を移動させて, 更に transform: translateY(-50%) することで自分自身のサイズの半分の値を上に戻しています.</p>
<p>こうすることで要素の高さが変更されても中央揃えになります.</p></blockquote>
<p>ここではさらに<code>right: 1%;</code>を追加し、右からの位置を調整しています。</p>
<h3>リセットボタンについて</h3>
<p>はじめは単純に<code>.reset</code>クラスにスタイルを定義していきましたが、ボタンの基本的なスタイルを<code>.btn</code>クラスに定義し、リセットボタン固有のスタイルは<code>.reset</code>クラスに定義するということにしました。</p>
<pre class="code lang-css" data-lang="css" data-unlink>$grey: <span class="synIdentifier">#cccccc</span>;
.
.
.
<span class="synIdentifier">.reset</span> <span class="synIdentifier">{</span>
<span class="synType">background-color</span>: <span class="synConstant">transparent</span>;
<span class="synType">border</span>: <span class="synConstant">solid</span> <span class="synConstant">3px</span> $<span class="synConstant">grey</span>;
<span class="synType">color</span>: $<span class="synConstant">grey</span>;
<span class="synType">transition</span>: <span class="synType">background-color</span> <span class="synConstant">0.5s</span> <span class="synConstant">linear</span> <span class="synConstant">0.1s</span>;
&:hover {
background-color: $<span class="synConstant">grey</span>;
<span class="synType">color</span>: <span class="synConstant">white</span>;
<span class="synIdentifier">}</span>
<span class="synError">}</span>
</pre>
<p>hoverした時の変化として、<code>background-color</code>に<code>transition</code>をかけることにしました。</p>
<p>参考にしたのはこちら:</p>
<p><a href="http://scene-live.com/page.php?page=75">【CSS3】CSSで動きが出せるtransitionプロパティの概要を紹介します</a></p>
<p><a href="http://scene-live.com/page.php?page=76">【CSS3】CSSで動きが出せるtransitionプロパティの解説、実践編</a></p>
<h3>background-color用の変数と@eachを使った定義</h3>
<p>なんといいますか、はじめはこのようにベタに定義していたのですが</p>
<pre class="code lang-css" data-lang="css" data-unlink><span class="synIdentifier">.success</span> <span class="synIdentifier">{</span>
<span class="synType">background-color</span>: <span class="synConstant">#2ecc71</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.warning</span> <span class="synIdentifier">{</span>
<span class="synType">background-color</span>: <span class="synConstant">#e67e22</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.danger</span> <span class="synIdentifier">{</span>
<span class="synType">background-color</span>: <span class="synConstant">#e74c34</span>;
<span class="synIdentifier">}</span>
</pre>
<p>せっかくSCSS使っていることだし、もう少し便利なやり方はないのかなと。</p>
<p>というわけで参考にしたのはこちら</p>
<p><a href="http://stackoverflow.com/a/15102460/6623139">sass - using hash with scss - Stack Overflow</a></p>
<p><code>@each in(with variable names)</code>という方法がありまして、真似してみたのがこちら</p>
<pre class="code lang-css" data-lang="css" data-unlink>$success: #2ecc71;
$warning: <span class="synIdentifier">#e67e22</span>;
$danger: <span class="synIdentifier">#e74c34</span>;
.
.
.
@each $name<span class="synSpecial">,</span> $color in(
<span class="synConstant">'success'</span>: $success<span class="synSpecial">,</span>
<span class="synConstant">'warning'</span>: $warning<span class="synSpecial">,</span>
<span class="synConstant">'danger'</span>: $danger
) <span class="synIdentifier">{</span>
.alert-#<span class="synIdentifier">{</span>$name<span class="synIdentifier">}</span> <span class="synIdentifier">{</span>
<span class="synType">background-color</span>: $color;
<span class="synIdentifier">}</span>
<span class="synError">}</span>
</pre>
<p>Bootstrapみたいに<code>alert-success</code>のような形で定義することにしました。</p>
<h3>JS(<a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a>)部分</h3>
<p>こちらはなんてことないですが</p>
<pre class="code lang-javascript" data-lang="javascript" data-unlink>$(<span class="synConstant">'.close'</span>).on(<span class="synConstant">'click'</span>, <span class="synIdentifier">function</span>() <span class="synIdentifier">{</span>
$(<span class="synIdentifier">this</span>).<span class="synStatement">parent</span>(<span class="synConstant">'.alert'</span>).hide();
<span class="synIdentifier">}</span>);
$(<span class="synConstant">'.reset'</span>).on(<span class="synConstant">'click'</span>, <span class="synIdentifier">function</span>() <span class="synIdentifier">{</span>
$(<span class="synConstant">'.alert'</span>).show();
<span class="synIdentifier">}</span>);
</pre>
<p>バツボタンをクリックした際にはアラート部分をhide()して、<br/>
リセットボタンをクリックするとアラートを全部show()しています。</p>
<p>でもあれですな、右下にCodepenの「RERUN」ボタンがあるので、わざわざリセットボタンを作る必要はなかったのでは・・・。</p>
noriyo_tcp
【備忘録】【Ruby on Rails】MiniTestにおいて、ActionView::Template::Error: couldn't find file... と出るときは
hatenablog://entry/6653812171404360650
2016-07-07T20:41:36+09:00
2016-07-07T20:41:36+09:00 Ruby on Rails Tutorialの4th Editionが出たので、アプリを作っていったのですが www.railstutorial.org time_ago_in_wordsを使用している箇所を、rails_best_practicesのNot user time_ago_in_wordsに倣って、rails_timeagoというgemを使うことにしました。 github.com そこまでは良かったのですが、rails testが以下のようなエラーを吐いて軒並み落ちてしまいました。 ActionView::Template::Error: ActionView::Template…
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby%20on%20Rails">Ruby on Rails</a> Tutorialの4th Editionが出たので、アプリを作っていったのですが</p>
<p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.railstutorial.org%2Fbook%2F" title="Ruby on Rails Tutorial (Rails 5)" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://www.railstutorial.org/book/">www.railstutorial.org</a></cite></p>
<p><code>time_ago_in_words</code>を使用している箇所を、<a class="keyword" href="http://d.hatena.ne.jp/keyword/rails">rails</a>_best_practicesの<a href="http://rails-bestpractices.com/posts/2012/02/10/not-use-time_ago_in_words/">Not user time_ago_in_words</a>に倣って、<code>rails_timeago</code>というgemを使うことにしました。</p>
<p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2Fjgraichen%2Frails-timeago" title="jgraichen/rails-timeago" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://github.com/jgraichen/rails-timeago">github.com</a></cite></p>
<p>そこまでは良かったのですが、<code>rails test</code>が以下のようなエラーを吐いて軒並み落ちてしまいました。</p>
<pre class="code" data-lang="" data-unlink>ActionView::Template::Error: ActionView::Template::Error: couldn't find file 'rails-timeago' with type 'application/javascript'</pre>
<p>テストにおいて<code>rails-timeago</code>を見つけられてないみたいでしたので、Gemfileをこのように修正しました。</p>
<ul>
<li>Before</li>
</ul>
<pre class="code lang-ruby" data-lang="ruby" data-unlink>group <span class="synConstant">:development</span> <span class="synStatement">do</span>
.
.
gem <span class="synSpecial">'</span><span class="synConstant">rails-timeago</span><span class="synSpecial">'</span>, <span class="synSpecial">'</span><span class="synConstant">~> 2.0</span><span class="synSpecial">'</span>
<span class="synStatement">end</span>
</pre>
<ul>
<li>After</li>
</ul>
<pre class="code lang-ruby" data-lang="ruby" data-unlink>group <span class="synConstant">:development</span>, <span class="synConstant">:test</span> <span class="synStatement">do</span>
.
.
gem <span class="synSpecial">'</span><span class="synConstant">rails-timeago</span><span class="synSpecial">'</span>, <span class="synSpecial">'</span><span class="synConstant">~> 2.0</span><span class="synSpecial">'</span>
<span class="synStatement">end</span>
</pre>
<p>つまり<code>:development</code> groupから<code>:development, :test</code> groupに移してあげた、という基本中の基本みたいな話です・・・。</p>
<p>それでも落ちる場合は<code>spring</code>をいったん切ってみる、など</p>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ ps aux | <span class="synStatement">grep</span> spring
$ <span class="synStatement">kill</span> <span class="synConstant">-9</span> PID
</pre>
<p>これで完全な対処になっているかどうかわかりませんが、備忘録として・・・。</p>
<p>ちなみに<code>Rails</code>は<code>5.0.0</code>で、cloud9上で開発しました。</p>
noriyo_tcp
Crystalをインストールした際のトラブル - dyld: Library not loaded:~ & ld: library not found for -levent
hatenablog://entry/6653812171397685030
2016-05-23T18:00:00+09:00
2016-05-23T18:00:00+09:00 Mac OS X(El Capitan) 10.11.5 Homebrew 0.9.9 そろそろCrystalの環境構築しなくてはと思い、 anyenvも入れた、crenvも入れた、そしてcrystal 0.17.3も入れたぞ・・・と思ったら $ crystal --version dyld: Library not loaded: @@HOMEBREW_PREFIX@@/opt/bdw-gc/lib/libgc.1.dylib Referenced from: /Users/noriyo_tcp/.anyenv/envs/crenv/versions/0.17.3/bin/crystal R…
<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac%20OS%20X">Mac OS X</a>(El Capitan) 10.11.5</li>
<li>Homebrew 0.9.9</li>
</ul>
<p>そろそろCrystalの環境構築しなくてはと思い、</p>
<p><a href="https://github.com/riywo/anyenv">anyenv</a>も入れた、<a href="https://github.com/pine/crenv">crenv</a>も入れた、そして<code>crystal 0.17.3</code>も入れたぞ・・・と思ったら</p>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ crystal <span class="synSpecial">--version</span>
dyld: Library not loaded: @@HOMEBREW_PREFIX@@/opt/bdw-gc/lib/libgc.1.dylib
Referenced from: /Users/noriyo_tcp/.anyenv/envs/crenv/versions/0.17.3/bin/crystal
Reason: image not found
Trace/BPT <span class="synStatement">trap</span>: <span class="synConstant">5</span>
</pre>
<p>なんだこれは・・・</p>
<p><a href="http://chikizero.hatenablog.com/entry/20120202/1328155154">dyld: Library not loaded: の解決方法 - 観照げぇむ Vol.3</a></p>
<p>ここを参考にしました。</p>
<p><code>gc</code>でサーチしてみます。</p>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ brew search gc
bdw-gc homebrew/versions/gcc43 libgcrypt
gcab homebrew/versions/gcc44 libsigc++
gcal homebrew/versions/gcc45 logcheck
gcc homebrew/versions/gcc46 pcb2gcode
gconf homebrew/versions/gcc47 pgcli
gcore homebrew/versions/gcc48 pkgconfig ✔
gcovr homebrew/versions/gcc49 pngcheck
gcutil homebrew/versions/gcc5 pngcrush
gcviewer homebrew/versions/gcc6
homebrew/dupes/apple-gcc42 homebrew/versions/llvm-gcc28
homebrew/fuse/gcsfuse Caskroom/cask/pngcommentator
homebrew/games/uggconv Caskroom/cask/ringcentral
Caskroom/cask/gcc-arm-embedded Caskroom/cask/simplefloatingclock
Caskroom/cask/openpilot-gcs Caskroom/cask/svgcleaner
</pre>
<p>なんだかいっぱい出てきたけど、<code>bdw-gc</code>がある。多分こいつが必要なんだろう。</p>
<pre class="code" data-lang="" data-unlink>$ brew install bdw-gc
==> Downloading https://homebrew.bintray.com/bottles/bdw-gc-7.4.2.el_capitan.bottle.2.tar.g
######################################################################## 100.0%
==> Pouring bdw-gc-7.4.2.el_capitan.bottle.2.tar.gz
🍺 /usr/local/Cellar/bdw-gc/7.4.2: 69 files, 1.4M</pre>
<pre class="code" data-lang="" data-unlink>$ crystal --version
Crystal 0.17.3 (Fri May 20 17:45:41 UTC 2016)</pre>
<p>やったー。<strong>だがしかし</strong></p>
<h3>Playgroundが起動しない</h3>
<p>正確に言うと、起動はするのだけど、すぐに下記のようなエラーが出ました。</p>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ crystal play
Listening on http://localhost:<span class="synConstant">8080</span>
ld: library not found <span class="synStatement">for </span>-levent
clang: error: linker command failed with <span class="synStatement">exit</span> code <span class="synConstant">1</span> <span class="synStatement">(</span>use -v to see invocation<span class="synStatement">)</span>
Error: execution of command failed with code: <span class="synConstant">1</span>: <span class="synSpecial">`cc -o </span><span class="synStatement">"</span><span class="synConstant">/Users/noriyo_tcp/.cache/crystal/crystal-run-play-1-1.tmp</span><span class="synStatement">"</span><span class="synSpecial"> </span><span class="synStatement">"</span><span class="synPreProc">${@}</span><span class="synStatement">"</span><span class="synSpecial"> -rdynamic -lssl -lcrypto -lz /Users/noriyo_tcp/.anyenv/envs/crenv/versions/0.17.3/src/ext/libcrystal.a -levent -lpcre -lgc -lpthread -liconv -ldl`</span>
</pre>
<p><a href="http://crystal-lang.org/docs/installation/on_mac_osx_using_homebrew.html">http://crystal-lang.org/docs/installation/on_mac_osx_using_homebrew.html</a></p>
<p>ここのTroubleshootingを参考に<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%DE%A5%F3%A5%C9%A5%E9%A5%A4%A5%F3">コマンドライン</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C4%A1%BC%A5%EB">ツール</a>を入れ直しました。</p>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ xcode-<span class="synStatement">select </span>--<span class="synStatement">install</span>
$ xcode-<span class="synStatement">select </span>--switch /Library/Developer/CommandLineTools
</pre>
noriyo_tcp
TechDRILL - Rspec入門編ーテストコードを書いてみよう!ーをやってみたんだが
hatenablog://entry/6653812171392601557
2016-04-23T17:00:00+09:00
2016-04-23T17:00:04+09:00 やってみました。いろいろケチつけていきますと・・・。 http://tech-drill.in/questions/12 「ファイル構成」の部分で spec/hello/spec.rbとなっていますが正しくはspec/hello_spec.rbなのでは。 「準備が出来たか確認する」の部分で spec_helper.rbの完成形が記載されていますが、シンタックスハイライトが効いてないのでわかりづらいです。 config.disable_monkey_patching!をコメントアウトしてモンキーパッチを有効化するのを忘れていたので、テストファイルにてRSpec.describeというふうに、RS…
<p>やってみました。いろいろケチつけていきますと・・・。</p>
<p><a href="http://tech-drill.in/questions/12">http://tech-drill.in/questions/12</a></p>
<h3>「ファイル構成」の部分で</h3>
<p><code>spec/hello/spec.rb</code>となっていますが正しくは<code>spec/hello_spec.rb</code>なのでは。</p>
<h3>「準備が出来たか確認する」の部分で</h3>
<p><code>spec_helper.rb</code>の完成形が記載されていますが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B7%A5%F3%A5%BF%A5%C3%A5%AF%A5%B9">シンタックス</a>ハイライトが効いてないのでわかりづらいです。</p>
<p><code>config.disable_monkey_patching!</code>を<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%E1%A5%F3%A5%C8%A5%A2%A5%A6%A5%C8">コメントアウト</a>してモンキーパッチを有効化するのを忘れていたので、テ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%C8%A5%D5%A5%A1%A5%A4">ストファイ</a>ルにて<code>RSpec.describe</code>というふうに、<code>RSpec</code>をつけないと怒られました。</p>
<p>Qiitaのこのコメントを見て分かりました。
<a href="http://qiita.com/yusabana/items/db44b81bdddf6ed0e9f5#comment-cd2694c0e3e37940651d">http://qiita.com/yusabana/items/db44b81bdddf6ed0e9f5#comment-cd2694c0e3e37940651d</a></p>
<h3>「問題」の部分で</h3>
<blockquote><p>lib/mentor_test.rbを作成し</p></blockquote>
<p>とありますが、実際のファイル名は<code>lib/mentor_exam.rb</code>なのでは。</p>
<p>なんか口うるさい姑みたいになりましたがw、まあこのくらいですね。</p>
<h3>自分の解答と模範解答の相違点</h3>
<ul>
<li><p>生成された<code>.rspec</code>に<code>--require spec_helper</code>と記載されていたので、解答のようにテ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%C8%A5%D5%A5%A1%A5%A4">ストファイ</a>ルの頭で<code>require 'spec_helper'</code>とする必要がなかった。</p></li>
<li><p>解答者(solver)の名前が一緒というのも気になるので、それぞれの<code>context</code>の中で<code>let(:solver) { 'hoge' }</code>, <code>let(:solver) { 'fuga' }</code>というふうに別々にした。</p></li>
</ul>
<p>そのくらいですかねー。はじめは「環境設定すんのマンドクセー」とか「CodeSchoolなどのように<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%BF%A5%E9%A5%AF%A5%C6%A5%A3%A5%D6">インタラクティブ</a>な形式じゃないんだ?マンドクセー」とか思っておりましたが、そもそも全くのプログラミング初心者を対象にしているのでもないでしょうし、これはこれでいいのかと。解説も丁寧ですし。</p>
<p>毎週新しい問題が追加されるそうなので、ゆるゆるやっていこうかと。</p>
<p>願わくば<a class="keyword" href="http://d.hatena.ne.jp/keyword/github">github</a>のアカウントでサインインできるのがいいかなあ。パスワードや画像を新規で設定するのがマンドクセーと思っちゃたので・・・。</p>
<p>( ゚д゚)ハッ! 今回の問題は<a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a>環境下での<a class="keyword" href="http://d.hatena.ne.jp/keyword/RSpec">RSpec</a>ではないので、「<a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby%20on%20Rails">Ruby on Rails</a>」カテゴリではないのでは(細かい)。</p>
noriyo_tcp
【Mac OS X】El Capitanでログイン画面から自分のアカウントが消えてしまった時は
hatenablog://entry/10328537792371193375
2016-04-15T08:00:00+09:00
2016-04-15T08:00:31+09:00 MacBookのメモリを何回も交換しているうち、突然ログイン画面から自分のアカウントが消えて「他のユーザー」しか表示されないという現象に見舞われました。 はっきりと再現できない(というかしたくないw)ので原因が不明ですが*1、ログインできないのは非常に困ります。 Mac OS Xのバージョンは10.11.4です。 「OS X Utilities」を立ち上げる 「じゃーん」という起動音がしている間に、command + Rを押して「OS X Utilities」を立ち上げます。 残念ながらスクショは撮ってないので、こちらの記事から転載させていただくと https://coolestguideso…
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/MacBook">MacBook</a>のメモリを何回も交換しているうち、突然ログイン画面から自分のアカウントが消えて「他のユーザー」しか表示されないという現象に見舞われました。<br/>
はっきりと再現できない(というかしたくないw)ので原因が不明ですが<a href="#f-b77a1e35" name="fn-b77a1e35" title="メモリ交換後にPRAMリセットはしました">*1</a>、ログインできないのは非常に困ります。<br/>
<span style="font-size: 80%"><a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac%20OS%20X">Mac OS X</a>のバージョンは10.11.4です。</span></p>
<h2>「<a class="keyword" href="http://d.hatena.ne.jp/keyword/OS%20X">OS X</a> Utilities」を立ち上げる</h2>
<p>「じゃーん」という起動音がしている間に、command + Rを押して「<a class="keyword" href="http://d.hatena.ne.jp/keyword/OS%20X">OS X</a> Utilities」を立ち上げます。</p>
<p>残念ながらスクショは撮ってないので、<a href="https://coolestguidesontheplanet.com/reset-forgotten-admin-password-mac-osx/">こちらの記事</a>から転載させていただくと</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160415/20160415003110.jpg" alt="f:id:noriyo_tcp:20160415003110j:plain" title="f:id:noriyo_tcp:20160415003110j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p><a href="https://coolestguidesontheplanet.com/wp-content/uploads/2012/09/osx-boot-recovery-partition2.jpg">https://coolestguidesontheplanet.com/wp-content/uploads/2012/09/osx-boot-recovery-partition2.jpg</a></p>
<p>上部メニューの「ユーティリティ」から<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A1%D6%A5%BF%A1%BC%A5%DF%A5%CA%A5%EB%A1%D7">「ターミナル」</a>を選択します。そして<code>resetpassword</code>と打ち込み、リターンを押します。</p>
<p>するとパスワードリセット用のウィンドウが現れます。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160415/20160415003211.png" alt="f:id:noriyo_tcp:20160415003211p:plain" title="f:id:noriyo_tcp:20160415003211p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p><a href="https://coolestguidesontheplanet.com/wp-content/uploads/2012/09/reset-password-osx.png">https://coolestguidesontheplanet.com/wp-content/uploads/2012/09/reset-password-osx.png</a></p>
<p>ユーザーは「root」を選択、そしてパスワードを設定して保存します。</p>
<p>記事本文には</p>
<blockquote><p>you get a confirmation screen and details about the keychain account.</p></blockquote>
<p>とあるのですが、キーチェーンの詳細が出てきたかどうかは覚えていません。すみません。</p>
<p>そしてメニューのアップルアイコンから「再起動」を選択します。</p>
<h2>rootとしてログイン、そしてユーザーを作成</h2>
<p>再起動させ「その他のユーザー」の「名前」に<code>root</code>、「パスワード」には先ほど作成したパスワードを入れ、ルートユーザーとしてログインします。</p>
<p><a href="https://support.apple.com/kb/PH21994?locale=ja_JP">OS X El Capitan: Mac にユーザを設定する</a></p>
<p>詳しくはアップルのサポートページを参照すれば良いのですが、</p>
<p>「システム環境設定」>「ユーザーとグループ」に移動します。そしてカギのアイコンをクリックしてロックを解除します。</p>
<p>右画面のタブは「パスワード」そして左画面に「ユーザー」が見えますが、その下部の「+」ボタンを押して新しいユーザーを作成します。</p>
<p>ユーザーのタイプは「標準」にしたような記憶があるのですが、今確認したら「管理者」になっていました。これはちょっとわかりません(他にユーザーがいないから?)</p>
<h2>元のアカウントと同じ名前のユーザーを作成する</h2>
<p>新しいユーザーのフルネームを<strong>消滅してしまった元のアカウントのそれと同じにします。</strong> パスワードも同じにしました。<br/>
すると<strong>「もうすでに同じ名前のディレクトリがあるみたいだけど、どうする?」</strong>というようなダイアログが出ます<a href="#f-8de729ee" name="fn-8de729ee" title="つまりディレクトリやファイルは無事だったみたいです">*2</a>。</p>
<p>そこで左側の「Exacting directoryなんちゃら」<a href="#f-db5fa9ce" name="fn-db5fa9ce" title="はっきり覚えていません、すみません・・・">*3</a>というボタンを押します。要は<strong>既存のディレクトリをそのまま使用する</strong>、ということにするのです。</p>
<p>新しいユーザーの作成には多少時間がかかるので待ちます。無事作成されたのを確認したらもう一度再起動します。<br/>
するとログイン画面には無事アカウントが表示されていました。いやー、ホント焦った。</p>
<hr />
<h3>参考記事</h3>
<p>[ttps://www.<a class="keyword" href="http://d.hatena.ne.jp/keyword/reddit">reddit</a>.com/r/applehelp/comments/3nl4ju/just_upgraded_to_el_capitan_user_accounts_gone/cy0brnx]</p>
<p>どうしたものかとググりまくっていたところ<a class="keyword" href="http://d.hatena.ne.jp/keyword/reddit">reddit</a>のこのスレを見つけました。<a href="#f-f977d6f3" name="fn-f977d6f3" title="redditのリンクを埋め込んでいるとBad requestが出るのでh抜きです">*4</a>私と同じくEl Capitanでユーザアカウントが吹っ飛んじまったよ、というものですが、他のユーザーの発言がヒントになりました。</p>
<p>その発言の中で紹介されていた記事がこちら</p>
<p><a href="https://coolestguidesontheplanet.com/reset-forgotten-admin-password-mac-osx/">Reset Forgotten Admin & Standard User Password OSX 10.11 El Capitan</a></p>
<div class="footnote">
<p class="footnote"><a href="#fn-b77a1e35" name="f-b77a1e35" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">メモリ交換後に<a class="keyword" href="http://d.hatena.ne.jp/keyword/PRAM">PRAM</a>リセットはしました</span></p>
<p class="footnote"><a href="#fn-8de729ee" name="f-8de729ee" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text">つまりディレクトリやファイルは無事だったみたいです</span></p>
<p class="footnote"><a href="#fn-db5fa9ce" name="f-db5fa9ce" class="footnote-number">*3</a><span class="footnote-delimiter">:</span><span class="footnote-text">はっきり覚えていません、すみません・・・</span></p>
<p class="footnote"><a href="#fn-f977d6f3" name="f-f977d6f3" class="footnote-number">*4</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a class="keyword" href="http://d.hatena.ne.jp/keyword/reddit">reddit</a>のリンクを埋め込んでいるとBad requestが出るのでh抜きです</span></p>
</div>
noriyo_tcp
MacBook Pro(13-inch, 2012 Mid)のHDDをSSHDに交換してみた
hatenablog://entry/10328537792369656785
2016-04-05T09:00:00+09:00
2016-04-05T09:00:33+09:00 最近やたらめったらMac OS Xが落ちる悲劇が繰り返されるので、HDDを交換してみようかと。 OSはまだYosemiteです(でした) 参考記事はこちら MacBook Proの内蔵HDDを最新SSDに交換する・リターンズ(2014年春版) (1) ちょっと古いMacBook ProでMavericksを快適に使う | マイナビニュース こうちかずおのブログ: MacBook Pro 13-inch Mid 2012のメモリと内蔵HDDを交換 まず、備品の用意です。 T6ドライバー(星形になってるもの) アネックス(ANEX) スーパーフィット精密ヘクスローブドライバー T6×30 No.3…
<p>最近やたらめったら<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac%20OS%20X">Mac OS X</a>が落ちる悲劇が繰り返されるので、HDDを交換してみようかと。</p>
<p>OSはまだ<a class="keyword" href="http://d.hatena.ne.jp/keyword/Yosemite">Yosemite</a>です(でした)</p>
<hr />
<p>参考記事はこちら</p>
<p><a href="http://news.mynavi.jp/kikaku/2014/03/28/001/">MacBook Proの内蔵HDDを最新SSDに交換する・リターンズ(2014年春版) (1) ちょっと古いMacBook ProでMavericksを快適に使う | マイナビニュース</a></p>
<p><a href="http://kohchi.blogspot.jp/2014/03/macbook-pro-13-inch-mid-2012hdd.html">こうちかずおのブログ: MacBook Pro 13-inch Mid 2012のメモリと内蔵HDDを交換</a></p>
<hr />
<p>まず、備品の用意です。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160403/20160403115231.jpg" alt="f:id:noriyo_tcp:20160403115231j:plain" title="f:id:noriyo_tcp:20160403115231j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>T6ドライバー(星形になってるもの)</p>
<p><a href="http://d.hatena.ne.jp/asin/B002SQLE90/noriyotcp-22">アネックス(ANEX) スーパーフィット精密ヘクスローブドライバー T6×30 No.3543</a></p>
<p>それから<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac">Mac</a>の底面のパネルを開けるためのプラスドライバー</p>
<p><a href="http://d.hatena.ne.jp/asin/B002SQLEIG/noriyotcp-22">アネックス(ANEX) 精密ドライバー プラス00×50 No.3450</a></p>
<p>それからハードドライブは<a class="keyword" href="http://d.hatena.ne.jp/keyword/SSHD">SSHD</a>にすることにしました。1TB</p>
<p><a href="http://d.hatena.ne.jp/asin/B00TDJBFNK/noriyotcp-22">TOSHIBA MQ02ABD100H 2.5インチ 5400rpm 64MB 1TB SSHD 8GB 並行輸入</a></p>
<p>そして2.5インチHDDケース</p>
<p><a href="http://d.hatena.ne.jp/asin/B016NNCSTI/noriyotcp-22">Inateck 2.5インチ HDDケース USB 3.0接続 9.5mm 7mm 2.5" SATA HDD SSDに対応、着脱は工具不要</a></p>
<p>ではいきますぞー。</p>
<hr />
<ul class="table-of-contents">
<li><a href="#MacBookの底面パネルを開ける">MacBookの底面パネルを開ける</a></li>
<li><a href="#古いHDDをケースに入れる">古いHDDをケースに入れる</a></li>
<li><a href="#リカバリーHDからの起動">リカバリーHDからの起動</a><ul>
<li><a href="#option--再起動じゃないだと">option + 再起動・・・じゃない・・・だと!?</a></li>
<li><a href="#ディスクのフォーマット">ディスクのフォーマット</a></li>
</ul>
</li>
<li><a href="#command--Rで再起動">command + Rで再起動</a></li>
<li><a href="#だがしかし">だがしかし</a></li>
<li><a href="#El-Capitanへのアップデート">El Capitanへのアップデート</a><ul>
<li><a href="#-破損したか不正に変更されただと">「 破損したか不正に変更された」だと・・・!?</a></li>
<li><a href="#メモリを交換して再度挑戦">メモリを交換して再度挑戦</a></li>
</ul>
</li>
</ul>
<hr />
<h2 id="MacBookの底面パネルを開ける"><a class="keyword" href="http://d.hatena.ne.jp/keyword/MacBook">MacBook</a>の底面パネルを開ける</h2>
<p>静電気対策のため、<span style="font-size: 200%">まずは全裸になります。</span></p>
<p>そしてプラスドライバーで底面パネルを開けます。ネジの長さが違うので注意。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160403/20160403120910.jpg" alt="f:id:noriyo_tcp:20160403120910j:plain" title="f:id:noriyo_tcp:20160403120910j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>開けたところ</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160403/20160403121209.jpg" alt="f:id:noriyo_tcp:20160403121209j:plain" title="f:id:noriyo_tcp:20160403121209j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>HDDの上部にストッパが見えますので、そのネジ2本をプラスドライバーで緩めます。完全には外れませんので、緩めるだけ。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160403/20160403121247.jpg" alt="f:id:noriyo_tcp:20160403121247j:plain" title="f:id:noriyo_tcp:20160403121247j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>シールごと上に引っ張りあげると、HDDの左側に<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%CD%A5%AF%A5%BF">コネクタ</a>部分が接続されているのが見えますので、ゆっくりずらしながら外します。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160403/20160403121453.jpg" alt="f:id:noriyo_tcp:20160403121453j:plain" title="f:id:noriyo_tcp:20160403121453j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>左側が外した<a class="keyword" href="http://d.hatena.ne.jp/keyword/HGST">HGST</a>製のHDD。右側がこれから換装する<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C5%EC%BC%C7">東芝</a>製の<a class="keyword" href="http://d.hatena.ne.jp/keyword/SSHD">SSHD</a>です。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160403/20160403121633.jpg" alt="f:id:noriyo_tcp:20160403121633j:plain" title="f:id:noriyo_tcp:20160403121633j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>古い方からシールを剥がし(結構ベタベタしていましたが)、新しいほうの大体同じ位置に貼り付けておきます。</p>
<p>そして写真を撮るのを忘れていましたが、HDDの両脇に2本ずつ、ネジがあります。それらをT6ドライバーで外し、新しい<a class="keyword" href="http://d.hatena.ne.jp/keyword/SSHD">SSHD</a>に取り付けます。</p>
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/SATA">SATA</a>ケーブルの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%CD%A5%AF%A5%BF">コネクタ</a>を新しいHDDの左側にしっかりと差し込んだら、所定の位置に収めます。</p>
<p>4本のネジはマウンタの役割も果たしていまして、説明しづらいのですが(写真撮っておけばよかった)まず、手前側から溝(というかくぼみ)に差し込こんで、HDDを収める形になります。</p>
<p>最後にストッパを取り付けるのも忘れずに。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160403/20160403122656.jpg" alt="f:id:noriyo_tcp:20160403122656j:plain" title="f:id:noriyo_tcp:20160403122656j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<h2 id="古いHDDをケースに入れる">古いHDDをケースに入れる</h2>
<p>ケースの蓋はスライドさせるだけで開きました。そしてHDDを<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%CD%A5%AF%A5%BF">コネクタ</a>に接続、蓋を閉めます。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160403/20160403122831.jpg" alt="f:id:noriyo_tcp:20160403122831j:plain" title="f:id:noriyo_tcp:20160403122831j:plain" class="hatena-fotolife" itemprop="image"></span><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160403/20160403122912.jpg" alt="f:id:noriyo_tcp:20160403122912j:plain" title="f:id:noriyo_tcp:20160403122912j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>付属のケーブルを取り付け、USB部を<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac">Mac</a>に接続しておきます。</p>
<h2 id="リカバリーHDからの起動">リカバリーHDからの起動</h2>
<p>ここからちょっとしたトラブルです。</p>
<h3 id="option--再起動じゃないだと">option + 再起動・・・じゃない・・・だと!?</h3>
<p>参考にした記事では<code>option</code>を押しながら起動、で<a class="keyword" href="http://d.hatena.ne.jp/keyword/Macintosh">Macintosh</a> HDとRecovery HDの両方が画面にでてくるはずなのですが、一つしか出てきませんでした(何故に)</p>
<p>ググってみると、<code>command + R</code>を押しながらの起動もあるようです。</p>
<blockquote><p>この機能を呼び出すためには、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac">Mac</a>起動時にoptionキーを押しながら起動し、Recovery HD を選択して起動するか、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac">Mac</a>起動時にcommand Rを押し続けます。</p></blockquote>
<p><a href="http://deine-stimme-im-traum.tumblr.com/post/22703162778/リカバリー領域から起動してインストール-mac-os-x">リカバリー領域から起動してインストール Mac OS X...</a></p>
<p>しかし、そんなこととはつゆ知らず、とりあえず終了するかと思って電源ボタンを押したところ、外付けのほうから起動してしまいました(そらそうだ</p>
<p>まごまごしているうちにディスクユーティリティが勝手に?開いてしまったので、内蔵されている新しい<a class="keyword" href="http://d.hatena.ne.jp/keyword/SSHD">SSHD</a>をまずはフォーマットすることにしました。</p>
<h3 id="ディスクのフォーマット">ディスクのフォーマット</h3>
<p>左サイドに、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C5%EC%BC%C7">東芝</a>の1TBの<a class="keyword" href="http://d.hatena.ne.jp/keyword/SSHD">SSHD</a>が見えますので、そちらを選択、「消去」タブからフォーマットは「<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac%20OS">Mac OS</a> 拡張(<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B8%A5%E3%A1%BC%A5%CA%A5%EA%A5%F3%A5%B0">ジャーナリング</a>)」、名前は適当に「<a class="keyword" href="http://d.hatena.ne.jp/keyword/Macintosh">Macintosh</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/SHD">SHD</a>」とでもしておきました。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160404/20160404172850.png" alt="f:id:noriyo_tcp:20160404172850p:plain" title="f:id:noriyo_tcp:20160404172850p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>ダイアログがでるので、しっかりと確認して「消去」</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160404/20160404172959.png" alt="f:id:noriyo_tcp:20160404172959p:plain" title="f:id:noriyo_tcp:20160404172959p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>その後「復元」タブから「ソース」に外付けの旧ドライブ、復元先に内蔵の新ドライブを選択して復元を試みましたが、こんなダイアログが出ました</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160404/20160404173202.png" alt="f:id:noriyo_tcp:20160404173202p:plain" title="f:id:noriyo_tcp:20160404173202p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>結局なんとかして再起動のさいにリカバリーHDを表示させるしかないようです。</p>
<h2 id="command--Rで再起動">command + Rで再起動</h2>
<p>システムを終了させ、再度挑戦です。「じゃーん」と起動音がなっている間に<code>command + R</code>を押し続けます。</p>
<p>するとどちらか選択できる・・・のではなく復元モードでいきなり<a class="keyword" href="http://d.hatena.ne.jp/keyword/OS%20X">OS X</a> ユーティリティが立ち上がります。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160403/20160403130551.jpg" alt="f:id:noriyo_tcp:20160403130551j:plain" title="f:id:noriyo_tcp:20160403130551j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>(不審人物が映っていますが、気になさらずに)</p>
<p>一番下の「ディスクユーティリティ」を選択します。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160403/20160403130712.jpg" alt="f:id:noriyo_tcp:20160403130712j:plain" title="f:id:noriyo_tcp:20160403130712j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>(不審人物が(ry)</p>
<p>「復元」タブを選択、左側から直接ドラッグ&ドロップで「ソース」に外付けの旧ディスク、「復元先」に内蔵されている新しいHDを放り込みます。</p>
<p>フォーマットをしていないかたは、先ほど説明したように「消去」タブからディスクのフォーマットを行っておくと良いでしょう。</p>
<p>そして右下の「復元」ボタンを押します。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160403/20160403130727.jpg" alt="f:id:noriyo_tcp:20160403130727j:plain" title="f:id:noriyo_tcp:20160403130727j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>ダイアログが出ますので、確認して「消去」を押します。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160403/20160403132146.jpg" alt="f:id:noriyo_tcp:20160403132146j:plain" title="f:id:noriyo_tcp:20160403132146j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>コピーが始まりました。自分の場合約500/750GBということもあってか、結構時間がかかりました。</p>
<p>完了後は・・・どうだったか全く覚えていないのですがorz 外付けの接続を外して再起動させ、確認してみました。<br/>
確かiCouldの設定だの、通常の<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac">Mac</a>のセットアップと変わらなかったような気がします。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160404/20160404174634.png" alt="f:id:noriyo_tcp:20160404174634p:plain" title="f:id:noriyo_tcp:20160404174634p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>ストレージを見てみると、確かに1TBになっています。よかった(はあと</p>
<h2 id="だがしかし">だがしかし</h2>
<p>結局交換したあと、<span style="font-size: 200%">いきなりOSが落ちたりしましたw</span></p>
<p>もうこれは・・・(やっと)El Capitanに上げるしかあるまい・・・。</p>
<h2 id="El-Capitanへのアップデート">El Capitanへのアップデート</h2>
<h3 id="-破損したか不正に変更されただと">「 破損したか不正に変更された」だと・・・!?</h3>
<p>6GB以上もあるのをやっとこさダウンロードして、いざアップデート・・・しようとしたところ、<em>「この<a class="keyword" href="http://d.hatena.ne.jp/keyword/OS%20X">OS X</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Yosemite">Yosemite</a>インストール.app アプリケーションを検証できません。ダウンロード中に破損したか不正に変更された可能性があります」</em>というエラーが出ました。</p>
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/App%20Store">App Store</a>の「購入済み」からダウンロードしてみてもダメです。</p>
<p>そこでググってみると、どうやらメモリが関係しているよう?です。</p>
<p><a href="http://manablog.dosuzuki.com/apple/post-5160/">【解決!】Mac OSX 10.10 Yosemiteにアップデートできない。ダウンロード中に破損したか不正に変更された可能性?サポートへTELしてみた。 | まなぶろぐ。| デザインオフィススズキ</a></p>
<p>この方はだいぶ苦労なさったようですが、この記事のコメント3に</p>
<blockquote><p>アップグレードに成功しました。成功要因はメモリーの交換です。問題なく稼働していた<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac%20mini">Mac mini</a> 2011でしたが、使用していたメモリーはB社の8GB二枚でした。本来16GBをサポートしていないモデルでしたので一枚抜いて8GBにするもダメ。他の<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>マシンで使っているC社の8GBを一枚入れて起動したらあっけないほど簡単にアップグレードできました。アップグレード後に8GBをもう一枚追加して16GBにしても問題は発生しません。メモリーの仕様にこまかな差があるかは確認していませんが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%C8%A1%BC%A5%E9">インストーラ</a>ーがハードウェアの構成をなんらかの方法で確認しているのは間違いないように思えます。おそらく購入時のメモリーに付け替えればアップグレードができるケースは多いのではないでしょうか?米国のサイトでも何例か報告がありました。</p></blockquote>
<p>とありまして、私も以前この記事で</p>
<p><iframe src="http://hyperneetprogrammer.hatenablog.com/embed/2015/09/09/163320" title="MacBook Pro 13inch, Mid 2012のメモリを8GBから16GBに増設した - ハイパーニートプログラマーへの道" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://hyperneetprogrammer.hatenablog.com/entry/2015/09/09/163320">hyperneetprogrammer.hatenablog.com</a></cite></p>
<p>メモリを増設した覚えがありますので、やってみることにしました。</p>
<h3 id="メモリを交換して再度挑戦">メモリを交換して再度挑戦</h3>
<p>1.以前挿していた(<a class="keyword" href="http://d.hatena.ne.jp/keyword/MacBook">MacBook</a>に最初から入っていた<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%EB%A5%D4%A1%BC%A5%C0">エルピーダ</a>製の)4GBのメモリ2枚をもう一度挿す<br/>
2.<a class="keyword" href="http://d.hatena.ne.jp/keyword/PRAM">PRAM</a>リセットをやってみる。起動の際に<code>command + option + R + P</code><br/>
3.ダウンロードしてあった<a class="keyword" href="http://d.hatena.ne.jp/keyword/OS%20X">OS X</a> El Capitan<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%C8%A1%BC%A5%E9">インストーラ</a>をいったん削除<br/>
4.<a class="keyword" href="http://d.hatena.ne.jp/keyword/App%20Store">App Store</a>を開いて>「購入済み」欄からもう一度ダウンロード(このほうがDLが速かった)<br/>
5.<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%C8%A1%BC%A5%E9">インストーラ</a>を起動、ウィザードに沿ってインストール</p>
<p>これでやっとEl Capitanに更新できました(なにぶん眠いのと何度も挑戦したので自信がないですが)</p>
<p>最後にもう一度、今回使用したものをリストアップしておきますー。</p>
<hr />
<p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B002SQLE90/noriyotcp-22/"><img src="http://ecx.images-amazon.com/images/I/31K8bhGkzrL._SL160_.jpg" class="hatena-asin-detail-image" alt="アネックス(ANEX) スーパーフィット精密ヘクスローブドライバー T6×30 No.3543" title="アネックス(ANEX) スーパーフィット精密ヘクスローブドライバー T6×30 No.3543"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B002SQLE90/noriyotcp-22/">アネックス(ANEX) スーパーフィット精密ヘクスローブドライバー T6×30 No.3543</a></p><ul><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> 兼古製作所</li><li><span class="hatena-asin-detail-label">メディア:</span> Tools & Hardware</li><li><span class="hatena-asin-detail-label">購入</span>: 1人 </li><li><a href="http://d.hatena.ne.jp/asin/B002SQLE90/noriyotcp-22" target="_blank">この商品を含むブログを見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p>
<p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B002SQLEIG/noriyotcp-22/"><img src="http://ecx.images-amazon.com/images/I/41-2usJbNaL._SL160_.jpg" class="hatena-asin-detail-image" alt="アネックス(ANEX) 精密ドライバー プラス00×50 No.3450" title="アネックス(ANEX) 精密ドライバー プラス00×50 No.3450"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B002SQLEIG/noriyotcp-22/">アネックス(ANEX) 精密ドライバー プラス00×50 No.3450</a></p><ul><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> 兼古製作所</li><li><span class="hatena-asin-detail-label">メディア:</span> Tools & Hardware</li><li><span class="hatena-asin-detail-label">購入</span>: 24人 <span class="hatena-asin-detail-label">クリック</span>: 73回</li><li><a href="http://d.hatena.ne.jp/asin/B002SQLEIG/noriyotcp-22" target="_blank">この商品を含むブログを見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p>
<p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00TDJBFNK/noriyotcp-22/"><img src="http://ecx.images-amazon.com/images/I/51YLU45mGsL._SL160_.jpg" class="hatena-asin-detail-image" alt="TOSHIBA MQ02ABD100H 2.5インチ 5400rpm 64MB 1TB SSHD 8GB 並行輸入" title="TOSHIBA MQ02ABD100H 2.5インチ 5400rpm 64MB 1TB SSHD 8GB 並行輸入"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00TDJBFNK/noriyotcp-22/">TOSHIBA MQ02ABD100H 2.5インチ 5400rpm 64MB 1TB SSHD 8GB 並行輸入</a></p><ul><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/TOSHIBA">TOSHIBA</a></li><li><span class="hatena-asin-detail-label">メディア:</span> Personal Computers</li><li><a href="http://d.hatena.ne.jp/asin/B00TDJBFNK/noriyotcp-22" target="_blank">この商品を含むブログを見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p>
<p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B016NNCSTI/noriyotcp-22/"><img src="http://ecx.images-amazon.com/images/I/31AlYncitDL._SL160_.jpg" class="hatena-asin-detail-image" alt="Inateck 2.5インチ HDDケース USB 3.0接続 9.5mm 7mm 2.5" SATA HDD SSDに対応、着脱は工具不要" title="Inateck 2.5インチ HDDケース USB 3.0接続 9.5mm 7mm 2.5" SATA HDD SSDに対応、着脱は工具不要"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B016NNCSTI/noriyotcp-22/">Inateck 2.5インチ HDDケース USB 3.0接続 9.5mm 7mm 2.5" SATA HDD SSDに対応、着脱は工具不要</a></p><ul><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> Inateck</li><li><span class="hatena-asin-detail-label">メディア:</span> エレクトロニクス</li><li><a href="http://d.hatena.ne.jp/asin/B016NNCSTI/noriyotcp-22" target="_blank">この商品を含むブログを見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p>
noriyo_tcp
【Ruby on Rails】sorceryを使用したログインで、ユーザーネーム・emailのどちらでもログインできるようにする
hatenablog://entry/10328537792369157219
2016-03-30T21:04:09+09:00
2016-03-30T22:29:27+09:00 Deviseでの方法はいくらでもあるのですけど、sorceryについてはなかなか見つからなかったもので。 Rails version 4.2.5 Ruby version 2.3.0-p0 (x86_64-linux) sorcery (0.9.1) 前提:公式のこちらのチュートリアルに沿って、emailでのログインは可能になっていること。つまり途中から導入する場合ということになります。 マイグレーションファイルの編集 db/migrate/****_sorcery_core.rbにて class SorceryCore < ActiveRecord::Migration def change…
<p>Deviseでの方法はいくらでもあるのですけど、sorceryについてはなかなか見つからなかったもので。</p>
<hr />
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a> version 4.2.5<br/>
<a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby">Ruby</a> version 2.3.0-p0 (<a class="keyword" href="http://d.hatena.ne.jp/keyword/x86">x86</a>_64-<a class="keyword" href="http://d.hatena.ne.jp/keyword/linux">linux</a>)<br/>
sorcery (0.9.1)</p>
<hr />
<p>前提:<a href="https://github.com/NoamB/sorcery/wiki/Simple-Password-Authentication">公式のこちらのチュートリアル</a>に沿って、emailでのログインは可能になっていること。つまり途中から導入する場合ということになります。</p>
<h2><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A5%A4%A5%B0%A5%EC%A1%BC%A5%B7%A5%E7%A5%F3">マイグレーション</a>ファイルの編集</h2>
<p>db/migrate/****_sorcery_core.rbにて</p>
<pre class="code lang-ruby" data-lang="ruby" data-unlink><span class="synPreProc">class</span> <span class="synType">SorceryCore</span> < <span class="synType">ActiveRecord</span>::<span class="synType">Migration</span>
<span class="synPreProc">def</span> <span class="synIdentifier">change</span>
create_table <span class="synConstant">:users</span> <span class="synStatement">do</span> |<span class="synIdentifier">t</span>|
t.string <span class="synConstant">:email</span>, <span class="synConstant">:null</span> => <span class="synConstant">false</span>
t.string <span class="synConstant">:username</span>, <span class="synConstant">:null</span> => <span class="synConstant">false</span> <span class="synComment"># これを追加</span>
t.string <span class="synConstant">:crypted_password</span>
t.string <span class="synConstant">:salt</span>
t.timestamps
<span class="synStatement">end</span>
add_index <span class="synConstant">:users</span>, <span class="synConstant">:email</span>, <span class="synConstant">unique</span>: <span class="synConstant">true</span>
add_index <span class="synConstant">:users</span>, <span class="synConstant">:username</span>, <span class="synConstant">unique</span>: <span class="synConstant">true</span> <span class="synComment"># これを追加</span>
<span class="synPreProc">end</span>
<span class="synPreProc">end</span>
</pre>
<p>emailの他に、今回は<code>username</code>というカラムを作ります。</p>
<p>そして、<code>rake db:migrate:reset</code>を行いました。もうすでにDBにユーザーを作っていたのですが、それには<code>username</code>を設定していなかったので、リセットを行うことにしました。</p>
<h2>設定ファイルの編集</h2>
<p><code>config/initializers/sorcery.rb</code>にて</p>
<pre class="code lang-ruby" data-lang="ruby" data-unlink> <span class="synComment"># --- user config ---</span>
config.user_config <span class="synStatement">do</span> |<span class="synIdentifier">user</span>|
<span class="synComment"># -- core --</span>
<span class="synComment"># specify username attributes, for example: [:username, :email].</span>
<span class="synComment"># Default: `[:email]`</span>
<span class="synComment">#</span>
user.username_attribute_names = [<span class="synConstant">:username</span>, <span class="synConstant">:email</span>]
</pre>
<p><code>user.username_attribute_names</code>に<code>:email</code>だけでなく、<code>:username</code>も追加します。</p>
<h2>Strong Parametersへの追加</h2>
<p><code>app/controllers/users_controller.rb</code></p>
<pre class="code lang-ruby" data-lang="ruby" data-unlink> <span class="synPreProc">def</span> <span class="synIdentifier">user_params</span>
params.require(<span class="synConstant">:user</span>).permit(<span class="synConstant">:username</span>, <span class="synConstant">:email</span>, <span class="synConstant">:password</span>, <span class="synConstant">:password_confirmation</span>)
<span class="synPreProc">end</span>
</pre>
<h2>User modelにバリデーション追加</h2>
<p><code>app/models/user.rb</code></p>
<pre class="code lang-ruby" data-lang="ruby" data-unlink> validates <span class="synConstant">:email</span>, <span class="synConstant">:username</span>, <span class="synConstant">presence</span>: <span class="synConstant">true</span>
.
.
validates <span class="synConstant">:username</span>, <span class="synConstant">uniqueness</span>: <span class="synConstant">true</span>
</pre>
<p><code>:username</code>に<code>presence: true</code>と<code>uniqueness: true</code>のバリデーションをかけます。</p>
<h2>ログインフォームの編集</h2>
<p>ユーザーネーム用・email用のフォームを一つにまとめたい。<br/>
どうすればいいのかなあ、と思って試行錯誤したのですが、以下の方法にしました。</p>
<p><code>app/views/user_sessions/_form.html.erb</code><br/>
ログイン画面にてemail用のフィールドの代わりに、下記のコードに置き換えます。</p>
<pre class="code lang-html" data-lang="html" data-unlink> <span class="synIdentifier"><</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"field"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><%=</span><span class="synConstant"> label_tag</span><span class="synIdentifier"> :login %><</span><span class="synStatement">br</span><span class="synIdentifier"> /></span>
<span class="synIdentifier"><%=</span><span class="synConstant"> text_field_tag</span><span class="synIdentifier"> :login, nil, placeholder: </span><span class="synConstant">'username or email'</span><span class="synIdentifier"> %></span>
<span class="synIdentifier"></</span><span class="synStatement">div</span><span class="synIdentifier">></span>
</pre>
<p>params[:login]というのをコントローラーに渡すようにしておきます。ここにユーザーネーム、emailのどちらかが入ることになります。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160330/20160330204659.png" alt="f:id:noriyo_tcp:20160330204659p:plain" title="f:id:noriyo_tcp:20160330204659p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<h2>セッション用コントローラーの編集</h2>
<p><code>app/controllers/user_sessions_contoller.rb</code></p>
<pre class="code lang-ruby" data-lang="ruby" data-unlink> <span class="synPreProc">def</span> <span class="synIdentifier">create</span>
<span class="synComment"># params[:login] is username or email</span>
<span class="synStatement">if</span> <span class="synIdentifier">@user</span> = login(params[<span class="synConstant">:login</span>], params[<span class="synConstant">:password</span>], params[<span class="synConstant">:remember_me</span>])
redirect_back_or_to(<span class="synConstant">:users</span>, <span class="synConstant">notice</span>: <span class="synSpecial">'</span><span class="synConstant">Login successfully</span><span class="synSpecial">'</span>)
<span class="synStatement">else</span>
flash.now[<span class="synConstant">:alert</span>] = <span class="synSpecial">'</span><span class="synConstant">Login failed</span><span class="synSpecial">'</span>
render <span class="synConstant">:new</span>
<span class="synStatement">end</span>
<span class="synPreProc">end</span>
</pre>
<p>デフォルトでは<code>login</code><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E1%A5%BD%A5%C3%A5%C9">メソッド</a>の第1引数に<code>params[:email]</code>を渡していましたが、ここでは<code>params[:login]</code>を渡します。</p>
<pre class="code" data-lang="" data-unlink>Processing by UserSessionsController#create as HTML
Parameters: {"utf8"=>"✓", "authenticity_token"=>"****", "login"=>"user1", "password"=>"[FILTERED]", "commit"=>"Login", "remember_me"=>"on"}
User Load (1.9ms) SELECT "users".* FROM "users" WHERE ("users"."username" = 'user1' OR "users"."email" = 'user1') ORDER BY "users"."id" ASC LIMIT 1</pre>
<p>フィールドに<code>user1</code>というユーザーネームでログインしたところをconsoleで見てみます。<br/>
usersテーブルの<code>username</code>か<code>email</code>のどちらかに<code>user1</code>があるかどうか、検索してくれていますね。</p>
<pre class="code" data-lang="" data-unlink>Processing by UserSessionsController#create as HTML
Parameters: {"utf8"=>"✓", "authenticity_token"=>"****", "login"=>"test@example.com", "password"=>"[FILTERED]", "commit"=>"Login", "remember_me"=>"on"}
User Load (0.5ms) SELECT "users".* FROM "users" WHERE ("users"."username" = 'test@example.com' OR "users"."email" = 'test@example.com') ORDER BY "users"."id" ASC LIMIT 1</pre>
<p>今度は<code>test@example.com</code>でログインしたところ。こちらでも<code>OR</code>検索してくれています。</p>
<h3>その他</h3>
<ul>
<li>ユーザーネームも必須にしたので、ユーザー登録画面(app/views/users/_form.html.erb)に、<code>username</code>用のフォームを追加する。</li>
<li>ユーザーの一覧・詳細画面にもユーザーネームを表示する</li>
</ul>
<p>ということをしました。</p>
<hr />
<h3>参考</h3>
<p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2FNoamB%2Fsorcery" title="NoamB/sorcery" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://github.com/NoamB/sorcery">github.com</a></cite></p>
<p><iframe src="//hatenablog-parts.com/embed?url=http%3A%2F%2Fdev.classmethod.jp%2Fserver-side%2Fruby-on-rails%2Fruby-on-rails_sorcery_auth_no2%2F" title="[Ruby on Rails]sorceryによる認証 – (2)ユーザ名による認証とRemember-Me | Developers.IO" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://dev.classmethod.jp/server-side/ruby-on-rails/ruby-on-rails_sorcery_auth_no2/">dev.classmethod.jp</a></cite></p>
<p>こちらの記事では、emailからユーザーネームでのログインに置き換える、ということをしています。</p>
<hr />
<p>(追記)</p>
<p>うーん、記事を投稿してすぐに気がついたのですけど、もしユーザーネームのほうにふざけて<code>user@example.com</code>などと、emailと同じ形式で登録してしまうと、他のユーザーの<code>email</code>とかぶってしまうことが無きにしもあらず、のような気がしました。<br/>
ユーザーネームには<code>@</code>, <code>.</code> (<code>+</code>も?)などは使えないようにバリデーションをかける必要があるかもです。</p>
<p>(さらに追記)</p>
<p>こう・・・かな?</p>
<p><code>app/models/user.rb</code></p>
<pre class="code lang-ruby" data-lang="ruby" data-unlink>validates <span class="synConstant">:username</span>, <span class="synConstant">format</span>: { <span class="synConstant">with</span>: /\<span class="synType">A</span>\w+\z/ }
</pre>
<p>単語、数字、アンダースコアだけに制限すると。</p>
noriyo_tcp
【Ruby on Rails】Cloud9 + Heroku + SendGridで本番環境からメールを飛ばす
hatenablog://entry/10328537792365283037
2016-03-01T08:00:00+09:00
2016-03-01T08:00:49+09:00 現在Udemyでこのような講座をやっていまして www.udemy.com 開発環境はCloud9、デプロイ先はHerokuでのお話です。 Herokuでの準備 Heroku>Dashboard>左ペインManage Account>Billingでクレカ情報登録をしておきます。 Cloud9のコンソールにてheroku addons:create sendgrid:starter Herokuのダッシュボードよりアプリのページを見ると Sendgridが連携されているのがわかります。ここをクリックすると、SendGridのページへ飛びます。 「なんか問題あったらメール送るから!メルアド教えて…
<p>現在Udemyでこのような講座をやっていまして</p>
<p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.udemy.com%2Fthe-complete-ruby-on-rails-developer-course%2F" title="The Complete Ruby on Rails Developer Course - Udemy" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://www.udemy.com/the-complete-ruby-on-rails-developer-course/">www.udemy.com</a></cite></p>
<p>開発環境はCloud9、デプロイ先はHerokuでのお話です。</p>
<h2>Herokuでの準備</h2>
<p><code>Heroku>Dashboard>左ペインManage Account>Billing</code>でクレカ情報登録をしておきます。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160229/20160229222234.png" alt="f:id:noriyo_tcp:20160229222234p:plain" title="f:id:noriyo_tcp:20160229222234p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>Cloud9のコンソールにて<code>heroku addons:create sendgrid:starter</code></p>
<p>Herokuのダッシュボードよりアプリのページを見ると</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160229/20160229222217.png" alt="f:id:noriyo_tcp:20160229222217p:plain" title="f:id:noriyo_tcp:20160229222217p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>Sendgridが連携されているのがわかります。ここをクリックすると、SendGridのページへ飛びます。</p>
<p>「なんか問題あったらメール送るから!メルアド教えてくれ!」みたいなポップアップがでますが、もうすでに<code>app********@heroku.com</code>というメルアドがフォームには入っています。とにかくボタンを押してみましたが、だめだw
もう一回<a class="keyword" href="http://d.hatena.ne.jp/keyword/Gmail">Gmail</a>で登録し直しました。</p>
<h2>SendGridでの設定</h2>
<p>左の<code>Settings>Credentials>New Credentials</code>から<code>username</code>, <code>password</code>の設定。<code>mail</code>にチェックを入れます。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160229/20160229222552.png" alt="f:id:noriyo_tcp:20160229222552p:plain" title="f:id:noriyo_tcp:20160229222552p:plain" class="hatena-fotolife" itemprop="image"></span><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160229/20160229222555.png" alt="f:id:noriyo_tcp:20160229222555p:plain" title="f:id:noriyo_tcp:20160229222555p:plain" class="hatena-fotolife" itemprop="image"></span><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160229/20160229222556.png" alt="f:id:noriyo_tcp:20160229222556p:plain" title="f:id:noriyo_tcp:20160229222556p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<h2>Heroku用の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B4%C4%B6%AD%CA%D1%BF%F4">環境変数</a>設定</h2>
<p>Cloud9のコンソールにて、<br/>
<code>heroku config:set SENDGRID_USERNAME=yourusername</code></p>
<p><code>heroku config:set SENDGRID_PASSWORD=youruserpassword</code></p>
<p>先ほどSendGridで登録したユーザーネームとパスワードを設定します。</p>
<h2>開発環境の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B4%C4%B6%AD%CA%D1%BF%F4">環境変数</a>設定</h2>
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C1%A5%E5%A1%BC%A5%C8%A5%EA%A5%A2%A5%EB">チュートリアル</a>では<code>.zshrc</code>に記述しているようですが、<code>dotenv(dotenv-rails)</code>を使います。</p>
<p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2Fbkeepers%2Fdotenv" title="bkeepers/dotenv" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://github.com/bkeepers/dotenv">github.com</a></cite></p>
<hr />
<p>公式を見るとGemfileのトップに記述するようですが、まあ<code>ruby</code>のすぐ後にしました。</p>
<pre class="code lang-ruby" data-lang="ruby" data-unlink>source <span class="synSpecial">'</span><span class="synConstant">https://rubygems.org</span><span class="synSpecial">'</span>
ruby <span class="synSpecial">"</span><span class="synConstant">2.2.4</span><span class="synSpecial">"</span>
gem <span class="synSpecial">'</span><span class="synConstant">dotenv-rails</span><span class="synSpecial">'</span>, <span class="synConstant">:groups</span> => [<span class="synConstant">:development</span>, <span class="synConstant">:test</span>]
</pre>
<p><code>bundle install</code>したあとは忘れずに<code>.gitignore</code>に<code>.env</code>を追加。そしてプロジェクトのルートにて<code>.env</code>ファイルを作成し、</p>
<pre class="code" data-lang="" data-unlink>SENDGRID_USERNAME=yourusername
SENDGRID_PASSWORD=yourpassword</pre>
<p>と記述しておきます。</p>
<h2>ActionMailer設定</h2>
<p><code>config/environment.rb</code></p>
<pre class="code lang-ruby" data-lang="ruby" data-unlink><span class="synType">ActionMailer</span>::<span class="synType">Base</span>.smtp_settings = {
<span class="synConstant">:address</span> => <span class="synSpecial">'</span><span class="synConstant">smtp.sendgrid.net</span><span class="synSpecial">'</span>,
<span class="synConstant">:port</span> => <span class="synSpecial">'</span><span class="synConstant">587</span><span class="synSpecial">'</span>,
<span class="synConstant">:authentication</span> => <span class="synConstant">:plain</span>,
<span class="synConstant">:user_name</span> => <span class="synIdentifier">ENV</span>[<span class="synSpecial">'</span><span class="synConstant">SENDGRID_USERNAME</span><span class="synSpecial">'</span>],
<span class="synConstant">:password</span> => <span class="synIdentifier">ENV</span>[<span class="synSpecial">'</span><span class="synConstant">SENDGRID_PASSWORD</span><span class="synSpecial">'</span>],
<span class="synConstant">:domain</span> => <span class="synSpecial">'</span><span class="synConstant">heroku.com</span><span class="synSpecial">'</span>,
<span class="synConstant">:enable_starttls_auto</span> => <span class="synConstant">true</span>
}
</pre>
<p><a href="http://stackoverflow.com/questions/30463266/sendgrid-via-devise-attempt-to-send-authentication-email-leads-to-opentimeout-e">ruby on rails - Sendgrid via Devise: Attempt to send authentication email leads to OpenTimeout error when using Cloud 9 dev environment - Stack Overflow</a></p>
<p>ここの答えを見るとCloud9はport<code>587</code>をブロックするようだから、2525とか別のポートにしたほうがいいぜ!みたいなことが書いてありましたが、その通りにすると今度は本番環境にてうまくいかなくなりましたので、おとなしく<code>587</code>を指定しました。</p>
<p><code>config/environments/development.rb</code></p>
<pre class="code lang-ruby" data-lang="ruby" data-unlink>config.action_mailer.delivery_method = <span class="synConstant">:development</span>
config.action_mailer.default_url_options = { <span class="synConstant">host</span>: <span class="synSpecial">'</span><span class="synConstant">yourappname.c9users.io/</span><span class="synSpecial">'</span>, <span class="synConstant">port</span>: <span class="synIdentifier">$PORT</span>, <span class="synConstant">protocol</span>: <span class="synSpecial">'</span><span class="synConstant">https</span><span class="synSpecial">'</span> }
</pre>
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C1%A5%E5%A1%BC%A5%C8%A5%EA%A5%A2%A5%EB">チュートリアル</a>のコメント欄には下記のように</p>
<pre class="code lang-ruby" data-lang="ruby" data-unlink>config.action_mailer.delivery_method = <span class="synConstant">:development</span>
config.action_mailer.default_url_options = { <span class="synConstant">host</span>: <span class="synSpecial">'</span><span class="synConstant">$IP</span><span class="synSpecial">'</span>, <span class="synConstant">port</span>: <span class="synIdentifier">$PORT</span> }
</pre>
<p><code>host: $IP</code>かもしくは<code>host: '$IP'</code>にしろ、みたいなことが書いてありましたが、<strong>真っ赤な嘘やで</strong>。</p>
<p><code>config/environments/production.rb</code></p>
<pre class="code lang-ruby" data-lang="ruby" data-unlink>config.action_mailer.delivery_method = <span class="synConstant">:smtp</span>
config.action_mailer.default_url_options = { <span class="synConstant">:host</span> => <span class="synSpecial">'</span><span class="synConstant">yourherokuappname.herokuapp.com</span><span class="synSpecial">'</span>, <span class="synConstant">:protocol</span> => <span class="synSpecial">'</span><span class="synConstant">https</span><span class="synSpecial">'</span>}
</pre>
<p><code>git origin heroku master</code>でHerokuへプッシュしたのち、ユーザー登録画面(Deviseを使用しています)から、自分のEmailを登録してみると、メールが届きます(結構時間かかる?それでも数分くらいだったような気も)</p>
<hr />
<h2>おまけ:letter_opener_webを使用して開発環境でのメールの確認</h2>
<p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2Ffgrehm%2Fletter_opener_web" title="fgrehm/letter_opener_web" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://github.com/fgrehm/letter_opener_web">github.com</a></cite></p>
<p><code>Gemfile</code></p>
<pre class="code lang-ruby" data-lang="ruby" data-unlink>
gem <span class="synSpecial">'</span><span class="synConstant">letter_opener_web</span><span class="synSpecial">'</span>, <span class="synSpecial">'</span><span class="synConstant">~> 1.2.0</span><span class="synSpecial">'</span>, <span class="synConstant">:group</span> => <span class="synConstant">:development</span>
<span class="synComment"># 私は何もオプション無しで``group :development``内にgem 'letter_opener_web'としました・・・</span>
</pre>
<pre class="code lang-sh" data-lang="sh" data-unlink>bundle <span class="synStatement">install</span> <span class="synComment"># or bundle install --without production</span>
</pre>
<p><code>routes.rb</code></p>
<pre class="code lang-ruby" data-lang="ruby" data-unlink><span class="synType">Your</span>::<span class="synType">Application</span>.routes.draw <span class="synStatement">do</span>
.
.
if <span class="synType">Rails</span>.env.development?
mount <span class="synType">LetterOpenerWeb</span>::<span class="synType">Engine</span>, <span class="synConstant">at</span>: <span class="synSpecial">"</span><span class="synConstant">/letter_opener</span><span class="synSpecial">"</span>
<span class="synStatement">end</span>
.
.
end
</pre>
<p><code>config/environments/development.rb</code></p>
<pre class="code lang-ruby" data-lang="ruby" data-unlink> config.action_mailer.delivery_method = <span class="synConstant">:letter_opener</span>
config.action_mailer.default_url_options = { <span class="synConstant">host</span>: <span class="synSpecial">'</span><span class="synConstant">yourappname.c9users.io/</span><span class="synSpecial">'</span>, <span class="synConstant">port</span>: <span class="synIdentifier">$PORT</span>, <span class="synConstant">protocol</span>: <span class="synSpecial">'</span><span class="synConstant">https</span><span class="synSpecial">'</span> }
</pre>
<p>ユーザー登録後、<br/>
<code>https://yourappname.c9users.io/letter_opener</code>にアクセスすると、認証メールが確認できます。</p>
noriyo_tcp
Day One(Classic)からDay One2へ記事をインポートしてみた
hatenablog://entry/6653586347156746049
2016-02-10T17:05:57+09:00
2016-02-10T17:05:57+09:00 Day One2がセール中だったので購入しました。 Day One 2 Journal + NotesBloom Built, LLCライフスタイル¥2,400 記事執筆時点ではまだ半額ですが、そもそも4,800円とか高えよ・・・。 インポートする まず起動します(当たり前か) 右が新しいDay One2。 イメージ画面?みたいのが出てきますが、ポチポチとContinueを押していくと、この画面になります。 「リマインダー作ろうぜ!」みたいなこと言われていますが、Classicのほうでも全然使っていなかったので、Continueを押して進みます。 「インポートするかい?」と出るので、当然Imp…
<p>Day One2がセール中だったので購入しました。</p>
<p><div class="itunes-embed freezed itunes-kind-mac-software"><a href="https://itunes.apple.com/jp/app/day-one-2-journal-+-notes/id1055511498?mt=12&uo=4&at=1l3vqEC" rel="nofollow" target="_blank"><img src="http://cdn.image.st-hatena.com/image/scale/b1de61f8d0dd2aaf9aec8946a5e1283932339e82/enlarge=0;height=200;version=1;width=200/http%3A%2F%2Fis2.mzstatic.com%2Fimage%2Fthumb%2FPurple49%2Fv4%2F50%2F71%2Fd3%2F5071d32d-a72a-9cf3-f748-728958f55bcd%2Fsource.icns%2F100x100bb.png" alt="Day One 2 Journal + Notes" title="Day One 2 Journal + Notes" class="itunes-embed-image"/></a><div class="itunes-embed-info"><p class="itunes-embed-title"><a href="https://itunes.apple.com/jp/app/day-one-2-journal-+-notes/id1055511498?mt=12&uo=4&at=1l3vqEC" rel="nofollow" target="_blank">Day One 2 Journal + Notes</a></p><ul><li class="itunes-embed-artist">Bloom Built, LLC</li><li class="itunes-embed-genre">ライフスタイル</li><li class="itunes-embed-price">¥2,400</li><li class="itunes-embed-badge"><a href="https://itunes.apple.com/jp/app/day-one-2-journal-+-notes/id1055511498?mt=12&uo=4&at=1l3vqEC" rel="nofollow" target="_blank"><img src="/images/theme/itunes/itunes-badge-macappstore@2x.png" width="80px" height="15px" /></a></li></ul></div></div></p>
<p>記事執筆時点ではまだ半額ですが、そもそも4,800円とか高えよ・・・。</p>
<h3>インポートする</h3>
<p>まず起動します(当たり前か)</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160210/20160210164507.png" alt="f:id:noriyo_tcp:20160210164507p:plain" title="f:id:noriyo_tcp:20160210164507p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>右が新しいDay One2。</p>
<p>イメージ画面?みたいのが出てきますが、ポチポチと<code>Continue</code>を押していくと、この画面になります。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160210/20160210164637.png" alt="f:id:noriyo_tcp:20160210164637p:plain" title="f:id:noriyo_tcp:20160210164637p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>「リマインダー作ろうぜ!」みたいなこと言われていますが、Classicのほうでも全然使っていなかったので、<code>Continue</code>を押して進みます。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160210/20160210164752.png" alt="f:id:noriyo_tcp:20160210164752p:plain" title="f:id:noriyo_tcp:20160210164752p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>「インポートするかい?」と出るので、当然<code>Import</code>を押します。</p>
<p>確認のダイアログが出ます。インポートされた記事はClassicのほうから削除されてしまうわけではないと。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160210/20160210164938.png" alt="f:id:noriyo_tcp:20160210164938p:plain" title="f:id:noriyo_tcp:20160210164938p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>これも<code>Import</code>を押します。するとインポートが始まり・・・</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160210/20160210165017.png" alt="f:id:noriyo_tcp:20160210165017p:plain" title="f:id:noriyo_tcp:20160210165017p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>インポート終了のダイアログが出ますので、<code>OK</code>を押します。これでインポート終了。簡単でした。</p>
<h3>設定をする</h3>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160210/20160210165144.png" alt="f:id:noriyo_tcp:20160210165144p:plain" title="f:id:noriyo_tcp:20160210165144p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>メニューバー>Viewです。タイムラインは<code>⌘+1</code>、カレンダーは<code>⌘+4</code>と。とりあえずこれだけは覚えておきます。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160210/20160210165327.png" alt="f:id:noriyo_tcp:20160210165327p:plain" title="f:id:noriyo_tcp:20160210165327p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>設定画面です。メニューバーに表示させたいので、<code>Show Menu Bar Entry</code>を選択。その<code>Global Menu Bar</code>を使うためのショートカットはデフォルトで<code>Ctrl + Shift + D</code>です。<br/>
なんかリマインダーも使えるようにしないといけないらしいですな。</p>
<p>なので、<code>Reminders</code>タブにて、<code>Enable Reminders</code>を選択。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160210/20160210165626.png" alt="f:id:noriyo_tcp:20160210165626p:plain" title="f:id:noriyo_tcp:20160210165626p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>これでメニューバーにアイコンが表示されます。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160210/20160210165732.png" alt="f:id:noriyo_tcp:20160210165732p:plain" title="f:id:noriyo_tcp:20160210165732p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>ここをクリックするか、先ほどのショートカットを使用すると</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160210/20160210165814.png" alt="f:id:noriyo_tcp:20160210165814p:plain" title="f:id:noriyo_tcp:20160210165814p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>このように出てきて書き込めると。</p>
noriyo_tcp
Sublime Text2からSublime Text 3へ、なるべく設定をそのままで移行する
hatenablog://entry/6653586347154430623
2016-01-25T08:00:00+09:00
2016-07-28T12:11:47+09:00 いい加減2から3へ移行しようかと。 環境:Mac OS X Yosemite(10.10.5) Sublime Text3のダウンロード ライセンスの設定 パッケージコントロールのインストール 引き続き使用できるパッケージの確認 パッケージのインストール SublimeMozcInputのインストール User SettingsとKey Bindingsの移行 パッケージのUser Settings subl helperの設定 一旦シンボリックリンクを削除する 3へ貼り直す 2へのリンクも別名で貼る その他参考リンク
<p>いい加減2から3へ移行しようかと。</p>
<p>環境:<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac%20OS%20X">Mac OS X</a> Yosemite(10.10.5)</p>
<ul class="table-of-contents">
<li><a href="#Sublime-Text3のダウンロード">Sublime Text3のダウンロード</a></li>
<li><a href="#ライセンスの設定">ライセンスの設定</a></li>
<li><a href="#パッケージコントロールのインストール">パッケージコントロールのインストール</a></li>
<li><a href="#引き続き使用できるパッケージの確認">引き続き使用できるパッケージの確認</a></li>
<li><a href="#パッケージのインストール">パッケージのインストール</a></li>
<li><a href="#SublimeMozcInputのインストール">SublimeMozcInputのインストール</a></li>
<li><a href="#User-SettingsとKey-Bindingsの移行">User SettingsとKey Bindingsの移行</a></li>
<li><a href="#パッケージのUser-Settings">パッケージのUser Settings</a></li>
<li><a href="#subl-helperの設定">subl helperの設定</a><ul>
<li><a href="#一旦シンボリックリンクを削除する">一旦シンボリックリンクを削除する</a></li>
<li><a href="#3へ貼り直す">3へ貼り直す</a></li>
<li><a href="#2へのリンクも別名で貼る">2へのリンクも別名で貼る</a></li>
</ul>
</li>
<li><a href="#その他参考リンク">その他参考リンク</a></li>
</ul>
<h3 id="Sublime-Text3のダウンロード"><a class="keyword" href="http://d.hatena.ne.jp/keyword/Sublime">Sublime</a> Text3のダウンロード</h3>
<p>ここからDLします(Build 3083)</p>
<p><a href="http://www.sublimetext.com/3">http://www.sublimetext.com/3</a></p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160125/20160125005452.png" alt="f:id:noriyo_tcp:20160125005452p:plain" title="f:id:noriyo_tcp:20160125005452p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%C8%A1%BC%A5%E9">インストーラ</a>ーをダブルクリックして開くとこうなりますので、アイコンをアプリケーションフォルダへドラッグ&ドロップ。</p>
<p>アプリケーションフォルダを覗くと</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160125/20160125005557.png" alt="f:id:noriyo_tcp:20160125005557p:plain" title="f:id:noriyo_tcp:20160125005557p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>左、「<a class="keyword" href="http://d.hatena.ne.jp/keyword/Sublime">Sublime</a> Text」が3のほうです。2と共存できるわけです。</p>
<h3 id="ライセンスの設定">ライセンスの設定</h3>
<p>2用のライセンスを購入した際のメールから掘り起こしまして・・・。</p>
<p><code>Help > Enter License</code>にLicense Keyをコピペします。完了すると</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160125/20160125005659.png" alt="f:id:noriyo_tcp:20160125005659p:plain" title="f:id:noriyo_tcp:20160125005659p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>これよく見るとあれか、今はあくまでBetaであって、正式に3.0が出たらアップグレードにはお金かかりますよってことなのかな・・・。</p>
<h3 id="パッケージコントロールのインストール">パッケージコン<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A5%ED%A1%BC%A5%EB">トロール</a>のインストール</h3>
<p><a href="https://packagecontrol.io/installation#st3">https://packagecontrol.io/installation#st3</a></p>
<p>ここにアクセスして、「<a class="keyword" href="http://d.hatena.ne.jp/keyword/Sublime">Sublime</a> Text3」のタブにあるコードをコピー。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160125/20160125005905.png" alt="f:id:noriyo_tcp:20160125005905p:plain" title="f:id:noriyo_tcp:20160125005905p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>そしてコンソールを開きます。<code>View > Show console</code> (or <code>Ctrl + `</code>)</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160125/20160125005939.png" alt="f:id:noriyo_tcp:20160125005939p:plain" title="f:id:noriyo_tcp:20160125005939p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>下部に開いたコンソールに先ほどのコードをペースト、そしてEnter</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160125/20160125010026.png" alt="f:id:noriyo_tcp:20160125010026p:plain" title="f:id:noriyo_tcp:20160125010026p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>終わったらこんなダイアログがでるので、再起動します。</p>
<h3 id="引き続き使用できるパッケージの確認">引き続き使用できるパッケージの確認</h3>
<p>2で使用していたパッケージを、3でも使用できるか確認できるサイトがあります。</p>
<p><em>(2016/7/28) 下記のサイトにアクセスできない? <a href="https://packagecontrol.io/packages/CanISwitchToSublimeText3">プラグイン</a>は用意されているようですが・・・。</em></p>
<p><a href="http://www.caniswitchtosublimetext3.com/">http://www.caniswitchtosublimetext3.com/</a><cite class="hatena-citation"><a href="http://www.caniswitchtosublimetext3.com/">www.caniswitchtosublimetext3.com</a></cite></p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160125/20160125004938.png" alt="f:id:noriyo_tcp:20160125004938p:plain" title="f:id:noriyo_tcp:20160125004938p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p><code>Preferences > Package Settings > Package Control > Settings - User</code>のコードを丸ごとテキストエリアにコピペします。そして下部のボタンをクリックすると、結果が出ます。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160125/20160125005229.png" alt="f:id:noriyo_tcp:20160125005229p:plain" title="f:id:noriyo_tcp:20160125005229p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>使用できる(Working)と緑になります。SublimeMozcInputだけ<code>Unrecognized plugin</code>になっていますが、それはまた後述。</p>
<h3 id="パッケージのインストール">パッケージのインストール</h3>
<p>これは2と変わらず<br/>
<code>Command + Shift + p</code>してパネルを開いて、<code>Package Control:Install Package</code>を選択、インストールしたいパッケージを検索します。</p>
<p>(SublimeCodeIntelが結構時間かかった)</p>
<h3 id="SublimeMozcInputのインストール">SublimeMozcInputのインストール</h3>
<p><a href="http://yasuyuky.github.io/SublimeMozcInput/">http://yasuyuky.github.io/SublimeMozcInput/</a></p>
<p>これは公式の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>では提供されていないので</p>
<hr />
<blockquote><p>Currently not available in Official Repository</p>
<p>To Use Package Control, Package Control: Add Repository and add <a href="https://github.com/yasuyuky/SublimeMozcInput">https://github.com/yasuyuky/SublimeMozcInput</a></p>
<p>then Package Control: Install Package Choose SublimeMozcInput</p></blockquote>
<hr />
<p>パッケージコン<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A5%ED%A1%BC%A5%EB">トロール</a>のパネルを開き、<code>Package Control: Add Repository</code>を選択します。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160125/20160125010153.png" alt="f:id:noriyo_tcp:20160125010153p:plain" title="f:id:noriyo_tcp:20160125010153p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>下部に入力パネルが出るので、<code>https://github.com/yasuyuky/SublimeMozcInput</code>を入力。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160125/20160125010213.png" alt="f:id:noriyo_tcp:20160125010213p:plain" title="f:id:noriyo_tcp:20160125010213p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>そうすると、パッケージコン<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A5%ED%A1%BC%A5%EB">トロール</a>からインストールすることができるようになります。
あとは他パッケージのインストール方法と同じ。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160125/20160125010237.png" alt="f:id:noriyo_tcp:20160125010237p:plain" title="f:id:noriyo_tcp:20160125010237p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<h3 id="User-SettingsとKey-Bindingsの移行">User SettingsとKey Bindingsの移行</h3>
<p>2の<code>Preferences > Settings - User</code>から3のそれへコピペ。同様にキー<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%A4%A5%F3%A5%C7%A5%A3%A5%F3%A5%B0">バインディング</a>も、<code>Preferences > Key Bindings - User</code>からコピペ。</p>
<h3 id="パッケージのUser-Settings">パッケージのUser Settings</h3>
<p>まず確認してみます。</p>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ <span class="synStatement">ls</span> ~/Library/Application\ Support/Sublime\ Text\ <span class="synConstant">2</span>/Packages/User/
Abacus.sublime-settings Package Control.system-ca-bundle
BeautifyRuby.sublime-settings Package Control.user-ca-bundle
Default <span class="synPreProc">(</span><span class="synSpecial">Linux</span><span class="synPreProc">)</span>.sublime-keymap Preferences.sublime-settings
Default <span class="synPreProc">(</span><span class="synSpecial">OSX</span><span class="synPreProc">)</span>.sublime-keymap SublimeCodeIntel.sublime-settings
Default <span class="synPreProc">(</span><span class="synSpecial">Windows</span><span class="synPreProc">)</span>.sublime-keymap SublimeLinter.sublime-settings
Emmet.sublime-settings SublimeServer.sublime-settings
Package Control.cache Swift.sublime-build
Package Control.last-run c2u_tmp
Package Control.merged-ca-bundle encoding_cache.json
Package Control.sublime-settings
</pre>
<p>うーん、いろいろ設定あるみたいだけど(Abacusは削除したはずだけど?)・・・パッケージの設定を移行すればいいかなあ。これも2の設定を3のそれにコピーするだけ。</p>
<p>(例)</p>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ cp ~/Library/Application\ Support/Sublime\ Text\ <span class="synConstant">2</span>/Packages/User/Emmet.sublime-settings ~/Library/Application\ Support/Sublime\ Text\ <span class="synConstant">3</span>/Packages/User/Emmet.sublime-settings
</pre>
<p><code>Preferences.sublime-settings</code>と<code>Default (OSX).sublime-keymap</code>はもうやったので必要なし。</p>
<p>コピーしたのは</p>
<ul>
<li>BeautifyRuby.<a class="keyword" href="http://d.hatena.ne.jp/keyword/sublime">sublime</a>-settings</li>
<li>Emmet.<a class="keyword" href="http://d.hatena.ne.jp/keyword/sublime">sublime</a>-settings</li>
<li>SublimeCodeIntel.<a class="keyword" href="http://d.hatena.ne.jp/keyword/sublime">sublime</a>-settings</li>
<li>SublimeLinter.<a class="keyword" href="http://d.hatena.ne.jp/keyword/sublime">sublime</a>-settings</li>
<li>SublimeServer.<a class="keyword" href="http://d.hatena.ne.jp/keyword/sublime">sublime</a>-settings</li>
<li>Swift.<a class="keyword" href="http://d.hatena.ne.jp/keyword/sublime">sublime</a>-build</li>
</ul>
<h3 id="subl-helperの設定">subl helperの設定</h3>
<p>コマンドからの起動は滅多に使わなかったのですが、Spotlightから立ち上げるにしても2と3があるのでめんどくさいなあと。</p>
<h4 id="一旦シンボリックリンクを削除する">一旦<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B7%A5%F3%A5%DC%A5%EA%A5%C3%A5%AF%A5%EA%A5%F3%A5%AF">シンボリックリンク</a>を削除する</h4>
<pre class="code lang-sh" data-lang="sh" data-unlink><span class="synComment"># 確認 </span>
$ <span class="synStatement">ls</span> <span class="synSpecial">-al</span> /usr/bin/subl
lrwxr-xr-x <span class="synConstant">1</span> root wheel <span class="synConstant">64</span> <span class="synConstant">3</span> <span class="synConstant">4</span> <span class="synConstant">2015</span> /usr/bin/subl -<span class="synStatement">></span> /Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl
<span class="synComment"># 削除</span>
$ sudo unlink /usr/bin/subl
<span class="synComment"># 再度確認</span>
$ <span class="synStatement">ls</span> <span class="synSpecial">-al</span> /usr/bin/subl
<span class="synStatement">ls</span>: /usr/bin/subl: No such file or directory
</pre>
<h4 id="3へ貼り直す">3へ貼り直す</h4>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ sudo ln <span class="synSpecial">-s</span> /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/bin/subl
$ <span class="synStatement">ls</span> <span class="synSpecial">-al</span> /usr/bin/subl
lrwxr-xr-x <span class="synConstant">1</span> root wheel <span class="synConstant">62</span> <span class="synConstant">1</span> <span class="synConstant">25</span> <span class="synConstant">00</span>:<span class="synConstant">26</span> /usr/bin/subl -<span class="synStatement">></span> /Applications/Sublime Text.app/Contents/SharedSupport/bin/subl
</pre>
<p>注意点としては<code>Sublime Text.app</code>になってます。3ではないのですね。<br/>
これで<code>subl</code>と打ち込むと<a class="keyword" href="http://d.hatena.ne.jp/keyword/Sublime">Sublime</a> Text3が起動します。</p>
<p>(追記)El Capitanにアップデートしたあとに<code>subl</code>コマンドが吹っ飛んでいたので、<code>user/local/bin/subl</code>に貼り直しました。</p>
<h4 id="2へのリンクも別名で貼る">2へのリンクも別名で貼る</h4>
<p><code>/usr/bin/subl2</code>という名前で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B7%A5%F3%A5%DC%A5%EA%A5%C3%A5%AF%A5%EA%A5%F3%A5%AF">シンボリックリンク</a>を貼ることにしました。</p>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ sudo ln <span class="synSpecial">-s</span> /Applications/Sublime\ Text\ 2.app/Contents/SharedSupport/bin/subl /usr/bin/subl2
$ <span class="synStatement">ls</span> <span class="synSpecial">-al</span> /usr/bin/subl2
lrwxr-xr-x <span class="synConstant">1</span> root wheel <span class="synConstant">64</span> <span class="synConstant">1</span> <span class="synConstant">25</span> <span class="synConstant">00</span>:<span class="synConstant">34</span> /usr/bin/subl2 -<span class="synStatement">></span> /Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl
</pre>
<p>これで<code>subl2</code>で2のほうが起動します。</p>
<h3 id="その他参考リンク">その他参考リンク</h3>
<p><a href="http://tkymtk.hatenablog.com/entry/2014/01/14/231005">環境をできるだけ引き継いでSublime Text 2 から 3 へ移行する方法 - tkymtk's blog</a></p>
<p><a href="http://qiita.com/pugiemonn/items/e5fb508df690a323ee14">シンボリックリンクの作成、更新、削除、権限変更をしました。 - Qiita</a></p>
noriyo_tcp
【Ruby on Rails】 cocoon gemで動的に要素を追加・削除できるフォームを作る
hatenablog://entry/6653586347152977438
2016-01-14T18:00:00+09:00
2016-01-14T20:16:55+09:00 今回はRecipeとIngredientというモデルがあり、その中間テーブルとしてRecipeItemというモデルがあります。 RecipeItemにはamountという属性があり、Recipeのフォーム画面において、関連するIngredientをセレクトボックスから選び、その量(amount)も登録できるようにします。 動的に関連する要素(今回はIngredient)を追加していけるフォームを作成したいので、cocoonというgemを導入することにします。 まず画像から Install cocoon Recipe RecipeItem Ingredient レシピのform作成 パーシャル作…
<p>今回は<code>Recipe</code>と<code>Ingredient</code>というモデルがあり、その中間テーブルとして<code>RecipeItem</code>というモデルがあります。<br/>
RecipeItemには<code>amount</code>という属性があり、Recipeのフォーム画面において、関連するIngredientをセレクトボックスから選び、その量(amount)も登録できるようにします。<br/>
動的に関連する要素(今回はIngredient)を追加していけるフォームを作成したいので、<code>cocoon</code>というgemを導入することにします。</p>
<ul class="table-of-contents">
<li><a href="#まず画像から">まず画像から</a></li>
<li><a href="#Install-cocoon">Install cocoon</a><ul>
<li><a href="#Recipe">Recipe</a></li>
<li><a href="#RecipeItem">RecipeItem</a></li>
<li><a href="#Ingredient">Ingredient</a></li>
</ul>
</li>
<li><a href="#レシピのform作成">レシピのform作成</a></li>
<li><a href="#パーシャル作成">パーシャル作成</a></li>
<li><a href="#その他参考記事">その他参考記事</a></li>
</ul>
<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a> version 4.2.4</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby">Ruby</a> version 2.2.1-p85 (<a class="keyword" href="http://d.hatena.ne.jp/keyword/x86">x86</a>_64-<a class="keyword" href="http://d.hatena.ne.jp/keyword/linux">linux</a>)</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/RubyGems">RubyGems</a> version 2.4.6</li>
</ul>
<h2 id="まず画像から">まず画像から</h2>
<p>レシピの詳細画面はこんなです。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160114/20160114155605.png" alt="f:id:noriyo_tcp:20160114155605p:plain" title="f:id:noriyo_tcp:20160114155605p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>新規作成画面。わかりにくいですが、セレクトボックスで「Bacon」を選択し、その下の「Amount」に100を入力しています。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160114/20160114155616.png" alt="f:id:noriyo_tcp:20160114155616p:plain" title="f:id:noriyo_tcp:20160114155616p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>さらに「add Ingredient」というリンクをクリックすると、フォームが追加されます。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160114/20160114155617.png" alt="f:id:noriyo_tcp:20160114155617p:plain" title="f:id:noriyo_tcp:20160114155617p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>そしてレシピを作成すると「Bacon」と「Chicken fat」が登録されています。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20160114/20160114155618.png" alt="f:id:noriyo_tcp:20160114155618p:plain" title="f:id:noriyo_tcp:20160114155618p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<h2 id="Install-cocoon">Install <a class="keyword" href="http://d.hatena.ne.jp/keyword/cocoon">cocoon</a></h2>
<p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2Fnathanvda%2Fcocoon" title="nathanvda/cocoon" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://github.com/nathanvda/cocoon">github.com</a></cite></p>
<p><code>Gemfile</code></p>
<pre class="code lang-ruby" data-lang="ruby" data-unlink>gem <span class="synSpecial">'</span><span class="synConstant">cocoon</span><span class="synSpecial">'</span>
</pre>
<p>これだけでなく、<code>application.js</code>に以下を記述します。</p>
<pre class="code lang-ruby" data-lang="ruby" data-unlink><span class="synSpecial">//</span>= <span class="synPreProc">require</span> cocoon
</pre>
<h3 id="Recipe">Recipe</h3>
<p><code>app/models/recipe.rb</code></p>
<pre class="code lang-ruby" data-lang="ruby" data-unlink><span class="synComment"># Table name: recipes</span>
<span class="synComment">#</span>
<span class="synComment"># id :integer not null, primary key</span>
<span class="synComment"># title :string not null</span>
<span class="synComment"># instructions :string not null</span>
<span class="synPreProc">class</span> <span class="synType">Recipe</span> < <span class="synType">ActiveRecord</span>::<span class="synType">Base</span>
has_many <span class="synConstant">:ingredients</span>, <span class="synConstant">through</span>: <span class="synConstant">:recipe_items</span>
has_many <span class="synConstant">:recipe_items</span>, <span class="synConstant">dependent</span>: <span class="synConstant">:destroy</span>
accepts_nested_attributes_for <span class="synConstant">:recipe_items</span>, <span class="synConstant">allow_destroy</span>: <span class="synConstant">true</span>
<span class="synPreProc">end</span>
</pre>
<p><code>instructions</code>を<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%A3%BF%F4">複数</a>形にしてしまいましたが、まあいいやw<br/>
フォーム内で<code>recipe_items</code>をネストできるように<code>accepts_nested_attributes_for :recipe_items</code>を記述します。動的に削除したいので、さらに<code>allow_destroy: true</code>も。<br/>
ちなみにこの記事内ではバリデーションなどの記述は省いています。</p>
<p><code>recipes_controller.rb</code></p>
<pre class="code lang-ruby" data-lang="ruby" data-unlink> <span class="synComment"># GET /recipes/new</span>
<span class="synPreProc">def</span> <span class="synIdentifier">new</span>
<span class="synIdentifier">@recipe</span> = <span class="synType">Recipe</span>.new
<span class="synIdentifier">@recipe</span>.recipe_items.build
<span class="synPreProc">end</span>
.
.
.
def recipe_params
params.require(<span class="synConstant">:recipe</span>).permit(<span class="synConstant">:title</span>, <span class="synConstant">:instructions</span>,
<span class="synConstant">recipe_items_attributes</span>: [<span class="synConstant">:id</span>, <span class="synConstant">:amount</span>, <span class="synConstant">:recipe_id</span>, <span class="synConstant">:ingredient_id</span>, <span class="synConstant">:_destroy</span>,
<span class="synConstant">ingredient_attributes</span>:[<span class="synConstant">:name</span>, <span class="synConstant">:nutrient</span>]])
end
</pre>
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DB%A5%EF%A5%A4%A5%C8%A5%EA%A5%B9%A5%C8">ホワイトリスト</a>がごちゃごちゃしていますが・・・。まずネストした要素として<br/>
<code>recipe_items_attributes: [:id, :amount, :recipe_id, :ingredient_id, :_destroy]</code>があります。注意点としては、<code>:id</code>と<code>:_destroy</code>は必須ということです。</p>
<blockquote><p>To destroy nested models, <a class="keyword" href="http://d.hatena.ne.jp/keyword/rails">rails</a> uses a virtual attribute called <em>destroy. When </em>destroy is set, the nested model will be deleted. If the record is persisted, <a class="keyword" href="http://d.hatena.ne.jp/keyword/rails">rails</a> performs id field lookup to destroy the real record, so if id wasn't specified, it will treat current set of parameters like a parameters for a new record.</p>
<p>When using strong parameters (default in <a class="keyword" href="http://d.hatena.ne.jp/keyword/rails">rails</a> 4), you need to explicitly add both :id and :_destroy to the list of permitted parameters.</p></blockquote>
<p><a href="https://github.com/nathanvda/cocoon#strong-parameters-gotcha">https://github.com/nathanvda/cocoon#strong-parameters-gotcha</a></p>
<p>さらにその中の一要素として<code>ingredient_attributes:[:name, :nutrient]</code>を追加しています。</p>
<p>つまり</p>
<p><code>recipe_items_attributes: [:id, :amount, :recipe_id, :ingredient_id, :_destroy]</code></p>
<p>↓</p>
<p><code>recipe_items_attributes: [:id, :amount, :recipe_id, :ingredient_id, :_destroy, ingredient_attributes:[:name, :nutrient]]</code></p>
<p>おわかりいただけただろうか・・・。</p>
<h3 id="RecipeItem">RecipeItem</h3>
<pre class="code lang-ruby" data-lang="ruby" data-unlink><span class="synComment"># Table name: recipe_items</span>
<span class="synComment">#</span>
<span class="synComment"># id :integer not null, primary key</span>
<span class="synComment"># recipe_id :integer</span>
<span class="synComment"># ingredient_id :integer</span>
<span class="synComment"># amount :float default(0.0), not null</span>
<span class="synPreProc">class</span> <span class="synType">RecipeItem</span> < <span class="synType">ActiveRecord</span>::<span class="synType">Base</span>
belongs_to <span class="synConstant">:recipe</span>
belongs_to <span class="synConstant">:ingredient</span>
<span class="synPreProc">end</span>
</pre>
<p>中間テーブル。まあここはなんてことはないです。</p>
<h3 id="Ingredient">Ingredient</h3>
<pre class="code lang-ruby" data-lang="ruby" data-unlink><span class="synComment"># Table name: ingredients</span>
<span class="synComment">#</span>
<span class="synComment"># id :integer not null, primary key</span>
<span class="synComment"># name :string</span>
<span class="synComment"># nutrient :integer</span>
<span class="synPreProc">class</span> <span class="synType">Ingredient</span> < <span class="synType">ActiveRecord</span>::<span class="synType">Base</span>
has_many <span class="synConstant">:recipe_items</span>, <span class="synConstant">dependent</span>: <span class="synConstant">:destroy</span>
has_many <span class="synConstant">:recipes</span>, <span class="synConstant">through</span>: <span class="synConstant">:recipe_items</span>
enum <span class="synConstant">nutrient</span>: { <span class="synConstant">saturated_fat</span>: <span class="synConstant">1</span>, <span class="synConstant">trans_fat</span>: <span class="synConstant">2</span>, <span class="synConstant">sodium</span>: <span class="synConstant">3</span>, <span class="synConstant">sugar</span>: <span class="synConstant">4</span> }
<span class="synPreProc">end</span>
</pre>
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/enum">enum</a>でnutrient(栄養素)を4つ作っています。参考にしたのはこちらのサイト</p>
<p><a href="http://healthycanadians.gc.ca/eating-nutrition/label-etiquetage/understanding-comprendre/list-ingredient-liste-eng.php">Ingredient list</a></p>
<p>(記事書いてて思ったのですが、別に<code>nutrient</code>は無くてもいいかもです)</p>
<h2 id="レシピのform作成">レシピのform作成</h2>
<p><code>app/views/recipes/_form.html.erb</code></p>
<pre class="code lang-html" data-lang="html" data-unlink><span class="synIdentifier"><%=</span><span class="synConstant"> form_for(@recipe)</span><span class="synIdentifier"> do |f| %></span>
<span class="synIdentifier"><% if @recipe.errors.any? %></span>
<span class="synIdentifier"><</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">"error_explanation"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">h2</span><span class="synIdentifier">><%=</span><span class="synConstant"> pluralize(@recipe.errors.count,</span><span class="synIdentifier"> </span><span class="synConstant">"error"</span><span class="synIdentifier">) %></span> prohibited this recipe from being saved:<span class="synIdentifier"></</span><span class="synStatement">h2</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">ul</span><span class="synIdentifier">></span>
<span class="synIdentifier"><% @recipe.errors.full_messages.each do |message| %></span>
<span class="synIdentifier"><</span><span class="synStatement">li</span><span class="synIdentifier">><%=</span><span class="synConstant"> message</span><span class="synIdentifier"> %></</span><span class="synStatement">li</span><span class="synIdentifier">></span>
<span class="synIdentifier"><% end %></span>
<span class="synIdentifier"></</span><span class="synStatement">ul</span><span class="synIdentifier">></span>
<span class="synIdentifier"></</span><span class="synStatement">div</span><span class="synIdentifier">></span>
<span class="synIdentifier"><% end %></span>
<span class="synIdentifier"><</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"field"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><%=</span><span class="synConstant"> f.label</span><span class="synIdentifier"> :title %><</span><span class="synStatement">br</span><span class="synIdentifier">></span>
<span class="synIdentifier"><%=</span><span class="synConstant"> f.text_field</span><span class="synIdentifier"> :title, required: true %></span>
<span class="synIdentifier"></</span><span class="synStatement">div</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"field"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><%=</span><span class="synConstant"> f.label</span><span class="synIdentifier"> :instructions %><</span><span class="synStatement">br</span><span class="synIdentifier">></span>
<span class="synIdentifier"><%=</span><span class="synConstant"> f.text_field</span><span class="synIdentifier"> :instructions, required: true %></span>
<span class="synIdentifier"></</span><span class="synStatement">div</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">"ingredients"</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"form-group"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">label</span><span class="synIdentifier">></span>Ingredients:<span class="synIdentifier"></</span><span class="synStatement">label</span><span class="synIdentifier">></span>
<span class="synIdentifier"><%=</span><span class="synConstant"> f.fields_for</span><span class="synIdentifier"> :recipe_items do |builder| %></span>
<span class="synIdentifier"><%=</span><span class="synConstant"> render</span><span class="synIdentifier"> </span><span class="synConstant">'recipe_item_fields'</span><span class="synIdentifier">, f: builder %></span>
<span class="synIdentifier"><</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">"links"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><%=</span><span class="synConstant"> link_to_add_association</span><span class="synIdentifier"> </span><span class="synConstant">"add Ingredient"</span><span class="synIdentifier">, f, :recipe_items %><</span><span class="synStatement">br</span><span class="synIdentifier">/></span>
<span class="synIdentifier"></</span><span class="synStatement">div</span><span class="synIdentifier">></span>
<span class="synIdentifier"><% end %></span>
<span class="synIdentifier"></</span><span class="synStatement">div</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"actions"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><%=</span><span class="synConstant"> f.submit</span><span class="synIdentifier"> %></span>
<span class="synIdentifier"></</span><span class="synStatement">div</span><span class="synIdentifier">></span>
<span class="synIdentifier"><% end %></span>
</pre>
<p>レシピ用の2つの<code>text_field</code>の下に、材料用のフィールドを作成、そこでさらにrecipe_items用のパーシャルを<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EC%A5%F3%A5%C0%A5%EA%A5%F3%A5%B0">レンダリング</a>していると。<br/>
パーシャル名は基本<code>_{model}_fields.html.erb</code>です。モデル名なので単数形じゃないといけないです(ちょっとハマった)</p>
<blockquote><p>If no explicit partial name is given, <a class="keyword" href="http://d.hatena.ne.jp/keyword/cocoon">cocoon</a> looks for a file named <em><association-object_singular></em>fields. To override the default partial use the :partial option.</p></blockquote>
<p><a href="https://github.com/nathanvda/cocoon#partial-1">https://github.com/nathanvda/cocoon#partial-1</a></p>
<p><code><%= link_to_add_association "add Ingredient", f, :recipe_items %></code>で関連追加用のリンクを生成しています。</p>
<h2 id="パーシャル作成">パーシャル作成</h2>
<p><code>app/views/recipes/_recipe_item_filelds.html.erb</code></p>
<pre class="code lang-html" data-lang="html" data-unlink><span class="synIdentifier"><</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"nested-fields form-inline"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><%=</span><span class="synConstant"> f.collection_select(:ingredient_id,</span><span class="synIdentifier"> Ingredient.all, :</span><span class="synType">id</span><span class="synIdentifier">, :</span><span class="synType">name</span><span class="synIdentifier">) %></span>
<span class="synIdentifier"><</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"form-group"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><%=</span><span class="synConstant"> f.label</span><span class="synIdentifier"> :amount %></span>
<span class="synIdentifier"><%=</span><span class="synConstant"> f.number_field</span><span class="synIdentifier"> :amount, step: </span><span class="synConstant">'0.1'</span><span class="synIdentifier">, min: </span><span class="synConstant">'0.0'</span><span class="synIdentifier">, required: true, :</span><span class="synType">class</span><span class="synIdentifier"> =></span> 'form-control' %<span class="synError">></span>
<span class="synIdentifier"></</span><span class="synStatement">div</span><span class="synIdentifier">></span>
<span class="synIdentifier"><%=</span><span class="synConstant"> link_to_remove_association</span><span class="synIdentifier"> </span><span class="synConstant">"remove ingredient"</span><span class="synIdentifier">, f %></span>
<span class="synIdentifier"></</span><span class="synStatement">div</span><span class="synIdentifier">></span>
</pre>
<p>まずパーシャル内では<code>.nested-fields</code>クラスを付加したコンテナが必要です。このクラスを見てJSで削除してるみたい。</p>
<blockquote><p>For the <a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> to behave correctly, the partial should start with a container (e.g. div) of class .nested-fields, or a class of your choice which you can define in the link_to_remove_association method.</p></blockquote>
<p><a href="https://github.com/nathanvda/cocoon#partial-1">https://github.com/nathanvda/cocoon#partial-1</a></p>
<p><code>collection_select</code>を使用して材料をセレクトボックスから選択します。<br/>
<code><%= link_to_remove_association "remove ingredient", f %></code>で、このパーシャル部分を削除できるリンクを生成しています。<br/>
あとは<code>number_field</code>において<code>step: '0.1'</code>の指定くらいですかね。<code>:amount</code>が<code>float</code>なので。</p>
<h2 id="その他参考記事">その他参考記事</h2>
<p><a href="http://www.mostlybadfly.com/nested-attributes/">Nested Attributes and a has_many :through Relationship. – mostlybadfly – stuff</a></p>
<hr />
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/github">github</a>に<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>作りましたー。</p>
<p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2Fnoriyotcp%2Fnested-forms-with-cocoon" title="noriyotcp/nested-forms-with-cocoon" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://github.com/noriyotcp/nested-forms-with-cocoon">github.com</a></cite></p>
noriyo_tcp
クリックするとアイコンが変化するiconate.jsを使ってみた
hatenablog://entry/6653586347150847197
2015-12-31T12:06:45+09:00
2015-12-31T12:14:00+09:00 デモページを見てみると一発でわかるのですが、 iconate.js アイコンをクリックすると別のアイコンに変化します。 使い方 https://github.com/bitshadow/iconate#basic-usage 公式ページより インストール 以下の3つの方法があります。 NPM: npm install iconate Bower: bower install iconate Download zip. Note: iconate.js also supports AMD and commonJS module pattern. 今回はCodepenでやってみましたのでRawGi…
<p>デモページを見てみると一発でわかるのですが、</p>
<p><a href="http://bitshadow.github.io/iconate/">iconate.js</a></p>
<p>アイコンをクリックすると別のアイコンに変化します。</p>
<h3>使い方</h3>
<p><a href="https://github.com/bitshadow/iconate#basic-usage">https://github.com/bitshadow/iconate#basic-usage</a></p>
<p>公式ページより</p>
<h3>インストール</h3>
<p>以下の3つの方法があります。</p>
<hr />
<ul>
<li>NPM: <code>npm install iconate</code></li>
<li>Bower: <code>bower install iconate</code></li>
<li><a href="https://github.com/bitshadow/iconate/archive/master.zip">Download zip</a>.</li>
</ul>
<p><strong>Note</strong>: <strong>iconate.js</strong> also supports <a class="keyword" href="http://d.hatena.ne.jp/keyword/AMD">AMD</a> and commonJS module pattern.</p>
<hr />
<p>今回はCodepenでやってみましたので<a href="https://rawgit.com/">RawGit</a>を使用しました(あんまりよくないかもしれんけど)</p>
<h3><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%BF%A5%A4%A5%EB%A5%B7%A1%BC%A5%C8">スタイルシート</a>とjsファイルの設定</h3>
<pre class="code lang-html" data-lang="html" data-unlink><span class="synIdentifier"><</span><span class="synStatement">link</span><span class="synIdentifier"> </span><span class="synType">rel</span><span class="synIdentifier">=</span><span class="synConstant">"stylesheet"</span><span class="synIdentifier"> </span><span class="synType">href</span><span class="synIdentifier">=</span><span class="synConstant">"iconate.min.css"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">script</span><span class="synIdentifier"> </span><span class="synType">type</span><span class="synIdentifier">=</span><span class="synConstant">"text/javascript"</span><span class="synIdentifier"> </span><span class="synType">src</span><span class="synIdentifier">=</span><span class="synConstant">"iconate.min.js"</span><span class="synIdentifier">></span>
</pre>
<h3>アイコンの要素を作る</h3>
<p><a href="https://fortawesome.github.io/Font-Awesome/">fontawsome</a>を使用しているようなのでその導入も忘れず。</p>
<pre class="code lang-html" data-lang="html" data-unlink><span class="synIdentifier"><</span><span class="synStatement">i</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">"icon"</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"fa fa-bars fa-lg"</span><span class="synIdentifier">></</span><span class="synStatement">i</span><span class="synIdentifier">></span>
</pre>
<h3>アニメーションの設定</h3>
<pre class="code lang-javascript" data-lang="javascript" data-unlink><span class="synIdentifier">var</span> iconElement = <span class="synStatement">document</span>.getElementById(<span class="synConstant">'icon'</span>);
<span class="synIdentifier">var</span> options = <span class="synIdentifier">{</span>
from: <span class="synConstant">'fa-bars'</span>,
to: <span class="synConstant">'fa-arrow-right'</span>,
animation: <span class="synConstant">'rubberBand'</span>
<span class="synIdentifier">}</span>;
iconate(iconElement, options);
</pre>
<p>optionsの<code>from:</code>に始めのアイコン(ここではハンバーガーアイコン)、<code>to:</code>に右矢印を設定。<br/>
<code>animation:</code>は<code>rubberBand</code>(ゴムみたいにみょ〜んと動く)<br/>
そしてiconate関数の第一引数に対象となる要素、第二引数にオプションを渡します(第三引数にコールバック関数を設定することも可能)</p>
<hr />
<p>というわけでCodepenでこんなのを作ってみました。</p>
<p data-height="1300" data-theme-id="0" data-slug-hash="NxbzLe" data-default-tab="result" data-user="noriyotcp" class='codepen'>See the Pen <a href='http://codepen.io/noriyotcp/pen/NxbzLe/'>Examples with iconate.js</a> by Noriyo Akita (<a href='http://codepen.io/noriyotcp'>@noriyotcp</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
<p>埋め込むときに気づいたけど、結構縦長だなあw<br/>
アイコンのサイズは<code>fa-3x</code>なのでデカイです。アニメーションは<code>rubberBand</code>にしています。<br/>
アニメーションも好きなのを選択できるように・・・と思ったけど、それだったら<a href="http://bitshadow.github.io/iconate/">デモページ</a>の方で試した方がいいんじゃないかとw<br/>
*<a class="keyword" href="http://d.hatena.ne.jp/keyword/iPhone">iPhone</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/Safari">Safari</a>から試してみたけどタップでもできる!</p>
noriyo_tcp
Bootstrapのアコーディオンパネル(collapse)でページ遷移の際に開いた状態を維持する
hatenablog://entry/6653586347150549993
2015-12-29T10:43:49+09:00
2015-12-29T16:34:07+09:00 Bootstrap3でのアコーディオンパネル(今回は.list-groupを使用)を作成したのですけど、 http://getbootstrap.com/javascript/#collapse-example-accordion ページ遷移が起こった際に、パネルが閉じた状態になる。これを開いたままにしたい。特にパネルを複数用意した場合に便利かと。 調べてみると「Cookie使え」みたいな記事が出てくるので、js-cookieというものを使います。 github.com
<p>Bootstrap3での<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%B3%A1%BC%A5%C7%A5%A3%A5%AA%A5%F3">アコーディオン</a>パネル(今回は<code>.list-group</code>を使用)を作成したのですけど、</p>
<p><a href="http://getbootstrap.com/javascript/#collapse-example-accordion">http://getbootstrap.com/javascript/#collapse-example-accordion</a></p>
<p>ページ遷移が起こった際に、パネルが閉じた状態になる。これを開いたままにしたい。特にパネルを<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%A3%BF%F4">複数</a>用意した場合に便利かと。</p>
<p>調べてみると「<a class="keyword" href="http://d.hatena.ne.jp/keyword/Cookie">Cookie</a>使え」みたいな記事が出てくるので、js-<a class="keyword" href="http://d.hatena.ne.jp/keyword/cookie">cookie</a>というものを使います。</p>
<p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2Fjs-cookie%2Fjs-cookie" title="js-cookie/js-cookie" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://github.com/js-cookie/js-cookie">github.com</a></cite></p>
<h2>HTML</h2>
<p>これはほぼ公式サイトのまま。前述したように<code>.panel-body</code>の代わりに<code>.list-group</code>を使用する。</p>
<pre class="code lang-html" data-lang="html" data-unlink><span class="synIdentifier"><</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">"accordion"</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"panel panel-group"</span><span class="synIdentifier"> role=</span><span class="synConstant">"tablist"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"panel panel-default"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"panel-heading"</span><span class="synIdentifier"> role=</span><span class="synConstant">"tab"</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">"collapseListGroupHeading1"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">h4</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"panel-title"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">a</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">""</span><span class="synIdentifier"> role=</span><span class="synConstant">"button"</span><span class="synIdentifier"> </span><span class="synType">data</span><span class="synIdentifier">-toggle=</span><span class="synConstant">"collapse"</span><span class="synIdentifier"> </span><span class="synType">data</span><span class="synIdentifier">-parent=</span><span class="synConstant">"#accordion"</span><span class="synIdentifier"> </span><span class="synType">href</span><span class="synIdentifier">=</span><span class="synConstant">"#collapseListGroup1"</span><span class="synIdentifier"> aria-expanded=</span><span class="synConstant">"true"</span><span class="synIdentifier"> aria-controls=</span><span class="synConstant">"collapseListGroup1"</span><span class="synIdentifier">></span><span class="synUnderlined"> Collapsible list group #1</span><span class="synIdentifier"></</span><span class="synStatement">a</span><span class="synIdentifier">></span>
<span class="synIdentifier"></</span><span class="synStatement">h4</span><span class="synIdentifier">></span>
<span class="synIdentifier"></</span><span class="synStatement">div</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">"collapseListGroup1"</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"panel-collapse collapse"</span><span class="synIdentifier"> role=</span><span class="synConstant">"tabpanel"</span><span class="synIdentifier"> aria-labelledby=</span><span class="synConstant">"collapseListGroupHeading1"</span><span class="synIdentifier"> aria-expanded=</span><span class="synConstant">"true"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">ul</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"list-group"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">li</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"list-group-item"</span><span class="synIdentifier">></span>Bootply<span class="synIdentifier"></</span><span class="synStatement">li</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">li</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"list-group-item"</span><span class="synIdentifier">></span>One itmus ac facilin<span class="synIdentifier"></</span><span class="synStatement">li</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">li</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"list-group-item"</span><span class="synIdentifier">></span>Second eros<span class="synIdentifier"></</span><span class="synStatement">li</span><span class="synIdentifier">></span>
<span class="synIdentifier"></</span><span class="synStatement">ul</span><span class="synIdentifier">></span>
<span class="synIdentifier"></</span><span class="synStatement">div</span><span class="synIdentifier">></span>
<span class="synIdentifier"></</span><span class="synStatement">div</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"panel panel-default"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"panel-heading"</span><span class="synIdentifier"> role=</span><span class="synConstant">"tab"</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">"collapseListGroupHeading2"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">h4</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"panel-title"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">a</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">""</span><span class="synIdentifier"> role=</span><span class="synConstant">"button"</span><span class="synIdentifier"> </span><span class="synType">data</span><span class="synIdentifier">-toggle=</span><span class="synConstant">"collapse"</span><span class="synIdentifier"> </span><span class="synType">data</span><span class="synIdentifier">-parent=</span><span class="synConstant">"#accordion"</span><span class="synIdentifier"> </span><span class="synType">href</span><span class="synIdentifier">=</span><span class="synConstant">"#collapseListGroup2"</span><span class="synIdentifier"> aria-expanded=</span><span class="synConstant">"true"</span><span class="synIdentifier"> aria-controls=</span><span class="synConstant">"collapseListGroup2"</span><span class="synIdentifier">></span><span class="synUnderlined"> Collapsible list group #2</span><span class="synIdentifier"></</span><span class="synStatement">a</span><span class="synIdentifier">></span>
<span class="synIdentifier"></</span><span class="synStatement">h4</span><span class="synIdentifier">></span>
<span class="synIdentifier"></</span><span class="synStatement">div</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">"collapseListGroup2"</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"panel-collapse collapse"</span><span class="synIdentifier"> role=</span><span class="synConstant">"tabpanel"</span><span class="synIdentifier"> aria-labelledby=</span><span class="synConstant">"collapseListGroupHeading2"</span><span class="synIdentifier"> aria-expanded=</span><span class="synConstant">"true"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">ul</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"list-group"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">li</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"list-group-item"</span><span class="synIdentifier">></span>Bootply<span class="synIdentifier"></</span><span class="synStatement">li</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">li</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"list-group-item"</span><span class="synIdentifier">></span>One itmus ac facilin<span class="synIdentifier"></</span><span class="synStatement">li</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">li</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"list-group-item"</span><span class="synIdentifier">></span>Second eros<span class="synIdentifier"></</span><span class="synStatement">li</span><span class="synIdentifier">></span>
<span class="synIdentifier"></</span><span class="synStatement">ul</span><span class="synIdentifier">></span>
<span class="synIdentifier"></</span><span class="synStatement">div</span><span class="synIdentifier">></span>
<span class="synIdentifier"></</span><span class="synStatement">div</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"panel panel-default"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"panel-heading"</span><span class="synIdentifier"> role=</span><span class="synConstant">"tab"</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">"collapseListGroupHeading3"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">h4</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"panel-title"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">a</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">""</span><span class="synIdentifier"> role=</span><span class="synConstant">"button"</span><span class="synIdentifier"> </span><span class="synType">data</span><span class="synIdentifier">-toggle=</span><span class="synConstant">"collapse"</span><span class="synIdentifier"> </span><span class="synType">data</span><span class="synIdentifier">-parent=</span><span class="synConstant">"#accordion"</span><span class="synIdentifier"> </span><span class="synType">href</span><span class="synIdentifier">=</span><span class="synConstant">"#collapseListGroup3"</span><span class="synIdentifier"> aria-expanded=</span><span class="synConstant">"true"</span><span class="synIdentifier"> aria-controls=</span><span class="synConstant">"collapseListGroup3"</span><span class="synIdentifier">></span><span class="synUnderlined"> Collapsible list group #3</span><span class="synIdentifier"></</span><span class="synStatement">a</span><span class="synIdentifier">></span>
<span class="synIdentifier"></</span><span class="synStatement">h4</span><span class="synIdentifier">></span>
<span class="synIdentifier"></</span><span class="synStatement">div</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">"collapseListGroup3"</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"panel-collapse collapse"</span><span class="synIdentifier"> role=</span><span class="synConstant">"tabpanel"</span><span class="synIdentifier"> aria-labelledby=</span><span class="synConstant">"collapseListGroupHeading3"</span><span class="synIdentifier"> aria-expanded=</span><span class="synConstant">"true"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">ul</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"list-group"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">li</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"list-group-item"</span><span class="synIdentifier">></span>Bootply<span class="synIdentifier"></</span><span class="synStatement">li</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">li</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"list-group-item"</span><span class="synIdentifier">></span>One itmus ac facilin<span class="synIdentifier"></</span><span class="synStatement">li</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">li</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"list-group-item"</span><span class="synIdentifier">></span>Second eros<span class="synIdentifier"></</span><span class="synStatement">li</span><span class="synIdentifier">></span>
<span class="synIdentifier"></</span><span class="synStatement">ul</span><span class="synIdentifier">></span>
<span class="synIdentifier"></</span><span class="synStatement">div</span><span class="synIdentifier">></span>
<span class="synIdentifier"></</span><span class="synStatement">div</span><span class="synIdentifier">></span>
<span class="synIdentifier"></</span><span class="synStatement">div</span><span class="synIdentifier">></span>
</pre>
<h2>js-<a class="keyword" href="http://d.hatena.ne.jp/keyword/cookie">cookie</a></h2>
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Cookie">Cookie</a>の使用はいたって簡単で</p>
<p>値をセットする</p>
<pre class="code lang-javascript" data-lang="javascript" data-unlink>Cookies.set(<span class="synConstant">'name'</span>, <span class="synConstant">'value'</span>);
</pre>
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Cookie">Cookie</a>の期限も設定できる。<code>expires</code>オプション。下記の例では7日間です。</p>
<pre class="code lang-javascript" data-lang="javascript" data-unlink>Cookies.set(<span class="synConstant">'name'</span>, <span class="synConstant">'value'</span>, <span class="synIdentifier">{</span> expires: 7 <span class="synIdentifier">}</span>);
</pre>
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a>で使用する場合はこのオプションとパスを設定しないとうまく動作しないようです。</p>
<p><a href="http://blog.tohuya.com/entry/2015/09/15/220451">【Rails】RailsとJQueryでCookieを相互に利用したい時に気をつけるべき2つの注意点 - 働かないで3億貯めてさっさとリタイアするブログ</a></p>
<p>値を読むこむ</p>
<pre class="code lang-javascript" data-lang="javascript" data-unlink>Cookies.get(<span class="synConstant">'name'</span>); <span class="synComment">// => 'value'</span>
</pre>
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Cookie">Cookie</a>を削除</p>
<pre class="code lang-javascript" data-lang="javascript" data-unlink>Cookies.remove(<span class="synConstant">'name'</span>);
</pre>
<p>オプションはEncode/Decodeオプション、Secure属性を付加するためのsecureオプションというものがあります。<br/>
今回の場合は<code>id</code>を読み書きするだけなので、設定はしてません。</p>
<h2><a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>(<a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a>)</h2>
<pre class="code lang-javascript" data-lang="javascript" data-unlink><span class="synComment">// http://stackoverflow.com/questions/12733238/retain-twitter-bootstrap-collapse-state-on-page-refresh-navigation</span>
$(<span class="synStatement">document</span>).ready(<span class="synIdentifier">function</span> () <span class="synIdentifier">{</span>
<span class="synComment">//when a group is shown, save it as the active accordion group</span>
$(<span class="synConstant">"#accordion"</span>).on(<span class="synConstant">'shown.bs.collapse'</span>, <span class="synIdentifier">function</span> () <span class="synIdentifier">{</span>
<span class="synIdentifier">var</span> active = $(<span class="synConstant">"#accordion .in"</span>).attr(<span class="synConstant">'id'</span>);
Cookies.set(<span class="synConstant">'activeAccordionGroup'</span>, active, <span class="synIdentifier">{</span> expires: 7 <span class="synIdentifier">}</span>);
<span class="synStatement">alert</span>(active);
<span class="synIdentifier">}</span>);
$(<span class="synConstant">"#accordion"</span>).on(<span class="synConstant">'hidden.bs.collapse'</span>, <span class="synIdentifier">function</span> () <span class="synIdentifier">{</span>
Cookies.remove(<span class="synConstant">'activeAccordionGroup'</span>);
<span class="synIdentifier">}</span>);
<span class="synIdentifier">var</span> last = Cookies.get(<span class="synConstant">'activeAccordionGroup'</span>);
<span class="synStatement">if</span> (last != <span class="synStatement">null</span>) <span class="synIdentifier">{</span>
<span class="synComment">//remove default collapse settings</span>
$(<span class="synConstant">"#accordion .collapse"</span>).removeClass(<span class="synConstant">'in'</span>);
<span class="synComment">//show the account_last visible group</span>
$(<span class="synConstant">"#"</span> + last).addClass(<span class="synConstant">"in"</span>);
<span class="synIdentifier">}</span>
<span class="synIdentifier">}</span>);
</pre>
<p>パネルの開閉のイベントでは、Bootstrapの<code>shown.bs.collapse</code>と<code>hidden.bs.collapse</code>を使っています。</p>
<p><code>.collapse</code>が開いているときは<code>.in</code>クラスが付加されているので、そこの<code>id</code>を取得し、<code>active</code>という変数に代入。<br/>
そしてそれを<a class="keyword" href="http://d.hatena.ne.jp/keyword/Cookie">Cookie</a>に設定する。</p>
<p>そしてアラートを出しているのですが、先ほど取得した<code>id</code>を表示しています。</p>
<p>パネルが閉じたときは<a class="keyword" href="http://d.hatena.ne.jp/keyword/Cookie">Cookie</a>を削除。</p>
<p>ページが読み込まれた際に、保存しておいた<a class="keyword" href="http://d.hatena.ne.jp/keyword/Cookie">Cookie</a>を取得。<code>last</code>に代入しておきます。<br/>
そして<code>.collapse</code>クラスから<code>.in</code>を削除。先ほど取得した<code>id</code>を持つ要素に<code>.in</code>クラスを追加。<br/>
取得した<code>id</code>は<code>#</code>の付いていないものなので、先頭に付けることも忘れず。</p>
<p><a href="http://getbootstrap.com/javascript/#collapse-usage">http://getbootstrap.com/javascript/#collapse-usage</a></p>
<p><a href="http://getbootstrap.com/javascript/#collapse-events">http://getbootstrap.com/javascript/#collapse-events</a></p>
<p>参考にした記事はこちら。</p>
<p><iframe src="//hatenablog-parts.com/embed?url=http%3A%2F%2Fstackoverflow.com%2Fquestions%2F12733238%2Fretain-twitter-bootstrap-collapse-state-on-page-refresh-navigation" title="Retain Twitter Bootstrap Collapse state on Page refresh/Navigation" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://stackoverflow.com/questions/12733238/retain-twitter-bootstrap-collapse-state-on-page-refresh-navigation">stackoverflow.com</a></cite></p>
<p>こちらのコードの方を参考にしたかな。Bootstrapのイベントを使っているので。</p>
<p><a href="http://stackoverflow.com/a/25258290">http://stackoverflow.com/a/25258290</a></p>
<p>Codepen上で作ってみました。</p>
<p data-height="323" data-theme-id="0" data-slug-hash="obzGrq" data-default-tab="result" data-user="noriyotcp" class='codepen'>See the Pen <a href='http://codepen.io/noriyotcp/pen/obzGrq/'>Bootstrap accordion with js-cookie</a> by Noriyo Akita (<a href='http://codepen.io/noriyotcp'>@noriyotcp</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
<p>パネルを開くとアラートが出ます。その後、右下の「RERUN」ボタンを押すと、先ほど開いたパネルの状態が維持されているのを確認できるかとー。Codepen便利。</p>
noriyo_tcp
【Ruby on Rails】 bundler1.11.2に更新したら?rails g migration, rails cなどができなくなって困った
hatenablog://entry/6653586347149406329
2015-12-22T08:00:00+09:00
2016-02-22T04:26:39+09:00 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-darwin…
<h2><a class="keyword" href="http://d.hatena.ne.jp/keyword/rails">rails</a> g migrationとか<a class="keyword" href="http://d.hatena.ne.jp/keyword/rails">rails</a> cの突然の死</h2>
<p><code>bundle install</code>した際に「bundler古いよ」と言われたので、その後<code>rbenv exec gem update bundler</code>で<code>1.11.2</code>に更新しました。</p>
<p>すると今度は<code>(bundle exec)rails g migration</code>や<code>rails c</code>でエラーが出るようになりました(なぜか<code>rails s</code>は大丈夫ですが)</p>
<p>(でも結局bundlerを更新したせいなのかどうかはわかりません)</p>
<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a> version 4.2.4</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby">Ruby</a> version (rbenvで管理) 2.2.3-p173 (<a class="keyword" href="http://d.hatena.ne.jp/keyword/x86">x86</a>_64-darwin14)</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/RubyGems">RubyGems</a> version 2.4.5.1</li>
</ul>
<pre class="code lang-sh" data-lang="sh" data-unlink>/Users/noriyo_tcp/.rbenv/versions/2.2.3/lib/ruby/2.2.0/rubygems/core_ext/kernel_require.rb:<span class="synConstant">54</span>:<span class="synError">in</span> <span class="synSpecial">`require</span><span class="synStatement">'</span><span class="synConstant">: cannot load such file -- bundler/setup (LoadError)</span>
<span class="synConstant">from /Users/noriyo_tcp/.rbenv/versions/2.2.3/lib/ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in `require</span><span class="synStatement">'</span>
<span class="synSpecial">from /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/spring-1.6.0/lib/spring/commands.rb:</span><span class="synConstant">33</span><span class="synSpecial">:in `</span><span class="synStatement"><</span>module:Spring<span class="synStatement">>'</span>
<span class="synConstant">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)></span><span class="synStatement">'</span>
from /Users/noriyo_tcp/.rbenv/versions/2.2.3/lib/ruby/2.2.0/rubygems/core_ext/kernel_require.rb:<span class="synConstant">54</span>:<span class="synError">in</span> <span class="synSpecial">`require</span><span class="synStatement">'</span>
<span class="synConstant">from /Users/noriyo_tcp/.rbenv/versions/2.2.3/lib/ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in `require</span><span class="synStatement">'</span>
<span class="synSpecial">from /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/spring-1.6.0/lib/spring/application.rb:</span><span class="synConstant">77</span><span class="synSpecial">:in `</span>preload<span class="synStatement">'</span>
<span class="synConstant">from /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/spring-1.6.0/lib/spring/application.rb:143:in `serve</span><span class="synStatement">'</span>
from /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/spring-1.6.0/lib/spring/application.rb:<span class="synConstant">131</span>:<span class="synError">in</span> <span class="synSpecial">`block in run</span><span class="synStatement">'</span>
<span class="synConstant">from /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/spring-1.6.0/lib/spring/application.rb:125:in `loop</span><span class="synStatement">'</span>
<span class="synSpecial">from /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/spring-1.6.0/lib/spring/application.rb:</span><span class="synConstant">125</span><span class="synSpecial">:in `</span>run<span class="synStatement">'</span>
<span class="synConstant">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)></span><span class="synStatement">'</span>
from /Users/noriyo_tcp/.rbenv/versions/2.2.3/lib/ruby/2.2.0/rubygems/core_ext/kernel_require.rb:<span class="synConstant">54</span>:<span class="synError">in</span> <span class="synSpecial">`require</span><span class="synStatement">'</span>
<span class="synConstant">from /Users/noriyo_tcp/.rbenv/versions/2.2.3/lib/ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in `require</span><span class="synStatement">'</span>
<span class="synSpecial">from -e:</span><span class="synConstant">1</span><span class="synSpecial">:in `</span><span class="synStatement"><</span>main<span class="synStatement">>'</span>
</pre>
<p>ググっても「bundler入れろ」的な記事しか見つからない。よく見るとSpring関係で怒れらているのかなあとは思うのですが・・・。</p>
<p>Spring止めてみる、というのも試したのですけど、ダメでした。</p>
<p><a href="http://app.road.jp.net/?p=1679">【Ruby On Rails】 「rails generate」が動かない | approad</a></p>
<p><a href="http://qiita.com/yokozawa/items/7b92c260f8c3dfec8e28">railsのコマンドが動かない時はspringを(stop|kill)してみよう - Qiita</a></p>
<hr />
<h2>結論:1.10.6を使う。</h2>
<p>まず、使えるバージョンを調べます。</p>
<p><a href="http://qiita.com/muran001/items/14f34b735e0a6b4af98c">初心者は覚えておきたいRubygemsのコマンドまとめ - Qiita</a></p>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ rbenv <span class="synStatement">exec</span> gem query <span class="synSpecial">-ra</span> <span class="synSpecial">-n</span> <span class="synStatement">"</span><span class="synConstant">^bundler$</span><span class="synStatement">"</span>
*** REMOTE GEMS ***
bundler <span class="synPreProc">(</span><span class="synSpecial">1.11.2, 1.11.1, 1.11.0, 1.10.6, 1.10.5, 1.10.4, 1.10.3, 1.10.2, 1.10.1, 1.10.0, ...</span><span class="synPreProc">)</span>(長いので割愛)
</pre>
<h3>1.10.6のインストール</h3>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ rbenv <span class="synStatement">exec</span> gem <span class="synStatement">install</span> bundler <span class="synSpecial">-v</span> 1.10.6
Fetching: bundler-1.10.6.gem <span class="synPreProc">(</span><span class="synConstant">100</span><span class="synSpecial">%</span><span class="synPreProc">)</span>
Successfully installed bundler-1.10.6
Parsing documentation <span class="synStatement">for </span>bundler-1.10.6
Installing ri documentation <span class="synStatement">for </span>bundler-1.10.6
Done installing documentation <span class="synStatement">for </span>bundler after <span class="synConstant">6</span> seconds
<span class="synConstant">1</span> gem installed
</pre>
<p>これで1.11.2と両方入ったわけですが、こんな風にバージョン指定できます。</p>
<p><a href="http://qiita.com/ka_/items/3724e13648207696be2d">Bundler 1.10.Xを使うために - Qiita</a></p>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ bundle _1.10.6_ <span class="synSpecial">-v</span>
Bundler version 1.10.6
$ bundle <span class="synSpecial">-v</span>
Bundler version 1.11.2
</pre>
<p>version指定して実行してみます。その前にSpringは止めておく。</p>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ bundle _1.10.6_ <span class="synStatement">exec</span> rails c
Running via Spring preloader <span class="synError">in</span> process <span class="synConstant">11983</span>
Loading development environment <span class="synPreProc">(</span><span class="synSpecial">Rails 4.2.4</span><span class="synPreProc">)</span>
Frame number: <span class="synConstant">0</span>/<span class="synConstant">20</span>
<span class="synStatement">[</span><span class="synConstant">1</span><span class="synStatement">]</span> pry<span class="synPreProc">(</span><span class="synSpecial">main</span><span class="synPreProc">)</span><span class="synStatement">></span>
</pre>
<p>これでコンソールに入ることができています。</p>
<h4>問題点?</h4>
<ul>
<li>Gemfile.lockで指定されているバージョンと食い違いが起きる</li>
<li>下の記事で紹介されているように<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%A4%A5%EA%A5%A2%A5%B9">エイリアス</a>作るのがめんどい(いっその事古いバージョンでやり続ける?)</li>
</ul>
<p><a href="http://qiita.com/ka_/items/3724e13648207696be2d">Bundler 1.10.Xを使うために - Qiita</a></p>
<h3>その後に起きた事</h3>
<p>そこでまた普通に、つまり最新のバージョンで実行してみます。</p>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ bundle <span class="synSpecial">-v</span>
Bundler version 1.11.2
$ bundle <span class="synStatement">exec</span> rails c
Running via Spring preloader <span class="synError">in</span> process <span class="synConstant">17072</span>
Loading development environment <span class="synPreProc">(</span><span class="synSpecial">Rails 4.2.4</span><span class="synPreProc">)</span>
Frame number: <span class="synConstant">0</span>/<span class="synConstant">20</span>
<span class="synStatement">[</span><span class="synConstant">1</span><span class="synStatement">]</span> pry<span class="synPreProc">(</span><span class="synSpecial">main</span><span class="synPreProc">)</span><span class="synStatement">></span>
</pre>
<p><strong>動いとるやんけ!! </strong>
一度古いバージョンで実行してみた事が良かったのかなあ? 結局分からずじまいです。</p>
<hr />
<p>バージョン1.11.0以上で問題がある?みたいですけど解決してるのどうかは私の英語力の低さゆえにわかりません・・・。</p>
<p><a href="https://github.com/rails/spring/issues/456">Spring is broken with bundler >= 1.11.0 · Issue #456 · rails/spring · GitHub</a></p>
<p><a href="https://github.com/rails/spring/pull/453">Add bundler Dependency to gemspec by sonalkr132 · Pull Request #453 · rails/spring · GitHub</a></p>
<hr />
<p>追記(2/22)<br/>
spring v.1.6.3にて問題は解消された模様。</p>
<p><a href="https://github.com/rails/spring/compare/v1.6.2...v1.6.3">Comparing v1.6.2...v1.6.3 · rails/spring · GitHub</a></p>
<p><iframe src="//hatenablog-parts.com/embed?url=http%3A%2F%2Fqiita.com%2Fkoshigoe%2Fitems%2F2304ec081a9f036e8941" title="bundler 1.11.0 の変更で spring が起動しない件について - Qiita" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://qiita.com/koshigoe/items/2304ec081a9f036e8941">qiita.com</a></cite>
(上記記事の追記を参照のこと)</p>
<p>実際に動かしてみたら無事できました。よかったー。</p>
noriyo_tcp
【Ruby on Rails】rake db:dropでもDBを削除できないとき
hatenablog://entry/6653586347146211738
2015-11-25T18:00:00+09:00
2015-11-25T18:00:04+09:00 rake db:migrateしようとしてもできなくて、いろいろにっちもさっちもいかなくなりまして*1、いっそDB削除して作りなおそうとしたのですが
rake db:dropできない!?
<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac%20OS%20X">Mac OS X</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Yosemite">Yosemite</a>(10.10.5)</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a> version 4.2.0</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby">Ruby</a> version 2.1.5-p273 (<a class="keyword" href="http://d.hatena.ne.jp/keyword/x86">x86</a>_64-darwin14.0)</li>
<li>Database adapter mysql2</li>
</ul>
<p><code>rake db:migrate</code>しようとしてもできなくて、いろいろにっちもさっちもいかなくなりまして<a href="#f-e9e62646" name="fn-e9e62646" title="具体的にどうおかしくなったのかはわすれていまいました。「もう既にテーブルあるじゃねーか」みたいな感じで怒られていたと思います。">*1</a>、いっそDB削除して作りなおそうとしたのですが</p>
<p><strong>rake db:dropできない!?</strong></p>
<h2><a class="keyword" href="http://d.hatena.ne.jp/keyword/mysql">mysql</a>が入っている場所を確認</h2>
<p>homebrewで<a class="keyword" href="http://d.hatena.ne.jp/keyword/mysql">mysql</a>を入れているのですが、その場所を確認。</p>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ mysql <span class="synSpecial">-e</span> <span class="synStatement">"</span><span class="synConstant">select @@datadir</span><span class="synStatement">"</span> <span class="synSpecial">-u</span> root <span class="synSpecial">-p</span>
Enter password:
+-----------------------+
| @@datadir |
+-----------------------+
| /usr/<span class="synStatement">local</span>/var/mysql/ |
+-----------------------+
</pre>
<h2>そして物理的に削除</h2>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ <span class="synStatement">cd</span> /usr/<span class="synStatement">local</span>/var/mysql/
$ <span class="synStatement">ls</span>
</pre>
<p>その中にDBの名前もあるので</p>
<pre class="code lang-sh" data-lang="sh" data-unlink><span class="synStatement">rm</span> <span class="synSpecial">-rf</span> <span class="synStatement"><</span>対象のdatabase<span class="synStatement">></span>
</pre>
<p>*<code>sudo</code>をつけたかどうかはわかりません。メモしたのをあとになって掘り起こしたものなので・・・。</p>
<h3>削除されたかどうか確認</h3>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ mysql <span class="synSpecial">-u</span> root <span class="synSpecial">-p</span>
mysql<span class="synStatement">></span> show databases;
</pre>
<p>参考記事:</p>
<p><iframe src="//hatenablog-parts.com/embed?url=http%3A%2F%2Fwayohoo.com%2Fmysql%2Fhow-to-deal-with-when-schema_migrations-broke-of-rails.html" title="【Rails】OS X YosemiteにしてからMySQLのschema_migrationsが逐一ぶっ壊れるから対処法メモしておく。" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://wayohoo.com/mysql/how-to-deal-with-when-schema_migrations-broke-of-rails.html">wayohoo.com</a></cite></p>
<p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fblog.milkywaygalaxy.info%2Fblog%2F2014-0531-1215-remove-mysql-database-directly-by-rm-command-if-you-can-not-drop%2F" title="MySQLのデータベースをdropで削除しようとしてエラーになったら直接rmコマンドでデータベースファイルを削除しよう - Koseki’s Brain Web Interface" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://blog.milkywaygalaxy.info/blog/2014-0531-1215-remove-mysql-database-directly-by-rm-command-if-you-can-not-drop/">blog.milkywaygalaxy.info</a></cite></p>
<div class="footnote">
<p class="footnote"><a href="#fn-e9e62646" name="f-e9e62646" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">具体的にどうおかしくなったのかはわすれていまいました。「もう既にテーブルあるじゃねーか」みたいな感じで怒られていたと思います。</span></p>
</div>
noriyo_tcp
【Ruby on Rails】 bundle install時にnokogiriのエラーが出たときの対処
hatenablog://entry/6653586347146211430
2015-11-23T16:28:00+09:00
2015-11-23T16:28:00+09:00 Mac OS X Yosemite(10.10.5) Rails version 4.2.4 Ruby version 2.2.3-p173 (x86_64-darwin14) RubyGems version 2.4.5.1 bundle installした際にnokogiriでエラーが出ました。 An error occurred while installing nokogiri (1.6.6.2), and Bundler cannot continue. 以下のコマンドを打ったあと、再度bundle installしました。 bundle config build.nokogiri …
<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac%20OS%20X">Mac OS X</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Yosemite">Yosemite</a>(10.10.5)</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a> version 4.2.4</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby">Ruby</a> version 2.2.3-p173 (<a class="keyword" href="http://d.hatena.ne.jp/keyword/x86">x86</a>_64-darwin14)</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/RubyGems">RubyGems</a> version 2.4.5.1</li>
</ul>
<p><code>bundle install</code>した際にnokogiriでエラーが出ました。</p>
<pre class="code lang-sh" data-lang="sh" data-unlink>An error occurred <span class="synStatement">while installing nokogiri (1.6.6.2), and Bundler cannot</span>
<span class="synStatement">continue.</span>
</pre>
<p>以下のコマンドを打ったあと、再度<code>bundle install</code>しました。</p>
<pre class="code lang-sh" data-lang="sh" data-unlink>bundle config build.nokogiri <span class="synSpecial">--use-system-libraries</span>
</pre>
<p>以下詳細なエラーメッセージです。</p>
<hr />
<pre class="code" data-lang="" data-unlink>Installing nokogiri 1.6.6.2 with native extensions
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.
/Users/noriyo_tcp/.rbenv/versions/2.2.3/bin/ruby -r ./siteconf20151117-42849-19shu2y.rb extconf.rb
checking if the C compiler accepts ... yes
checking if the C compiler accepts -Wno-error=unused-command-line-argument-hard-error-in-future... no
Building nokogiri using packaged libraries.
checking for gzdopen() in -lz... yes
checking for iconv using --with-iconv-* flags... yes
************************************************************************
IMPORTANT NOTICE:
Building Nokogiri with a packaged version of libxml2-2.9.2
with the following patches applied:
- 0001-Revert-Missing-initialization-for-the-catalog-module.patch
- 0002-Fix-missing-entities-after-CVE-2014-3660-fix.patch
Team Nokogiri will keep on doing their best to provide security
updates in a timely manner, but if this is a concern for you and want
to use the system library instead; abort this installation process and
reinstall nokogiri as follows:
gem install nokogiri -- --use-system-libraries
[--with-xml2-config=/path/to/xml2-config]
[--with-xslt-config=/path/to/xslt-config]
If you are using Bundler, tell it to use the option:
bundle config build.nokogiri --use-system-libraries
bundle install
Note, however, that nokogiri is not fully compatible with arbitrary
versions of libxml2 provided by OS/package vendors.
************************************************************************
Extracting libxml2-2.9.2.tar.gz into tmp/x86_64-apple-darwin14.5.0/ports/libxml2/2.9.2... OK
Running patch with /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/nokogiri-1.6.6.2/ports/patches/libxml2/0001-Revert-Missing-initialization-for-the-catalog-module.patch...
Running 'patch' for libxml2 2.9.2... OK
Running patch with /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/nokogiri-1.6.6.2/ports/patches/libxml2/0002-Fix-missing-entities-after-CVE-2014-3660-fix.patch...
Running 'patch' for libxml2 2.9.2... OK
Running 'configure' for libxml2 2.9.2... OK
Running 'compile' for libxml2 2.9.2... OK
Running 'install' for libxml2 2.9.2... OK
Activating libxml2 2.9.2 (from /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/nokogiri-1.6.6.2/ports/x86_64-apple-darwin14.5.0/libxml2/2.9.2)...
************************************************************************
IMPORTANT NOTICE:
Building Nokogiri with a packaged version of libxslt-1.1.28
with the following patches applied:
- 0001-Adding-doc-update-related-to-1.1.28.patch
- 0002-Fix-a-couple-of-places-where-f-printf-parameters-wer.patch
- 0003-Initialize-pseudo-random-number-generator-with-curre.patch
- 0004-EXSLT-function-str-replace-is-broken-as-is.patch
- 0006-Fix-str-padding-to-work-with-UTF-8-strings.patch
- 0007-Separate-function-for-predicate-matching-in-patterns.patch
- 0008-Fix-direct-pattern-matching.patch
- 0009-Fix-certain-patterns-with-predicates.patch
- 0010-Fix-handling-of-UTF-8-strings-in-EXSLT-crypto-module.patch
- 0013-Memory-leak-in-xsltCompileIdKeyPattern-error-path.patch
- 0014-Fix-for-bug-436589.patch
- 0015-Fix-mkdir-for-mingw.patch
Team Nokogiri will keep on doing their best to provide security
updates in a timely manner, but if this is a concern for you and want
to use the system library instead; abort this installation process and
reinstall nokogiri as follows:
gem install nokogiri -- --use-system-libraries
[--with-xml2-config=/path/to/xml2-config]
[--with-xslt-config=/path/to/xslt-config]
If you are using Bundler, tell it to use the option:
bundle config build.nokogiri --use-system-libraries
bundle install
************************************************************************
Extracting libxslt-1.1.28.tar.gz into tmp/x86_64-apple-darwin14.5.0/ports/libxslt/1.1.28... OK
Running patch with /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/nokogiri-1.6.6.2/ports/patches/libxslt/0001-Adding-doc-update-related-to-1.1.28.patch...
Running 'patch' for libxslt 1.1.28... OK
Running patch with /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/nokogiri-1.6.6.2/ports/patches/libxslt/0002-Fix-a-couple-of-places-where-f-printf-parameters-wer.patch...
Running 'patch' for libxslt 1.1.28... OK
Running patch with /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/nokogiri-1.6.6.2/ports/patches/libxslt/0003-Initialize-pseudo-random-number-generator-with-curre.patch...
Running 'patch' for libxslt 1.1.28... OK
Running patch with /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/nokogiri-1.6.6.2/ports/patches/libxslt/0004-EXSLT-function-str-replace-is-broken-as-is.patch...
Running 'patch' for libxslt 1.1.28... OK
Running patch with /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/nokogiri-1.6.6.2/ports/patches/libxslt/0006-Fix-str-padding-to-work-with-UTF-8-strings.patch...
Running 'patch' for libxslt 1.1.28... OK
Running patch with /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/nokogiri-1.6.6.2/ports/patches/libxslt/0007-Separate-function-for-predicate-matching-in-patterns.patch...
Running 'patch' for libxslt 1.1.28... OK
Running patch with /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/nokogiri-1.6.6.2/ports/patches/libxslt/0008-Fix-direct-pattern-matching.patch...
Running 'patch' for libxslt 1.1.28... OK
Running patch with /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/nokogiri-1.6.6.2/ports/patches/libxslt/0009-Fix-certain-patterns-with-predicates.patch...
Running 'patch' for libxslt 1.1.28... OK
Running patch with /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/nokogiri-1.6.6.2/ports/patches/libxslt/0010-Fix-handling-of-UTF-8-strings-in-EXSLT-crypto-module.patch...
Running 'patch' for libxslt 1.1.28... OK
Running patch with /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/nokogiri-1.6.6.2/ports/patches/libxslt/0013-Memory-leak-in-xsltCompileIdKeyPattern-error-path.patch...
Running 'patch' for libxslt 1.1.28... OK
Running patch with /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/nokogiri-1.6.6.2/ports/patches/libxslt/0014-Fix-for-bug-436589.patch...
Running 'patch' for libxslt 1.1.28... OK
Running patch with /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/nokogiri-1.6.6.2/ports/patches/libxslt/0015-Fix-mkdir-for-mingw.patch...
Running 'patch' for libxslt 1.1.28... OK
Running 'configure' for libxslt 1.1.28... OK
Running 'compile' for libxslt 1.1.28... OK
Running 'install' for libxslt 1.1.28... OK
Activating libxslt 1.1.28 (from /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/nokogiri-1.6.6.2/ports/x86_64-apple-darwin14.5.0/libxslt/1.1.28)...
checking for main() in -llzma... yes
checking for xmlParseDoc() in libxml/parser.h... no
checking for xmlParseDoc() in -lxml2... no
checking for xmlParseDoc() in -llibxml2... no
-----
libxml2 is missing. Please locate mkmf.log to investigate how it is failing.
-----
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers. Check the mkmf.log file for more details. You may
need configuration options.
Provided configuration options:
--with-opt-dir
--without-opt-dir
--with-opt-include
--without-opt-include=${opt-dir}/include
--with-opt-lib
--without-opt-lib=${opt-dir}/lib
--with-make-prog
--without-make-prog
--srcdir=.
--curdir
--ruby=/Users/noriyo_tcp/.rbenv/versions/2.2.3/bin/$(RUBY_BASE_NAME)
--help
--clean
--use-system-libraries
--enable-static
--disable-static
--with-zlib-dir
--without-zlib-dir
--with-zlib-include
--without-zlib-include=${zlib-dir}/include
--with-zlib-lib
--without-zlib-lib=${zlib-dir}/lib
--enable-cross-build
--disable-cross-build
--with-xml2lib
--without-xml2lib
--with-libxml2lib
--without-libxml2lib
extconf failed, exit code 1
Gem files will remain installed in /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/gems/nokogiri-1.6.6.2 for inspection.
Results logged to /Users/noriyo_tcp/workspace/feel/vendor/bundle/ruby/2.2.0/extensions/x86_64-darwin-14/2.2.0-static/nokogiri-1.6.6.2/gem_make.out
An error occurred while installing nokogiri (1.6.6.2), and Bundler cannot
continue.
Make sure that `gem install nokogiri -v '1.6.6.2'` succeeds before bundling.</pre>
<hr />
<p>ポイントはここかなあと。</p>
<pre class="code lang-sh" data-lang="sh" data-unlink>If you are using Bundler, tell it to use the option:
bundle config build.nokogiri <span class="synSpecial">--use-system-libraries</span>
bundle <span class="synStatement">install</span>
</pre>
noriyo_tcp
Windows10へのアップグレードで「お使いのプロセッサでNXがサポートされていないため、Windows10をインストールできません。」と表示される時
hatenablog://entry/6653458415123733449
2015-10-06T21:13:37+09:00
2015-10-06T21:13:37+09:00 きっかけはこちらの記事です。 editman.hatenablog.com まさに同じ機種(色も同じ)のキーボード交換をしているのですが、1番最後に WINDOWS7でまだまだ、使えそうですが 今、WIN7ユーザー以降のOSの人は WINDOWS10に無料でアップグレード出来るので アップグレードしておきました。 とあります。キーボード以外の部品を交換しているわけでもなさそうだし、この機種でもいけるのかと。それまで何回も失敗していたので諦めかけていました・・・。 OS - Window7 32bit Starter 機種 - acer ASPIRE ONE D255 「お使いのプロセッサでNX…
<p>きっかけはこちらの記事です。</p>
<p><iframe src="http://editman.hatenablog.com/embed/2015/10/04/ASPIRE_ONE_D255_%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89%E3%81%AE%E4%BA%A4%E6%8F%9B%E3%82%92%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82" title="ASPIRE ONE D255 キーボードの交換をしました。 - エディットマンの編集旅路" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://editman.hatenablog.com/entry/2015/10/04/ASPIRE_ONE_D255_%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89%E3%81%AE%E4%BA%A4%E6%8F%9B%E3%82%92%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82">editman.hatenablog.com</a></cite></p>
<p>まさに同じ機種(色も同じ)のキーボード交換をしているのですが、1番最後に</p>
<blockquote><p><a class="keyword" href="http://d.hatena.ne.jp/keyword/WINDOWS7">WINDOWS7</a>でまだまだ、使えそうですが
今、<a class="keyword" href="http://d.hatena.ne.jp/keyword/WIN7">WIN7</a>ユーザー以降のOSの人は
WINDOWS10に無料でアップグレード出来るので
アップグレードしておきました。</p></blockquote>
<p>とあります。キーボード以外の部品を交換しているわけでもなさそうだし、この機種でもいけるのかと。それまで何回も失敗していたので諦めかけていました・・・。</p>
<ul>
<li>OS - Window7 32bit Starter</li>
<li>機種 - <a class="keyword" href="http://d.hatena.ne.jp/keyword/acer">acer</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/ASPIRE%20ONE">ASPIRE ONE</a> D255</li>
</ul>
<hr />
<ul class="table-of-contents">
<li><a href="#お使いのプロセッサでNXがサポートされていないためWindows10をインストールできませんと表示される">「お使いのプロセッサでNXがサポートされていないため、Windows10をインストールできません。」と表示される</a></li>
<li><a href="#bcdeditとやらの実行">bcdeditとやらの実行</a></li>
<li><a href="#NXXD有効化">NX/XD有効化</a><ul>
<li><a href="#AlwaysOnじゃなくてOptInだと">AlwaysOnじゃなくてOptIn・・・だと?</a></li>
</ul>
</li>
</ul>
<h3 id="お使いのプロセッサでNXがサポートされていないためWindows10をインストールできませんと表示される">「お使いのプロセッサでNXがサポートされていないため、Windows10をインストールできません。」と表示される</h3>
<p>一応「田」マークが画面下部に表示されているのですが、通知なんか待ってられないので、メディア作成<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C4%A1%BC%A5%EB">ツール</a>でアップグレードに挑戦していました。しかし・・・</p>
<p>「お使いのプロセッサでNXがサポートされていないため、Windows10をインストールできません。」と出てしまいます(スクショなくて申し訳ない)</p>
<p>んぐぐ、どうしたものか・・・。</p>
<h3 id="bcdeditとやらの実行">bcdeditとやらの実行</h3>
<p>ググってみるとこんな記事、というかようつべの動画を見つけました。</p>
<p><a href="https://www.youtube.com/watch?v=M-tNrGsVW1M">How to install Windows 8.1 Pro on Acer Aspire One D257 Netbook - YouTube</a></p>
<p>そのコメント欄に色々ありまして、Win7Starter32bitをWin10にアップグレードさせたいんだけど、NXなんちゃらってエラーが出てるんだよね〜、という方がいまして、ごにょごにょした結果解決できたようです。</p>
<blockquote><p>M1keTNT 1 か月前
+Eagle TDW In the meantime I could fix the nx problem:
Open the command prompt with administrator rights and enter:bcdedit.exe /set {current} nx AlwaysOn</p></blockquote>
<h3 id="NXXD有効化">NX/XD有効化</h3>
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%DE%A5%F3%A5%C9%A5%D7%A5%ED%A5%F3%A5%D7%A5%C8">コマンドプロンプト</a>を右クリック>「管理者として実行」を選択します。</p>
<p>そして</p>
<pre class="code" data-lang="" data-unlink>bcdedit /set {current} nx AlwaysOn</pre>
<p>と打ち込みます。そのあとはOSの再起動をして設定を反映させます。</p>
<p>そして再度トライしてみると・・・Windows10にアップグレードできました! だいたい3時間くらいだったと思います。</p>
<p>このPC自体、1年くらい使ってなかったので、アップグレード以前に<a class="keyword" href="http://d.hatena.ne.jp/keyword/Win7">Win7</a>の更新が大変でしたけど・・・。</p>
<hr />
<h4 id="AlwaysOnじゃなくてOptInだと">AlwaysOnじゃなくてOptIn・・・だと?</h4>
<p>アップグレードしている最中に、そのものズバリな日本語の記事を見つけてしまいましたw</p>
<p><iframe src="//hatenablog-parts.com/embed?url=http%3A%2F%2Fpcmemo777.blog.fc2.com%2Fblog-entry-1.html" title="PCに関するメモ CPUがサポートされていませんとか、nxがサポートされていないためとか (Windows10アップグレード)" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://pcmemo777.blog.fc2.com/blog-entry-1.html">pcmemo777.blog.fc2.com</a></cite></p>
<p>そこでは</p>
<blockquote><p>bcdedit /set identifierの値 nx OptIn</p></blockquote>
<p>を実行するとあります。ん? AlwaysOnじゃなくてOptIn・・・だと?<br/>
しかしWin10にアップグレードしたあと、また管理者権限で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%DE%A5%F3%A5%C9%A5%D7%A5%ED%A5%F3%A5%D7%A5%C8">コマンドプロンプト</a>を開き、<code>bcdedit</code>とだけ打ち込んで確認してみると「<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D6%A1%BC%A5%C8%A5%ED%A1%BC%A5%C0">ブートローダ</a>ー」の項に「nx OptIn」と表示されていたのでまあ大丈夫かと。</p>
noriyo_tcp
MacBook Pro 13inch, Mid 2012のメモリを8GBから16GBに増設した
hatenablog://entry/6653458415120724093
2015-09-09T16:33:20+09:00
2015-09-15T03:48:02+09:00 OS X Yosemite 10.5.5です。 こちらを参考にしました。 こうちかずおのブログ: MacBook Pro 13-inch Mid 2012のメモリと内蔵HDDを交換 まず、Macを終了させ、机の上をよ〜く拭いてホコリを取り除いて、手をよ〜く洗って、頭にタオルも巻きまして・・・そして全裸になります。 あ、あと私は無謀にもバックアップを取らずに挑戦しましたが、皆様はきちんとバックアップを取っていただいて、自己責任で行ってくださいお願いします。 用意したのはこちらです。 MacBookを裏返して・・・微妙に写真写り悪いですが 精密ドライバーでネジを外していきます。3本だけ長いのがある…
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/OS%20X">OS X</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Yosemite">Yosemite</a> 10.5.5です。</p>
<p>こちらを参考にしました。</p>
<p><a href="http://kohchi.blogspot.com/2014/03/macbook-pro-13-inch-mid-2012hdd.html">こうちかずおのブログ: MacBook Pro 13-inch Mid 2012のメモリと内蔵HDDを交換</a></p>
<p>まず、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac">Mac</a>を終了させ、机の上をよ〜く拭いてホコリを取り除いて、手をよ〜く洗って、頭にタオルも巻きまして・・・そして<strong>全裸になります。</strong></p>
<p>あ、あと私は無謀にもバックアップを取らずに挑戦しましたが、皆様はきちんとバックアップを取っていただいて、自己責任で行ってくださいお願いします。</p>
<p>用意したのはこちらです。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20150909/20150909145137.jpg" alt="f:id:noriyo_tcp:20150909145137j:plain" title="f:id:noriyo_tcp:20150909145137j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/MacBook">MacBook</a>を裏返して・・・微妙に写真写り悪いですが</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20150909/20150909145325.jpg" alt="f:id:noriyo_tcp:20150909145325j:plain" title="f:id:noriyo_tcp:20150909145325j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>精密ドライバーでネジを外していきます。3本だけ長いのがあるので注意。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20150909/20150909145746.jpg" alt="f:id:noriyo_tcp:20150909145746j:plain" title="f:id:noriyo_tcp:20150909145746j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>裏蓋を外したところ。結構ホコリが溜まっていたので、慌てつつも慎重にブラシで取り除く。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20150909/20150909151017.jpg" alt="f:id:noriyo_tcp:20150909151017j:plain" title="f:id:noriyo_tcp:20150909151017j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>バッテリーのすぐ上にメモリが見えます。左右のストッパーで留められているのも確認できます。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20150909/20150909151037.jpg" alt="f:id:noriyo_tcp:20150909151037j:plain" title="f:id:noriyo_tcp:20150909151037j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>両手を使って、ストッパーを脇へ広げると、自然とメモリが立ち上がってくれます。</p>
<p>2枚とも引き抜いたのがこちら。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20150909/20150909151215.jpg" alt="f:id:noriyo_tcp:20150909151215j:plain" title="f:id:noriyo_tcp:20150909151215j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>そして新しいメモリを下段から入れるわけですが、少々斜めにぐっと差し込みます。<br/>
これは2枚目(上段)ですが、このように斜めに端子が見えなくなるまで、しっかりと差し込みます。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20150909/20150909151544.jpg" alt="f:id:noriyo_tcp:20150909151544j:plain" title="f:id:noriyo_tcp:20150909151544j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>そのままバーコードシールが貼ってある部分を、指の腹(とドライバーの柄の頭部分)で上から押して、しっかりと寝かせます。<br/>
そうすると左右のストッパーがカチン!(結構音でかくてビビる)とはまってくれます。</p>
<p>これはダメな例。まだ差し込みが足りない。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20150909/20150909151505.jpg" alt="f:id:noriyo_tcp:20150909151505j:plain" title="f:id:noriyo_tcp:20150909151505j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>2枚とも差し込んだ図。ピンぼけしてる(涙</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20150909/20150909152157.jpg" alt="f:id:noriyo_tcp:20150909152157j:plain" title="f:id:noriyo_tcp:20150909152157j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>先ほど申し上げたように、はまる時に結構デカい音したので大丈夫かな・・・と震えつつ、蓋を閉じます。</p>
<p>起動して、確認。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20150909/20150909162354.png" alt="f:id:noriyo_tcp:20150909162354p:plain" title="f:id:noriyo_tcp:20150909162354p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20150909/20150909162408.png" alt="f:id:noriyo_tcp:20150909162408p:plain" title="f:id:noriyo_tcp:20150909162408p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p>うん、大丈夫なようです。</p>
<p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B0094P98FK/noriyotcp-22/"><img src="http://ecx.images-amazon.com/images/I/51C4OKmKo4L._SL160_.jpg" class="hatena-asin-detail-image" alt="SP シリコンパワー ノートPC用 8GB×2枚組 DDR3-1600 PC3-12800 SO-DIMM(無期限保証) SP016GBSTU160N22" title="SP シリコンパワー ノートPC用 8GB×2枚組 DDR3-1600 PC3-12800 SO-DIMM(無期限保証) SP016GBSTU160N22"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B0094P98FK/noriyotcp-22/">SP シリコンパワー ノートPC用 8GB×2枚組 DDR3-1600 PC3-12800 SO-DIMM(無期限保証) SP016GBSTU160N22</a></p><ul><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> シリコンパワー</li><li><span class="hatena-asin-detail-label">発売日:</span> 2012/09/01</li><li><span class="hatena-asin-detail-label">メディア:</span> Personal Computers</li><li><span class="hatena-asin-detail-label">購入</span>: 12人 <span class="hatena-asin-detail-label">クリック</span>: 34回</li><li><a href="http://d.hatena.ne.jp/asin/B0094P98FK/noriyotcp-22" target="_blank">この商品を含むブログ (7件) を見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p>
<p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B002SQLEIG/noriyotcp-22/"><img src="http://ecx.images-amazon.com/images/I/41-2usJbNaL._SL160_.jpg" class="hatena-asin-detail-image" alt="アネックス(ANEX) 精密ドライバー プラス00×50 No.3450" title="アネックス(ANEX) 精密ドライバー プラス00×50 No.3450"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B002SQLEIG/noriyotcp-22/">アネックス(ANEX) 精密ドライバー プラス00×50 No.3450</a></p><ul><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> 兼古製作所</li><li><span class="hatena-asin-detail-label">メディア:</span> Tools & Hardware</li><li><span class="hatena-asin-detail-label">購入</span>: 24人 <span class="hatena-asin-detail-label">クリック</span>: 73回</li><li><a href="http://d.hatena.ne.jp/asin/B002SQLEIG/noriyotcp-22" target="_blank">この商品を含むブログを見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p>
noriyo_tcp
faker.jsを使ってみる
hatenablog://entry/6653458415119926134
2015-09-02T21:04:28+09:00
2015-09-02T21:04:52+09:00 Rubyでもfakerというgemがありますが、そのJS版なんですかねえ。 Marak/faker.jsgithub.com 今回はCodePenで簡単に導入しました。 JSパネルの歯車ボタンより、「+ add another resource」を押下、入力フォームに「faker」と打ち込むだけで画像のように候補が出ます。 API Methods一部 address zipCode city cityPrefix citySuffix streetName streetAddress streetSuffix streetPrefix secondaryAddress county count…
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby">Ruby</a>でもfakerというgemがありますが、そのJS版なんですかねえ。</p>
<p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2FMarak%2Ffaker.js" title="Marak/faker.js" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"><a href="https://github.com/Marak/faker.js">Marak/faker.js</a></iframe><cite class="hatena-citation"><a href="https://github.com/Marak/faker.js">github.com</a></cite></p>
<p>今回はCodePenで簡単に導入しました。</p>
<p>JSパネルの歯車ボタンより、「+ add another resource」を押下、入力フォームに「faker」と打ち込むだけで画像のように候補が出ます。</p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/noriyo_tcp/20150902/20150902210120.png" alt="f:id:noriyo_tcp:20150902210120p:plain" title="f:id:noriyo_tcp:20150902210120p:plain" class="hatena-fotolife" itemprop="image"></span></p>
<h3><a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> Methods一部</h3>
<ul>
<li>address
<ul>
<li>zipCode</li>
<li>city</li>
<li>cityPrefix</li>
<li>citySuffix</li>
<li>streetName</li>
<li>streetAddress</li>
<li>streetSuffix</li>
<li>streetPrefix</li>
<li>secondaryAddress</li>
<li>county</li>
<li>country</li>
<li>countryCode</li>
<li>state</li>
<li>stateAbbr</li>
<li>latitude</li>
<li>longitude</li>
</ul>
</li>
</ul>
<p>住所。</p>
<ul>
<li>name
<ul>
<li>firstName</li>
<li>lastName</li>
<li>findName</li>
<li>jobTitle</li>
<li>prefix</li>
<li>suffix</li>
<li>title</li>
<li>jobDescriptor</li>
<li>jobArea</li>
<li>jobType</li>
</ul>
</li>
</ul>
<p>名前。full nameでは<code>findName</code>を使います。</p>
<ul>
<li>phone
<ul>
<li>phoneNumber</li>
<li>phoneNumberFormat</li>
<li>phoneFormats</li>
</ul>
</li>
</ul>
<p>電話番号。</p>
<p>こんな感じ。</p>
<pre class="code" data-lang="" data-unlink>console.log(faker.name.findName()); // "Reece Predovic"
console.log(faker.phone.phoneNumberFormat()); // "092-284-2400"
console.log(faker.name.jobTitle()); // "Chief Tactics Assistant"</pre>
<h4>Localization</h4>
<p>ローカライゼーションもできるみたい。日本語(ja)もある。</p>
<pre class="code" data-lang="" data-unlink>// sets locale to de
faker.locale = "de";</pre>
<p><a href="http://marak.com/faker.js/">faker.js - generate massive amounts of fake data in node.js and the browser</a></p>
<p>demoページで日本語も選択できるんですけど、ちょっと微妙だな・・・w</p>
<p><code>footable.js</code>と組み合わせてこんなんつくってみました。</p>
<p><a href="http://codepen.io/noriyotcp/full/yYLJjw/">CodePen - Sortable table using footable.js and faker.js</a></p>
<p data-height="840" data-theme-id="0" data-slug-hash="yYLJjw" data-default-tab="result" data-user="noriyotcp" class='codepen'>See the Pen <a href='http://codepen.io/noriyotcp/pen/yYLJjw/'>Sortable table using footable.js and faker.js</a> by Noriyo Akita (<a href='http://codepen.io/noriyotcp'>@noriyotcp</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
<p>実際の<code>faker.js</code>使用部分はこれだけ。</p>
<pre class="code" data-lang="" data-unlink>for(var f=1; f<=9; ++f){
for(var r=1; r<=9; ++r){
var personName = faker.name.findName();
var phoneNumber = faker.phone.phoneNumberFormat();
var jobTitle = faker.name.jobTitle();
$('tbody').append('<tr><td>'+f+'0'+r+'</td><td>'+personName+'</td><td>'+phoneNumber+'</td><td>'+jobTitle+'</td></tr>');
}
}</pre>
<p>空の<code>tdoby</code>に無理やりappendしていく形で81個生成してますけど・・・w</p>
noriyo_tcp
【Sublime Text 2】EmmetでTabが効かなかったので
hatenablog://entry/8454420450099526815
2015-06-30T21:14:15+09:00
2015-06-30T21:14:15+09:00 Sublime Text 2(Mac)にEmmetのパッケージを導入したのですが、Tabでの展開が効かなかったので。 いろいろ調べると、タブでの展開を無効にしている例が多く見られますが、代わりにctrl + eってのもなあ・・・。 Tabでの展開を有効に Preferences > Settings - Userに以下を追加 "disable_tab_abbreviations_on_auto_complete": false sublimetext2 - Sublime Text 2 + Emmet - not expanding correctly - Stack Overflow これに…
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Sublime">Sublime</a> Text 2(<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac">Mac</a>)にEmmetのパッケージを導入したのですが、Tabでの展開が効かなかったので。<br/>
いろいろ調べると、タブでの展開を無効にしている例が多く見られますが、代わりに<code>ctrl + e</code>ってのもなあ・・・。</p>
<hr />
<h2>Tabでの展開を有効に</h2>
<p><code>Preferences > Settings - User</code>に以下を追加</p>
<pre class="code" data-lang="" data-unlink>"disable_tab_abbreviations_on_auto_complete": false</pre>
<p><a href="http://stackoverflow.com/questions/22535981/sublime-text-2-emmet-not-expanding-correctly">sublimetext2 - Sublime Text 2 + Emmet - not expanding correctly - Stack Overflow</a></p>
<p>これによってデフォルトの自動補完時にタブキー1発で決定することができなくなりましたが、代わりにreturnで決定します。あ、でもタブを2回押せばなるなあ。</p>
<p>私はあんまりタブって使ってないのです(インデントくらいかな?)
自動補完の決定は<code>return</code>、日本語入力時の変換候補の選択は<code>ctrl + n</code> or <code>ctrl + p</code>で行ってるので、Emmetでの展開はタブでしようと。</p>
<hr />
<h2>問題発生</h2>
<p>初めはこうしてました。</p>
<p><a href="https://github.com/sergeche/emmet-sublime/issues/360">https://github.com/sergeche/emmet-sublime/issues/360</a></p>
<p><code>Preferences > Key Bindings - User</code>に以下を追加。</p>
<pre class="code" data-lang="" data-unlink> { "keys": ["tab"], "command": "insert_best_completion", "args": {"default": "\t", "exact": true} },
{ "keys": ["tab"], "command": "insert_best_completion", "args": {"default": "\t", "exact": false},
"context":
[
{ "key": "setting.tab_completion", "operator": "equal", "operand": true }
]
},</pre>
<p>初めからこの設定をしている場合は、冒頭の設定では効かないかもしれません。</p>
<pre class="code lang-html" data-lang="html" data-unlink>!
</pre>
<p>これでタブを押せばこうなるはずが・・・</p>
<pre class="code lang-html" data-lang="html" data-unlink><span class="synComment"><!DOCTYPE html></span>
<span class="synIdentifier"><</span><span class="synStatement">html</span><span class="synIdentifier"> </span><span class="synType">lang</span><span class="synIdentifier">=</span><span class="synConstant">"en"</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">head</span><span class="synIdentifier">></span>
<span class="synPreProc"> </span><span class="synIdentifier"><</span><span class="synStatement">meta</span><span class="synIdentifier"> </span><span class="synType">charset</span><span class="synIdentifier">=</span><span class="synConstant">"UTF-8"</span><span class="synIdentifier">></span>
<span class="synPreProc"> </span><span class="synIdentifier"><</span><span class="synStatement">title</span><span class="synIdentifier">></span>Document<span class="synIdentifier"></</span><span class="synStatement">title</span><span class="synIdentifier">></span>
<span class="synIdentifier"></</span><span class="synStatement">head</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">body</span><span class="synIdentifier">></span>
<span class="synIdentifier"></</span><span class="synStatement">body</span><span class="synIdentifier">></span>
<span class="synIdentifier"></</span><span class="synStatement">html</span><span class="synIdentifier">></span>
</pre>
<p>こうなっちゃった</p>
<pre class="code lang-html" data-lang="html" data-unlink>!<span class="synIdentifier"><</span><span class="synStatement">form</span><span class="synIdentifier">></</span><span class="synStatement">form</span><span class="synIdentifier">></span>
</pre>
<p>何故に・・・。でも自動補完をタブで決定することが有効になったので</p>
<p><code>html</code>と入力し、タブを押すと</p>
<pre class="code lang-html" data-lang="html" data-unlink><span class="synIdentifier"><</span><span class="synStatement">html</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">head</span><span class="synIdentifier">></span>
<span class="synPreProc"> </span><span class="synIdentifier"><</span><span class="synStatement">title</span><span class="synIdentifier">></</span><span class="synStatement">title</span><span class="synIdentifier">></span>
<span class="synIdentifier"></</span><span class="synStatement">head</span><span class="synIdentifier">></span>
<span class="synIdentifier"><</span><span class="synStatement">body</span><span class="synIdentifier">></span>
<span class="synIdentifier"></</span><span class="synStatement">body</span><span class="synIdentifier">></span>
<span class="synIdentifier"></</span><span class="synStatement">html</span><span class="synIdentifier">></span>
</pre>
<p>こうなる。うーん。というわけでこの設定は止めて、冒頭の設定にしたわけです。</p>
<hr />
<h2>ctrl+eを無効にする</h2>
<p>他に<code>ctrl+e</code>で展開できますが、それは「カーソルを行末へ移動する」操作でよく使っているので、無効にしたいです。下記の記事を参考に</p>
<p><a href="http://liginc.co.jp/programmer/archives/5352">EmmetとSublime Textとctrl+e | 株式会社LIG</a></p>
<p><code>Preferences > Package Settings > Emmet > Settings - User</code>に次を追加</p>
<pre class="code" data-lang="" data-unlink> "disabled_keymap_actions": "expand_abbreviation",
"disable_formatted_linebreak": true</pre>
<p>これで<code>ctrl+e</code>を無効にできました。
<code>"disable_formatted_linebreak": true</code>は日本語入力で変換候補を確定するために<code>return</code>を押すと、それが無視されて改行されてしまうのを防ぐそうです。</p>
<p><a href="http://www.understandard.net/tool/tool006.html">Sublime Text 2 + Emmet で日本語入力がうまくいかない症状の解決法 // understandard</a></p>
<hr />
<h2>defaultの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%CB%A5%DA%A5%C3%A5%C8">スニペット</a>を変える</h2>
<p>デフォルトで<code>html</code>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%CB%A5%DA%A5%C3%A5%C8">スニペット</a>がありますが、ついでにそれにも手を加えます。</p>
<p><code>~/Library/Application Support/Sublime Text 2/Packages/HTML</code>の中に<code>html.sublime-snippet</code>があります。</p>
<pre class="code lang-xml" data-lang="xml" data-unlink><span class="synIdentifier"><snippet></span>
<span class="synIdentifier"><content></span><span class="synType"><![</span><span class="synStatement">CDATA</span><span class="synType">[</span><span class="synConstant"><html></span>
<span class="synConstant"><head></span>
<span class="synConstant"> <title>$1</title></span>
<span class="synConstant"></head></span>
<span class="synConstant"><body></span>
<span class="synConstant">$0</span>
<span class="synConstant"></body></span>
<span class="synConstant"></html></span><span class="synType">]]></span><span class="synIdentifier"></content></span>
<span class="synIdentifier"><tabTrigger></span>html<span class="synIdentifier"></tabTrigger></span>
<span class="synIdentifier"><scope></span>text.html<span class="synIdentifier"></scope></span>
<span class="synIdentifier"></snippet></span>
</pre>
<p><code>$1</code>はタブを1番最初に押したときにカーソルが合わさる場所です。<br/>
<code>$0</code>はなんでしょうねw</p>
<p><a href="http://sublimetext.info/docs/en/extensibility/snippets.html">http://sublimetext.info/docs/en/extensibility/snippets.html</a></p>
<blockquote><p>If you want to control where the exit point should be, use the $0 mark.</p></blockquote>
<p>うーん、わからん。</p>
<p>これをこのように変えます。</p>
<pre class="code lang-xml" data-lang="xml" data-unlink><span class="synIdentifier"><snippet></span>
<span class="synIdentifier"><content></span><span class="synType"><![</span><span class="synStatement">CDATA</span><span class="synType">[</span><span class="synConstant"><!DOCTYPE html></span>
<span class="synConstant"><html lang="en"></span>
<span class="synConstant"><head></span>
<span class="synConstant"> <meta charset="UTF-8"></span>
<span class="synConstant"> <title>${1:Document}</title></span>
<span class="synConstant"></head></span>
<span class="synConstant"><body></span>
<span class="synConstant"> $0</span>
<span class="synConstant"></body></span>
<span class="synConstant"></html></span><span class="synType">]]></span><span class="synIdentifier"></content></span>
<span class="synIdentifier"><tabTrigger></span>html<span class="synIdentifier"></tabTrigger></span>
<span class="synIdentifier"><scope></span>text.html<span class="synIdentifier"></scope></span>
<span class="synIdentifier"></snippet></span>
</pre>
<p><code>${1:Document}</code>はタブを一番最初に押したときに<code>Document</code>というテキストを入れます。<title>と</title>の間です。<br/>
インデントはスペース2つ。<body>タグ内の<code>$0</code>の前にも入れてます。<br/>
これでEmmetで<code>!</code> -> tabで展開される<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%CB%A5%DA%A5%C3%A5%C8">スニペット</a>と同じにしました。</p>
<p><iframe src="//hatenablog-parts.com/embed?url=http%3A%2F%2Fsnickerjp.blogspot.jp%2F2013%2F11%2Fhowto-snippet-sublimetext.html" title="【これは便利!】「Sublime Text 2」でSnippet(スニペット)を利用する方法 | 元うなぎ屋" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"><a href="http://snickerjp.blogspot.jp/2013/11/howto-snippet-sublimetext.html">【これは便利!】「Sublime Text 2」でSnippet(スニペット)を利用する方法 | 元うなぎ屋</a></iframe><cite class="hatena-citation"><a href="http://snickerjp.blogspot.jp/2013/11/howto-snippet-sublimetext.html">snickerjp.blogspot.jp</a></cite></p>
<p><a href="http://sublimetext.info/docs/en/extensibility/snippets.html">http://sublimetext.info/docs/en/extensibility/snippets.html</a></p>
<h3>ちょっと気になる点</h3>
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Sublime">Sublime</a> Textの左下に<code>info: processing `HTML': ...please wait</code>と出るなあ。タブキーを2発押さないとEmmetの展開が効かないときもある。関係あるのかどうか分からんですけど・・・。</p>
noriyo_tcp