React.jsとRailsを連携させる(Devise設定編)

gakuです。
Reactと連携する上で、ユーザ認証をさせたい需要は多々あると思います。
そこで今回はrailsのユーザ認証GemであるDeviseを導入し、jsonで返却するとこまでの備忘録を掲載します。
一応OpenIDでfacebookと連携出来るように構想しています。

セットアップ手順

1.railsアプリを作成します。

rails new railstestapp -d postgresql

2.必要なgemをgemファイルに追記する

(※今回はfacebookでOpenID認証を想定してます。)

gem 'devise'
gem 'omniauth'
gem 'omniauth-facebook'

bundle install

3.deviseのインストール

rails generate devise:install
rails generate devise User
rails generate migration AddOmniauthColumnsToUsers uid provider name

4.migrateファイルの編集

作成したmigrationファイルを以下のように修正します。

class AddOmniauthColumnsToUsers < ActiveRecord::Migration
  def change
    add_column :users, :uid,      :string, null: false, default: ""
    add_column :users, :provider, :string, null: false, default: ""
    add_column :users, :name,     :string

    add_index :users, [:uid, :provider], unique: true
  end
end

でrake db:migrateでDBへ反映させます。

5.各種コントローラの作成

rails g controller users/sessions
rails g controller users/passwords
rails g controller users/registrations
rails g controller users/omniauth_callbacks

6.ルーティングの設定

以下をroutes.rbへ追記

devise_for :users, :controllers => {
  :sessions       => "users/sessions",
  :registrations  => "users/registrations",
  :passwords      => "users/passwords",
  :omniauth_callbacks => "users/omniauth_callbacks"
}

7.各種コントローラの編集

class Users::SessionsController < Devise::SessionsController
  def new
    super
  end

  def create
    super
  end

  def destroy
    super
  end
end

class Users::RegistrationsController < Devise::RegistrationsController
  def cancel
    super
  end

  def create
    super
  end

  def new
    super
  end

  def edit
    super
  end

  def update
    super
  end

  def destroy
    super
  end

  def build_resource(hash=nil)
    hash[:uid] = User.create_unique_string
    super
  end
end

class Users::PasswordsController < Devise::PasswordsController
  def new
    super
  end

  def create
    super
  end

  def edit
    super
  end

  def update
    super
  end
end

8.environments/development.rbの編集

(※本番環境ではちゃんとした値を格納する。)
config.action_mailer.default_url_options = { :host => ‘localhost:3000’ }

9.Facebookでデベロッパー登録を行う。

https://developers.facebook.com/apps

10.config/initializers/devise.rbへ以下を記述。

if Rails.env.production?
  config.omniauth :facebook,   ENV["App_ID"], ENV["App_Secret"]
else
  config.omniauth :facebook,   ENV["App_ID"], ENV["App_Secret"]
end

11.環境変数の設定

sudo vi ~/.bash_profile
でこんな感じで追記
App_ID=”asdfasdf”
App_Secret=”asdf9879asdf987asdfas98df7″
export App_ID
export App_Secret

source ~/.bash_profile

12.models/user.rbの編集

class User < ActiveRecord::Base
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable and :omniauthable
  devise :database_authenticatable,  :omniauthable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable

  def self.find_for_facebook_oauth(auth, signed_in_resource=nil)
    user = User.where(:provider => auth.provider, :uid => auth.uid).first
    unless user
      user = User.create(name:     auth.extra.raw_info.name,
                         provider: auth.provider,
                         uid:      auth.uid,
                         email:    auth.info.email,
                         password: Devise.friendly_token[0,20]
                        )
    end
    user
  end

  def self.create_unique_string
    SecureRandom.uuid
  end

  def self.create_unique_email
    User.create_unique_string + "@example.com"
  end
end

13.controller/users/omniauth_callbacks_controller.rbの編集

class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
  def facebook
    # You need to implement the method below in your model (e.g. app/models/user.rb)
    @user = User.find_for_facebook_oauth(request.env["omniauth.auth"], current_user)

    if @user.persisted?
      set_flash_message(:notice, :success, :kind => "Facebook") if is_navigational_format?
      sign_in_and_redirect @user, :event => :authentication
    else
      session["devise.facebook_data"] = request.env["omniauth.auth"]
      redirect_to new_user_registration_url
    end
  end
end

—–ここまでdeviseの設定、ここからjsonで返却するための設定—–

14.config/application.rbの編集

以下を追記

config.to_prepare do
  DeviseController.respond_to :html, :json
end

15.app/controllers/application.rbを編集
以下を追記&編集

protect_from_forgery with: :null_session
before_action :configure_permitted_parameters, if: :devise_controller?

def configure_permitted_parameters
  devise_parameter_sanitizer.for(:sign_up) << :name
  devise_parameter_sanitizer.for(:sign_up) << :provider
  devise_parameter_sanitizer.for(:sign_up) << :uid
end

おわり(=゚ω゚)ノ

おわりに

なかなか難しいですね。
jsonで返却はできましたが、まだうまくいく確証が得られません(´Д` )
次はreact-nativeのアプリ側で認証や通信をこのサーバと出来るか試してみる予定です。

React Nativeを使ってiOSアプリ作る

gakuです。
reactでiOS,Androidアプリが作れるそうなので環境構築してみた備忘録です。
React勉強すれば、iOS,Android,Webのフロントが作れるので、うまくいけば一石三鳥くらいありそうです。

環境構築

1.Xcodeをインストールする。

2.brewをインストール&アップデート
ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
brew update

3.nodeをインストールする
brew install node

4.watchman,flowをインストール
brew install watchman
brew install flow

5.react-nativeのインストール
npm install -g react-native-cli

6.プロジェクトを作成する
react-native init testapp

これで、React-nativeプロジェクトが作成されるので、iOSフォルダ内のプロジェクトファイルをXcodeで開けばOKです(=゚ω゚)ノ
こんな感じになります。
スクリーンショット 2016-01-30 16.03.40

おわりに

楽しい、React!
時間とってもっと勉強したい今日この頃(´Д` )

React.jsとRailsを連携させる(初期構築編)

Gakuです。
そろそろフロントエンドフレームワークを触らないといけない時代になってきたなと感じ、ReactJSを触り出しました。
自分はRailsが好きなので、サーバサイドはrails、フロントエンドはReact.jsで構築していきたい思います。

今回はRailsのユーザ認証ライブラリであるDeviseへユーザ登録まで行う流れを備忘録として記述したいと思います。

構築

環境

今回の環境はこんな感じです。

rails 4.1.8
ruby 2.1.5p273
postgreSQL 9.4
react

フォルダ構成

まずは、フォルダ構成を行います。
今回はこんな感じで作成します。

react-devise-test
|-back
|-front

backにはRailsプロジェクトを、frontにはReactプロジェクトを構築します。

rails初期構築

railsの初期構築を行います。

cd back
rails new rails-project -d postgresql

名前はrails-projectでrailsプロジェクトを作成します。DBはpostgreSQLを使用しています。
構築できたら、DBを作成し起動確認します。

cd rails-project
rake db:create
rails s

これでいつもの画面が、http://localhost:3000/にアクセスし出力されればOKです。

ReactJS初期構築

次にReactプロジェクトを作成します。
作業フォルダ直下frontフォルダへ移動し、以下のコマンドを実行します。

npm init

いろいろ聞かれますが、今回は以下のような感じで回答

name: (front) react-project
version: (0.0.0)
description: react-test-project
entry point: (index.js)
test command:
git repository:
keywords:
author: gaku
license: (BSD)
About to write to /home/vagrant/projects/test/react-devise-test/front/package.json:

{
  "name": "react-project",
  "version": "0.0.0",
  "description": "react-test-project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "gaku",
  "license": "BSD"
}


Is this ok? (yes) yes

これで準備完了です。
次に以下コマンドを入力し、初期で必要なツールをインストールします。

npm install react react-dom express gulp browserify reactify vinyl-source-stream --save
sudo npm install gulp -g

ツール類が入ったら一旦テストコードで動くか確かめます。
以下のようにフォルダを構成します。

front
|-client
|   |-scripts
|   |    |-index.jsx
|   |-index.html
|-package.json
|-node_module
|-gulpfile.js
|-server
    |-server.js

ファイルを作成し、以下のように記述します。

<!--index.html-->
<!DOCTYPE html>
<html>
  <head>
    <title>tutorial</title>
  </head>
  <body>
    <div id="content"></div>
    <script src="./build/app.js"></script>
  </body>
</html>
//index.jsx
var React = require('react');
var ReactDOM = require('react-dom')

//コンポーネントを定義
var Index = React.createClass({
  render:function(){
    return (
        <p>hoge</p>
    );
  }
});

//id='content'の要素にコンポーネント「Index」を挿入してレンダリング
ReactDOM.render(
  <Index />,
  document.getElementById('content')
);
//gulpfile.js
var gulp = require('gulp');
var browserify = require('browserify');
var source = require("vinyl-source-stream");
var reactify = require('reactify');

gulp.task('browserify', function(){
  var b = browserify({
    entries: ['./client/scripts/index.jsx'],
    transform: [reactify]
  });
  return b.bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('./client/build'));
});
//server.js
var express = require('express');
var app = express();

//ポートの指定
app.set('port', process.env.PORT || 3000);

//ルートパスの指定
var clientPath = __dirname.replace("/server", "/client");
app.use('/', express.static(clientPath));

//redirect NOT FOUND page
//app.use(function(req, res, next){
//  res.status(404);
//  res.sendFile(clientPath + '/404.html');
//});

//エラーが発生した場合の指定
app.use(function(err, req, res, next) {
    console.log(err.stack);
    res.status(500).send(err.message);
});

//指定したポートでリクエスト待機状態にする
app.listen(app.get('port'), function () {
    console.log('server listening on port :' + app.get('port'));
});

これでファイルの作成も完了しました。
frontフォルダへ戻り、以下のコマンドでコンパイルします。

gulp browserify

最後に以下コマンドでサーバを起動し、localhost:3000で「hoge」と出力されていれば成功です。

node server/server.js

最後に

次回はrailsへdeviseを導入し、reactからユーザ登録する方法を掲載します。
Reactはおもしろいけど難しいっすわ(´Д` )

参考文献

今からはじめるReact.js〜準備〜

RaspberryPiの時刻合わせ

RaspberryPiの時間を設定するために、若干はまったのでメモ程度に。

$ date

コマンドで時間を確認します。
Wed 6 Jan 22:04:18 UTC 2016
初期設定ではアメリカ時間になっております。

$ sudo dpkg-reconfigure tzdata

で以下のようなツールが立ち上がると思うので。
画面共有 ピクチャ 2016年1月7日 7.08.07 JST
[Asia]→[Tokyo]
と設定を行いOK

これで再度dateコマンドを入力すると
Thu 7 Jan 07:11:04 JST 2016

日本時間に修正されます。

参考文献
http://www.absolute-keitarou.net/blog/?p=1201

ギターを7年ぶりくらいに購入した( ゚д゚)

あけましておめでとうございます。
Gakuです。

2016年も引き続き頑張ってまいりますので、今後ともよろしくお願いします。

去年のクリスマス、いつもどおり独り身だったのですが、いつも以上に寂しさの募るクリスマスでした。
「何かが足りない!」

そう感じ年末を過ごしていたのですが、ようやく気づきました。

「ギターが足りない」と。

クリスマスになると寂しさのあまり、毎年2ヶ月前ぐらいからクリスマスソングを練習していたあの頃。
こんなのとか

こんなの

それが今の自分には足りていないと感じたので、地元の大型量販店で急いで購入しました。

サイレントギターちゃん!
IMG_0138
なかなかのお値段でしたが、アパートでも練習できる優れもの。
ギターが欲しいと思っていた10年前、その時からずっと欲しかったもので10年ぶりにNewモデルが出たとの情報を掴んだので「今しかない」と感じ購入。

後悔はしていない。
本当に音良いし、こんないいものはない。

これで、合コンの時に「ご趣味なんですか?」って聞かれたら「プログラミングです!」から脱することができる!
。。。
。。

ギターやればモテる!っと思っていた高校生から月日が本当に立ったなと。
手は全く動かんし、弦抑えるだけで30分で指痛くなるし。。。
25歳で独立して海外で会社持つ思ってた高校生の頃の夢。。。いろいろ思い出してくる思い出。

現実を受け止め、今年はビジネスもプライベートも本気出して頑張りたいなと思っている今日この頃です。

最後に黒歴史

練習中の曲

以上!