RailsでReactJSを使う〜準備編

RailsでReactJSを使う〜準備編

RailsでReactJSを使う〜準備編

2017年4月13日 No Comments on RailsでReactJSを使う〜準備編

RailsでReactJSを使ってみようという企画をスタートしてみます。
まずはRailsのプロジェクトを作って、ReactJSをインストールして、HelloWorldを出力するところまでの準備編です。

これから何回かにわたり連載する内容はGitHubの下記のURLで公開しています。
https://github.com/h-mito/rails_with_react

Railsプロジェクト作成、ReactJSインストール

[bash]
$ cd
$ cd workspace

$ rails new rails_with_react
$ cd rails_with_react

$ nano Gemfile
[/bash]

末尾に1行追加する
[bash]
# …省略
gem ‘react-rails’, ‘~> 1.0’ # 追加する
[/bash]

react-railsをインストールして、プロジェクトに組み込む
[bash]
$ bundle install

$ rails g react:install
[/bash]

Reactコンポーネントの作成、Hello World作成

[bash]
$ rails g react:component FirstTest
[/bash]

以下のようなソースがapp/assets/javascripts/componentsに生成されると思います。

[bash]
var FirstTest = React.createClass({

render: function() {
return

;
}
});
[/bash]

これでも問題ないのですが、ReactJS本家の Get Started風に以下のように書き換えます。
で、renderメソッドに Hello Worldの出力を追加します。

[bash]
class FirstTest extends React.Component{
constructor(props){
super(props);
}

render(){
return (

Hello World!

);
}
}
[/bash]

テスト用コントローラー作成

[bash]
$ rails g controller first index
[/bash]

Reactコンポーネントを出力

viewsに出来上がったビューに先ほど作ったReactコンポーネントを出力してみます。

[bash]

First#index

Find me in app/views/first/index.html.erb

<%= react_component('FirstTest') %>
[/bash]

動作確認

[bash]
$rails s
[/bash]

ブラウザーで 以下のURLへアクセスし、以下のような画像が出れば成功。

localhost:3000/first/index

react5

About the author:

Tags:

Related Posts

  • Linux Mint（Ubuntu） で イマドキの開発しよう！ 2017年夏版
    2017年7月29日

    フロントReactJS、バックエンドRailsという構成でサービス立ち上げに関わってた。 思うんだけど、Macを開発に使うのはわかるんだけど、なぜWindows使う人がいるんだろ？ どうせリリースするのLinuxベースのOSなんだし、フロントはiPhoneのSafariか AndroidのChrome、まぁあとはWindowsのChrome,Firefox,IE,Edge Macはほとんど使わないんでわからないんだけど、Windowsはほんともっさり動作だよね。 これだけマシンのスペックがどんどん上がっているにもかかわらず、嫌がらせのように 動きがトロい。 コンソールでコマンドライン叩くのがほぼ最近の開発では必須なので、 Windowsのコマンドプロンプトは却下だよね。 で、なんでみんなUbuntuとかに流れてこないのかが不思議。 LinuxMintは知らない人も多いだろうけど、Ubuntuなら誰でも知ってる。 Ubuntuで開発すりゃいいのにね。 エディタはAtomかSublimeがありゃそれでいいし、 どうしてもIDEが欲しい人はEclipse入れりゃいい。 MysqlなんてLinuxのおまけみたいなもんだし、ApacheにしてもNginxにしても Linuxのおまけ同然。 Ubuntu17.10のベータ版入れてみたが、あのUIは醜悪だね。 ありゃ避けたほうがいい（笑） UbuntuのLTS版である 16.04系とかすっきりしてるけどね。 もちろん私は LinuxMint18系をその代わりに使うのですが・・・ 開発に必要なのって コンソール エディタ（Atom or Sublime） git nodejs npm ブラウザー（Chrome） DB（Mysql） Rails docker ハードコピー加工用に画像エディタ（Gimp) ぐらいなもんでしょ。 Webサービスで必要なのは github slack chatwork skype 全部Linuxでさくさく動く。 でも、Linuxで開発してる人少ないんだよなぁ・・・ 5年前ぐらいから、Linuxで開発はとても便利でいいよ！！ ってちょこちょこ書いてるんだけど、あまり実践してる人は見かけない。 高いMacをオシャレ気分で扱うのもいいが、 そこら辺に転がってる古いWindowsPCのHDDを50GBほど開けてあげたら Ubuntuの開発環境が 綺麗に収まって、快適に開発できるんだけどね。 何度も言います。 Linux Mint もしくは Ubuntuで開発しようよ！！

  • dockerを使って RailsとReact(node)の開発環境を構築する
    2017年4月29日

    はじめに dockerを使って、Rails（サーバーサイド）の環境を１つ、React(node)（クライアントサイド）の環境を１つ作る。 両環境ではChromeとAtomが動かせて、開発できるようになるところまでが目標です。 docker 自体触るのが初めてだったので、基本的なことから記載しておきます。 加えて初心者なので、間違えがあったらごめんなさい。 docker自体のインストールはあちこちに記載されているので、そちらを参照ください。 docker イメージのダウンロード まず、ubuntuのイメージを検索します。 スター(STARS)が多い、イメージをダウンロード（PULL)すればOKでしょう。 [bash] $ docker search “ubuntu 16” NAME DESCRIPTION STARS OFFICIAL AUTOMATED ubuntu Ubuntu is a Debian-based Linux operating s… 5919 [OK] 1and1internet/ubuntu-16-nginx-php-phpmyadmin-mysql-5 ubuntu-16-nginx-php-phpmyadmin-mysql-5 12 [OK] 1and1internet/ubuntu-16-apache ubuntu-16-apache 2 [OK] $ docker pull ubuntu [/bash] dockerの基本的な操作 dockerを起動し、bashシェルを起動します。 [bash] $ docker run -ti ubuntu bash [/bash] dockerの仮想環境でbashシェルが走ります。 ホストOSから dockerを閲覧・操作する ■起動中のコンテナの確認 [bash] $ docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 561fabf4163e ubuntu “bash” 9 minutes ago Up 9 minutes adxx_eadd [/bash] ■停止しているコンテナの確認 [bash] $ docker ps -a CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 8541933cccdc hello-world “/hello” 3 seconds ago Exited (0) 2 seconds ago sick_euclid [/bash] ■コンテナの削除 [bash] docker rm [CONTAINER ID] [/bash] ■dockerイメージ一覧 [bash] $ docker images REPOSITORY TAG IMAGE ID CREATED SIZE ubuntu latest e7e0c0b1785f About an hour ago 163.1 MB [/bash] ■コンソールを複数立ち上げたい場合 docker ps で起動中のコンテナ（CONTAINER ID）を確認し、そのNAMEで 別のコンソールを立ち上げる [bash] $ docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS cac1b80e535d ubuntu “bash” 13 minutes ago Exited (0) 9 seconds ago [/bash] [bash] $ docker exec -ti cac1 bash [/bash] ■dockerイメージの保存 ホストPC側で 起動中のdocker を 新しいリポジトリ名で commit します。 [bash] $ docker commit cac1 ubuntu/test1 sha256:ea0b9db5551f4e5a8cd5959f16b54943deda0b6d481fce39092f6b6af5333ff3 [/bash] ■dockerコンテナをむやみに増やさない方法 docker run するたびに新しいコンテナが出来ていきます。 これでは管理がややこしくなるので、docker run するときに –rm　オプションをつけて docker から exitしたら、コンテナを削除するようにしたほうが便利です。 docker で作業したイメージを保存したい場合は、上に記述した docker commitをすればOKですので。 [bash] $ docker run –rm -ti ubuntu bash [/bash] Atom（エディタ）とChrome（ブラウザー）を動かせるようにする docker環境で、AtomとChromeをインストールしてみましょう。 最初は 最低限必要そうなパッケージを入れてみます。 [bash] # apt-get update [/bash] wget,net-tools コマンドのインストール [bash] # apt-get install wget net-tools nano [/bash] docker の X Windowシステムを使えるようにする。 dockerはたぶんコマンドラインで出来るサーバー環境を構築することをするのがメインなのかと思いますが・・・ 今回は開発環境をdockerで作りたいので、 dockerのX Windowシステムを使えるようにしてやる必要があります。 いきなりAtomやChromeをインストールするのは重いので、 x11-appsをインストールして動作確認してみます。 [bash] # apt-get install sudo # apt-get install x11-apps [/bash] ■dockerイメージの保存 ホストPC側で 起動中のdocker を 新しいリポジトリ名で commit します。 [bash] $ docker commit cac1 ubuntu/x11 sha256:ea0b9db5551f4e5a8cd5959f16b54943deda0b6d481fce39092f6b6af5333ff3 [/bash] 一旦 docker(仮想環境)から exitして再度、X Window を利用できるようなパラメーターをつけて、dockerを起動します。 [bash] # exit [/bash] dockerのX Windowシステムをホスト側で使えるようにして、起動する [bash] $ docker run -ti –privileged –rm -e DISPLAY=$DISPLAY -v /tmp/.X11-unix/:/tmp/.X11-unix [IMAGE ID] bash [/bash] ユーザーの作成・xclockを起動 root ユーザーではX Window を利用できないようなので、一般ユーザーを作ります。 そしてその一般ユーザーに sudo権限を与えます。…

  • Webpackを使って、Sassをコンパイルする方法 2017年4月版
    2017年4月28日

    はじめに Webpackを使って、Sassをコンパイルする方法です。 Webにそれなりにやり方が載ってますが、2017年4月末現在では、動く例が少なかったので、 実際に動いた例を示しておきます。 末尾にReactなんかの開発で ES6をノーマルなJavascriptに変換するときとの合わせ技の方法も記載しておきます。 コンパイル環境構築 [bash] $ mkdir test-saas $ cd test-saas $ npm init -y $ npm install webpack extract-text-webpack-plugin css-loader sass-loader style-loader node-sass –save-dev [/bash] こんな感じのフォルダツリーにsassがあると仮定します。 webpack.configの調整 ルートフォルダに webpack.config.jsを以下のような内容で作成します。 目標は sassフォルダにある app.scssとsub.scssを dist/cssフォルダにapp.cssとsub.cssとして出力する。 [bash] var path = require(‘path’); var webpack = require(‘webpack’); var ExtractTextPlugin = require(‘extract-text-webpack-plugin’); module.exports = { devtool: ‘source-map’, entry: { app: ‘./sass/app.scss’, sub: ‘./sass/sub.scss’ }, output: { path: path.join(__dirname, ‘./dist/css’), filename: ‘[name].css’ }, module: { loaders: [ { test: /\.scss$/, loader: ExtractTextPlugin.extract(‘css-loader!sass-loader’) } ] }, plugins: [ new ExtractTextPlugin(‘[name].css’) ], } [/bash] 動作環境（各モジュールのバージョン） 2017年4月現在で動いたのは以下のバージョンです。 [bash] “devDependencies”: { “css-loader”: “^0.28.0”, “extract-text-webpack-plugin”: “^2.1.0”, “node-sass”: “^4.5.2”, “sass-loader”: “^6.0.3”, “style-loader”: “^0.16.1”, “webpack”: “^2.4.1”, } [/bash] コンパイル [bash] ./node_modules/.bin/webpack [/bash] こんな感じにファイルができていれば成功です。 あとがき sassだけをコンパイルしたいケースは少ないと思いますが、Reactなんかでアプリを作り 同時にsassもコンパイルしたいケースなんかに webpack.config.js をどう設定するかという ことで悩んだりしますよね。 ES6とかとのコンパイルと組み合わせたい場合は、 [bash] module.exports = { ごにょごにょ } [/bash] の部分を配列定義に変えてやって、 [bash] module.exports = [ { ごにょごにょ }, { ごにょごにょ }, ] [/bash] としてやってください。 Reactで ES6をノーマルなJavaScriptに変換するときの webpack.config.jsの設定は こちらの記事を参考にしてみてください。

  • React Native デバイスの縦向き(PORTRAIT)、横向き(LANDSCAPE)の変化を捉える（イベント）
    2017年4月26日

    はじめに React Nativeを初めて１０日ほどが立ちました。画面デザインが難しいですね。 flex layoutを使うと、それなりの画面は出来ますが・・・ ヘッダー(Navigation)とフッター(Menu or Tab)のサイズが 曖昧になり、 時には隠れてしまうケースもあります。 で、どうすりゃいいんだと考えて、今、思いついたのは、 flex layoutを諦めて、固定ピッチで画面デザインをしてやること。 固定ピッチと言っても、デバイスの画面サイズを判定して、 ヘッダーはこの高さ、メインのコンテンツはこの高さ、フッターはこの高さ というのを計算で求めてやるのが、一番スマートかなという気がしています。 そこで、デバイスの向きが縦向きから横向きに変化、その逆、両方に対応して どんなロジックを書けばいいか考えてみました。 画面を構成するコンポーネント だいたいこんなイメージで・・・ index.android.js や index.ios.js で　これらを含んだ Viewを１つレンダリングしてやる ようなイメージです。 デバイスの向きの変化を捉える これ、 Viewに onLayoutというイベントがありますので、こいつを使います。 こいつと、Dimensionsから求められるデバイスの画面サイズを組み合わせて、 ヘッダー・フッター・メインコンテンツの高さを計算します。 それを setStateなんかを使って、設定してあげて、画面を再描画すればOKです。 日本語で書くとあっさりしてますが、実際実装するとなると それなりにコードを書かなきゃなりません。 index.android.js の例 [bash] import React from “react” import {View, Dimensions, Alert} from “react-native” 〜　中略　〜 handleLayoutChange(event) { let {height, width} = Dimensions.get(“window”) if (height > width) { Alert.alert(“縦向き PORTRAIT”) } else{ Alert.alert(“横向き LANDSCAPE”) } } render() { { this.handleLayoutChange(event) }}> } 〜　中略　〜 [/bash] 動作イメージ 実際にうまく計算できると、こんな感じになります。 あとがき React Native以外でスマホ向けのアプリを作ったことがないので、 実際にこんなロジックを実装しないといけないのかどうかよく分かっておりません。。 なんで、フッターを画面の下にはりつけることぐらい出来ないんだよ・・・ と思いますが、今 軽く調べた感じでは、方法はなさそうなので、 ゴリゴリ計算して求めちゃう方法が、一番手っ取り早い気がします。 もっとスマートな方法があれば、じゃんじゃんコメントください。

  • Reactで react-dropzone と axiosを使ってファイルアップロードを実装してみる（バックエンドはRails）
    2017年4月24日

    はじめに Reactでファイルアップロードを実装してみたくて、どのような方法があるのか調べてみた。 あまり深く調べてはないが、１つめに良さそうだと感じた react-dropzone を使ってみたら、 これがかなりいい！！ あまりに気に入ってしまったので、react-dropzoneでアップロード対象のファイルを選んで、 axiosでPOSTして、サーバーサイドのRailsでファイルを保存するところまでをざっと紹介します。 Reactのことは分かっている前提ですすめますので、あしからず。 出来上がりのイメージはこんな感じ 画面左上に ファイルをドロップする場所があり、その右側にドロップされたファイルを列挙する場所がある。 で、画面下部にアップロード対象ファイルのプレビュー表示。 npm で必要なものをインストール [bash] $ npm install –save react-dropzone axios [/bash] アップロード画面実装 一気に貼り付けちゃいましたので、ざっと説明しておきます。 DropZone タグで、ドラッグドロップでファイルをアップロードできる機能が できちゃいます。acceptプロパティで受け付ける画像の種類（ファイルの種類）を指定し、 onDropでドラッグドロップされた時の処理を実装します。 今回はonDropで受付可能なファイル、不可能なファイルを引数で受け取り、 ステートを変えて、ドロップ領域の右側にそれらのファイル名を列挙します。 と同時に、画面下部に受付可能なファイルのプレビューを表示しちゃいます。 これがいとも簡単なんです。びっくりですよ。 アップロードボタンがクリックされたら、FormData オブジェクトを作り、 そこにアップロード対象のファイルを詰め込んで、axiosでPOSTします。 たったこれだけなんですよ、ホント便利ですね。 何個のファイルがアップロードされるかは不定なので、 file_1、file_2、file_3のような連番の名前をつけておきます。 [bash] import React from “react” import DropZone from “react-dropzone” import axios from “axios” import {HOST_NAME} from “../constants/index” class Upload extends React.Component { constructor(props){ super(props) this.state = {acceptedfiles: [],rejectedfiles: []} } handleDrop(accepted, rejected) { this.setState({acceptedfiles: accepted, rejectedfiles: rejected}) } handleOpenClick() { this.dropzone.open() } handleUpload() { let data = new FormData() data.append(‘name’, ‘Tom’) data.append(‘age’, ’28’) let cnt = 1 this.state.acceptedfiles.map(file =>{ data.append(‘file_’ + cnt, file) cnt+=1 }) axios.post(HOST_NAME + ‘/upload_image’, data) } render(){ let prev = [] this.state.acceptedfiles.map(f => prev.push( ) ) return ( Hello Upload… this.dropzone = node} accept=”image/jpg,image/png” onDrop={(accepted, rejected)=> this.handleDrop(accepted, rejected)} > ここにファイルをドロップしてください。 this.handleOpenClick(e)}> Open Dropzone this.handleUpload(e)}> Upload実行 Accepted files… {this.state.acceptedfiles.map(f => {f.name} – {f.size} )} Rejected files… {this.state.rejectedfiles.map(f => {f.name} – {f.size} )} Preview {prev} ) } } export default Upload [/bash] サーバーサイドの実装 Railsの実装になります。 まず最初に渡ってきたパラメーター(:name）に従ってフォルダを作ります。 今回の例では Tomさん固定です。 で、file_1、file_2、file_3と連番でアップロードされてきたファイルを そのフォルダに保存します。 ね、簡単でしょ。 [bash] def upload_image image_path = Rails.root.to_s + “/public/upload_images/” + params[:name] FileUtils.mkdir_p(image_path) unless FileTest.exist?(image_path) cnt = 1 while true do break if params[“file_” + cnt.to_s].blank? file = params[“file_” + cnt.to_s] fname = file.original_filename File.open(image_path + “/#{fname}”, ‘wb’) { |f| f.write(file.read) } cnt += 1 end end [/bash] デザインCSS とりあえず、適当ですが、こんな感じで。 [bash] div.uploadFile{ float: left; width: 260px; } div.preview { float: left; padding: 10px; border: 1px solid #cccccc; } br.clear { clear: both; } [/bash] あとがき 出来上がってみれば、本当に簡単に出来てしまったように見えるのですが・・・ 画像をPOSTした時 Rails側で – 422 unprocessable entity – Invalid form authenticity token というエラーが出て悩まされました。CSRFについては分かってるつもりだったのですが、 分かってなかったようです。 ReactでSPAを作る時なんかは JSをサーブするサーバーと、APIをサーブするサーバーが 別になると思うので、 gem rack-cors を導入して、信用できるドメインを絞り込んで APIを受け付ける。 で、CSRFは ApplicationControllerで – protect_from_forgery with: :null_session として、とりあえず何でも受け付けるようにする。という感じでしょうか。

  • ReactでSPAを作り、Twitter認証(OAuth)でログインする。バックエンドはRails
    2017年4月21日

    はじめに ReactでSPAを作ることになって、ログイン認証にメール＆パスワードの認証に加えて、 GoogleやTwitter認証も加えたくなった時、どうすればよいかわからなかった。 バックエンドはRailsだが、あくまでAPIサーバー的な立場なので メジャーなomniauth なんかは使えそうにない。。。 前回のGoogle編に続き、今回はTwitter編。 あれこれ悩みながらなんとか動くところまでたどり着いたので、やり方を公開。 React+Reduxの環境なんですが、そこまで立ち入ると話がややこしくなるので、 実装のエキス部分だけを記載してみます。 Twitter Developerにアプリ登録 Twitter Developer これについては上記のURLにアクセスしてアプリを登録してください。 アプリ名とコールバックURLを登録したら、Consumer Key (API Key)とConsumer Secret (API Secret)がもらえます。 詳しくは書きません、ググればこれはたくさん書いてあります。 動作イメージ デザインはしょぼいですが、こんな感じのログイン画面。 GoogleかTwitterで認証してログインしてね、というもの。 今回はTwitterについてのみ取り上げます。 Twitterでログインをクリックすると、Twitterが用意しているOAuth用の画面が表示されて、 Twitterのユーザー名とパスワードを入れて、最後に今回作るアプリ（SPA）へのアクセス許可画面が表示され、 許可すると、SPAアプリにログイン出来るというもの。 ステップ１(Javascript、Ajax) まずは まずはTwitterのOAuth用URLの取得のためのRails API（自作）呼び出し。 Reactの書き方なので、functionらしくないですが・・・ただのfunctionだと思ってソースを見てください。 API呼び出しの結果、OAuth用のURLが得られるので、window.openする感じです。 ポップアップというか別タブでTwitterのOAuth画面が開きます。 で、window.openしたあとは setTimeoutで1秒おきにウィンドウが閉じたかどうかをチェックします。 [bash] onLoginTwitter: (history) => { axios.get(“http://localhost:3000/get_twitter_oauth_url”, { withCredentials: true, params: {} }) .then(function (response) { windowLogin = window.open(response.data.oauth_url) setTimeout(function(){CheckLoginStatusTwitter(history)}, 1000) windowLogin.focus() }) .catch(function (response) { console.log(response); }); } [/bash] ステップ１．５(Rails) ステップ１から呼び出されるRailsのソース。 CONSUMER_IDとCONSUMER_SECRETを用いて、OAuth用のURLを取得し、JSONで結果を戻します。 [bash] require ‘oauth’ def get_twitter_oauth_url consumer = OAuth::Consumer.new( Oauth::TWITTER_CONSUMER_ID, Oauth::TWITTER_CONSUMER_SECRET, { :site => “https://api.twitter.com” } ) request_token = consumer.get_request_token( :oauth_callback => “http://localhost:3000/oauth_twitter” ) cookies[:request_token] = request_token.token cookies[:request_token_secret] = request_token.secret rtn = {} rtn[“status”] = true rtn[“oauth_url”] = request_token.authorize_url render json: rtn end [/bash] ステップ２(Javascript) ステップ１のソースのWindow呼び出しのところだけを抜粋。 RailsのAPIで戻ってきた認証用URLを引数にして window.open。 [bash] windowLogin = window.open(response.data.oauth_url) [/bash] ステップ３ ここはプログラムする必要なしです。TwitterのOAuthの画面で 純粋に認証＆許可をしてもらいます。 ステップ４(Rails) Twitter側の認証と許可の処理が終わると、ステップ１．５で指定したコールバックURLに制御が戻ってきます。 テスト環境ですのでRailsのデフォルト http://localhost:3000 でサーバーが立ち上がっていて、 コールバックURLは　http://localhost:3000/oauth_twitter　です。 では、Railsの方の実装を見てみましょう。 最初にCONSUMER_IDとCONSUMER_SECRETを用いて、トークンを作成します。 さらに、パラメーターで渡ってきた、 oauth_tokenとoauth_verifierを使って アクセストークンを得ます。 最後に得られたアクセストークンを使ってAPIアクセスし、ユーザー情報を得ます。 で、cookiesに得られた情報をセットして、このメソッドを抜けます。 cookies[:oauth_token] = params[:oauth_token] cookies[:twitter_uid] = user_info[“id”] cookies[:screen_name] = user_info[“screen_name”] [bash] class OauthController < ApplicationController #URL /oauth_twitter への処理 def twitter consumer = OAuth::Consumer.new( Oauth::TWITTER_CONSUMER_ID, Oauth::TWITTER_CONSUMER_SECRET, { :site => “https://api.twitter.com” } ) request_token = OAuth::RequestToken.new( consumer, cookies[:request_token], cookies[:request_token_secret] ) access_token = request_token.get_access_token( {}, :oauth_token => params[:oauth_token], :oauth_verifier => params[:oauth_verifier] ) response = consumer.request( :get, ‘/1.1/account/verify_credentials.json’, access_token, { :scheme => :query_string } ) rtn = {} case response when Net::HTTPSuccess user_info = JSON.parse(response.body) if user_info[“screen_name”] cookies[:oauth_token] = params[:oauth_token] cookies[:twitter_uid] = user_info[“id”] cookies[:screen_name] = user_info[“screen_name”] else #”Authentication failed” end else #”Failed to get user info via OAuth” end end end [/bash] RailsのGemfileに以下の３つのgemを追加します。 [bash] gem ‘json’ gem ‘oauth’ gem ‘rack-cors’, :require => ‘rack/cors’ [/bash] SPAをサーブしているサーバーとAPIをサーブしているサーバーが別物になるので、 クロスドメインなAPIアクセスとなるため、API側でそれを許可する必要があります。 gem rack-cors でそれに対応できます。で、対応するためにapplication.rbを 以下のように書き換えます。　本番ではoriginsは「＊」ではなく、ちゃんと特定のドメイン名を入れるべし。 config/application.rb [bash] class Application < Rails::Application config.middleware.insert_before ActionDispatch::Static, Rack::Cors do allow do origins '*' resource '*', :headers => :any, :methods => [:get, :post, :delete] end end end [/bash] ステップ５(RailsのJavascript) OauthControllerのtwitterメソッドで処理をしたので、普通に処理が終われば、ポップアップ画面には そのメソッドに対応するビューが表示されます。 なので、対応するビューは作るのですが、あくまでダミーで結構です。 そもそも、ポップアップ（別タブ）でTwitter認証が開いていて、認証が終わればポップアップは閉じてほしい はずですので・・・ で、assets/javascripts 配下に以下のようなJavaScript（CoffeeScriptではない）を作ります。 ファイル名はなんでもいい。 で、ここでする処理は、ダミーのビューが表示された時にそのhrefをチェックして、 認証終了のダミービューだと判定できたら、window.closeしてやるというものです。 [bash] $(function(){ if (window.location.href.indexOf(“oauth_twitter”) >0){ window.close(); }…

  • ReactでSPAを作り、Google認証(OAuth)でログインする。バックエンドはRails
    2017年4月20日

    はじめに ReactでSPAを作ることになって、ログイン認証にメール＆パスワードの認証に加えて、 GoogleやTwitter認証も加えたくなった時、どうすればよいかわからなかった。 バックエンドはRailsだが、あくまでAPIサーバー的な立場なので メジャーなomniauth なんかは使えそうにない。。。 あれこれ悩みながらなんとか動くところまでたどり着いたので、やり方を公開。 React+Reduxの環境なんですが、そこまで立ち入ると話がややこしくなるので、 実装のエキス部分だけを記載してみます。 Google Developer Consoleにアプリ登録 Google Developers Console これについては上記のURLにアクセスしてアプリを登録してください。 アプリ名とコールバックURLを登録したら、クライアントIDとクライアントシークレットがもらえます。 詳しくは書きません、ググればこれはたくさん書いてあります。 動作イメージ デザインはしょぼいですが、こんな感じのログイン画面。 GoogleかTwitterで認証してログインしてね、というもの。 今回はGoogleについてのみ取り上げます。 Google+でログインをクリックすると、Googleが用意しているOAuth用の画面が表示されて、 Googleのユーザー名とパスワードを入れて、最後に今回作るアプリ（SPA）へのアクセス許可画面が表示され、 許可すると、SPAアプリにログイン出来るというもの。 ステップ１(Javascript) まずはGoogleのOAuth画面の呼び出し。 Reactの書き方なので、functionらしくないですが・・・ただのfunctionだと思ってソースを見てください。 https://accounts.google.com/o/oauth2/auth に必要なパラメーターをざーっとつけて window.openする感じです。 ポップアップというか別タブでGoogleのOAuth画面が開きます。 で、window.openしたあとは setTimeoutで1秒おきにウィンドウが閉じたかどうかをチェックします。 [bash] onLoginGoogle: (history) => { const GOOGLE_CLIENT_ID = “52630050245845-i8xt563tc215pv9mxjy13e2ewm6mrewwl.apps.googleusercontent.com” let state_token = getRndStr() Cookies.set(“mystate”, state_token) let url = “https://accounts.google.com/o/oauth2/auth?” url += “client_id=” + GOOGLE_CLIENT_ID + “&” url += “response_type=code&” url += “scope=email%20profile&” url += “redirect_uri=http://localhost:3000/oauth_google&” url += “state=” + state_token windowLogin = window.open(url) setTimeout(function(){CheckLoginStatusGoogle(history)}, 1000) windowLogin.focus() }, const getRndStr = () => { ランダムな文字列を生成するメソッドです。 } [/bash] ステップ２(Rails) ステップ１でウィンドウを開くときのURLにコールバック用のURLを設定していますので、Google側の認証が終われば、 コールバックURL（自分で実装するアプリ）に制御が戻ってきます。 テスト環境ですのでRailsのデフォルト http://localhost:3000 でサーバーが立ち上がっていて、 コールバックURLは　http://localhost:3000/oauth_google　です。 では、Railsの方の実装を見てみましょう。 最初にステップ１でGoogleの認証画面を呼び出した時のステート（ランダム文字列）と Googleさんが戻してきたステートが一致するか確認します。 OKならば、Developer Consoleで登録した、CLIENT_IDとCLIENT_SECRETを使い、 トークンを取得しに行きます。 最後に得られたトークンを使って、API呼び出しをしてGoogleに登録されている情報を読み出します。 で、cookiesに得られた情報をセットして、このメソッドを抜けます。 cookies[:google_code] = params[:code] cookies[:email] = email cookies[:google_uid] = api_result[“user_id”] [bash] class OauthController < ApplicationController #URL /oauth_google への処理 def google cookies[:google_code] = params[:code] if cookies[:mystate].present? && cookies[:mystate] == params[:state] && params[:code].present? postData = { code: params[:code], client_id: Oauth::GOOGLE_CLIENT_ID, client_secret: Oauth::GOOGLE_CLIENT_SECRET, redirect_uri: "http://localhost:3000/oauth_google", grant_type: "authorization_code" } response = Net::HTTP::post_form(URI.parse("https://accounts.google.com/o/oauth2/token"),postData) result = JSON.parse(response.body) if result["expires_in"] > 0 && result[“id_token”].present? api_response = Net::HTTP.get URI.parse(“https://www.googleapis.com/oauth2/v1/tokeninfo?id_token=#{result[‘id_token’]}”) api_result = JSON.parse(api_response) if api_result[“issuer”] == “accounts.google.com” && api_result[“issued_to”] == Oauth::GOOGLE_CLIENT_ID && api_result[“audience”] == Oauth::GOOGLE_CLIENT_ID && api_result[“email_verified”] email = api_result[“email”] puts “Signin: success Google OAuth ‘#{email}’ / #{api_result[‘user_id’]}” cookies[:email] = email cookies[:google_uid] = api_result[“user_id”] end end end end end [/bash] ステップ３(RailsのJavascript) OauthControllerのgoogleメソッドで処理をしたので、普通に処理が終われば、ポップアップ画面には そのメソッドに対応するビューが表示されます。 なので、対応するビューは作るのですが、あくまでダミーで結構です。 そもそも、ポップアップ（別タブ）でGoogle認証が開いていて、認証が終わればポップアップは閉じてほしい はずですので・・・ で、assets/javascripts 配下に以下のようなJavaScript（CoffeeScriptではない）を作ります。 ファイル名はなんでもいい。 で、ここでする処理は、ダミーのビューが表示された時にそのhrefをチェックして、 認証終了のダミービューだと判定できたら、window.closeしてやるというものです。 [bash] $(function(){ if (window.location.href.indexOf(“oauth_google”) >0){ window.close(); } }); [/bash] ステップ４(SPAのJavascript) 最後にクライアントサイドです。window.openの時にsetTimeoutで呼ばれるメソッドです。 windowLogin.closedの状態を１秒間隔でチェックし、Googleの認証画面が閉じたら alertに認証で得られた情報をクッキーから表示します。（別に表示する必要はないのですが・・・） で、認証が通ったと判定できたら、アプリのトップページなどへジャンプしてやります。 あとはSPAなのでAPIサーバーへアクセスするたびにおそらくユーザー認証も必ずすることになると思うので、 APIを呼ぶたびに、ここで得られた情報を付与してやるイメージでしょうか・・・ 本題とはそれますが、setTimeoutで引数をつけたfunctionを呼びたいときは 無名関数とする のがルールのようです。 [bash] const CheckLoginStatusGoogle = (history) => { if (windowLogin.closed) { alert(Cookies.get(‘mystate’) + “\n” + Cookies.get(‘google_code’) + “\n” + Cookies.get(’email’) + “\n” + Cookies.get(‘google_uid’)) if (Cookies.get(‘google_code’) != undefined && Cookies.get(’email’) != undefined){ history.push(“/counter”) } else{ alert(“認証に失敗しました”) } } else{ setTimeout(function(){CheckLoginStatusGoogle(history)}, 1000) } } [/bash] あとがき あっさりと説明しちゃいましたが、理屈がわかるまで結構時間がかかりました。 SPAでSNS認証するならどうすりゃいいんだという情報が、以外になくて・・・ あちこち読み漁って、なんとか形になりました。 何かの参考になればと・・・・

  • React-Router(react-router-dom)とReduxとRailsを組み合わせる
    2017年4月14日

    はじめに React+Redux+RailsでSPAアプリを作ることになったので、あれこれ調べたのでメモです。 SPAというと、当然ですが、１つのページであれこれできちゃうものを作らなきゃいけないわけで・・・ そうなるとコンテンツ制御の仕組みが必要です。そこで登場するのがReact-Router-Dom。 で、これ単体では使い方簡単なんですが、RailsとReduxを絡めて動作させる方法が分からなかったので あれこれ調べて、なんとか動くところまでたどり着いたので、メモを公開します。 React-Routerは古いようで、React-Router-Domにしてみました。。 ドキュメントが超少なくてまいりました。 完成図はこんな感じ。 青いところがメニューで、クリックすると、下のコンテンツがReact-Routerで入れ替わります。 ソースコードはGitHubで公開しています。利用方法は、記事の末尾を参照ください。 Railsプロジェクト作成 [bash] $ rails new react_router_with_redux $ cd react_router_with_redux/ [/bash] Gemを調整して、bundle install [bash] $ nano Gemfile [/bash] [bash] gem ‘therubyracer’, platforms: :ruby gem ‘react-rails’ gem ‘browserify-rails’ [/bash] [bash] $ bundle install [/bash] application.rbを編集 作った ES6（JavaScriptのバージョン）のソースをES5に自動変換するための設定を追記 config.browserify_rails　の行を追加 config/application.rb [bash] require_relative ‘boot’ require ‘rails/all’ # Require the gems listed in Gemfile, including any gems # you’ve limited to :test, :development, or :production. Bundler.require(*Rails.groups) module RailsRedux class Application < Rails::Application # Settings in config/environments/* take precedence over those specified here. # Application configuration should go into files in config/initializers # -- all .rb files in that directory are automatically loaded. + config.browserify_rails.commandline_options = '-t babelify' end end [/bash] Rails に Reactインストール [bash] $ rails g react:install [/bash] application.jsの編集 app/assets/javascripts/application.js ・Reactは npmでインストールしたものを使うのでカット。 ・require_tree . もカット 変更前 [bash] //= require jquery //= require jquery_ujs //= require turbolinks //= require react //= require react_ujs //= require components //= require_tree . [/bash] 変更後 [bash] //= require jquery //= require jquery_ujs //= require turbolinks //= require react_ujs //= require components [/bash] React、Redux、etc…の準備(node_modules） React、Redux、React-Routerその他諸々を npm を使ってインストールします。 [bash] $ npm init -y $ npm install –save-dev browserify browserify-incremental babelify babel-preset-es2015 babel-preset-react $ npm install –save react react-dom react-redux redux redux-thunk react-router-dom [/bash] .babelrc ファイルをRailsのルートフォルダに作成 [bash] { “presets”: [“es2015”, “react”] } [/bash] Reduxの標準的なフォルダを作成 [bash] $ cd app/assets/javascripts/ $ mkdir actions containers reducers [/bash] components.js編集 app/assets/javascripts/components.js アプリ名は 「MyApp」とします。 myapp.jsはアプリのエントリーポイントとなるJSファイルです。ここに定義したクラス名（const宣言）を windowの下にセット（変数として公開）してやる。 変更前 [bash] //= require_tree ./components [/bash] 変更後 [bash] window.React = require(‘react’); window.ReactDOM = require(‘react-dom’); window.MyApp = require(‘./myapp.js’); [/bash] Reduxでカウンターアプリ、＋静的ページをひたすら作る ここ以降、しばらくは、Reduxでカウンターのインクリメント、デクリメントできるアプリを作ります。 加えて、静的ページもいくつか作ります。 何も考えずにソースをコピーしていってやってください・・・ app/assets/javascripts/actions/index.js [bash] export const counter_increment = () => { return { type: “INCREMENT” } } export const counter_decrement = () => { return { type: “DECREMENT” } } [/bash] app/assets/javascripts/components/About.js [bash] import React from “react” const About = () => { return ( This is About ) } export…

< >

Leave a comment

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

Recent Comments

    Back to Top