Ruby on Rails 入門

未経験エンジニアがRuby on Railsを学習します

Ruby on RailsでCarrierWaveを使って画像投稿機能を実装する

【やりたいこと】

既存のwebアプリ(タスク管理アプリ)で画像を投稿できるようにしたい
( 既存で一通りのモデルとかビューはすでに作成済みの想定 )

【イメージ】

あまり湧いていないのですがcarrierwaveのgemを使用すると良いらしい。
既存でtitleの投稿機能は実装していたのでそれらに追加する形で実装します。

・gemをinstallする
・dbで画像を受け取れるようにする
・dbへ渡せるようモデルに追記する
・モデルへ渡すためのコントローラとビューを追加する
・dbから受け取った画像をビューで表示する画面を作る

 

【やってみる】

いつも通りvi GemfileでGemfileに追記、bundle installします。

gem 'carrierwave' 

bundle install 

これでcarrierwaveをインストール。
公式Githubに色々記載があります

rails g migraation AddpictureTotasks picture:string
#rails g migration Addカラム名(任意)Toテーブル名 カラム名:型

 rails db:migrate

これでdbのtaskテーブルに画像が追加できるようになりました。 

mysqlで叩いてみてもちゃんとpictureカラムが増えてる 

# mysqlにログインした後 

select * from tasks \G;

f:id:fresh_engineer:20170829001855p:plain

 こんな感じ。(投稿前はNILLになってるはず)

 

dbが用意できたのでdbへ渡すモデルを編集する

class Task < ActiveRecord::Base
mount_uploader :picture, PictureUploader
end

公式のGithubにもあった通りmount_uploaderというメソッドを使う。

 

画像をinputするためのviewを作成する。

<div class="field">
<%= f.label :picture %>
<%= f.file_field :picture %>
</div>

そのviewで受け取った画像をモデルへ渡すためにコントローラのparamにも
pictureを追加する

def task_params
params[:task].permit(:title, :picture)
end

これでcontrollerがpictureも渡してくれるようになりました

最後に受け取った画像を表示できるようviewを編集して終わり

<%= image_tag(@task.picture_url) if @task.picture.present? %>

以上で
画像をアップロード(view)→コントローラが受け取る→モデルが受け取る→dbへ渡す
リクエスト→dbから画像データを取ってくる→viewで表示する 

が終わるはず。

 

ですがviewでハマってしまってます
とりあえず一旦整理できたのでできるはず。

carrierwaveでした。

RubyでGoogle Spreadsheetを読み書きするメモ

GoogleSpreadsheetにターミナルからアクセスをしたかったのですが
様々な方法で挫折することも多々だったので現時点で上手くいった方法をメモ。

Googleでログインしていて、
任意のSpreadsheetにアクセスできる状態が前提です。

 

google_driveのgemを使うのが一番良さそう。

gem install google_drive

Githubに情報たくさん載ってました。
OAuth認証だと何かと怒られるのですが
config.jsonでアクセスすれば一発でした。

 

google_driveを呼び出して、config.jsonファイルにアクセスするrubyファイルを作成。

 

require "google_drive"
GoogleDrive::Session.from_config("google_drive_config.json")

実行する

ruby setup.rb

アクセスするURLが表示されるので、
アクセスして authorization codeをコピー・ターミナルで入力。
jsonファイルが作成されました。
一番早かったです。

アクセス方法などは下記記事参照。
config.jsonを呼び出して、キー指定、
もしくはGoogleDriveのフォルダやブック、シート名を指定すれば
一発で指定のワークシートへアクセスできます。

ws = session.spreadsheet_by_key("pz7XtlQC-PYx-jrVMJErTcg").worksheets[0]

 

参考にさせていただきました。
RubyからGoogleSpreadsheetに書く - お手軽編 - Qiita

公式Github
GitHub - gimite/google-drive-ruby: A Ruby library to read/write files/spreadsheets in Google Drive/Docs.

google-drive-ruby/authorization.md at master · gimite/google-drive-ruby · GitHub

公式ドキュメント
File: README — Documentation for google_drive (2.1.5)

 

GoogleSpreadsheetへの読み書きは、worksheetを定義した上で使用可能。
あるシートから別シートへデータを写したいときなどは下記などで実行できます。
以下割と使ったのでまとめ。

p worksheet[1,1] #1行1列目を表示
worksheet[1, 1] = "aaa" # 1行目1列目に書き込み

@item1 = worksheet[2, 1] 
#worksheetの2行目1列目のセルを@item1に代入
worksheet2[2, 2] = @item1 
#worksheet2のセル2行目2列目に@item1を代入
worksheet2.save
#保存

p worksheet.num_rows # レコード数を取得
p worksheet.num_cols # カラム数を取得 

 

以上メモでした

Ruby on Rails で 初心者がAjaxを使ってみる

 

【やりたいこと】

カテゴリーを変更すれば、Ajaxが 対応するカテゴリーのitem を取得し表示する。
※itemの部分のみが変更されるので、ページ変遷しない

【イメージ】
表示:ajax/search.html.erb
category1〜3で選択する
api/controllers/ajax.controllerが呼び出される
→projectモデルがprojectsテーブルからデータ取得する
→選択したcategory_id=?のデータを表示する
※一旦シンプルに考えるためにアソシエーション無視して
category_idで同テーブルのデータを使用することとします

まずはコントローラを作成、その後必要なビューとかを作ります。
部分テンプレートを使用しました。

部分テンプレートを使用すると
ファイル名の先頭に「 _ 」をつけるという制限があるので、
今回は下記の通りファイルを作成しました。

・controllers/ajax_controller.rb #rails g controller ajax 
・view/ajax/search.html.erb
・view/ajax/result.js.erb
・view/ajax/_search_result.html.erb

 

ajax_controller.rb

class AjaxController < ApplicationController
 def search
 @projects = Project.select(:category_id).distinct
 #表示するカテゴリー番号を取得
 end

 def result
 @projects = Project.where(category_id: params[:category_id])
 #指定されたカテゴリーIDでprojectsテーブルを検索
 end
end

 

search.html.erb

<%= form_tag({ action: 'result' }, remote: true) do %>
#view helperのform_tagは
#remoteオプションでsubmit時に非同期通信
<%= select_tag(:publish, options_from_collection_for_select(
@projects, :category_id, :category_id, '1')) %>
#option_from_collection_for_select = 選択肢をDBから生成するメソッド
<%= submit_tag '検索' %>
<% end %>

<ul id="result"></ul> 
#結果を反映する

 

_search_result.html.erb(部分テンプレート)

<% @projects.each do |project| %>
#取って来たproject itemを1つずつ下記project.titleへ出力
<li><%= link_to project.title,
'http://aaa.aa.aaa.aa/index' %></li>
<% end %>


result.js.erb(部分テンプレートが作った結果をJavaScriptで応答)

$('#result').html(
"<%= escape_javascript(render 'search_result') %>")
#受け取った結果をhtmlファイルへ変換

 

route.rb

get '/ajax/result'
post '/ajax/result'
get '/ajax/search'
post'/ajax/result'

 

ルートにこれ追加したら一応なんとかいけました。

f:id:fresh_engineer:20170806134151p:plain

 

できました !

 

f:id:fresh_engineer:20170806155457p:plain

 

Ruby on Railsでdevise使ってログイン機能を作る

Ruby on Railsでログイン機能を作ります。

何やらとても便利なdeviseというgemがあるそうなのでそれを使用します。

■ deviseをインストールする

vi Gemfile #Gemfileをvimで開く
gem 'devise' #deviseというgemをGemfileに記載する
bundle install #未インストールのgemfileをinstallする

 bundle installすると、gemの初期設定に必要な項目が表示されるので
それに沿って初期設定を実施します。

 

■ deviseの初期設定をする

1.認証URLの設定をする

config/environments/development.rbで下の方のurl_optionsを下記へ編集。

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

私はさくらのVPSを使っていたので、 IPアドレス000.00.000.00:3000と記載しました。

2.rootの行き先を指定する/モデルとコントローラーを作る

すでにrootが設定されていれば必要ありませんので、rake routesで確認します。

rake routes #リクエストに対応する行き先を確認する

f:id:fresh_engineer:20170728214231p:plain

上記は設定されています。
rootの行き先が設定されて
もし設定されてない場合はroutes.rbへ

root 'home#index' #homeは任意です、この後のCとMは合わせます

 を追記ください。

次にコントローラーとモデルを作成します。

rails g controller Home index #規約でControllerの1文字目は大文字

rails g devise home #規約でmodelは小文字

rake db:migrate

 

3.ログインとサインアップへのリンク設置

indexにログインとサインアップの画面を作成します。
<body>〜</body>の間へ作成ください。

Logged in as <strong><%= current_user.email %></strong>.
<%= link_to "Settings", edit_user_registration_path, :class => "navbar-link" %> |
<%= link_to "Logout", destroy_user_session_path, method: :delete, :class => "navbar-link" %>
<% else %>
<%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Login", new_user_session_path, :class => 'navbar-link' %>
<% end %>

 そして、どのページでもログイン情報が画面に出力するよう、
application.html.erbへ下記を追加します。

<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>

 

■起動を確認する 

rails server -b 0.0.0.0

 サーバーを起動し、localhost:3000へアクセス。
Sign upで自分の任意のアドレスを入力ください。

 

f:id:fresh_engineer:20170728222052p:plain

 

任意のアドレスにメールが届くので、
Confirm my accountをクリックし認証。

f:id:fresh_engineer:20170728222540p:plain

ログイン画面でログインができれば成功です。

 

ちなみにデータはmodel作成時にできたテーブルで確認できるので
mysqlを立ち上げ、use データベース名 -> select * from テーブル名 \G;により
sign up したデータを確認できます。

f:id:fresh_engineer:20170728223030p:plain

メールの認証ができていれば、confirmedの2箇所に
token付与、日時が記載されているはずです。 

 

カスタマイズなどはViewを作成してカスタマイズください。

以上です。

Ruby on Rails初心者がMVCについて整理する

この記事では、Ruby on Railsを用いて何かを作った時

どんな流れで何を作ってるのかを初心者なりに整理します。

 

イメージは

リクエス
→Routeでリクエストに対するController/action呼ぶ
→Controllerでaction呼ぶ→model→DBへデータ取りに行く
→modelが取ってきたデータをControllerに返す
→ViewもしくはViewなしでクライアントへレスポンス返す

f:id:fresh_engineer:20170727134141p:plain

 

こんな形のイメージです。
早速作ってみます。
 

rails new アプリケーション名(任意) [options]

 アプリケーションを作成するrails newコマンドです。
rails newコマンドによって、沢山のファイルとフォルダが作成されています。

まずはモデルを作成、

rails g model モデル名 #モデルは単数形で、1文字目が大文字

rails db:migrate 

 

次に、コントローラーとビューを作成します。

 

rails generate controller コントローラー名(任意) [options]
#コントローラーは複数形で、1文字目が大文字

例えばprojectsというコントローラー名でコントローラを作成します。
この時ビューも作成されます。

※ルールではありませんが、コントローラ名はリソース(操作対象のデータ)の
名前に沿って命名するのが望ましいそうです。
今回はprojectsテーブルを操作するためのコントローラであることを想定。

ここまで作成できれば、app/config/routes.rbのRouteを設定します。
詳しい設定の仕方は次回以降記載します。

routeを設定したら、

rake routes

ここで、リクエストに対してどのコントローラーのどのアクションが
呼び出されるか確認できます。下記が例。f:id:fresh_engineer:20170727230334p:plain

 

 

CentOS7にRuby+Railsをインストールする(rbenv使用)

前回VagrantVirtualBoxを使用した仮想環境が完成したので、
この環境にrubyrailsを入れていきます。

色々とインストールしたいのでroot権限で行います。

sudo su #root権限へ

yum update #インストール済パッケージで更新できるものを更新する

一通りupdateしておきます。

yum install rubyだと2.0.0という少々古いバージョンしかinstallできなかったので
今回はrbenvというrubyのバージョン管理ツールを使用します。

rbenvを使用するため、必要なgitを先にインストールします。

yum -y install git 

 gitがインストールできたら、rbenvをcloneして

git clone https://github.com/sstephenson/rbenv.git ~/.rbenv

rbenvのプラグインruby-build」もcloneします。

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

rbenv単体ではrubyをinstallできません、このプラグインが必要です。

 

rbenvの公式ドキュメントにも記載がありますが、
rbenv用に以下2行を書きかえ、書き換えた.bash_profileを読み直します。

echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile

echo 'eval "$(rbenv init -)"' >> ~/.bash_profile

source ~/.bash_profile  #.bash_profileを読み込み

これでインストールできるようになったはずです。
インストールできるrubyのバージョンを確認します。

rbenv install --list

いっぱい出てきたら自分の欲しいバージョン名を指定します。

rbenv install -v 2.3.1 #バージョン指定はお好みで変えてください 

これで問題ないくinstallできればOKです。
(少し時間がかかりますが、Complete!と出てくるはずです)
もし何か足りないというエラーが出てきたら、
足りないものをyum installして、再度上記コマンドをお試しください。

yum install -y openssl-devel readline-devel zlib-devel #一例です

 

ここまでできれば、バージョンを確認します。

ruby -v #rubyのバージョン確認

 自分がinstallしたrubyのバージョンが記載されて入ればOKです。

もしバージョンが指定したものになっていない場合は、

rbenv global 2.3.1 #自分の使用したいバージョンを記載

 rbenvを使用して、切り替えてください。
OSごとバージョンの切り替えをして問題がなければglobal、
今いる位置限定の場合は globalの箇所をlocalへ変更ください。

 

 

Rubyがinstallできたので、最後にRailsもバージョン指定でinstallします。

gem install rails --version="4.2.1" #""内にバージョンを記載

rails -v #railsのバージョン確認

 

 

ここまで出てきた単語と関連ある単語を初心者が簡単に整理してみます。

Vagrant+VirtualBoxを使ってCentOS7の環境構築する

【環境】Max OSX
【構築する環境】Vagrant+VirtualBox+CentOS7

1.VagrantVirtualBoxをそれぞれインストールする

Vagrant by HashiCorp
Downloads – Oracle VM VirtualBox

今回は、Macに合わせてインストールしました。
特に編集する必要もないので、次へを押し続けてインストールを完了します。


VagrantがインストールできたかどうかはMacのターミナルを開き、

vagrant -v #vagrantのバージョン確認

本コマンドで、下記の返答があればOKです。(2017/7/23現在)

Vagrant 1.9.7

VirtualBoxはインストール後Application内にあります。
これでVagrantVirtualBoxのインストールは完了です。

 

2.仮想サーバーを起動・接続する

続いて、ターミナルで操作します。(#部分は説明なので不要です)

mkdir vagrant_centOS #vagrant_centOSフォルダを作成(名前は任意) 

cd vagrant_centOS #vagrant_centOSフォルダへ移動 

vagrant box add centos7.2 https://github.com/CommanderK5/packer-centos-template/releases/download/0.7.2/vagrant-centos-7.2.box

#centos7.2というboxを追加

vagrant box add [box名] [URL]で指定しています。

box名とURLはA list of base boxes for Vagrant - Vagrantbox.esこちらで取得できます。

インストールには時間がかかります(私の場合は5分程度でした)

f:id:fresh_engineer:20170723120433p:plain

完了しました。

vagrant init centos7.2 #vagrant init [指定したbox名] // 初回のみ

このコマンドで初期化した後、

vagrant up #vagrantを起動 // 起動時に毎回必要

 vagrantを起動して、

vagrant ssh #vagrantssh接続 // 起動時に毎回必要

接続できました。
ターミナルが下記のようなコマンドになっていれば完了です。

[vagrant@localhost ~]$ 


初期設定が完了したので、今後は下記コマンドを使います。

vagrant up #起動

vagrant ssh #接続

vagrant status #状態確認

 vagrant halt #停止 

vagrant reload #再起動

以上で、環境の構築は完了です。