ogaaryo's ReadMe

作業効率化、開発、マネジメント、ツールなどの情報を発信中

Rails環境をセットアップした後に必ず導入すべきツールを紹介！

Rails学習

https://i.gyazo.com/490968c8908db253fbfab1d5a9e9f971.png

Railsの環境をセットアップが終わった後に次に開発を効率的に行っていくツールを導入する必要があります。ここでいうセットアップが終わっている状態は以下の記事で紹介している手順を全て完了している状態なので、まだこちらの記事をお読みになっていない方はまずはこちらからご覧ください。

www.ogaaryo.com

開発ツールを整えるとは？

開発の環境は整いましたが、何もツールを入れないと開発が非常に非効率になってしまいます。各種ツールを導入することによって、開発効率が圧倒的に上がります。ただし、一部有料なものもありますので、まずは導入を検討してみるところから始めて見てください。

RubyMine

https://i.gyazo.com/1f3de4b14367b8fd4ca0ce833e234dea.png

JetBrain社が販売している有料のRailsの統合開発環境(IDE)です。Railsを開発する際には、Ruby、HTML、CSS、Javascriptなど複数の言語を触る必要があります。RubyMineはRailsを開発する上で必要な様々な言語の開発を行う上で作業効率を大きく向上してくれるサポート機能を多く搭載しています。多少カスタマイズが必要な側面があり、値段も年間で約1万円ぐらいかかってしまうことが難点ですが、導入を検討してみてはいかがでしょうか。

以下からインストールして頂けますと、割引価格でご購入頂けますのでご検討ください。

ご購入はこちら

RubyMineのショートカットのカスタマイズについては以下をご確認下さい。

http://ogaaryo.hatenablog.com/entry/2018/08/04/145150ogaaryo.hatenablog.com

Sequel Pro

https://i.gyazo.com/d392dc722d6cbfe381a9462365d165c6.png

データベースを操作しやすくするツールです。Railsに限らずmacで開発を行っている人はほぼ必須のツールと言えます。無料なのでまだ導入していない方は是非導入を検討してください！

Sequel Pro

Google Chrome

Webサービスを開発していく上では、ブラウザの機能を使って開発していくことが多いので、どのブラウザで開発を進めていくが重要になります。Chromeを普段から使っている方も多く既に導入されている方も多いと思いますが、まだ導入していない方は必ず導入を検討してください。

www.google.co.jp

EverNote

実際の開発を行っていく際に、覚えることや反復して使用しなければならないことが多くります。その際にWeb上の情報をリファレンスとして使用することになるのですが、どのサイトに書いてあった情報なのかを毎回探すのは非常に非効率です。そこで私は自分が使用したWebの情報を全てEvernoteに保存すつようにしています。EverNoteの良い点としては、検索機能にあります。昔使用した方法や概念を素早く検索し実行することができるので、大変おすすめです！

evernote.com

Sublime Text

テキストエディタは多くありますので、ご自身が使いやすいもので良いと思いますがおすすめはSublimeTextです。

SublimeTextには色々な拡張機能を付けることができるので、ご自身の使いやすいものにどんどん機能を追加していけると、より一層効果的になると思います！

Download - Sublime Text

最後に

実際の開発を行っていくにあたり、まずは上記のツールが揃っているかいないかで、開発効率は圧倒的に違っていきます。似たようなツールは他にも多くあると思うのでご自身が使いやすものを探して実際に使ってみて感触を試してみてください！

Rails5でpublicディレクトリに配置したファイルが表示されない場合の対処方法

Rails学習

Rails5にてpublicディレクトリに配置した画像が表示されない場合の対処方法としては、以下を試してみてください。

動作確認環境

rails: 5.2.0.rc2

enviroments/production.rbを記載方法を変更する

デフォルト

config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?

修正後

  config.public_file_server.enabled = true

この変更によってpublicディレクトリに配置したファイルを確認することができるようになると思います。nginxなどのwebサーバー側の設定でも対応できそうでした、できる限りコードで完結させたかったのでこの方法で対応しました。

【初心者でも簡単】macにRails5環境をセットアップして起動できるまでの手順を解説

Rails学習

https://i.gyazo.com/490968c8908db253fbfab1d5a9e9f971.png

macでRails5環境をセットアップしする手順を紹介します。各種バージョンは実際に使用して安定することを確認しているので、安定的に使用することができると思います。また、便宜上macのローカルに直接セットアップしていますが、仮想環境に構築したい場合には適宜読み替えてセットアップをしてください。それでは手順を紹介していきます。

各種バージョン

以下が今回構築するバージョンです。

ruby：2.4.4
Rails：5.2.0.rc2
mysql：5.6
mac：10.12.6
※high sierraでも動作確認済です

事前準備

Rails環境をセットアップする前に必要な準備を整えます

finderの不可視ファイルを表示する

デフォルトの設定ではfinderに表示されない.~~という形式のファイルを表示できるように設定します

1.不可視ファイルを表示するコマンドを実行

$ defaults write com.apple.finder AppleShowAllFiles TRUE

2.finderを終了するコマンドを実行

$ killall Finder

再度、Finderを開くと、隠しフォルダ・隠しファイルが表示されるようになります

必要なライブラリのインストール

rails環境を構築するために必要な各種ソフトウェアをインストールしていきます。

Xcodeのインストール

XcodeをAppstoreからダウンロードします

※ダウンロードはかなり時間がかかるので気長に待ちましょう

Command Line Toolsをインストール

  1. Xcodeを起動
  2. XcodeメニューからPreferencesを選択
  3. GeneralパネルでDownloadsをクリック
  4. DownloadsウィンドウでComponentsタブを選択
  5. Command Line Toolsの横のInstallボタンをクリック

※バーションによってGeneralパネルにDownloadsが表示されない場合があるので、その場合には次の手順に進んでください

iterm2のインストール

iterm2をインストールしておきましょう

www.iterm2.com

Homebrewをインストール

1.コマンドライン・デベロッパ・ツールのインストール：下記コマンドをitermで実行

$ xcode-select --install

2.以下のような表示がでる場合にはインストールをクリックしてコマンドラインツールをインストールする https://i.gyazo.com/f064144b8856493df3b4e56912765c59.png 3. Homebrewをインストール

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

※インストール中にpasswordを求められる場合には、pcのロックを解除する時と同じパスワードを入力する 2.正常にインストールされていることを確認

 $ brew doctor

※Your system is ready to brew.と表示されればOK

fish shellを導入しましょう

  1. 以下コマンドを実行してインストール
$ brew install fish
  1. 以下コマンドを実行して、versionが表示されればインストールOK
$ fish -v
  1. デフォルトのshellをfishに変更します 3-1. 以下コマンドを実行してvimを起動し、shellの設定ファイルを書き換える準備をします
$ sudo vi /etc/shells

3-2. キーボードのiキーを入力してインサートモードに切り替え、ファイル末尾に/usr/local/bin/fishを追記します。 3-3. キーボードのescキーを入力し、:キー、キーボードのwq!と入力して保存します 3-4. 再度、以下のコマンドを入力してから正しく保存されていることを確認します。

$ sudo vi /etc/shells

※vimを使った操作を行っていますので、vimの入力方法がわらかない方はまずはvimについて調べてもらえると上記の操作の意味が理解できると思います。 3-5. 以下のコマンドを実行

$ chsh -s /usr/local/bin/fish
  1. fishermanというプラグインマネージャーをインストールします 4-1. 以下のコマンドを実行
$ curl -Lo ~/.config/fish/functions/fisher.fish --create-dirs git.io/fisher

4-2. itermを終了します※ここで終了しないと以降のコマンドでエラーとなります。(shellがfishに切り替わっていないため) 4-3. 以下のコマンドを実行してバーションが表示されればインストールOK

$ fisher -v

4-4. 設定ファイルを追加します

$ touch ~/.config/fish/config.fish

4-5. iterm2のデフォルトshellをfishに変更 /usr/local/bin/fish

https://i.gyazo.com/a2db4211902054e9d81467debccab8ba.png

4-6. オートコンプリートを有効にする 以下を実行

fish_update_completions

4-7. iterm2の日付を非表示にする

$ set -U theme_display_date no 
$ set -U theme_display_cmd_duration no

4-8. iterm2のcommand+→と←の割当を変更する preferences>keysで以下のように変更

⌘←  "SEND HEX CODE"      0x01 
⌘→  "SEND HEX CODE"      0x05
  1. テーマなどをカスタマイズしていきます※必須ではありません 5-1. powerline/fontsのインストール
$ fisher add oh-my-fish/theme-bobthefish
$ git clone https://github.com/powerline/fonts.git
$ cd fonts
$ ./install.sh
# プロジェクトフォルダはもう不要のため削除
$ cd ../
$ rm -rf fonts

5−2. iterm2にカラーコードをインポートする

$ git clone https://github.com/dracula/iterm.git
$ cd iterm
$ open ./iterm/Dracula.itermcolors

5-2. iterm2でカラーとフォントを以下のように設定する color：preferences>profiles>color>color presetsでdraculaに変更 text：preferences>profiles>text>font>Source Code Pro for Power..

  1. fishのテーマを変更する
$  fisher add hauleth/agnoster

tigをインストール

以下を実行

$ brew install tig

peco+pecopluginをインストール

  1. 以下を実行
$ brew install peco
$ fisher add oh-my-fish/plugin-peco
  1. ~/.config/fish/config.fishに以下を追記
function fish_user_key_bindings
  bind \cr 'peco_select_history (commandline -b)'
end

zをインストール

以下を実行

$ fisher add jethrokuan/z

rbenvをインストール

1.rbenvをインストールします

$ brew install rbenv
  1. initを実行
$ rbenv init

3.~/.config/fish/config.fishに以下を追記

status --is-interactive; and source (rbenv init -|psub)

4.設定反映

$ source ~/.config/fish/config.fish

(保留※一旦この手順はスキップ)rbenvにパスを通します

$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi' >> ~/.bash_profile

※bash_profileを作成していない方は別途作成してください

3.ruby-buildをインストールします

$ brew install ruby-build
$ brew install rbenv-gemset

4.rbenvの更新

$ rm -rf ~/.rbenv/plugins/ruby-build
$ git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build

rbenvを使用してRubyをインストール

1.Rubyをインストール

$ rbenv install 2.4.4

2.リハッシュ

$ rbenv rehash

3.Globalのrubyのバージョンを指定

$ rbenv global 2.4.4

Gitをインストール

$ brew install git

GitHubのアカウントを登録

  1. GitHubにアクセス
  2. ユーザ名とメールアドレス、パスワードを入力して、アカウント登録を行う
  3. 無料で使えるFreeプラン「Free」を選んでから「Finish sign up」ボタンをクリック
  4. 登録したアドレスに認証のメールが届き、メールの内容に従いユーザ認証を行う

MySQLをバージョン指定してインストールする（バージョン 5.6）

Homebrewを使用してMySqlをインストールした場合、デフォルトでは最新のバージョン(記事作成当時はバージョン8)がインストールされてしまうため、MySQLのバージョンを指定してインストールする方法を紹介しています。

1.homebrewでmysqlのバージョンを検索

$ brew search mysql

==> Formulae
automysqlbackup             mysql-connector-c    mysql@5.5
mysql ✔                    mysql-connector-c++   mysql@5.6
mysql++                    mysql-sandbox          mysql@5.7
mysql-client               mysql-search-replace   mysqltuner
mysql-cluster              mysql-utilities

上記のようにmysql@5.6 が見つかります

2.MySQL5.6のインストール

$ brew install mysql@5.6

<fishの場合> 3.~/.config/fish/config.fishにMySQL5.6のパスを通す

set PATH /usr/local/opt/mysql@5.6/bin $PATH
set DYLD_LIBRARY_PATH /usr/local/opt/mysql@5.6/ $DYLD_LIBRARY_PATH

4.設定反映

$ source ~/.config/fish/config.fish
  1. パスが通っていることを確認する
$ echo $PATH
$ echo $DYLD_LIBRARY_PATH

<bashの場合> 3..bash_profileにMySQL5.6のパスを通す

.bash_profileに以下を追記してMySQL5.6のパスを通します

export PATH="/usr/local/opt/mysql@5.6/bin:$PATH"
export DYLD_LIBRARY_PATH=/usr/local/opt/mysql@5.6/:${DYLD_LIBRARY_PATH}

bash_profileの設定を反映させる

$ source ~/.bash_profile

4.MySQLサーバーの起動

$ mysql.server start

5.セキュリティ設定を行う

$ mysql_secure_installation

色々質問されますが、基本的には'y'(YES)で答えてOK
パスワードを聞かれた時はとりあえずrootでOK

6.ルート権限でmysqlにログインする

$ mysql -u root -proot

※ルートにパスワードを設定していない場合には以下でログイン

$ mysql -u root -p

7.MySQLのユーザーに権限を割り当てる

mysqlにログインした状態で以下を実行します

mysql > GRANT ALL PRIVILEGES ON [DB名].[テーブル名 ] TO [ユーザー名] IDENTIFIED BY ‘[パスワード]’;

以下具体例です。

mysql > GRANT ALL PRIVILEGES ON sample_development.* TO root IDENTIFIED BY ‘root’;

この例だとrootユーザーに対してsample_developmentという名前のデータベースのテーブル全ての権限を割り当てています。パスワードはrootです。
※本来的にはユーザーを分けて権限を振り分けることが良いのですが、rootに権限を与えても問題になるケースは少ないと思います。

8.権限を割り当てたユーザーでMySQLへログインし直す

mysql > exit
$ mysql -u [割り当てたユーザー] -p[パスワード];
$ mysql -u root -proot;

↑pとパスワードの間に空白が入らないことに注意

9.権限を割り当てたデータベースを作成する

mysql >  CREATE DATABASE [権限を割り当てたデータベース名];
mysql >  CREATE DATABASE sample_development;

10.データベースが正しく作成されているかを確認する

mysql >  SHOW DATABASES;

9で作成したデータベースが表示されていればMySQLのセットアップは完了です

  1. (補足)pcをシャットダウンしても自動でmysqlを起動する設定
$ ln -fs /usr/local/opt/mysql@5.6/homebrew.mxcl.mysql@5.6.plist ~/Library/LaunchAgents/
$ launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mysql@5.6.plist

Railsのセットアップ

bundlerのインストール

$ gem install bundler

bundlerがインストールされていることを確認する

$ bundle -v

※mysql@5.6を使用した際にbundle installでエラーになる場合 以下に該当するかどうかを確認する

github.com

fkmy.hatenablog.com

Railsのインストール

$ gem install rails

アプリケーションを新規作成

アプリケーションを作成したいディレクトリへ移動して、以下のコマンドを実行

$ rails new [YOUR APPLICATION NAME]
$ rails new test_app

database.ymlの修正

database.ymlのdevelopment環境の情報をMySQLのセットアップの時に作成した情報に書き換える

database: [権限を割り当てたデータベース名]
username: [権限を割り当てたユーザー]
password: [権限を割り当てたユーザーのパスワード]
database: sample_development
username: root
password: root

アプリケーションサーバーの起動

アプリケーションを作成したディレクトリで以下のコマンドを実行

$ rails s

最後に

上記の手順を実行することでRailsのアプリケーションが起動できるかと思います。まずはスタートラインに立った状況なので、ここからどうやって開発を進めていくか、最初に何をしなければいけないのかなどはまた違う記事で紹介していきたいと思います。

【現役エンジニアが教える】Google Chromeの作業効率を最大化するショートカット！

https://i.gyazo.com/872dc6f22d57f59d247c0b243122ec4a.jpg

chromeを仕事でもプライベートでも使っている方は多いのではないでしょうか？ショートカットを使いこなすことで、作業効率がぐーんとアップするので是非使って見てください！

新規タブを開く

ショートカット：shift + t

https://i.gyazo.com/50e8bdda6c742f032c926145eaa7fe2b.gif

閉じたタブを開く

ショートカット：shift + command + t

タブを間違って閉じてしまった、、もう一度あのタブを開きたい、、、と思ったことはありませんか？このショートカットを使用することで閉じてしまったタブを開く（復元する）ことができます。

https://i.gyazo.com/ecc58526c99a2fb5f621674ad9f84ada.gif

タブを閉じる

ショートカット：command + w

https://i.gyazo.com/370060e7f921ea105bad50e0674b9d34.gif

タブの左右を移動する

左に移動するショートカット：shift + command + [

右に移動するショートカット：shift + command + ]

https://i.gyazo.com/281ae09d1f108455342149d29884910e.gif

再読込

ショートカット：command + r

https://i.gyazo.com/a43c3427bdbc37751b4786da5f155e5e.gif

ショートカットの覚え方と効果

ショートカットは覚えることが大変ですが、一旦覚えてしまうとPCを使っている時の疲れ方が全く違います。自分が頭で考えてから実際の動作に移るまでのタイムラグが無くな、作業スピードも圧倒的に上がっていくと思うので、チートシートのようなものを作り指がショートカットを覚えるまで実践してみてください！

CircleCiを1.0から2.0にバージョンアップする作業手順｜1.0と2.0の違いも紹介

f:id:ogaaryo:20180731152223p:plain

どうやらCircleCiの1.0が2018年8月31日でサポートが終了するらしいので、遅ればせながら2.0にバージョンアップすることにしました。ここではバージョンアップした際の移行手順を中心に紹介していきたいと思います。

1.0と2.0の違い

2.0になって何が変わったのかを紹介します

実行環境が変わった

1.0 2.0
予め用意された Ubuntu 環境で実行 Dockerコンテナで実行

コンテナの設定をしてやることによって、バージョン違いの解決や依存関係を再度インストールする必要がなくなったので、テスト開始までの時間が短くなりました

最新のDockerを使うことができるようになった

1.0 2.0
CircleCI 独自にカスタムされた古いバージョンの Docker に固定 自分でバージョンアップして最新の Docker を使える

Dockerのバージョンを自分でコントロールすることができるようになったので、より自分たちの環境にフィットした状態を実現することができるようになりました。

Workflowという新しい概念が登場

Workflowとはつまり、ビルド内での処理を分割して管理することができる機能のようです。Workflowにより実行順序が依存しないものを並列で実行することができるようになります。例えばRubocopとRailsBestPracticeによるテストを並列実行できます。Workflowを活用することにより、ビルドの高速化を図ることができます。

移行作業の手順

移行作業はリファレンスとしては Migrating from 1.0 to 2.0 - CircleCI や 2.0 Docs - CircleCI を参考にしています。移行完了までの全体図としてはSunsetting CircleCI 1.0 - CircleCI が最も参考になると思います。

移行完了までの全体の流れ

公式ドキュメントを見ると移行の全体の流れとしては、以下のようになっています。今回はSTEP3までは完了している前提で、STEP4から紹介していきます。

STEP1：新しい.circleci/config.ymlの概要を入手する

まず新しいファイル形式に慣れましょう。ファイル形式のドキュメントは Basics - CircleCI もしくは Webinar: Introduction to .circleci/config.yml - YouTube でキャッチアップすることができます！

STEP2：CircleCi1.0が動いているプロジェクトがあるか確認する

こちらにスクリプトがあるので、確認漏れが発生する可能性がある場合は使用してみましょう。 GitHub - CircleCI-Public/find-circle-yml

STEP3：2.0を稼働させるために新しいブランチを作成する

チームに影響を与えることなく、CircleCI 2.0を構築するために新しいブランチを作成しましょう。

STEP4：トランスレーターを使用して移行を開始しましょう

設定変換機能を使用することで、新しい設定ファイルを作ってみましょう。変換結果を調整する必要はあるものの、最初に設定ファイルを作成するサポートになります。GitHub - CircleCI-Public/circleci-config-generator: Script to generate a basic configuration file for CircleCI 2.0

STEP5：CLIを使用してテストを実行する

CLI（コマンドラインインターフェース）を使用して、テストを実行してきます。実際にCircleCiでビルドを実行して試していくことももちろんできますが、config.ymlの設定などを細かく修正してく際に、毎回実行していくよりも効率的に作業を進めることができます。

トランスレーターの実行手順

  1. GitHub - CircleCI-Public/circleci-config-generator: Script to generate a basic configuration file for CircleCI 2.0 へアクセスします
  2. git cloneを行い cci-config-generator.sh をローカルに落とします
  3. https://circleci.com/account/api でapi tokenを作成しコピーします
  4. cci-config-generator.sh を対象のプロジェクトフォルダへ移動します
  5. chmod +x cci-config-generator.sh を実行します
  6. ./cci-config-generator.sh でシェルを実行します
  7. api tokenを入力します
  8. .circleci/config.yml が作成されます

.circleci/config.ymlの修正ポイント

CircleCi1.0のcircle.ymlが以下のように単純なものだったとしても、トランスレーター実行後に何点か修正が必要になります。

machine:
  timezone:
    タイムゾーンの設定
  ruby:
    rubyバージョンアップの設定
test:
  override:
    - RSpecによるテスト
  pre:
    - Rubocopコマンド
    - RailsBestPracticeコマンド
deployment:
  DPLOYMENT_NAME:
    branch: YOUR_BRANCH
    commands:
      - デプロイコマンド

deploymentが移行されない

CircleCi1.0のdeploymentが以下のようになっていても、トランスレーターでは移行されません。※どうやらworkflowsに記載することが前提になっているため

deployment:
  DPLOYMENT_NAME:
    branch: YOUR_BRANCH
    commands:
      - デプロイコマンド

上記のCircleCi1.0のdeploymentを2.0に対応させるためには以下のように記載する必要があります。

    - add_ssh_keys
    - deploy:
        name: Deploy to staging if branch is develop
        command: |
          if [ "${CIRCLE_BRANCH}" == "master" ]; then
            eval `ssh-agent` && ssh-add ~/.ssh/id_rsa* && bundle exec cap production deploy
          fi

2.0ではbranchを分岐させることができなくなっているため、上記のようにif分岐させる必要があります。また、ssh keyをadd する必要もあります。

CLIでテストを実行する

まず、以下のようにコマンドをインストールします。

$ curl -o /usr/local/bin/circleci https://circle-downloads.s3.amazonaws.com/releases/build_agent_wrapper/circleci && chmod +x /usr/local/bin/circleci
$ circleci update

設定したconfig.ymlの記述形式が正しいかを確認する

$ circleci config validate -c .circleci/config.yml

circleciをlocalで動かしてみる

$ circleci build .circleci/config.yml

config.ymlの完成サンプル

上記の手順を踏むと以下のようになります。ちなみに、CirclCi1.0のymlと2.0が同居していた場合には2.0が優先されるようです。

version: 2
jobs:
  build:
    working_directory: YOUR_WORKING_DIRECTORY
    parallelism: 1
    shell: /bin/bash --login
    environment:
      CIRCLE_ARTIFACTS: /tmp/circleci-artifacts
      CIRCLE_TEST_REPORTS: /tmp/circleci-test-results
    docker:
    - image: circleci/build-image:ubuntu-14.04-XXL-upstart-1189-5614f37
      command: /sbin/init
    steps:
    - checkout
    - run: mkdir -p $CIRCLE_ARTIFACTS $CIRCLE_TEST_REPORTS
    - run:
        working_directory: YOUR_WORKING_DIRECTORY
        command: 'echo ''Asia/Tokyo'' | sudo tee -a /etc/timezone; sudo dpkg-reconfigure
          -f noninteractive tzdata; sudo service mysql restart; sudo service postgresql
          restart; '
    - run:
        working_directory: YOUR_WORKING_DIRECTORY
        command: rm -f YOUR_WORKING_DIRECTORY/.rvmrc; echo 2.4.4 > YOUR_WORKING_DIRECTORY/.ruby-version; rvm use 2.4.4 --default
    - restore_cache:
        keys:
        - v1-dep-{{ .Branch }}-
        - v1-dep-develop-
        - v1-dep-
    - run: echo -e "export RAILS_ENV=test\nexport RACK_ENV=test" >> $BASH_ENV
    - run: 'bundle check --path=vendor/bundle || bundle install --path=vendor/bundle
        --jobs=4 --retry=3 '
    - save_cache:
        key: v1-dep-{{ .Branch }}-{{ epoch }}
        paths:
        - vendor/bundle
        - ~/virtualenvs
        - ~/.m2
        - ~/.ivy2
        - ~/.bundle
        - ~/.go_workspace
        - ~/.gradle
        - ~/.cache/bower
    - run: |-
        mkdir -p config && echo 'test:
          database: circle_ruby_test
          adapter: mysql2
          encoding: utf8
          pool: 5
          username: ubuntu
          socket: /var/run/mysqld/mysqld.sock
          host: localhost
        ' > config/database.yml
    - run:
        command: bundle exec rake db:create db:schema:load --trace
        environment:
          RAILS_ENV: test
          RACK_ENV: test
    - run: echo "test"
    - add_ssh_keys
    - deploy:
        name: Deploy to staging if branch is develop
        command: |
          if [ "${CIRCLE_BRANCH}" == "master" ]; then
            eval `ssh-agent` && ssh-add ~/.ssh/id_rsa* && bundle exec cap production deploy
          fi
    - store_test_results:
        path: /tmp/circleci-test-results
    - store_artifacts:
        path: /tmp/circleci-artifacts
    - store_artifacts:
        path: /tmp/circleci-test-results

CircleCiで実行する

CLIでテスト実行が通っていれば、本番のCircleCiでの実行は難なく突破されるかと思います！ただし、上記の設定はあくまでとても簡単な設定なので、AWSへのアクセスキーが2.0からはymlに記述しなければならない等々の変更があるようなので、ご自身の環境に合わせてリファレンスを細かく確認することをおすすめします。

作業効率を上げるGoogleクロームの拡張機能9選！【必ず入れておくべき】

今やGoogleクロームを使っていない方は少ないのではないでしょうか？Web関係者だけでは無くともクロームを使う方はとても多く、私の周りの人間でクロームを使っていない人はいないほどです。そんなGoogleクロームですが、意外と拡張機能(エクステンション)を使っている人は少ないように感じます。拡張機能を駆使することで、作業効率が飛躍的に上がる可能性を秘めているので、是非検討してみて下さい！私は業務で100近くの拡張機能を試してきましたが、その中でも特に使い勝手がよく、現場で役立つ拡張機能を厳選してご紹介します！

SimilarWeb：競合サイト分析ツール

https://i.gyazo.com/511807818ab96183307379b7298a6854.png

chrome.google.com

競合サイトや参考にしているサイトのエンゲージメント率、キーワードのランキング、どこから流入があるのか、トラフィックは伸びているのか？などのサイトの主要指標を確認することができます。

おすすめポイント

SimilarWebの拡張機能を使うとワンクリックで簡単にサイトの詳細な情報を取得することができます。また、統計的に確認することができるので、点では無く線で分析することができることもおすすめポイントです。SimillarWebを使うことで、自社サイトを伸ばしていくための様々なヒントを得ることができます！SimillarWeには有料版もあり、より詳細な情報を取得することができますが、まずはこの拡張機能を無料で使用してみることをおすすめします。

Evernote Web Clipper：EvernoteでWebの情報を一元管理

https://i.gyazo.com/74f031c02b6a8ba9b054bf8978b39724.png

chrome.google.com

Evernote Web Clipperは今閲覧しているWebのお気に入りの記事をEvernoteに保存することができるアドオンです！

情報がとてつもなく溢れているインターネットの世界の中で以下に効率的に情報を収集していくかも大事ですが、同じようにどうやって集約化していくかも非常に大事です。 Evernote Web Clipperは収集した情報をEvernoteに集約していく人にとっては、必須のアドオンです！

おすすめポイント

Evernote Web Clipperを導入することによって、クロームのブックマークを使用することが無くなります！手元に残しておきたい、後で読みたい記事などはEvernote Web Clipperを使用して、Evernoteに保存して、スマートフォンでもPCでも環境を選ばずにいつでもどこでも閲覧することができるようになることが、最大のおすすめポイントです！

Black Menu for Google：Googleのサービスを効率的に横断

https://i.gyazo.com/eb6be3e0045a39cf088192f544215243.png

chrome.google.com

Gmail、Google Drive、SpreadSheet、GoogleCalenderなどGoogleの様々なサービスを横断的に使用しながら業務を行っている方々にとって、それぞれのサービスに毎回アクセスすることがめんどくさいと感じている方も多くいらっしゃるのではないでしょうか？

そんなあなたにおすすめしたいのが、このBlack Menu for Googleです！ このBlack Menu for Googleを使用することによって、今のページを離れることなく、最も簡単にGoogleの各種サービスに最速でアクセスすることができます！私は常にGoogleのサービスを5~10個ほど横断的に使用しているのですが、このアドオンを入れてことによって劇的に作業効率が上がりました！

おすすめポイント

Black Menu for Google を使えば、今いるページから離れることなく、Googleサービスにドロップダウンメニューから簡単にアクセスできるできるようになります！また、メニューのカスタマイズも行うことができるので、ご自身が使うものだけを好きな順番に配置することができます！ また、以前まではチームドライブにアクセスすることができないという弱点がありましたが、現在はチームドライブに対応されるようになっており、今後もより便利になっていく可能性を秘めておすすめのアドオンです！

Google 翻訳：Google翻訳をもっと効率的に

https://i.gyazo.com/d7838e15526ee1f2dad02b70924da205.png

chrome.google.com

言わずとしれたGoogle翻訳ですが、実は拡張機能がめちゃくちゃ便利なんです！

おすすめポイント

わざわざGoole翻訳のページを開かなくてもそのページで翻訳をかけることができるようになるので、効率的に翻訳を行うことができます！ また、部分的に翻訳をかけることができるので、ご自身が本当に翻訳が必要部分だけを翻訳して、より早く作業を行うことができることがとても良いと思います！ 英語などのドキュメントを読むことが多い方は必須のアドオンです！

Wappalyzer：気になるサイトの技術を簡単に知れる

https://i.gyazo.com/31d03b8ce4ae0ec0dbce745581cb50c2.png

主に開発者向けかと思うのですが、個人的に感動したアドオンの1つです。 Wappalyzerを使用することでサイトがどのような技術を使っているかが知ることができ、技術選定や外部サービスの選定などにとても参考になります！

おすすめポイント

例えば、Webサイトを見ていた時にこんな感じのサイトを作ってみたいと思った場合にとても役立ちます！Wordpressを使用しているのか？サーバーは何を使っているのか？ コンテンツ管理システム、eコマースプラットフォーム、Webフレームワーク、分析ツールは何か？など細かく色々な情報を簡単に得ることができるので、サイトの構築時には必須のアドオンです！ chrome.google.com

File Shot：ブラウザのキャプションを撮影するならこれ

https://i.gyazo.com/444e7692934992bf3f17aa06dadeb6c4.png chrome.google.com

ブラウザのキャッチアップを撮影する際に最も使いやすいアドオンがこのFileShotです！

おすすめポイント

選択部分、全体、スマートフォン用、などのかゆいところに手の届く機能が用意されており操作性も簡単なのでどんな用途にも使うことができると思います！ ブラウザのキャプションを撮影するアドオンは他にも多くありますが、まずはこのFileShotを使ってみることをおすすめします！

headingsMap：サイトの構造を簡単チェック

https://i.gyazo.com/349c797ab3a4fe2d4713d0dddea8bfb9.png

chrome.google.com

HTMLの見出しの構造を表示してくるアドオンです。 このアドオンを使用することによって、自身のサイトの構造が意図通りになっているのか、ライバルサイトの構造がどうなっているのかが、非エンジニアの方でも簡単に確認することができるようになります！

おすすめポイント

このheadingsMap意外にもHTMLの見出し構造を視覚化できるアドオンがありますが、ページによって表示されなかったり不安定な挙動をするものが多いです。このheadingsMapは現在使用している限りでは全てのページで確認することができ、安定感が抜群な点がおすすめです！ 機能としては他と比較して突出している訳ではないのですが、同種のアドオンが不安定な挙動をしている方はこのアドオンを試してみることをおすすめします！

lighthouse：Google純正ツールでサイトを分析して改善点がわかる

https://i.gyazo.com/b1ae75eacf6a634f2cc60c44fc9c1e24.png

https://i.gyazo.com/6e2ad0394008a1e00e7dad38cb04c587.png

chrome.google.com

サイトのスピード、レスポンシブ対応、アクセサビリティ、SEOなどの観点からサイトを評価することができ、サイトの改善を発見することができます！

おすすめポイント

サイトの評価をしてくれるアドオンや機能は他にも多くありますが、このような分析ツールはそれぞれの尺度を設定されているので、どの尺度を信じてサイトを改善する指標にするかは慎重に選びたいところです。そんな中で、このLighthouseはなんと言ってもGoogleが自社で出しているアドオンなので尺度に関しては最も信頼がおけると言えると思います。また、Googleはこのlighthouseの機能をアップデートし続けているので、今後も含めてまずはこのアドオンで指摘されていることを改善していくことが、効果的なのでは無いかと思います！

appearin：圧倒的に簡単なビデオチャット

gyazo.com

chrome.google.com

ビデオチャットのユーザー体験を根本から変えてしまった画期的なサービスです！

おすすめポイント

初めて使った方、こんなに簡単にビデオチャットを開始することができるのかと間違い無く驚きます！説明はいりません。まずは使ってみてください！

最後に

今回紹介したクロームの拡張機能以外にもご自身の業務効率を上げることができる機能があると思いますので、色々なものを使用してみてはいかがでしょうか

現役エンジニアがおすすめする作業効率を最大化するGoogleSpreadSheetの便利アドオン4選！

みんな大好きGoogleSpreadSheetですが、アドオンを入れることでより便利になります。 実際に何十個のアドオンを使ってみて、本当におすすめできる現場で使えるアドオンをご紹介します！

そもそもアドオンって何？

アドオンを追加することにより、GoogleSpreadSheetの性能を格段にアップデートすることができます。断言できますがアドオンを駆使することによって、GoogleSpreadSheetの利便性はEXCELを越えます。

f:id:ogaaryo:20180727212643p:plain

Googleアドオンはこのように多くのものがあり、一見良さそうなものも多くありますが、 実際に現場で使えるものは実は少ないです。その中でも、実際に現場で使用してみて最大限に業務効率を上げてくれたアドオンを厳選してご紹介します。

作業効率を最大化する便利アドオン4選

ProjectSheet planning：ガントチャート作成ツール

youtu.be

chrome.google.com
ガントチャートを簡単に作ることができるアドオンです。
ガントチャートはチームで使用することもありますが、日々の自分の仕事を時系列で前後関係を整理することで優先順位や順番が見えてくることが多くあります。PlojectSheetPlanningはさくっと、簡単にガントチャートを作成することができるので、よくありがちな資料を作って満足してしまうということが無く、情報の整理に集中することができます。

ProjectSheet planningのおすすめポイント

  • 圧倒的に簡単に直感的にガントチャートを作成することができる
  • ガントチャート自体の開始日と週の開始日（月曜日or日曜日）を設定することができる
  • 列の追加ができるので、自分の使いやすいようにカスタマイズができる
  • 進捗の表現がわかりやすく、簡単に入力することができる

Remove Duplicates：重複削除ツール

youtu.be

chrome.google.com

名前の通り、重複を抽出・削除することができるアドオンです。重複の削除だけであれば、EXCELのunique関数でもできますが、このアドオンの凄さはかゆいところに手が届くあらゆるケースに対応した機能です！

Remove Duplicatesのおすすめポイント

重複を発見する方法が4種類もあるので、様々な要件にマッチできる！

RemoveDuplicates Find type 最初の1行目を除く重複を検索・最初の1行目を含む重複・ユニークのみを検索・全ての一意の値と重複の最初の値を検索などの多くの方法を提供！

重複を確認する列の選択やオプションが充実しているので、柔軟に対応できる！

RemoveDuplicates options 列の選択、小文字と大文字の区別、ヘッダーの有無、空のカラムをスキップなどオプションが充実！

重複を削除するだけで無く、色を付けることもできる！

f:id:ogaaryo:20180727231228p:plain
色付け、他の場所へコピーや移動する、行を消す、値だけを消すなど様々な処理が可能！

Search Analytics for Sheets：サーチコンソール分析ツール

youtu.be

chrome.google.com

GooleSearchConsoleで確認できるクリックやCTR、ランディングページなどの情報をスプレッドシートに簡単に展開することができます！それだけであれば、このアドオンはそこまで必要では無いのですが、このアドオンの本当の凄さは、本家のサーチコンソールではできないことができてしまんうんです！

Search Analytics for Sheetsのおすすめポイント

GoogleSearchConsoleの純正機能ではできないことができる！

Search Analytics for Sheets最大のおすすめポイントは、純正機能では提供されていない機能が搭載されていることです。その機能とはランディングページと流入クエリのマッピングができる機能です
サーチコンソールを使用したことがある方なら誰しもが、流入クエリとそのクエリがランディングしているページを突き合わせて分析したいと思ったことがあるかと思います。純正の機能ではそれ取得することができません。このアドオンを除けば唯一実現できる方法としては、サーチコンソールのAPIを使用して自分で実装を行う必要がありました。Search Analytics for Sheetsを使用することで、プログラムを書けない方でも簡単に実現することができ、より深い分析を簡単に行うことができるようになります。

ランディングページと流入クエリのマッピングの方法

設定のやり方は非常に簡単で以下のようにgroupにpageとqueryの2つを設定するだけです。

f:id:ogaaryo:20180730135838p:plain

MarkdownTableMaker：マークダウン補助ツール

chrome.google.com

エンジニアの方であれば、Markdownでドキュメントを書くことが多いと思います。その際に表を挿入したい考える時にMarkdownの場合記述が複雑なので、上手くかけないことが多いのではないでしょうか？このMarkdownTableMakerはGoogleSpreadSheetに記載した表をMarkdownに変換してくれます。

MarkdownTableMakerのおすすめポイント

超簡単に表のMarkdownを作成することができ、保存することもできます！例えば以下のような表があったとします。
f:id:ogaaryo:20180730140351p:plain
これをMarkdownTableMakerを使用することで以下のようにMarkdownを出力してくれます。
f:id:ogaaryo:20180730140445p:plain
また、Saveボタンを押すことによってMarkdownをGoogleDriveに保存することができるので、バックアップが必要な場合にも非常に便利に使うことができます。

いかがだったでしょうか。今回紹介したものは私が実際に使用してみて、本当に業務効率化することができたアドオンになります。ご自身の業務を改めて見直すきっかけになれば幸いです！

Slackでマジで便利なショートカット1選！

Slackでマジで便利なショートカットを1選紹介します！

マジで便利なショートカット1選

チャンネル数やユーザー数が増えてくると、目的の場所へ移動することに時間がかかります。 そんな時に以下のショートカットを使ってみて下さい。 マジで便利です。。。

Slackでチャンネルやユーザーを検索するショートカットキー

mac
commnad + k

windows
control + k

このショートカットキーを使うと、チャンネルやユーザーを検索するボックスが表示されるので、 あとは、目的のチャンネルやユーザーの名前を入力すれば、
秒で移動することができます!

f:id:ogaaryo:20180727112108p:plain

素敵なSlackライフを！

【2018年】オンライン決済のStripe、Pay.jpを手数料・機能などから比較！

オンライン決済の普及により、自社サイトで簡単に購入機能を提供できるようになり、物を売っていくことが簡単になりました。 多くの決済サービスの中から特に導入実績があり、人気のある、Stripe、Pay.jpの2つを比較していきます。

抑えておくべき観点

オンライン決済サービスを比較する上で、まず抑えておくべき観点は以下の2つです。 - 決済手数料 - 対応機能 - 実装・導入

決済手数料を比較

結論から言うと、決済手数料の観点ではStripeがおすすめです。 以下で比較してきます。

Stripe Pay.jp（ベーシック/プロ/Seed/NPO）
VISA 0.036 3.0%/2.59%/2.59%/1.5%
MasterCard 0.036 3.0%/2.59%/2.59%/1.5%
JCB 0.036 3.6%/3.3%/3.3%/-
AmericanExpress 0.036 3.6%/3.3%/3.3%/-
Diners Club - 3.6%/3.3%/3.3%/-
DISCOVER - 3.6%/3.3%/3.3%/-
初期費用
月額費 ¥0/¥10,000（税込）/¥0/¥0
チャージバック手数料 ￥1,500 または ￥0 ?

決済手数料の観点から比較してみると、1回の決済においてはpay.jpが最も安いようですが、 プランによっては月額費がかかるため、見えない金額が無く、1回の決済における費用が相対的に安いstripeに軍配が上がると言えます。

対応機能

対応機能においても stripeが対応している機能が多いです。

Stripe Pay.jp
チャージバック ✔️ ✔️
仮売上 ✔️ ✔️
本売上 ✔️ ✔️
定期課金 ✔️ ✔️
レシピエント ✔️ -
送金 ✔️ ✔️
クーポン ✔️ -
割引 ✔️ -

実装・導入

どちらもRESFUL APIで実装が可能なので、仮にpay.jpを導入した後に、stripeに変更するとしてもそこまでコストがかからないと言えるでしょう。

まとめ

決済システムを選ぶ基準は手数料、機能、導入・実装の3点になりますが、手数料と機能については、 取引をする金額や頻度などに依存しており、対応機能についても想定のユーザーによって最適解が変わります。 また、今後変更されていく可能性も多いにあると考えられます。

決済システムは大事なビジネスパートナーなので、まずは導入をしてみて、導入におけるサポートや対応などをみつつ、 ご自身のビジネスに最適なパートナーを見つけていくことが重要です。 変更するコストも大きくはかからないものも多いので、まずはエイっと決めてしまうことをおすすめします。