「Ruby on Rails」の版間の差分

提供: sha.ngri.la
移動先: 案内検索
(Twitter Bootstrapを使う)
(Bootstrap3)
 
(同じ利用者による、間の16版が非表示)
1行目: 1行目:
{{googlead}}
 
 
 
使えるようにするまでは、[[Mountain LionでRuby On Railsを使えるようにするまで]]のとおり。いまのところ、不具合なく動いています。
 
使えるようにするまでは、[[Mountain LionでRuby On Railsを使えるようにするまで]]のとおり。いまのところ、不具合なく動いています。
 
==rbenv==
 
==rbenv==
21行目: 19行目:
 
$ rbenv global
 
$ rbenv global
 
(現在globalなバージョンが表示される)
 
(現在globalなバージョンが表示される)
$ rbenv 2.1.1
+
$ rbenv global 2.1.1
 
(インストールしたバージョンをglobalにする)
 
(インストールしたバージョンをglobalにする)
 
$ gem -i rbenv-rehash
 
$ gem -i rbenv-rehash
64行目: 62行目:
 
*[https://gist.github.com/mochiz/4736183 rbenvとruby-buildでRuby環境を最新に保つ]
 
*[https://gist.github.com/mochiz/4736183 rbenvとruby-buildでRuby環境を最新に保つ]
 
*[http://qiita.com/yahsan2/items/afbabacfd414d13a1504 ruby-build -  rbenv install -l で最新バージョンが出ない時の対処 - Qiita]
 
*[http://qiita.com/yahsan2/items/afbabacfd414d13a1504 ruby-build -  rbenv install -l で最新バージョンが出ない時の対処 - Qiita]
 +
==webpackerのインストール==
 +
===yarnのインストール===
 +
<pre>
 +
$ brew install yarn
 +
</pre>
 +
===webpackerのインストール===
 +
<pre>
 +
$ rails webpacker:install
 +
</pre>
 +
===link===
 +
*[https://qiita.com/NaokiIshimura/items/8203f74f8dfd5f6b87a0 Rails6 開発時につまづきそうな webpacker, yarn 関係のエラーと解決方法 - Qiita]
 +
*[https://yarnpkg.com/lang/ja/docs/install/#mac-stable インストール | Yarn]
  
 
==Rails アプリケーションを作る==
 
==Rails アプリケーションを作る==
143行目: 153行目:
 
===Modelファイルの編集===
 
===Modelファイルの編集===
 
例えば、interestedという名のモデルからbookmarkという名のモデルを参照する場合。
 
例えば、interestedという名のモデルからbookmarkという名のモデルを参照する場合。
 +
<code>optiona: true</code>は、belongs_toの外部キーのnilを許可するというもの。
 +
*https://blog.ryskit.com/entry/2018/01/27/195442
 
#app/models/interested.rb
 
#app/models/interested.rb
 
<pre>
 
<pre>
 
class Interested < ActiveRecord::Base
 
class Interested < ActiveRecord::Base
   belongs_to :bookmark
+
   belongs_to :bookmark, optional: true
 
end
 
end
 
</pre>
 
</pre>
155行目: 167行目:
 
end
 
end
 
</pre>
 
</pre>
 +
 
===Controlファイルの編集===
 
===Controlファイルの編集===
 
#app/controllers/interested.rb
 
#app/controllers/interested.rb
173行目: 186行目:
 
*[http://blog.digital-squad.net/article/278843296.html belongs_toとhas_one の違い|WEBデザイン Tips]
 
*[http://blog.digital-squad.net/article/278843296.html belongs_toとhas_one の違い|WEBデザイン Tips]
 
*[http://www.stonedot.com/lecture6.html ActiveRecordの関連のすべて ー StoneDot の Ruby on Rails 講座]
 
*[http://www.stonedot.com/lecture6.html ActiveRecordの関連のすべて ー StoneDot の Ruby on Rails 講座]
 +
==子レコードの作成==
 +
*[https://qiita.com/shizuma/items/5bfcf6c1e855b959e135Rails 複数の子レコードの作成・更新を自在に扱う (accepts_nested_attributes_for) - Qiita]
 +
*[https://qiita.com/ftyabu/items/cae912b211e985d74d58 【Rails】複数のレコードを作成する。modelの関係性によって異なるform_for / fields_forの使い方 - Qiita]
 +
*[https://railsguides.jp/association_basics.html Active Record の関連付け - Railsガイド]
  
 
==リンクを作成する==
 
==リンクを作成する==
260行目: 277行目:
 
end
 
end
 
</pre>
 
</pre>
 +
<code>change_column :テーブル名, :カラム名, :変更後の型</code>
  
 
===インデックスの追加===
 
===インデックスの追加===
323行目: 341行目:
  
 
==Twitter Bootstrapを使う==
 
==Twitter Bootstrapを使う==
 +
===Bootstrap5===
 +
* [https://www.sejuku.net/blog/11043 音速開発!RailsでBootstrapを導入する方法〜Less、Sass、Scss〜 | 侍エンジニアブログ]
 +
* [https://qiita.com/kay-adamof/items/59c8a5dd8816660fc02d Rails の bundle install 時に出会った therubyracer のエラーと、その解決方法 - Qiita]
 
===Bootstrap3===
 
===Bootstrap3===
 
<code>Gemfile</code>に
 
<code>Gemfile</code>に
 
<pre>
 
<pre>
gem 'bootstrap-generators', :git => 'git://github.com/decioferreira/bootstrap-generators.git'
+
gem "therubyracer"
 +
gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
 +
gem "twitter-bootstrap-rails"
 
</pre>
 
</pre>
 
を追加して、
 
を追加して、
333行目: 356行目:
 
> bundle install
 
> bundle install
 
(中略)
 
(中略)
> rails generate bootstrap:install -f
+
> rails generate bootstrap:install less
 +
(略)
 +
$ rails g bootstrap:layout [LAYOUT_NAME] [*fixed or fluid]
 +
</pre>
 +
 
 +
例 fixedは1行、fluidは2行のことだと思う、、、
 +
<pre>
 +
$ rails g bootstrap:layout application fixed
 
</pre>
 
</pre>
 +
<pre>
 +
$ rails g bootstrap:themed [RESOURCE_NAME]
 +
</pre>
 +
 +
<pre>
 +
$ rails g bootstrap:themed interesteds
 +
</pre>
 +
*[https://github.com/seyhunak/twitter-bootstrap-rails GitHub - seyhunak/twitter-bootstrap-rails: Twitter Bootstrap for Rails 5 - 4.x Asset Pipeline]
 
*[https://github.com/decioferreira/bootstrap-generators decioferreira/bootstrap-generators · GitHub]
 
*[https://github.com/decioferreira/bootstrap-generators decioferreira/bootstrap-generators · GitHub]
 
*[https://github.com/benjamincanac/bootstrap3-rails benjamincanac/bootstrap3-rails · GitHub]
 
*[https://github.com/benjamincanac/bootstrap3-rails benjamincanac/bootstrap3-rails · GitHub]
411行目: 449行目:
 
*[http://programmer-jobs.blogspot.jp/2013/05/ruby-on-railsrss.html Ruby on Railsで、RSSフィード 一言多いプログラマーの独り言]
 
*[http://programmer-jobs.blogspot.jp/2013/05/ruby-on-railsrss.html Ruby on Railsで、RSSフィード 一言多いプログラマーの独り言]
 
*[http://ntech.hatenadiary.com/entry/2014/08/05/054909 【Rails4 入門】RSSフィードを作成する - NTECH]
 
*[http://ntech.hatenadiary.com/entry/2014/08/05/054909 【Rails4 入門】RSSフィードを作成する - NTECH]
 +
 +
==文字化けへの対応==
 +
<code>rails Mysql2::Error: Incorrect string value:</code>
 +
文字列に絵文字が使われていると発生するようです。
 +
<code>database.yml</code>を
 +
<pre>
 +
encoding: utf8mb4
 +
collation: utf8mb4_unicode_ci
 +
</pre>
 +
として回避できました。
 +
 +
[https://stackoverflow.com/questions/38656270/rails-how-to-fix-convert-incorrect-string-value encoding: utf8mb4 collation: utf8mb4_unicode_ci]
  
 
==Production モードで起動する==
 
==Production モードで起動する==
419行目: 469行目:
 
*[http://www.rubylife.jp/rails/ Ruby on Rails入門]
 
*[http://www.rubylife.jp/rails/ Ruby on Rails入門]
 
*[https://www.ruby-toolbox.com/ The Ruby Toolbox - Know Your Options!]
 
*[https://www.ruby-toolbox.com/ The Ruby Toolbox - Know Your Options!]
 
{{googlead}}
 
  
 
[[Category:プログラム]]
 
[[Category:プログラム]]
 
[[Category:Ruby On Rails]]
 
[[Category:Ruby On Rails]]

2023年2月20日 (月) 15:54時点における最新版

使えるようにするまでは、Mountain LionでRuby On Railsを使えるようにするまでのとおり。いまのところ、不具合なく動いています。

rbenv

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

インストール

$ rbevn install -l
(インストール可能なバージョンが表示される)
$ rbenv install 2.1.1
$ rbenv rehash
$ rbenv versions
(インストール済みのバージョンが表示される)
$ rbenv global
(現在globalなバージョンが表示される)
$ rbenv global 2.1.1
(インストールしたバージョンをglobalにする)
$ gem -i rbenv-rehash
(インストールしたり、削除した後にrbenv-rehashする必要があるのを自動的に行なってくれる。)

エラーが出たとき

rbenv install 2.1.1で次のようなエラーが出ました。

BUILD FAILED (CentOS release 6.5 (Final) using ruby-build 20140926)

Inspect or clean up the working tree at /tmp/ruby-build.20141008005426.27139
Results logged to /tmp/ruby-build.20141008005426.27139.log

Last 10 log lines:
                              rake 10.1.0
                              rdoc 4.1.0
                              test-unit 2.1.1.0
installing rdoc:              /home/tara.ttm/.rbenv/versions/2.1.1/share/ri/2.1.0/system
installing capi-docs:         /home/tara.ttm/.rbenv/versions/2.1.1/share/doc/ruby
The Ruby openssl extension was not compiled. Missing the OpenSSL lib?
Configure options used:
  --prefix=/home/tara.ttm/.rbenv/versions/2.1.1
  LDFLAGS=-L/home/tara.ttm/.rbenv/versions/2.1.1/lib 
  CPPFLAGS=-I/home/tara.ttm/.rbenv/versions/2.1.1/include 

OpenSSL libがないようなので、sudo yum install openssl-develでインストールして再度試すと、うまくいきました。

Ruby on RailsをVPSで動かす

アップグレード

$ cd ~/.rbenv
$ git pull origin master
$ cd ~/.rbenv/plugins/ruby-build
$ git pull origin master
$ rbenv install -l
$ rbenv install 2.1.1
$ rbenv versions
$ rbenv shell バージョン
$ gem install rails

webpackerのインストール

yarnのインストール

$ brew install yarn

webpackerのインストール

$ rails webpacker:install

link

Rails アプリケーションを作る

  1. アプリケーションを作る
    $ rails new [アプリケーション名] -d mysql
    
  2. scaffoldを生成
    $ rails g scaffold [モデル名単数形] [カラム名1]:[メソッド名1] [カラム名2]:[メソッド名2] .....
    

    $ rails g scaffold interested id:integer url:string title:string tag:string lastmodified:datetime
    

    データ型

    :primary_key
    :integer
    :float
    :string
    :text
    :datetime
    :timestamp
    :date
    :time
    :boolean
    :binary
    
  3. migrateファイルを編集
    class CreateImages < ActiveRecord::Migration
      def change
        create_table :images do |t|
          t.string :filename
          t.string :url
          t.text :memo
          t.integer :noshow
          t.binary :photo, :limit => 16777215
    
          t.timestamps
        end
      end
    end
    
  4. config/database.ymlを編集
  5. migrateを実行
    $ rake db:create
    $ rake db:migrate
    
  6. config/routes.rbを編集。上記のrails g scaffoldの例なら、
    InterestedIn::Application.routes.draw do
      resources :interesteds
    end
    

    InterestedIn::Application.routes.draw do
      resources :interesteds
      root :to =>"interesteds#index"
    end
    

    と変更する。

  7. Railsコマンドでgenerateしたのを取り消す。上記でgenerateした場合は、
    $ rails destroy scaffold interested
    
  8. 有効なルートを表示する
    $ rake routes
    

1対1の参照

Modelファイルの編集

例えば、interestedという名のモデルからbookmarkという名のモデルを参照する場合。 optiona: trueは、belongs_toの外部キーのnilを許可するというもの。

  1. app/models/interested.rb
class Interested < ActiveRecord::Base
  belongs_to :bookmark, optional: true
end
  1. app/models/bookmark.rb
class Bookmark < ActiveRecord::Base
  has_one :interested
end

Controlファイルの編集

  1. app/controllers/interested.rb
def index
  @interesteds = Interested.order("id DESC").limit(10)
  @bookmarks = Bookmark
end

Viewファイルの例

  1. app/views/interesteds/index.html.erb
<%= link_to interested.bookmark.title, bookmark_path(interested.bookmark_id) %>

bookmarkモデル内にtitleがあるなら、interested.bookmark.titleで、参照する。

参照先のbookmarkへのパスは、bookmark_path(interested.bookmark_id)

子レコードの作成

リンクを作成する

link_to("表示する文字",url)

例えば、モデル名がinterestedでデータベースのカラム名がtitle、urlの場合(この認識で正しいのか?)、

link_to( interested.title ,interested.url) 

3番目の引数で<a>タグの属性も指定できる。

link_to( interested.title ,interested.url,{:target=>"_blank"})

パラメーターで変数を使うときには、#{変数名}と記載する。

<%= link_to '表示しない', "", :onclick => "noshow(#{image.id})" %>

turbo-link

リンク先でturbo-linkが機能しないようにする。

<%= link_to 'Back', members_path, :class=>"btn btn-default", 'data-no-turbolink'=>"true" %>

又は、

<%= link_to('Back', members_path, data: { no_turbolink: true } %>

development モードのときに404エラーのページなどを表示させる

developmentモードのときに存在しないurlを入力した時には、routing errorのページが表示されるのですが、404エラーのページを表示させる方法 config/environments/development.rbを次にように変更する。

config.consider_all_requests_local = true

config.consider_all_requests_local = false

に変更する。

カラムを追加する

  1. クラス名は AddFooToBarsとします。Fooは追加するカラム名Barsはテーブル名です。ここのFooはカラム名と違っても構いません。
  2. カラム名:データ型 の部分、カラム名は追加するカラム名、データ型はinteger,stringなどです。
rails g migration クラス名 カラム名:データ型( カラム名:データ型)
rails g migration AddFooToBars foo:integer
rake db:migrate

データの容量の指定

例えば、データ型のbinaryには、blob,mediumblob,longblobと三種類あるます。特に指定しないと、blobになります。容量を指定することで、mediumblobなどが自動的に設定されるようです。

class AddPhotoToImages < ActiveRecord::Migration
  def change
    add_column :images, :photo, :binary , :limit => 16777215
  end
end
rake db:migrate
した結果は次のとおりです。
+------------+--------------+------+-----+---------+----------------+
| Field      | Type         | Null | Key | Default | Extra          |
+------------+--------------+------+-----+---------+----------------+
| id         | int(11)      | NO   | PRI | NULL    | auto_increment |
(中略)
| photo      | mediumblob   | YES  |     | NULL    |                |
+------------+--------------+------+-----+---------+----------------+

カラムの削除

カラムを削除する場合には次のようにします。

rails g migration RemoveFooFromBars foo:string

Link

カラムの変更

カラムの型を変更

テーブル名logsのカラムtimeの型がtimeだったのをdatetimeに変更する場合。

rails g migration ChangeTypeTimeDatetime

ChangeTypeTimeDatetimeの部分は重複しないような名前であれば大丈夫だと思う。

Class AddIndexToUrl < ActiveRecord::Migration
  def change

  end
end

Class AddIndexToUrl < ActiveRecord::Migration
  def change
    change_column :logs, :time, :datetime
  end
end

change_column :テーブル名, :カラム名, :変更後の型

インデックスの追加

テーブル名images、カラム名urlに、ユニークのインデックスを追加する。

rails g migration AddIndexToUrl

/db/migrate/************_add_index_to_url.rbを編集する。

Class AddIndexToUrl < ActiveRecord::Migration
  def change

  end
end

Class AddIndexToUrl < ActiveRecord::Migration
  def change
    add_index :images, :url, :unique => true
  end
end

インデックスだけを追加するのであれば、

Class AddIndexToUrl < ActiveRecord::Migration
  def change
    add_index :images, :url
  end
end

layouts/application.html.erb以外のレイアウトを使う

モデル名 article のshowのときだけ別のレイアウト(article_show.html.erb)を使いたかったので, controllers/articles_controller.rbの

def show
end

def show
	respond_to do |format|
		format.html { render :layout => "article_show"}
	end
end

に変更した。

routes.rb

lastdaysという名称のコントローラーのindexアクションをルートに指定する場合。

Rails.application.routes.draw do
  (中略)
  root 'lastdays#index'
  (中略)
end

Twitter Bootstrapを使う

Bootstrap5

Bootstrap3

Gemfile

gem "therubyracer"
gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
gem "twitter-bootstrap-rails"

を追加して、

> bundle install
(中略)
> rails generate bootstrap:install less
(略)
$ rails g bootstrap:layout [LAYOUT_NAME] [*fixed or fluid]

例 fixedは1行、fluidは2行のことだと思う、、、

$ rails g bootstrap:layout application fixed
$ rails g bootstrap:themed [RESOURCE_NAME]

$ rails g bootstrap:themed interesteds

ボタンを単独で使う。

      <%= button_tag "get size",:onclick => "getsize()" ,:class=>"btn btn-default" %>

form

f.select

f.select(プロパティ名, タグの情報 [, オプション])

(例)

f.select(:status, {"後で"=>"later","確認済み"=>"confirmed"}, {:include_blank => true, :selected => "#{member.status}"}, :class => "form-control" )

オプションがない場合は、

f.select(プロパティ名, タグの情報, {}, :class=>"form-control")

としないと、Bootstrapが適用されていない普通のselectが表示される。

Link

Bootstrap2

  1. Gemfileに追加
    gem "twitter-bootstrap-rails", :group => :assets
  2. Terminal
  3. $ bundle install
    (略)
    $ rails g bootstrap:install
    (略)
    $ rails g bootstrap:layout [LAYOUT_NAME] [*fixed or fluid]
    

    例 fixedは1行、fluidは2行のことだと思う、、、

    $ rails g bootstrap:layout application fixed
    
    $ rails g bootstrap:themed [RESOURCE_NAME]
    

    $ rails g bootstrap:themed interesteds
    
  4. 後始末 ナビバーがページと重なっているときは、 bootstrap_and_overrides.css.lessにpadding-top:60px;を追加して記載。
    body { padding-top:60px; }
    

will_paginateを使う

will_paginateをインストールしてから、bootstrap-will_paginateをインストールします。

<%= will_paginate @collection, renderer: BootstrapPagination::Rails %>と書くようにありますが、<%= will_paginate @collection %>のみで動作しました。

表示を整える

RSSフィードを実装する

文字化けへの対応

rails Mysql2::Error: Incorrect string value: 文字列に絵文字が使われていると発生するようです。 database.yml

encoding: utf8mb4
collation: utf8mb4_unicode_ci

として回避できました。

encoding: utf8mb4 collation: utf8mb4_unicode_ci

Production モードで起動する

Link