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

なめらかなラクガキ

駆け出しエンジニアが興味を持ったことを落書くブログです。

「本気の失敗には価値がある」 by 宇宙兄弟

Precept

漫画「宇宙兄弟」より。

失敗することに価値があるわけではなく、それが本気の失敗だから価値がある。

失敗に関する言葉は多いですが、自分なりの失敗哲学を持って生きたい。

「科学って呼んでるだけだ……!」 by Dr.STONE

Precept

漫画「Dr.STONE」第2話より。

科学があって現象があるのではなく、現象があって科学がある。

シンプルで強い言葉だと思います。

Rails環境構築 on Mac

Development Env.

本記事の目的

Rails 4.2 チュートリアルのためにローカルに環境を作ろうとしたら、 いろいろ調べたいことがあったので、備忘録として簡単にまとめておきたいと思います。

方針

  • Ruby のバージョン管理にはrbenv を使用
  • rbenv のインストールはHomebrew 経由
  • bundler 以外のgem は プロジェクトフォルダへローカルインストール

方針補足

3つ目のローカルインストールは、以下のようなメリデメがあります。

 メリット

  • 複数プロジェクトが共存してもGemを管理しやすい
  • プロジェクトフォルダを削除するだけでRuby環境が初期状態に戻せる

 デメリット

  • rails やrake コマンド実行時にbundle exec を付ける必要がある
  • 1回目のbundle install 実行時に–path vendor/bundle を付ける必要がある

環境

  • OS:Mac OS X EI Capitan 10.11.6
  • Software
    • Homebrew 1.1.11
    • rbenv 1.1.0
    • ruby 2.2.3
    • gem 2.4.5.1
    • rails 4.2.2

構築手順

0. Homebrew のインストール

以前はXcodeのインストールとか必要だったようですが、今は公式に書いてあるコマンドで一発のようです。(未検証)

Homebrew — macOS 用パッケージマネージャー

以下のコマンドでインストール確認できます。

$ brew --version
Homebrew 1.1.11
Homebrew/homebrew-core (git revision 6199; last commit 2017-03-08)

1. rbenv のインストール

Homebrew 経由でrbenv をインストールします。

$ brew update
$ brew install rbenv

その後、rbenv関連のパスを通したりといった初期設定のコマンドを追加します。 パスを通すコマンドを.bash_profile に追加している記事もありましたが、なくても問題ありませんでした。

$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile

最後にインストールを確認します。

$ rbenv -v
rbenv 1.1.0

rbenvインストール補足

なお、Rubyをビルドインするプラグインであるruby-build はrbenv と一緒にインストールされるようです。(未確認)

$ ruby-build --version
ruby-build 20170112

2. Ruby のインストール

MacOSX の初期状態では、Ruby 2.0.0 が入っているようです。

$ ruby -v
2.0.0

以下のコマンドでRuby 2.2.3 をインストールする。

$ rbenv install -v 2.2.3

-vオプションを付けないと、インストールの進捗がわからなくて不安になるので、付けるのがオススメです。

以下のコマンドを実行して、Ruby 2.2.3 が正しくインストールされたかを確認できます。

$ rbenv versions
$ rbenv global 2.2.3
$ ruby -v
ruby 2.2.3p173 (2015-08-18 revision 51636) [x86_64-darwin15]

必要かどうか未検証ですが、ここでopenssl と readline をインストールしました。

$ brew install openssl readline
$ brew list
openssl readline ...

Rubyインストール補足

Ruby のインストール時にopenssl やreadline、libiconv のパス渡しが必要だというサイトもありましたが、私の環境ではなくても動いています。

Rails開発環境の構築(複数バージョン共存可能)(Homebrew編) - Qiita

また、rbenv rehash はrbenv が最新だと不要だということで、なしでやりましたが大丈夫でした。

rbenvでrehashがいらなくなった – bgbgbg

3. SSL証明書のダウンロード

今の状態だと bundle install コマンドなどでSSL通信をしようとするとエラーになるため、SSL証明書をダウンロードする必要があります。

まず、証明書のパスを確認します。

$ ruby -ropenssl -e "p OpenSSL::X509::DEFAULT_CERT_FILE"
/usr/local/etc/openssl/cert.pem

確認したパスに証明書をダウンロードして完了です。

$ sudo curl "https://curl.haxx.se/ca/cacert.pem" -o /usr/local/etc/openssl/cert.pem

証明書はファイルサイズがそこそこあるので、ちゃんとダウンロードできたかを確認したい場合は、 cat コマンドではなくVimなどのエディタで確認するのがおすすめです。

$ vim /usr/local/etc/openssl/cert.pem
##
## Bundle of CA Root Certificates
##
## Certificate data from Mozilla as of: Wed Jan 18 04:12:05 2017 GMT
##
## This is a bundle of X.509 certificates of public Certificate Authorities
(以下省略)

4. bundler のインストール

今回はgem の中でbundler のみグローバルインストールします。

$ gem install bundler
$ gem which bundler
/Users/macuser/.rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/bundler-1.14.6/lib/bundler.rb

なお、gem install の前にrbenv exec を付けているサイトもありましたが、付けなくてもrbenv 管理下gem が実行されるので、なくて問題ありませんでした。

$ which gem
/Users/macuser/.rbenv/shims/gem

新しいRailsプロジェクトを作る

1. プロジェクトフォルダを作る

通常はここでrails new を実行しますが、 今回はRails もプロジェクトフォルダ内にローカルインストールするため、まだrails コマンドが使えません。

$ rails -v
Rails is not currently installed on this system. To get the latest version, simply type:

    $ sudo gem install rails

You can then rerun your "rails" command.

そこで先にプロジェクトファイルを作って移動します。

$ cd
$ mkdir workspace
$ cd workspace
$ mkdir hello-app
$ cd hello-app
$ pwd
/Users/macuser/workspace/hello-app

2. bundler 経由でRails をインストール

プロジェクトフォルダ内にGemfile を作ってRails をインストールします。

$ bundle init
$ vim Gemfile
# frozen_string_literal: true
source "https://rubygems.org"

gem "rails", "4.2.2"
$ bundle install --path vendor/bundle

path を指定することで、指定されたパスにGemfile に記載されたgem がインストールされます。

なお、この後のbundle update (またはinstall)ではpath指定は不要です。 一度パス指定をすると .bundle/config ファイルにgem のインストール先が記録されます。

これでRails がインストールされたことが確認できます。

$ bundle exec rails -v
Rails 4.2.2

bundle exec を付けることでbundler が管理しているgem を使ってコマンドを実行することができます。

ローカルインストール補足

ここまでの状態を確認するとローカルインストールについて理解が深まりました。

$ rails -v
Rails is not currently installed on this system. To get the latest version, simply type:

    $ sudo gem install rails

You can then rerun your "rails" command.

Rails のgem はbundler が管理しているので、Rails のインストール前と結果は変わりません。

$ gem list

bigdecimal (1.2.6)
bundler (1.14.6)
io-console (0.4.3)
json (1.8.1)
minitest (5.4.3)
power_assert (0.2.2)
psych (2.0.8)
rake (10.4.2)
rdoc (4.2.0)
test-unit (3.0.8)

同じように、rbenv が管理しているRuby 2.2.3 にはRails が入っていないことがわかります。

プロジェクトフォルダ内にローカルインストールされているgem は以下のいずれかのコマンドで確認できます。

$ bundle exec gem list
$ bundle list

3. プロジェクトフォルダをRails new する

ここまで来てやっとRails new を実行します。

$ pwd
/Users/macuser/workspace/hello-app
$ bundle exec rails new .

Gemfile の上書き確認はy -> [Enter] で続行できます。

プロジェクトフォルダはカレントディレクトリ(.) を指定します。 これでhello-app フォルダがRails プロジェクトフォルダになります。

この時、–skip-bundle をしないとgem がグローバルインストールになってしまうようと記載しているサイトもありましたが、 私の環境ではbundle init の時点でgem のインストール先設定が書いてある.bundle/config ファイルがあったので、なくても問題ありませんでした。

$ cat .bundle/config
---
BUNDLE_PATH: "vendor/bundle"
BUNDLE_DISABLE_SHARED_GEMS: "true"

4. .gitignore の設定

gem ファイルが全てvendor/bundle 配下に入っているので、このままだと大量のgem ファイルがgit 管理下に置かれてしまいます。

以下のコマンドを実行して、vendor/bundle をgit 管理外に設定します。

$ git config --global core.excludesfile ~/.gitignore_global
$ echo '/vendor/bundle' > ~/.gitignore_global

5. 動作確認

$ bundle exec rails s

http://localhost:3000 へアクセスして初期画面が表示されれば成功です。

f:id:sho-ezawa-dev:20170315190236p:plain

既存のプロジェクトに参加する

  1. ローカルにclone する
  2. Ruby のバージョンを合わせる
  3. gem をローカルインストールする

※力尽きたので手順のみメモ

おまけ

どこまでやったか分からなくなったのでやり直したい

以下のコマンドでrubyおよびそのgemを一掃して、rbenv インストール後からやり直せます。

$ rbenv global system
$ ruby -v
2.0.0
$ rbenv uninstall 2.2.3

参考

rbenvつかってrailsチュートリアルやってみよう! | niwatako$

Rails開発環境の構築(複数バージョン共存可能)(Homebrew編) - Qiita

rbenvおよびbundlerの基本的な使用方法 - Qoosky

複数バージョン共存可能なRails環境の構築 - Blowin' in the Wind

Bundler概要 - Qiita

bundle exec について詳しく調べてみた - しめ鯖日記

「まず隗より始めよ」 by 中国の故事

Precept

まず隗より始めよ  
中国の故事

会社の大先輩がよく口にしていた言葉。最近以下の記事で見つけて思い出しました。

medium.com

解説

「隗」とは、中国の戦国時代の人物、郭隗のこと。
どうすれば賢者を招くことができるかと燕の昭王に問われたときに郭隗が、「まず私のような凡人を優遇することから始めて下さい。そうすれば優秀な人材が集まってくるでしょう」と言ったという、『戦国策・燕』にある故事に基づく。
「隗より始めよ」「賢を招くには隗より始めよ」とも。

※解説は 先ず隗より始めよ - 故事ことわざ辞典 より引用

感想

人事の採用でも同じく社内にいる優秀な人材を高く評価することで、 より優秀な人材を採用できるチャンスが生まれるという例で紹介されていました。

転職先を探している際に、優秀なエンジニアの方がいる会社は大変魅力的でしたが、そのエンジニアの方があまりよい待遇ではないと知ったときは、「あんなに優秀な方があの程度の待遇ならば、自分は果たして生活していけるのだろうか?」と疑問に思うことが多々ありました。

特にベンチャーは立ち上げ初期の資金が潤沢ではない時期に、優秀なエンジニアが低待遇でも協力してもらえることが多く、そのままの勢いで成長期を迎えてしまうと優秀なエンジニアが採用できずに悩むことが多いと聞いたことがあります。

「まず隗より始めよ」の故事に習うことで、改善される採用問題もあるように思います。

おまけ

この故事では、馬の骨を大金で買ってきた側近の話も紹介されています。 こちらも大変面白い話なので、おまけで載せておきたいと思います。

「昔の君主で、千金(もの大金)を側近に持たせて、千里の馬を買いに行かせた方がいました。(ところがその側近は)死んだ馬の骨を五百金で買って帰ってきたのです。
君主は怒りました。その側近が言うことには、
 
『死んだ馬の骨でさえ、(我々は五百金もの大金を出して)買ったのです。生きている馬ならなおさら高く買うに違いない(と周りの人は思うはずです。)千里の馬はすぐにもやってくるでしょう。』
 
一年もたたないうちに千里の馬が三頭やってきました。王様がどうしても賢者を招き入れたいとお考えならば、まずはこの隗から始めてください。(そうすれば、)この隗よりも賢い者がどうして、千里の道を遠いと思うでしょうか(いや遠いとは思わずに遠方からこの国に仕官しにやってくるはずです)。」と

※おまけは 『先従隗始/先づ隗より始めよ』(燕人立太子平為君〜)書き下し文・現代語訳・口語訳と文法解説 / 漢文 by 走るメロス |マナペディア| より引用

Webデザインの勉強が捗る参考書

Web Design

参考書で学ぶWebデザイン

この2週間、独学でWebデザインを学んだので、そのときに読んだ本を紹介したいと思います。

これからWebデザインを学ぶ人の参考になれば幸いです。

ちなみに、Webデザインで使うツールに関する本は含んでいません。 あくまで「デザインをどう考えるか」という点にフォーカスしている本をチョイスしています。 そのため、Webデザインに関する本だけではなく、Webじゃないデザインの本が多いです。

紹介方法

個人的なオススメ度別に以下の3項目で感想をまとめています。

入門者向け:専門用語の量や基本の説明にかけているページ数
読みやすさ:構成や文字量、サンプルイメージのわかりやすさ
ボリューム:読み切りやすいボリューム感か


目次

  • オススメ度 ★★★★★
    • ノンデザイナーズ・デザインブック
    • デザイン入門教室[特別講義]
    • なるほどデザイン
  • オススメ度 ★★★★☆
    • いちばんよくわかるWebデザインの基本きちんと入門
    • デザインの組み方 見てわかるレイアウトの新ルール
  • オススメ度 ★★★☆☆
    • ウェブデザイン&レイアウトの見本帳
    • ウェブデザイン&配色の見本帳
  • オススメ度 ★★☆☆☆
    • だから、そのデザインはダメなんだ。 WebサイトのUI設計・情報デザイン 良い・悪いが比べてわかる
    • UIデザインの心理学

オススメ度 ★★★★★

ノンデザイナーズ・デザインブック

入門者向け:★★★★★
読みやすさ:★★★★☆
ボリューム:★★★★★

デザインに関する4つの基本原則をじっくり解説している良書。

専門用語の量がかなり少なく、基本原則の解説にかなりのページを割いているので、入門者でもスラスラ読めました。

細かなテクニックはかなり削ぎ落とされている印象で、シンプルで分かりやすい構成になっています。 文字の量は比較的多いですが、解説図が多いのであまり文字を読まなくても理解できました。

ボリュームも色の章を合わせても100ページ程度と手頃な量でした。

デザイン入門教室[特別講義]

入門者向け:★★★★★
読みやすさ:★★★★★
ボリューム:★★★★☆

ノンデザイナーズ・デザインブックの次に読みたいデザイン入門書。

入門者が知りたい情報がかなり網羅的に書いてあり、基本原則を知った後に読んだことで、 より基礎知識を強化しつつより実践的な知識も補強できました。

ノンデザイナーズ・デザインブックに比べて解説図がかなり多く、活字がやや苦手な私でも短時間で理解できました。

ただし、網羅的な分だけボリュームが多く、適度なチャプターで区切って読みたい。

なるほどデザイン

入門者向け:★★★★☆
読みやすさ:★★★★★
ボリューム:★★★★★

サブタイトル通りの「目で見て楽しむデザインの本。」

とにかくパッと見て分かるような工夫がふんだんに含まれていて読みやすい! その分細かな解説は少なめなので、2冊目に最適な本だと思いました。

デザインの本としては珍しく小さめの本で、読破しやすいボリュームでした。

オススメ度 ★★★★☆

いちばんよくわかるWebデザインの基本きちんと入門

入門者向け:★★★★☆
読みやすさ:★★★★☆
ボリューム:★★★★☆

Webデザインのことはこの一冊で分かると言っても過言ではない入門書。

Webデザインの入門者が知っておきたい知識がかなり広範囲に紹介されています。 Webデザインにターゲットを絞っているため、先にWebじゃないデザインの入門書を読んでから読むのがおすすめです。

解説→具体例の順で構成されていて、わかりやすく読みやすかったです。

広範囲に紹介されている分、かなりのボリュームなので読み切るには少し根気がいるかもしれません。

デザインの組み方 見てわかるレイアウトの新ルール

入門者向け:★★★☆☆
読みやすさ:★★★★★
ボリューム:★★★★★

デザインを◯☓で紹介されているシンプルな本。

入門書を読んだあとに、「もっと実例が見たい!」という方向けだと思います。

とにかくシンプルな構成で読みやすく、メインコンテンツは130ページ程度と読み切りやすい量です。

オススメ度 ★★★☆☆

ウェブデザイン&レイアウトの見本帳

入門者向け:★★★☆☆
読みやすさ:★★★☆☆
ボリューム:★★★★☆

レイアウトを中心にした見本帳。

学んだ基礎を定着させるのに自分で考えてみるのに良いと思います。

複雑な構成ではないのですが、見本帳という今まで読んだ本と違う形式だったせいか、やや読むのに時間がかかりました。

ウェブデザイン&配色の見本帳

入門者向け:★★★☆☆
読みやすさ:★★★☆☆
ボリューム:★★★★☆

配色にフォーカスしたバージョンの見本帳。

配色に関する解説は他の入門書でもありますが、私は今ひとつ配色に自信がなかったので補強として読みました。

さまざまな実例を見て、配色の意図を考える癖をつけるのに最適な本だと思います。

オススメ度 ★★☆☆☆

個人的にはちょっと読みづらかった本。内容の善し悪しではないのであしからず。

だから、そのデザインはダメなんだ。 WebサイトのUI設計・情報デザイン 良い・悪いが比べてわかる

入門者向け:★☆☆☆☆
読みやすさ:★★★☆☆
ボリューム:★★★☆☆

Webデザインの実務経験がないためか、今ひとつピンと来なかった本。

よく見かけるUIパターンのデメリットなども紹介されていたので、また別の機会に覗いてみたい。

UIデザインの心理学

入門者向け:★☆☆☆☆
読みやすさ:★★☆☆☆
ボリューム:★★☆☆☆

なんちゃって理系の私にはちょっと過ぎました。

もしかしてちゃんと理系出身者の方が読んだら分かりやすいかもしれません。

まとめ

デザインに関する本はとても充実していて、とても楽しく読みふけりました。

基礎知識はかなり得たと思いますので、次はツールの使い方と基礎技術を体で覚えたいと考えています。

違和感のあるデザインの原因は?

Web Design

リチャード・ワイズマンの動画

以下の動画は、説明なしで観た方が楽しめます。 なお、無音でも視聴可能な内容です。





この動画は、イギリスの心理学者 リチャード・ワイズマンが作ったものです。 人が持つ経験や知識を逆手にとって、遠近感や大きさの感覚を騙すことに成功しています。

このように、人は知識や経験による先入観を持つことがよくあります。

デザインにおける先入観の利用

デザインにおいては、この先入観を利用して、ものの距離感や大きさを表現することもできます。

一例として、山が見える風景写真では、遠い山が薄い色で、近い山が濃い色で見えます。

f:id:sho-ezawa-dev:20170308170446j:plain

これを利用すると、色の濃淡でイラスト内での距離感を表現することができます。

f:id:sho-ezawa-dev:20170308170708j:plain

逆に近い山を薄く、遠い山を濃くするなど、ユーザーが持つ経験や知識に反する表現すると、 ユーザーによっては違和感を感じてしまう可能性があります。

f:id:sho-ezawa-dev:20170308170923j:plain

まとめ

ユーザーが持つ先入観に逆らわないようにデザインするのが基本です。

おまけ

最初の動画を作ったリチャード・ワイズマンはデザインの専門家ではなく心理学者で、超常現象を疑問視する研究でも有名な方です。

今回の動画も先入観での見え方の違いを通して、超常現象への疑問を提起しています。

RubyでSSL証明書エラーが発生する場合の対処法

Development Env.

エラー

ターミナルから以下のコマンドを実行すると、

$ rbenv exec gem install bundler

SSL証明書のエラーが出る。(改行は編集で追加したものです。)

/Users/hoge/.rbenv/versions/2.0.0-p195/lib/ruby/2.0.0/net/http.rb:918:
  in `connect': SSL_connect
  returned=1 errno=0 state=SSLv3
  read server certificate B:
  certificate verify failed (Twitter::Error::ClientError)

環境

  • OS:Mac OS X EI Capitan 10.11.6
  • Software
    • rbenv 1.1.0
    • ruby 2.3.0
    • gem 2.5.1
    • curl 7.43.0

対処法

SSL証明書のセットアップが必要

1. 証明書のパスを確認する。

$ ruby -ropenssl -e "p OpenSSL::X509::DEFAULT_CERT_FILE"
/usr/local/bin/openssl/cert.pem

2. 証明書をダウンロードする。

ここでちょっと落とし穴。

参照したサイトには、

$ sudo curl "http://curl.haxx.se/ca/cacert.pem" -o /usr/local/etc/openssl/cert.pem

と書かれていたので実行したが、SSL証明書エラーが消えない。

ダウンロードした証明書の内容を確認してみると、

$ cat /usr/local/etc/openssl/cert.pem
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>301 Moved Permanently</title>
</head><body>
<h1>Moved Permanently</h1>
<p>The document has moved <a href="https://curl.haxx.se/ca/cacert.pem">here</a>.</p>
<hr>
<address>Apache Server at curl.haxx.se Port 80</address>
</body></html>

どうやら、ダウンロード元のURLが変わっているようでした。

旧:http://curl.haxx.se/ca/cacert.pem
新:https://curl.haxx.se/ca/cacert.pem
※2017/03/08時点

コマンド内のURLを変更して再度実行。

$ sudo curl "https://curl.haxx.se/ca/cacert.pem" -o /usr/local/etc/openssl/cert.pem

SSL証明書の確認

今度はちゃんとダウンロードされていました。

$ cat /usr/local/etc/openssl/cert.pem
##
## Bundle of CA Root Certificates
##
## Certificate data from Mozilla as of: Wed Jan 18 04:12:05 2017 GMT
##
## This is a bundle of X.509 certificates of public Certificate Authorities
## (CA). These were automatically extracted from Mozilla's root certificates
## file (certdata.txt).  This file can be found in the mozilla source tree:
## https://hg.mozilla.org/releases/mozilla-release/raw-file/default/security/nss/lib/ckfw/builtins/certdata.txt
##
## It contains the certificates in PEM format and therefore
## can be directly used with curl / libcurl / php_curl, or with
## an Apache+mod_ssl webserver for SSL client authentication.
## Just configure this file as the SSLCACertificateFile.
##
## Conversion done with mk-ca-bundle.pl version 1.27.
## SHA256: dffa79e6aa993f558e82884abf7bb54bf440ab66ee91d82a27a627f6f2a4ace4
##


GlobalSign Root CA
==================
-----BEGIN CERTIFICATE-----

(以下省略)

参考

qiita.com