グロースエンジニアのブログ

Ruby on Rails エンジニアです!開発に当たって勉強したことをまとめていこうと思います!

Rails アプリを複数(2つ以上)立ち上げる方法

最近マイクロサービスというものを調べる機会があって、記事などを読んでいた。

で、気になったのが「ローカルでどうやって開発するの?」でした。

開発者なら当たり前なのかもしれませんが、こういう機会があって初めて課題に気づき調べて分かることだったのでメモしておきます。

ポートを指定して rails s!

そんなことできたんだな...

通常の `rails s` だと 3000 でアプリが立ち上がる。

複数立ち上げたいときは `rails s -p 4000` とか、`-p ポート番号` って指定してあげればOK!

たとえば上記で rails アプリを立ち上げて、 http://localhost:4000/ にアクセスすれば起動してる。

なるほどな〜とwww

今後の開発

せっかくの機会なので、マイクロサービス周りを調べつつ、テスト的に何か作れればと思っている。

まだまだどういうときに必要で、どういった技術的なものや知識が必要になるのか分かっていないので徐々にやっていくつもりです!

【Rails5】devise でログイン機能を実装する

devise を使ってログイン機能を実装してきます。

2016年7月30日時点で Rails5 対応しているのかちょっとわからなかったのですが、実装できたのでメモしておきます。

その他、devise 関連記事を書いているので参考にどうぞ。

【Rails5】devise を日本語化する

【Rails5】devise でログイン後、ログアウト後のページを設定する

【Rails5】devise でログイン後ページをユーザー意図に合わせて変更する

devise をインストール

Gemfile に以下を追加して、ターミナルから bundle install を実行します。

gem 'devise'

次にターミナルから rails generate devise:install を実行するとインストール手順が表示されます。

➜  app git:(master) rails generate devise:install
Running via Spring preloader in process 33841
      create  config/initializers/devise.rb
      create  config/locales/devise.en.yml
===============================================================================

Some setup you must do manually if you haven't yet:

  1. Ensure you have defined default url options in your environments files. Here
     is an example of default_url_options appropriate for a development environment
     in config/environments/development.rb:

       config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

     In production, :host should be set to the actual host of your application.

  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:

       root to: "home#index"

  3. Ensure you have flash messages in app/views/layouts/application.html.erb.
     For example:
     <%= notice %>
     <%= alert %>

  4. You can copy Devise views (for customization) to your app by running:

       rails g devise:views

===========================================================

この手順通りにやっていきます。

1. 開発環境でのメール設定

config/environments/development.rb ファイル内に以下を追記します。

config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

2. route を追加

config/routes.rb に root to: 'home#index' を追加します。

3. ログイン関連の flash メッセージの表示

app/views/layouts/application.html.erb に flash メッセージ用のタグを追加

<%= notice %>
<%= alert %>

4. ログイン関係の view を作成

ターミナルから以下を実行することでログイン関連のviewのベースを作成します。

➜  app git:(master) rails g devise:views
Running via Spring preloader in process 34244
      invoke  Devise::Generators::SharedViewsGenerator
      create    app/views/devise/shared
      create    app/views/devise/shared/_links.html.erb
      invoke  form_for
      create    app/views/devise/confirmations
      create    app/views/devise/confirmations/new.html.erb
      create    app/views/devise/passwords
      create    app/views/devise/passwords/edit.html.erb
      create    app/views/devise/passwords/new.html.erb
      create    app/views/devise/registrations
      create    app/views/devise/registrations/edit.html.erb
      create    app/views/devise/registrations/new.html.erb
      create    app/views/devise/sessions
      create    app/views/devise/sessions/new.html.erb
      create    app/views/devise/unlocks
      create    app/views/devise/unlocks/new.html.erb
      invoke  erb
      create    app/views/devise/mailer
      create    app/views/devise/mailer/confirmation_instructions.html.erb
      create    app/views/devise/mailer/password_change.html.erb
      create    app/views/devise/mailer/reset_password_instructions.html.erb
      create    app/views/devise/mailer/unlock_instructions.html.erb

ログインユーザー用のUserモデルの作成

ターミナルから rails g devise User を実行し、ログインしたユーザーを登録するモデルを作成します。

ログイン後のページを作る

テスト用に以下のようなログイン後のページを作成します。

# app/controllers/mypages_controller.rb
class MypagesController < ApplicationController
  before_action :authenticate_user!

  def show
  end
end


# app/views/mypages/show.html.erb
mypage#show


# config/routes.rb
Rails.application.routes.draw do
  devise_for :users
  root to: 'home#index'

  resource :mypage
end

サーバーを再起動し、http://localhost:3000/mypage にアクセスするとログインページが表示されると思います。

これは、 before_action :authenticate_user! がログインしているかをチェックしており、していなければログインページにリダイレクトされます。

ログイン、ログアウトのリンクを追加する

ログインしていない状態で、ログインが必要なページに直接アクセスするとログインフォームにリダイレクトされます。

ただ、ログインフォームへのリンクとログアウトするリンクが必要となります。

そのためのリンクが以下です。

<% if user_signed_in? %>
  <%= link_to('Logout', destroy_user_session_path, :method => :delete) %>
<% else %>
  <%= link_to('Login', new_user_session_path) %>
<% end %>

これをリンクを追加したい場所に追加すれば大丈夫です。

以上、devise の実装でした。

次は devise を日本語化していきたいと思います。

その他、devise 関連記事はこちら

【Rails5】devise を日本語化する

【Rails5】devise でログイン後、ログアウト後のページを設定する

【Rails5】devise でログイン後ページをユーザー意図に合わせて変更する

Ruby on Rails 5 で新しくアプリを作成する

新しく作りたいものを思い立って、せっかくなので Rails 5 で作ろうと思ったので、その手順を簡単に。

今の自分のローカル環境としては、Rails 4 は動く状態です。

Rails 5 のインストール

リポジトリはこちら。手順も READ ME に書いてあるので、そちらを見た方が早いかもしれません。

ターミナルから以下を実行。

gem install rails

実行結果を見ていくと rails 5 が入ってますね!(長いので省略してます)

Fetching: activesupport-5.0.0.gem (100%)
Successfully installed activesupport-5.0.0
Fetching: rack-2.0.1.gem (100%)
Successfully installed rack-2.0.1
...
Parsing documentation for rails-5.0.0
Installing ri documentation for rails-5.0.0
Done installing documentation for activesupport, rack, rails-dom-testing, actionview, actionpack, activemodel, arel, activerecord, activejob, actionmailer, actioncable, railties, rails after 24 seconds
13 gems installed

アプリの起動

ここから先はいつもどおりです。
※ myapp のところは作るアプリ名に修正

rails new myapp
cd myapp
rails server

f:id:ikdtty0423:20160730140845p:plain

もうちょっとゴニョゴニョやる必要があるかなと思ったけど簡単だった。

これで Rails 5 で開発ができる!

超集中を手に入れる5つのテクニック 〜自分を操る超集中力 メンタリスト DaiGo〜

前から気になっていたメンタリストDaiGo。

人の振る舞いからその人の心理を当てるパフォーマンスをテレビで見て、この人どうやって見抜いてるんだろう?って興味があった。

たまたま本屋にいったらDaiGoの本が複数並んでいて、こんなに本書いてんの?と思いつつ、いい機会なので読んでみようと思った。今回は「自分を操る超集中力」って本の感想を。

集中は作り出せる

集中しているときってそのことに没頭していて、気が付くと1時間、2時間ってあっという間に時間が経つ。

でも、結構気が散って集中できないことも多々ある。

自分のパフォーマンスを上げるにはどうやって集中を作りだすかが鍵になってくる。

そんな方法を脳の研究も合わせて紹介しているのがこの本。

超集中する5つのテクニック

集中するテクニックがたくさん紹介されているので、細かいテクニックは本を読んでもらいたいのですが、僕が大事に思ったことを一言で言うと、「集中できる環境づくり」。

それをピックアップして紹介します。

机には青いもの、青色のペンを使う

色彩心理学で青は集中を促す色。これ、結構前からやっているけど、何となくしっくりきていると思う。

机の上に青いものを置いたり、青色のペンを使うだけなので簡単にできると思う。

気が散るものを排除する

例えばスマホ。集中しててもブルっと震えれば気になってしまう。その時点で集中は切れる。

集中したいときはマナーモード...というか、バイブレーションも止めてしまうのがいいと思う。かばんに入れていてもブルブルすると音が出て気になることもあるので。

それ以外にも電話が鳴らない早い時間に行って仕事するなど邪魔が入らない環境で仕事することが大事。

やることを6つ書き出して優先順位付け

その日にやる6つのことを書き出して優先順位付けし、上から順にやっていく方法。

紙に書き出すことに意味があって、頭に覚えているということは脳を使っているということ。

自分の頭のなかにあるタスクを紙に書きだして脳をクリアにする。それによって目の前のコトの集中できる状態を作れるというわけです。

やることを一つに絞る

僕もよくあるんですが、あれもやらないと、これもやらないとって思って結局ほとんど終わらないという...

先ほどの紙に書き出して優先順位付けしたものを1つずつやっていくことで、それだけに集中して仕事ができる。

複数平行してやるとアイドリング(その仕事をする準備)に時間がかかるので一つのことに集中してやることが大事。

25分仕事、5分休憩

何となく聞いたことがある方もいるかもしれませんが、ポモドーロというやつです。

人の集中できる時間は限られているので適度に休憩を入れて集中を維持することが大事。

僕もやろうと思いつつ、そんな細かく区切ってたらアイドリングに時間かかるし無駄だと思う...って思ってやってなかった。

でも、一つのことに絞ってやるのであれば休憩中も脳はその仕事を考えており問題ないとのこと。

その休憩中にナッツなどの低GI食品で血糖値をコントロールしつつ、1,2時間にコップ1杯の水を飲む。

脳はブドウ糖をエネルギーとしていて、ナッツによって補給しつつ、水分不足による集中力低下を防ぐことができます。

超集中を手に入れる

明日、大事なプレゼンなのに...とか午後までに資料まとめないと...とか集中して一気にやらない場面はたくさんあると思います。

そういうときに限って中々手を付けられなかったりすることもあると思います。

簡単なことから少しずつ始めて集中力を手に入れてみてはいかがでしょうか?

【目次】

まえがき
第1章 集中力を自在に操る3つのルール
 集中力の高い人に共通する行動原則とは
第2章 高い集中力を生み出す7つのエンジン
 トップスピードで「すぐ没頭できる」自分に変わる
第3章 疲れをリセットする3つの回復法
 疲れを感じている方は、ここから読み進めてください
第4章 集中力を自動でつくり出す時間術
 いつもの仕事の時間を変えるだけで、パフォーマンスは上がっていく

【サイト改善レポート】参照元とランディングページから改善ポイントを洗い出す

Googleアナリティクスを使って数値は追いかけているが、実際にどうやって改善点を洗い出せばいいのか分からないという方もいるのではないでしょうか。

そこで、今回は分かりやすく、効果が期待できる【参照元】と【ランディングページ】のセッション数と直帰率からサイトの改善ページを考えていきたいと思います。

なぜ参照元とランディングページを見るのか?

ユーザーはどこからあなたのサイトに訪れるのでしょうか?

  • 他のサイトに貼ってあったあなたのサイトへのリンクから
  • google検索で表示されたあなたのサイトの検索結果から
  • メールマガジンに記載されたサイトへのリンクから

などいろいろなところから来ていることが考えられます。

参照元を見ることによって、これらの「どこから来ているのか?」を見ることができます。

また、ランディングページを見ることによってサイトのどのページに訪れているかが分かります。

どこから来て、どのページを見ているのかを見ることで、ユーザーが何を望んでサイトに訪れているのか、その望んでいるものがランディングページに記載されているのかといった仮説をたてることができます。

また、直帰率を見ることによって、他のページやCVページヘの誘導ができているかを見ることができます。

ここでセッション数も合わせて見る理由は、改善のインパクトを測る一つの指標として利用します。

例えば、100セッションのページと10,000セッションのページであれば、1%の直帰率改善ができた場合、100セッションだと1セッションしか変わらないのに対して、10,000セッションであれば100セッション変わることになります。

せっかく改善しても効果の薄い施策よりはインパクトのあるものを実行すべきです。

そのため、今回はセッション数と直帰率を見ていきます。

Google アナリティクスAPIを使ってデータを取得

このブログを見ていただいている方は知っているかと思いますが、本ブログでのGoogleアナリティクスデータは Google SpreadSheet を使って取得・表示します。

GoogleアナリティクスAPIというプラグインを使って自動で取得できるようにしていきます。

これは毎月行う、または改善施策の前後数週間〜数ヶ月で数値を比較する場合などを少ない手間で行うために使います。

それではやっていきましょう。

Google アナリティクスAPI の基本的な使い方はこちらから

【Googleアナリティクス】無料で使えるレポート作成ツールでレポートに必要なデータを取得する

Google SpreadSheetの設定は以下のようになります。
※ 指標は以降でコピペできるようにしてあります。

f:id:ikdtty0423:20160703192411p:plain

上記設定を見ていきます。

まず【Start Date】と【End Date】は分析したい期間に合わせて設定してください。月ごとであったり、サイト改善の場合は改善の前後で比較する期間を選択してください。

改善の際は、十分なセッション数のボリュームがないと効果があったかどうかがわかりにくいので、そちらの点も注意して期間を設定してください。

次に【Metrics】を見ていきます。設定しているのは以下ですのでコピーして使ってください。

ga:sessions
ga:users
ga:newUsers
ga:pageviewsPerSession
ga:bounceRate
ga:sessionDuration
ga:goal1Completions
ga:goal1ConversionRate

上から、セッション数、ユーザー数、新規ユーザー数、ページ/セッション、直帰率、平均セッション時間、コンバージョン数、コンバージョン率 となります。

セッション数やユーザー数で「量」を見て、新規ユーザー数やページ/セッションなどでその「質」を見ます。そしてコンバージョンによって「成果」を見ます。

※ コンバージョン指標の中にある 1 はご自身の設定によって変えてください。
ex) goal2Completions, goal4Completions など

次は【Dimensions】です。設定しているのは以下となります。

ga:sourceMedium
ga:landingPagePath

上が参照元/メディア、下がランディングページを表しています。

最後の【Sort】はセッション数を多い順に並び替えています。

-ga:sessions

ここまで入力が完了したら、以下を実行してデータを取得しましょう。

 

f:id:ikdtty0423:20160522153102p:plain

このレポートを実行すると以下のように新しいSpreadSheetが作成されデータを取得することができます。

f:id:ikdtty0423:20160703194106p:plain

ひとまず、これを日本語化して見出しに色を付けわかりやすくしたのが以下の表です。

数値はそのままコピーしています。

f:id:ikdtty0423:20160703194733p:plain

色は、参照メディアとランディングページを軸にして、セッション数などの量を黄色、ページ/セッションなどの質をオレンジ、CV・CV率の成果を赤としています。

表の見方

全体として参照元とランディングページから、どんなサイトから訪れている人が多いのか、どこのページから見始めているのか(ランディング)を確認します。

まず注目するのは量の部分です。どんなにサイト改善を進めていても、量が少なければ改善インパクトは小さいものになります。

次に見るのは成果です。こちらも量がどんなに多くても成果になっていなければ意味がなく、逆にCVしているだろうと思っていたページが想定通り成果を生み出しているかどうかを確認します。

そして最後に改善することで成果を生みそうなページの質を見ていきます。

特に注目すべきは直帰率で、よりサイトのことを知ってもらうためにも他のページヘの遷移が大丈夫かを確認する指標となります。

改善のポイント

サイトにもよりますが、十分な量がある場合は上位20位くらいに絞って改善していきましょう。量が少ない場合は効果が大きそうな1,2ページに絞ってまずやってみることもいいと思います。

直帰率が高い場合は、そのページに来ているユーザーのニーズに合わせて他のページに遷移させるような導線を用意したり、ファーストビューのナビゲーションの配置や見やすさ・ページの内容がすぐに分かるようになっているかなどを実際のページで確認して改善施策を立てていきましょう。

注意して欲しいのは、直帰率が高くても問題ない場合もあるということです。

1ページで完結する読み物コンテンツ、用語集やFAQなどはユーザーがそのページのみで満足して直帰することが多い可能性があります。

こういったページでも、それに関連したコンテンツへの導線を設けることで回遊を促しサイトを知ってもらうために改善をしてみましょう。

サイト改善を行うにあたってベストな答えを見出すことは難しいです。そのため、仮説を立ててそれをどう改善していくのかということを繰り返し行なっていくことが大事になってきます。

また、他の方に相談しながら複数の視点で仮説の精度を上げていくことも大事となります。

今回の分析ではシンプルでインパクトがあるページを洗い出すことができますので、ご自身のサイトで是非試してみてください。

【Googleアナリティクス API】新規ユーザーとリピーターのセグメントでサイトを分析する

サイトを運営している目的はそれぞれあり、その成果を上げるためにアナリティクスを使って分析するのではないでしょうか?

今回はサイトの目的を【CVアップ】とし、それを上げるための一つの分析の型として「新規・リピートユーザーでのセグメント分析」をやってみたいと思います。

また、今回もGoogleアナリティクス API を使ってレポートを作成し、毎月のデータを自動で作成し、追えるようにしていきたいと思います。

Query Explorer で 新規ユーザーとリピートユーザーのセグメントを確認

Query Explorer — Google Analytics Demos & Tools

ご自身で設定しているCVを Query explorer から確認するにはこちらをご覧ください。

【Googleアナリティクス API】目標値(CV)の取得 - 31歳から始めたウェブ解析・プログラマーという仕事

今回の例では、【ga:goal1Completions】を使います。複数取得することも可能ですので、分析したいCV指標を選択してください。

また、セグメントを確認するのも同様に Query explorer の 【segment】をクリックし【New Users】と【Returning Users】の【gaid】を確認してください。

デフォルトのセグメントですので、基本的には同じ gaid だと思いますが、念のためご確認ください。

以下より、New User は【gaid::-2】、Returning User は【gaid::-3】となります。

f:id:ikdtty0423:20160611194432p:plain

新規ユーザーとリピートユーザーデータの注意点

今回は新規ユーザーとリピートユーザーのデータを分析します。

しかし、Google アナリティクスのセグメントにおけるNew User と Returning User はセッション数になっているので注意してください。

数値のチェックをしていて、どうも数値データの一致が取れないなと思ったら、このユーザーという言葉に間違って解釈をしていることがあるので注意しましょう。

サイト全体と新規ユーザー、リピートユーザーのデータを取得

では、Google アナリティクス API を使ってデータを取ってきます。

セグメント分析するときは以下の指標を見ていきましょう。

※ 各指標については別途記事にします。

  • PV
  • セッション数
  • ユーザー数
  • 平均滞在時間
  • 直帰率
  • 新規率
  • CV数

このそれぞれの指標をGoogleアナリティクスAPIで取得するには以下のようにします。

f:id:ikdtty0423:20160620220331p:plain

 

全体のCV(AllConversion)を計測し、【Segment】に新規ユーザー(gaid::-2)とリピートユーザー(gaid::-3)を設定します。

※ 新規ユーザーとリピートユーザーを足せば全体になりますが、吐き出したデータをそのまま使いたいので全体も出すようにしています。

※ ga:percentNewSessions は新規では 100%, リピーターでは 0% になるので、指標として設定しても意味がないのですが、今後他のセグメントでレポートを作る際に統一したいので入れています。

また、メトリックスは先ほど説明した7つの指標を設定します。

ga:pageviews
ga:sessions
ga:users
ga:avgSessionDuration
ga:bounceRate
ga:percentNewSessions
ga:goal1Completions

入力が完了したら、メニュー【アドオン】→【Google Analytics】→【Run reports】でデータを取得しましょう。

 

f:id:ikdtty0423:20160515114428p:plain

 

取得データの分析

各指標を新規ユーザーとリピートユーザーで比較していきます。

CVに貢献しているのはどちらか、それぞれのユーザーに指標の数値に差はないか、差があればなぜその差が生まれているのかの仮説を立てて検証 → 改善につなげていきます。

※ データを見るときは月別にグラフにしたりすると視覚的に把握することができます。

新規ユーザーとリピートユーザーで比較する時も、おそらく新規とリピートでは行動に差があるのでは?という仮説を持ってデータの分析を始めると思います。

そのため、ここでもそれを確認し、さらに深い分析・仮説立てに発展させてください。

それ以外のセグメント

今回は新規・リピートユーザーについてのセグメント分け・分析を行ってきましたが、次回以降は流入元別であったり、ランディングページ別でのセグメント分けと分析をしていこうと思います。

また、レポートで取り上げている7つの指標についてもまとめていきたいと思います。

【Googleアナリティクス API】流入元ごと、セグメントごとにデータを取得する

最終回は流入元ごと、セグメントごとにデータを取得していきます。

流入元は自然検索とリファラーを見ていきます。

また、セグメントはViewごとの設定しているものがあると思うので、それによる違いも含め取得方法を見ていきます。

流入元別のデータを取得する

流入元ごとに見ていくには前回同様【Filters】を使います。

f:id:ikdtty0423:20160604194909p:plain

自然検索の場合は【ga:sourceMedium=@organic】を、リファラーの場合は【ga:sourceMedium=@referral】を入力します。

以下の例では自然検索の場合を表示しています。

f:id:ikdtty0423:20160604211433p:plain

セグメントごとにデータを取得する

まず設定しているセグメントを確認しましょう。Google アナリティクスの Query Explorer を使います。

Query Explorer — Google Analytics Demos & Tools

上記をクリックしていただき、ログインします。

ログインしたら下にスクロールし、【Select a view】からデータを取得したいViewを指定します。以下はこのブログのViewを指定しています。

f:id:ikdtty0423:20160604213217p:plain

 

そして、その下にある【Set the query parameters】の【segment】の部分を選択してください。

 

f:id:ikdtty0423:20160604213706p:plain

すると以下の画面のように設定しているセグメント一覧が表示されますので、データ取得したいセグメントを選択してください。

以下の画面ではOrganic Trafficを選択しています。

f:id:ikdtty0423:20160604213837p:plain

 

選択すると以下のように【gaid::-5】という表示に変わります。

f:id:ikdtty0423:20160604214002p:plain

 

これをGoogle spreadsheet API の【segment】にコピー & ペーストします。

f:id:ikdtty0423:20160604214445p:plain

 

セグメントはViewによって変わってくるので適宜選択してください。

メニューの【アドオン】→【Google Analytics】→【Run reports】をクリックするとデータを取得することができます。

f:id:ikdtty0423:20160515114428p:plain

 

全7回にわたって Google analytics APIを使ってデータの自動取得を行ってきました。

基本的なデータの取得はできるようになったと思いますので、レポートに合わせて適宜データを取得してください。

今後はこれらを使って更にデータ取得・レポート作成を進めていきたいと思います。

1. モニタリングレポートとは?

【Googleアナリティクス】モニタリングレポートと作成自動化の流れ

2. データの自動取得

【Googleアナリティクス】無料で使えるレポート作成ツールでレポートに必要なデータを取得する

3. データの集計

【Googleアナリティクス API】取得したデータを月別に集計する

4. グラフ化

【Googleアナリティクス API】グラフを作成する

5. 目標値の取得(CV) 

【Googleアナリティクス API】目標値(CV)の取得

6. 記事ごと、ディレクトリごとのデータ取得

【Googleアナリティクス API】記事ごと、ディレクトリごとにデータを取得する

7. 流入元ごと、セグメントごとのデータ取得 ← 今回