Eclipseを使ったRuby on Railsのデバッグ環境構築 〜 Ubuntu編（その２）

Eclipseを使ったRuby on Railsのデバッグ環境構築 〜 Ubuntu編（その２）

Eclipseを使ったRuby on Railsのデバッグ環境構築 〜 Ubuntu編（その２）

2014年1月16日 7 Comments on Eclipseを使ったRuby on Railsのデバッグ環境構築 〜 Ubuntu編（その２）

Ruby on Rails　を開発する環境を Ubuntu上に構築するためのガイダンスです。

特にEclipseにおけるシングルステップ　デバッギング環境の構築を目標としたガイダンスです。
今回は前回の記事の続編で、Eclipseのインストール、そして、ブレークポイントを設定してのシングルステップ可能なデバッグ環境の構築編です。

Eclipse/JDKのインストール

では、Eclipseをインストールします。EclipseにはJDKが必要なので、JDKとEclipseをダウンロード。

JDKはOracleのサイトから、適切なJDKをダウンロードしてください。

EclipseはEclipseのサイトから、適切なものをダウンロードしてください。Eclipse Standardがお勧めです。

以下はお好みの場所で構いませんが、JDKとEclipseをインストールします。
今回は /usr/java フォルダにインストールすると仮定します。

[bash]
$ sudo mkdir /usr/java
$ sudo mv ~/Downloads/eclipse-standard-kepler-SR1-linux-gtk.tar.gz /usr/java
$ sudo mv ~/Downloads/jdk-7u51-linux-i586.tar.gz /usr/java/

$ cd /usr/java
$ sudo tar xvzf jdk-7u51-linux-i586.tar.gz
$ sudo tar xvzf eclipse-standard-kepler-SR1-linux-gtk.tar.gz

[/bash]

環境変数の設定

これでインストールは完了ですが、このままでは環境変数が存在しないため、Javaが利用出来ません。
~/.bashrcを編集し、以下を追記します。

[bash]
$nano ~/.bashrc

#以下を追記
JAVA_HOME=/usr/java/jdk1.7.0_45
PATH=$PATH:$JAVA_HOME/bin
CLASSPATH=$JAVA_HOME/jre/lib/rt.jar

export JAVA_HOME PATH CLASSPATH
[/bash]

追記が終わったら、上記の追記内容を反映します。（次回ログイン時からは自動的に読み込まれますので、この操作をする必要はありません。）
その後、環境変数 JAVA_HOMEを確認してみます。

[bash]
$ source ~/.bashrc
$ echo $JAVA_HOME
/usr/java/jdk1.7.0_45
[/bash]

Eclipse日本語化

ついでにEclipseの日本語化もしておきましょう。

[bash]
$ wget http://sourceforge.jp/projects/mergedoc/svn/view/trunk/Pleiades/build/pleiades.zip?view=co&root=mergedoc

$ sudo mkdir /usr/java/tmp
$ sudo mv pleiades.zip /usr/java/tmp
$ cd /usr/java/tmp
$ sudo unzip pleiades.zip
$ sudo cp pleiades/features/* /usr/java/eclipse/features/ -R
$ sudo cp pleiades/plugins/* /usr/java/eclipse/plugins/ -R
[/bash]

eclipse.iniの編集
[bash]
$ sudo nano /usr/java/eclipse/eclipse.ini
最後に以下を追記
-javaagent:/usr/java/eclipse/plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar
[/bash]

では、eclipseを起動してみましょう。
めでたく、日本語化されたEclipseが起動していたらOKです。

[bash]
/usr/java/eclipse/eclipse &
[/bash]

Eclipse、メニューが表示されない不具合の解消

ただし、ここで問題があり！　Ubuntu１３系では何故かEclipseのメニューが表示されないという不具合がある。
回避するために以下のファイル(eclipse-run)を追加。そして、起動はeclipse直接ではなく、作成したスクリプトキックすることにする。

[bash]
$ sudo nano /usr/java/eclipse/eclipse-run

内容は以下
#!/bin/bash
export UBUNTU_MENUPROXY=0
$(dirname $0)/eclipse

編集がおわったら
$ sudo chmod 755 /usr/java/eclipse/eclipse-run

[/bash]

では、Eclipseを起動してみます。

[bash]
$ /usr/java/eclipse/eclipse-run &

[/bash]

めでたく起動し、メニューも表示されるようになっていればOKです。

Aptanaプラグインのインストール

メニューより、ヘルプ＞＞新規ソフトウェアのインストールを選択

http://download.aptana.com/studio3/plugin/install

追加ボタンをクリックし、名前にAptana、ロケーションに上記のURLを入力します。
リストに　Aptana Studio 3　が表示されますので、チェックを入れ、インストールを行います。

rails-2

Railsプロジェクトを作成

では、テスト的にRailsプロジェクトを作ってみます。
メニューより　ファイル＞＞新規＞＞ Railsプロジェクトを選択
プロジェクト名は「testproj」、プロジェクトのフルパスは ~/workspace/testproj　と仮定します。

メニュー_001

では、Railsアプリを起動してみます。

[bash]
$ cd ~/workspace/testproj
$ rails s

エラーメッセージ
Could not find a JavaScript runtime. See https://github.com/sstephenson/execjs for a list of available runtimes. (ExecJS::RuntimeUnavailable)

[/bash]

上記でエラーが出力される場合があります。たいていは何かが足りないからインストールしてくれ的なメッセージだと思いますので、適宜、必要なものをインストールしてやってください。
JavaScript Runtimeがないとのエラーであれば、nodejsをインストールすることで解決します。

[bash]
$ sudo apt-get install nodejs
[/bash]

今後 mysqlを利用することがあるのなら

[bash]
$ sudo apt-get install libmysqlclient-dev

[/bash]

動作確認

では、いよいよRailsアプリの動作確認です。
再度、railsサーバーを起動します。

[bash]
$ rails s

=> Booting WEBrick
=> Rails 4.0.0 application starting in development on http://0.0.0.0:3000
=> Run `rails server -h` for more startup options
=> Ctrl-C to shutdown server
[2014-01-16 16:59:59] INFO WEBrick 1.3.1
[2014-01-16 16:59:59] INFO ruby 2.0.0 (2013-11-22) [i686-linux]
[2014-01-16 16:59:59] INFO WEBrick::HTTPServer#start: pid=19531 port=3000

[/bash]

ブラウザーで、 http://localhost:3000 へアクセスします。
めでたくRailsのトップページが表示されていたら、Railsの開発環境が整ったことになります。

rails-1

Ctrlキー ＋　Cキー　で、一旦Railsサーバーを停止します。

Eclipseでのデバッグ設定

さて、ここからがいよいよ本番です。
Eclipseのメニューより、ウィンドウ＞＞ビューの表示＞＞その他 をクリックします。

メニュー_005

表示されたダイアログの中から、 Studio＞＞サーバー　を選択します。

ビューの表示 _006

Eclipseの画面の下部に以下のようなサーバービューが表示されていると思います。
鉛筆マークをクリックし、設定を編集します。
範囲を選択_007

ここがポイントです！！
デフォルトでは、Host/IPが　「0.0.0.0」となっているのですが、ここを「127.0.0.1」とします。

Edit your Rails Server settings. _008

デバッグマークをクリックし、Railsサーバーを起動します。
範囲を選択_007

エラーダイアログが表示され、以下のようなメッセージが表示されると思います。
Ruby program /home/xxx/workspace/testproj/script/rails does not exist.

詳しい原因は分かっていないのですが、Rails3とRails４でフォルダ構造が変わったために起きているエラーのような気がします。

[bash]
$ cd ~/workspace/testproj
$ cp bin/ script -R
[/bash]

ついでですので、Eclipseのデバッグ時に必要なGemをインストールしておきます。
[bash]
$ gem install ruby-debug-ide
[/bash]

サンプルアプリケーションの作成

[bash]
$ rails generate scaffold Sample name:string email:string
$ rake db:migrate
[/bash]

サンプルアプリケーションの動作確認

Eclipseのサーバービューから　デバッグボタンをクリックし、Railsサーバーを起動します。
ブラウザーで localhost:3000/samples を表示
以下のように表示されればOK!

Testproj - Chromium_010

いよいよデバッグ出来るか確認

では、Eclipseに戻って、プロジェクトエクスプローラーより
app>>controllers>>samples_controller.rb を開きます。

[ruby]
def index
@samples = Sample.all
end
[/ruby]

上記の @samples = Sample.all
の行にブレークポイントを設定します。

デバッグ - testproj-app-controllers-samples_controller.rb - Eclipse プラットフォーム _009

先ほどのページをブラウザーで再度開きます。（もしくはリロードします。）
Eclipseのブレークポイントがハイライトされ、デバッグ待ち状態になれば、めでたくデバッグ環境構築成功です！

お疲れ様でした。

About the author:

Tags:

Related Posts

  • Ubuntu 18.04を Ryzenで使用時に定期的にフリーズする。
    2019年5月13日

    本格的にUbuntu 18.04に乗り換えて、1ヶ月ほど経つが、Ryzen CPUのマシンだけ、多いときに一日数回ハングアップしてしまう現象に襲われていた。どうもこれ、Ryzen CPUの C6 State というのが絡んでいるバグらしい。 CPUのせいなのか、Linux Kernelが悪いのかわからないが、とりあえず対応策を見つけたので施してみた。 これでしばらく様子を見てみる。 ■追記 この設定をしてから一週間ほど経つが、これまで一日数回ハングアップしていたマシンが 一週間で一度もハングアップしなくなりました！ amd-disable-c6　万歳！！ msrモジュールをOS起動時にロードする [bash] $ sudo nano /etc/modules-load.d/modules.conf msr とだけ追記。 [/bash] C6 Stateを disableにするサービス導入 [bash] $ wget -nv -O – https://download.opensuse.org/repositories/home:jkist/xUbuntu_18.04/Release.key | sudo apt-key add – $ sudo sh -c “echo ‘deb http://download.opensuse.org/repositories/home:/jkist/xUbuntu_18.04/ /’ > /etc/apt/sources.list.d/home:jkist.list” $ sudo apt-get update $ sudo apt-get install amd-disable-c6 [/bash]

  • 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権限を与えます。…

  • 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…

  • React Native、Redux、Railsを使って、掲示板アプリを作ってみよう
    2017年4月13日

    はじめに 前回、React NativeをAndroid Studioと組み合わせてインストールし、HelloWorldを出せるところまで たどり着きました。 今回は一足飛びで、React NativeとReduxをフロントエンドに使い、バックエンドにRailsを用いた 掲示板アプリを作ってみましょう。 前提として、Railsはそれなりにわかっている。Reactもよく分かっている。Reduxも知っている。 ぐらいのレベルを前提にしています。 出来上がったアプリは、デザイン的にどんくさいですが、これは私がまだReactNativeの スタイルの方法を学んでいないためです。まぁそれはおいおいブラッシュアップすることとしましょう。 ソースはすべてGitHubで公開しています。利用方法など含めて、記事の最後に記載しておきます。 機能一覧 掲示板一覧が表示される 掲示板を選択したら、対象のコメント一覧が表示される コメントを投稿できる 機能はこの３つだけ。掲示板も追加できたほうがいいのでしょうが・・ あまり欲張ってあれこれ実装すると、なにを説明しているかわからなくなるので、今回は カットしておきましょう。 出来上がりのイメージからパーツ構成を考える 出来上がりの画面イメージは以下のようなものです。いかにもどんくさい画面ですが、 これは私がReact Nativeのスタイルの作法がわかっていないためですので、勘弁ください。 とりあえず、この画面イメージから、どんなパーツ（Reactのコンポーネント）が必要となるか 考えてみましょう。ざっと以下のようなイメージになると思います。 アプリが持つべき、ステートとイベントを考える 画面パーツは考え終わったので、次にアプリが持つステートとイベントを考えましょう。 ステート 現在アクティブな掲示板 アクティブな掲示板に投稿されたコメント群 投稿ユーザー 投稿コメント CSRF Token 大体この５つとなります。 投稿ユーザーと投稿コメントは、ステートにしなくても良いのかもしれませんが、Redux風に記述しようとすると ステートとした方が処理しやすいので、ステートとします。 CSRF Tokenとは、バックエンドのRailsサーバーに対してPOST処理をするときに必要となる認証用のキーみたいなものです。 とりあえず、必要なんだなぁ・・・ぐらいに考えておいてください。 イベント 掲示板を選択する 投稿ユーザーを選択する 投稿コメントを入力する 掲示板にコメントを投稿する 投稿ユーザーの選択とは、本来の掲示板の機能では必要ではありませんが、 ログイン処理などを設けない、今回説明するこのアプリでは、投稿のたびに「私は誰ですよ」と ユーザーも選択して、コメントを投稿することにします。 バックエンドであるRailsサーバーに必要な機能 バックエンド（サーバーサイド）のRailsアプリに必要な機能をリストアップしてみましょう。 掲示板一覧を取得 投稿ユーザー一覧を取得 対象掲示板のコメント一覧を取得 コメントを投稿 Railsでバックエンド処理を実装する Railsは分かっている前提ですので・・、ざーーっと説明します。 目標となるファイル構成は以下のような感じです。 まずはRailsプロジェクトと、React Nativeプロジェクトの親フォルダを作りましょう。 [bash] $ cd $ mkdir workspace $ cd workspace $ mkdir reactnative_rails_board [/bash] Railsプロジェクト作成 [bash] $ cd reactnative_rails_board $ rails new rnative_rails [/bash] Gemファイルを調整して、bundle install [bash] $ cd rnative_rails $ nano Gemfile [/bash] 末尾に１行追記 [bash] gem ‘therubyracer’, platforms: :ruby [/bash] 動作確認 bundle install して、Railsサーバー起動 [bash] $ bundle install $ rails s [/bash] ここまでのところを動作確認します。 ブラウザーで http://localhost:3000 にアクセスしてください。以下のような画面が出れば成功です。 モデル作成、サンプルデータ作成 Railsのモデルを作成し、サンプルデータをSeedファイル（CSV）として読み込める状態にしましょう。 モデルの作成 [bash] $ rails g model board title:string description:text $ rails g model user name:string sex:integer age:integer $ rails g model comment board_id:integer user_id:integer comment:text [/bash] モデルの調整 rnative_rails/app/models/comment.rb [bash] class Comment < ApplicationRecord belongs_to :user end [/bash] マイグレート [bash] $ rake db:migrate [/bash] 出来上がったイメージはこんな感じ。 Seedデータの作成 何もないところからデータ投稿までつくり上げるのには時間がかかるので、シード(seed)データを 作っておいて、まずはそのデータを読んで、一覧表示することぐらいから始めましょう。 db/csv/boards.csv [bash] 1,ReactJSを学ぼう,あいうえお 2,ReactJS と Rails連携,かきくけこ 3,ReactJS 発展編,さしすせそ 4,jQuery入門,たちつてと 5,jQuery得意な人集まれ,なにぬねの 6,AngularJS入門,はひふへほ 7,vue.jsってなんぞ,まみむめも [/bash] db/csv/users.csv [bash] 1,花子,2,23 2,太郎,1,30 3,幸次郎,1,15 4,浩輝,1,40 5,大樹,1,35 6,すず,2,28 7,雅代,2,38 [/bash] db/csv/comments.csv [bash] “1”,”1″,”2″,”ReactはFacebookが開発しているUI(MV*フレームワークでいうViewのようなもの)に特化したJavaScriptライブラリです。 ” “2”,”1″,”3″,”大きな特徴としてVirtual DOM(仮想DOM)と呼ばれるレンダリング機構がそなわっており、Webページの表示を従来の .” “3”,”1″,”3″,”公式サイトに、「A JavaScript library for building user interfaces」とあるように、React.jsはUIを構築するためのライブラリです。” “4”,”1″,”3″,”フレームワークでなくあくまでUIを構築するだけのライブラリで、MVCでいうところのVのみの機能を提供します。” “5”,”1″,”7″,”最近フロントエンドでfacebook/reactをずっと使っている。世界的には一部のエンジニアの間で流行っているのだが、国内だとqiitaのタグ等を見てもどうも少ない。” “6”,”2″,”7″,”はじめにreact-railsという、ReactをAsset Pipelineに乗せて使えるようにしてくれるruby gemsがある。 この記事では、これを使用してReactの公式tutorialを進めていく。” “7”,”2″,”4″,”既存のRailsプロジェクトの中でReact.jsを利用する機会があったので、その時にやったことについてまとめてみます。 私自身は普段RailsのサーバサイドとCoffeeScriptが中心で、最近のJavaScript開発環境についてあまりキャッチアップでき” “8”,”2″,”5″,”RailsでSingle-Page Applicationをつくるときの自分のやり方をまとめてみます。 Gem 「JavaScriptで書かれたReactのコンポーネントからHTMLを生成する」というのをRubyでやるために、RubyのV8エンジン実装で ..” “9”,”2″,”2″,”react-railsというReact.jsをRailsに簡単に統合できるgemを使い、React.jsについて説明します。 次のような画面をReact.jsで実装し、Reactとサーバ(Rails)間でメッセージ一覧の取得や作成をできるようにします。 ソースコードはこちらです。” “10”,”3″,”2″,”最近のモダンなウェブフレームワークと言えば、React+Reduxですよね。でも、なんか難しそうとか、ReactってPHPみたいにViewにロジック混ざりそうとか感じて尻込みしていませんか？それはただの誤解かもしれません。React+Reduxはそんなに難易度の高い .” “11”,”3″,”1″,”玉石混合状態にあったFluxのフレームワークも、ここ最近ではReduxが首一つ抜け出したような感じとなっています。自分はFacebook/Flux派ではありましたが、先月発売された『WEB+DB PRESS vol.92』に掲載されていた” “12”,”3″,”6″,” React.jsとReduxを組み合わせた構成で、Webサイトを作ってみるチュートリアル（React+Redux入門）です。第一回目は、GitHub上のコードが読めるようになることを目標に解説しています。” “13”,”3″,”3″,”目的 ReduxとES6への入門。 React.jsを(ようやく)触る機会が出て、情報量の多いFluxxorとCoffeeScriptで入門してた。 ” “14”,”7″,”3″,”私たちはなぜReactではなくVue.jsを選んだのか Qwintryチームは最近、既存のすべてのプロジェクトのフロントエンドをVue.jsに移行しはじめました。” “15”,”6″,”4″,”AngularJS（アンギュラージェイエス）、または Angular は、Googleと個人や企業のコミュニティによって開発されている、完全にJavaScriptで書かれたオープンソースのフロントエンドWebアプリケーションフレームワークである。MIT Licenseでライセンスされた” “16”,”4″,”4″,”今後のWebデザイナーは、デザイン・htmlコーディング＋その他の強みを求められる世の中になっていきます。今回はその強みとなりうる「jQuery」についてご説明いたします。” “17”,”4″,”2″,”今回はjQueryの基本的な書き方として、これから「jQueryを覚えて、ブイブイ言わせてやるぜ！」と新しいスキルを身につけたいデザイナーさんには丁度いい内容かと思います。” “18”,”5″,”2″,”今年2016年6月9日、ついに正式版がリリースされた jQuery 3。メジャーバージョンアップしたjQuery 3では、従来のバージョンから、いったい何が変わったのかを2回に分けて解説します。” “19”,”5″,”1″,” jQueryはWeb業界の発展に大いに役立ってきました。しかし、ネイティブのJavaScriptが高度化し、かつマーケットシェアの縮小した古いブラウザをサポートする必要の薄れた現代において、jQueryを本当に使う必要があるでしょうか？必要性と” “20”,”4″,”1″,”Webデザイナーやマークアップエンジニアのための超コンパクトなjQuery講座ができました。JavaScriptの予備知識は不要。Web制作に必要な要点だけを解説します。 (1/6)” “21”,”7″,”6″,”双方向データバインディングに特化したVue.jsは、シンプルで学習コストも低いといわれます。第1回目はVue.jsがフレームワークとして、どんな強みをもっているのか” “22”,”7″,”7″,”Angular、Reactと並んで海外で人気が高まっている「Vue.js」。ReactとAngularの開発経験がある著者がVue.jsをサンプルコードつきのチュートリアルを通じて特徴をまとめて解説します。2017年、新しく学び始めるきっかけにどうぞ。” [/bash] Seedデータをデータベースに反映するスクリプト db/seeds.rbを編集 [bash] require ‘csv’ CSV.foreach(‘db/csv/boards.csv’) do |row| Board.create!(id: row[0], title: row[1], description: row[2]) end CSV.foreach(‘db/csv/users.csv’) do |row| User.create!(id: row[0], name: row[1], sex: row[2], age: row[3]) end CSV.foreach(‘db/csv/comments.csv’) do |row| Comment.create!(id: row[0], board_id: row[1], user_id: row[2], comment: row[3]) end [/bash] Seedデータの投入 [bash] $ rake db:seed [/bash] バックエンドAPI用 AJAXコントローラー作成 [bash] $ rails g...

< >

Leave a comment

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

Recent Comments

    Back to Top