読者です 読者をやめる 読者になる 読者になる

@Satoh_D no blog

大分にUターンしたので記念に。調べたこととか作ったこととか食べたこととか

【Ruby on Rails】ダイアログの改行でハマった

Ruby on Rails案件で早速ハマりました(ヽ´ω`)

前提

Ruby: 2.0.0p647 Ruby on Rails: 4.2.5

ダイアログに改行を入れたい...

alertで出て来るダイアログのメッセージに改行を入れようと、以下のようにコードを書いたのですが、何故かalertの内容が改行されません。 ちゃんとダイアログ内の文言には改行コード(\n)を入れているですが...。

= link_to 'ダイアログ出すよ', [リンク先URL], :data => { :confirm => 'ダイアログだよ!\n二行目だよ!' }

文言を囲むときはダブルクオーテーションのほうが良さげ

調べてみるとGithubに同様の記事がありました。 以下のIssueによると、どうやらシングルクオーテーションで文言を囲った場合は改行コードは変換されないとのことでした。

Interpret newline escape codes in dialog messages? · Issue #388 · rails/jquery-ujs

Issueにもある通り、:confirmの文言をダブルクオーテーションで囲むことで意図したとおりに出力できるようになりました。

= link_to "ダイアログ出すよ", [リンク先URL], :data => { :confirm => "ダイアログだよ!\n二行目だよ!" }

クオーテーションで挙動が異なるとは...。 Ruby on Rails中々面白いけど、難しいですねぇ。

参考になったページ

パーフェクトRuby on Rails

パーフェクトRuby on Rails

Macに Ruby on Railsの環境を作成する

Ruby on Rails案件に入ることになり、手持ちのmacにて環境を作りましたのでメモ。 そもそもRubyすらやったこと無いんですが...(ヽ´ω`)

前提

  • Mac OS X Yosemite(ver 10.10.5)
  • homebrewインストール済み

ruby-build, rbenvのインストール

まずはruby-build, rbenvというツールをインストールしないといけないとか。 それぞれのツールの役割は以下の通り。

rbenv: Rubyのバージョン切り替えツール ruby-build: rbenvでRubyをビルド・管理するためのパッケージ

インストールはhomebrewを使って行います。

$ brew install ruby-build
$ brew install rbenv

インストールが完了したら、pathの設定を行います。
.bash_profileに下記の内容を書きます。

# .bash_profileは ~/ にある想定です。
$ cd ~/
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> .bash_profile
$ echo 'eval "$(rbenv init -)"' >> .bash_profile
$ source .bash_profile

Rubyをインストールする

macにデフォルトで入っているRubyだと案件で利用しているものとバージョンが異なっていたので、rbenvを使ってインストールします。

$ rbenv install -l

今回は記事公開時の最新版(2.4.0)をインストールします。

$ rbenv install 2.4.0

インストールしたままだとまだ利用できないため、利用するrubyのバージョンを指定します。

$ rbenv global 2.4.0

バージョンが切り替わっているか確認します。

$ ruby -v
ruby 2.0.0p481 (2014-05-08 revision 45883) [universal.x86_64-darwin14]
$ rbenv versions
* system (set by /Users/[username]/.rbenv/version)
  2.4.0
$ rbenv versions
  system
* 2.4.0 (set by /Users/owner/.rbenv/version)
$ ruby -v
ruby 2.4.0p0 (2016-12-24 revision 57164) [x86_64-darwin14]

Ruby on Railsのインストール

Rubyがインストール出来ましたら、Ruby on Railsのインストールを行います。 以下のコマンドを打ってインストールを行います。

$ gem install rails

これでRuby on Railsを利用する準備はできました。 あとはプロジェクトで利用しているGemを管理, インストールしてくれるBundlerも併せてインストールしておきます。

Bundler: Railsアプリケーションに必要となるGemの種類やバージョンを管理し、複数のPCで必要なGemをインストールする仕組みを提供してくれるもの

$ gem install bundler

これで案件の準備は出来ました。 Rubyを利用するのは初めてだったので、色々準備が必要ですね。。 あとは少しずつRailsのお作法とか学ばないと...(ヽ´ω`)

パーフェクトRuby on Rails

パーフェクトRuby on Rails

SourcetreeでのMergeにPhpStormを利用する

Sourcetreeでのコンフリクト解消時、デフォルトのマージツール(DiffMerge)が死ぬほど使いづらくて不便でした。
個人的にPhpStormのマージ画面が気に入っているので、そちらを使えないかと調べていたところ実施している方がおり、試しに設定してみました。

バージョンとか

今回使っているツール等のバージョンは以下の通りです。

手順とか

まずはSorucetreeの設定画面を開きます。 [環境設定] > [Diff]を選択し、「外部 Diff / Merge」を確認します。
各項目を以下のように入力(選択)します。

  • 差分表示ツール: カスタム...
  • Diffコマンド: /Applications/PhpStorm.app/Contents/MacOS/phpstorm
  • 引数: diff $(cd $(dirname "$LOCAL") && pwd)/$(basename "$LOCAL") $(cd $(dirname "$REMOTE") && pwd)/$(basename "$REMOTE")

  • マージツール: カスタム...

  • Diffコマンド: /Applications/PhpStorm.app/Contents/MacOS/phpstorm
  • 引数: merge $(cd $(dirname "$LOCAL") && pwd)/$(basename "$LOCAL") $(cd $(dirname "$REMOTE") && pwd)/$(basename "$REMOTE") $(cd $(dirname "$BASE") && pwd)/$(basename "$BASE") $(cd $(dirname "$MERGED") && pwd)/$(basename "$MERGED")

さいごに

これで使い慣れたツールを使ってMergeが出来るようになりました。
PhpStormマジ便利。買ってよかった...!

参考にしたページ

鶏つくねの甘辛だれ

f:id:Satoh_D:20161211234951j:plain

先日スーパーで衝動買してしまったレンコンを片付けるべく、鶏つくねを作ってみました。
しその香りと甘辛なタレが食欲をそそります。

材料

つくね

  • 鶏挽き肉(今回は胸肉を利用)200g
  • レンコン 小3個
  • しいたけ 2個
  • しそ 5枚
  • 長ねぎ 1/2本
  • 酒 大さじ1
  • 塩 小さじ1

甘辛だれ

  • みりん 50cc
  • 醤油 大さじ3
  • 砂糖 大さじ1.5

作り方

しいたけ、しそ、長ねぎはみじん切りにしておきます。
ボウルに材料をすべて入れ、粘り気が出るまで混ぜ続けます。

一口大に成形し、油をひいたフライパンに入れて焼きます。
いい具合に焼き色が付いたら裏返し、同様に焼き色がつくまで焼いていきます。

両面焼き色が付いたら甘辛だれの材料を全てフライパンに入れます。
たれを煮詰めつつ、つくねに絡めていきます。
つくねに照りが出て、たれにとろみが付いたら完成です。

そのままでも美味しいですが、卵黄に絡めるとより美味しく頂けました。
居酒屋などで食べるあのつくねの味が家でも...!

一口サイズなので、残ったらお弁当に入れられるのもいいですね。
とても満足の行くおかずになりました、ごちそうさま。

丸善 焼つくね 70g×10袋

丸善 焼つくね 70g×10袋

E-PRANCE® 手挽きコーヒーミルを買ってみた

休日にコーヒーをハンドドリップして、のんびり飲むのが好きです。
今まではお店でコーヒー豆を挽いてもらっていたのですが、時間が経つとどうしても風味や味がちょっと落ちてしまう...
だったら自分で都度豆を挽けばいいじゃん、ということで手挽きミルを買ってみました。

今回買ったのは「E-PRANCE® 手挽きコーヒーミル セラミック ステンレス コーヒーミル手動」という商品。

f:id:Satoh_D:20161211142826j:plain

Amazonで評価が良く、1,500円程度で買えてお得。
それにポーレックスのコーヒーミルにもすごく似ている...あちらは4,000円ほどなので大体3倍の開きがありますね。

ポーレックス 手挽きコーヒーミル セラミック 日本製

ポーレックス 手挽きコーヒーミル セラミック 日本製

とても軽い

商品が届いてびっくりしたのはその軽さ。
商品ページにもありますが260gはとても軽い。
ミル自体が程よく細いので、軽さも相まってとても手にフィットします。
これだったら登山の時に持っていくのも楽じゃないかな...!

色々脱着できて洗うのも楽

f:id:Satoh_D:20161211142841j:plain

ミルの取っ手は脱着式で、使わないときは外しておけるので収納も楽です。
また、刃の部分はほぼすべてのパーツが外せるので丸洗いが可能です。
洗うの大変そうだと思っていたのでこれは以外でした。

豆の細かさを調節できる

セラミック刃の部分にはネジが付いており、これを開け閉めすることで豆の細かさを調整できます。

f:id:Satoh_D:20161211142848j:plain

付属の説明書にはドリップ方式毎の細かさが書かれた表が入っています。

f:id:Satoh_D:20161211142921j:plain

ただどれくらい回せばどれくらいの細かさになるかは目安が無いので、これは何回か試して見るしかなさそうです...!

コーヒー豆が溢れる心配は無し

受け皿は蓋も兼用しているため、挽いた豆がこぼれることはありません。
こぼれると片付けが面倒そうなのでこれはありがたいですね。
また、窓がついているので量がひと目で分かるのもいいですね。

実際に挽いてみて

今回は2杯分(20gほど)挽いてみましたのですが、 大体2分程で全て挽くことが出来ました。
回すときもあまり力は必要なく、無心でゴリゴリ回せるので良かったです。

f:id:Satoh_D:20161211142903j:plain

流石にコーヒーを入れる直前に豆を挽いただけあって、ドリップした時の豆の膨らみ方が違いました。
また香りも格別で、朝からとてもいい気分になれました。

勝手が分からずちょっとだけ粗くなっちゃいましたが、それでも驚くほど違いがわかりました。
次はもう少し調整してチャレンジしてみようと思います。

買ってよかったコーヒーミル。
安くて手軽に使えてとても便利な一品です。

esa.ioのSublime Text用パッケージを作った

最近esa.ioを使い始めました。
デザインがきれいで使いやすくていいですね、動作も軽いですし。
何よりアイコンが可愛いのが良いです。可愛いは正義。

で、勢い余ってesa.ioSublime Text用パッケージを作ってみました。
これでいつでもSublime Textから記事が投稿できるようになります。

インストール方法

  1. コマンドパレットを開き、「Package Control: Add Repository」を選択します。
  2. 画面下の入力欄に(https://github.com/Satoh-D/Chick](https://github.com/Satoh-D/Chick) を入力 -> Enter
  3. コマンドパレットを再度開き、「Package Control: Install Package」を選択します。
  4. 一覧から「Chick」を選択するとインストールが完了です。

現在Package Controlからインストール出来るようにPull Requestを送っています。
取り込まれるようになれば上記の1, 2の工程が必要なくなります...!

利用にあたって

Chick を利用するにはアクセストークンとチーム名が必要になります。
それぞれの入手方法は下記の通り。

アクセストークン

  1. esa.io にログイン。
  2. 画面右上の卵アイコンをクリックし、ユーザ画面に遷移。
  3. 「Application」タブ -> 「Personal access tokens」 -> 「Generate new token」をクリック。
  4. 必要な情報を入力し、「Save」をクリック。(権限は Read, Write 両方にチェックを付けて下さい)
  5. 表示された文字列をコピーしておく(一度しか表示されないので注意)

チーム名

https://[team].esa.io/ の [team] の部分ですね。

登録方法

[Preference -> Package Settings -> Chick -> Settings - User] をクリックしてファイルを開きます。
そこに下記のように記載し保存します。

{
  "token": "", // アクセストークンの文字列を入力
  "team": ""   // チーム名を入力
}

利用方法

コマンドパレットから

  • Chick: Create Document (Save as WIP)
  • Chick: Create Document (Ship It!)

を選択します。
画面下に入力欄が表示されます。
投稿するドキュメントのタイトルを入力してください。

f:id:Satoh_D:20161210190242p:plain

esa.ioで普段入力するように「hoge/foo #bar」の様な入力が可能です。
入力後、Enterキーを押すことで現在開いているファイルがesa.ioに投稿されます。 投稿後はステータスバーに記事のURLが表示されます。
表示されたURLはクリップボードにコピーされていますので、ブラウザのアドレスバーにURLをペーストすることで記事を表示できるようにもなっています。

f:id:Satoh_D:20161210190253p:plain

f:id:Satoh_D:20161210190303p:plain

現在は投稿しか作っていませんが、

  • 記事の検索
  • 記事のロード/編集
  • 記事の削除
  • WIP -> Shipped, Shipped -> WIPへの切り替え

等も作って行く予定です。

最後に

今回は機能的に近かったこともあり condemil/Gist を参考にさせてもらいました。
Pythonはソースが読みやすくていいですね、Python好きです。

ひっさびさにやるSublime Textのパッケージづくり楽しかった。
バグ等有りましたらIssueにお願いします。

Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ

Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ

Swimava マカロンバスを買ってみた

子供を風呂に入れるとき浴槽に抱いて入っているのですが、 浴槽が深くて手が離せずベビーバスの購入を考えていました。
ただ、風呂場のサイズ的にベビーバスだと大きするのと置き場所に困るので中々手が出せませんでした...。

この「Swimava マカロンバス」はビニール製で空気を入れて使うので、未使用時はたためるということと
サイズもベビーバスよりは場所を取らないということなので購入。
元々Swimavaは首に巻くタイプの浮き輪を持っているということもあり、信用できるものだという安心感も後押しとなりました。

首に巻くタイプはこれ↓

未使用時の小ささすごい

実際に売っている店舗が周りに少なかったことと、
通販だとオマケがついてくるということもあり今回はAmazonにて購入。
届いて開封したところ、小ささにびっくり。

直径20cmほどのバッグに空気入れと一緒に入っており、収納には困らなそう。
見た目も可愛らしいので、ギフトにも良いかもしれません。

f:id:Satoh_D:20161210014357j:plain

溺れる心配もなさそうな絶妙なサイズ

付属の空気入れで5分もかからずに膨らませることが出来ました。
膨らんだときは大体直径が50cm、高さが30cmほどになります。

f:id:Satoh_D:20161210014411j:plain

生後0ヶ月から使うことも出来る、と謳っていることもあり首が座ったばかりの子供でも問題なく入ることが出来ました。
ちょうど首が縁で支えられるので、いちいち手で支える心配はなさそうです。
直径的に足が伸ばすことが出来ないので、足が壁に届かず滑り落ちる心配もなく、安心して見ていられました。

これがあれば1人で子供をお風呂に入れなきゃいけないとき、
子供の体を洗って一旦お風呂から上げる→急いで自分の体を洗う→お風呂から上がって子供に服を着せる...なんてことも無くなりそうですね。

冬はお風呂に夏は水浴びにと様々なことにも使え、
成長してサイズ的にきつくなった後はおもちゃ箱としても使えるので長い間活躍してくれそうです。
これで約4,000円はコスパ良すぎなのでは...!

今度から出産祝いやお子さんがいる家庭へのプレゼントにこれ送るのは非常にアリなのでは...と思いました。
とてもおすすめなので是非機会があればご検討下さいませ。