「Ruby on Rails」の版間の差分
細 (→Twitter Bootstrapを使う) |
細 (→Bootstrap3) |
||
(同じ利用者による、間の16版が非表示) | |||
1行目: | 1行目: | ||
− | |||
− | |||
使えるようにするまでは、[[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 | + | 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 | + | > 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!] | ||
− | |||
− | |||
[[Category:プログラム]] | [[Category:プログラム]] | ||
[[Category:Ruby On Rails]] | [[Category:Ruby On Rails]] |
2023年2月20日 (月) 15:54時点における最新版
使えるようにするまでは、Mountain LionでRuby On Railsを使えるようにするまでのとおり。いまのところ、不具合なく動いています。
目次
- 1 rbenv
- 2 インストール
- 3 アップグレード
- 4 webpackerのインストール
- 5 Rails アプリケーションを作る
- 6 1対1の参照
- 7 子レコードの作成
- 8 リンクを作成する
- 9 development モードのときに404エラーのページなどを表示させる
- 10 カラムを追加する
- 11 カラムの削除
- 12 カラムの変更
- 13 layouts/application.html.erb以外のレイアウトを使う
- 14 routes.rb
- 15 Twitter Bootstrapを使う
- 16 will_paginateを使う
- 17 表示を整える
- 18 RSSフィードを実装する
- 19 文字化けへの対応
- 20 Production モードで起動する
- 21 Link
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
でインストールして再度試すと、うまくいきました。
アップグレード
$ 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 アプリケーションを作る
- アプリケーションを作る
$ rails new [アプリケーション名] -d mysql
- 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
- 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
- config/database.ymlを編集
- migrateを実行
$ rake db:create $ rake db:migrate
- 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
と変更する。
- Railsコマンドでgenerateしたのを取り消す。上記でgenerateした場合は、
$ rails destroy scaffold interested
- 有効なルートを表示する
$ rake routes
1対1の参照
Modelファイルの編集
例えば、interestedという名のモデルからbookmarkという名のモデルを参照する場合。
optiona: true
は、belongs_toの外部キーのnilを許可するというもの。
- app/models/interested.rb
class Interested < ActiveRecord::Base belongs_to :bookmark, optional: true end
- app/models/bookmark.rb
class Bookmark < ActiveRecord::Base has_one :interested end
Controlファイルの編集
- app/controllers/interested.rb
def index @interesteds = Interested.order("id DESC").limit(10) @bookmarks = Bookmark end
Viewファイルの例
- 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)
子レコードの作成
- 複数の子レコードの作成・更新を自在に扱う (accepts_nested_attributes_for) - Qiita
- 【Rails】複数のレコードを作成する。modelの関係性によって異なるform_for / fields_forの使い方 - Qiita
- Active Record の関連付け - Railsガイド
リンクを作成する
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
に変更する。
カラムを追加する
- クラス名は AddFooToBarsとします。Fooは追加するカラム名Barsはテーブル名です。ここのFooはカラム名と違っても構いません。
- カラム名:データ型 の部分、カラム名は追加するカラム名、データ型は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
- 音速開発!RailsでBootstrapを導入する方法〜Less、Sass、Scss〜 | 侍エンジニアブログ
- Rails の bundle install 時に出会った therubyracer のエラーと、その解決方法 - Qiita
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
- GitHub - seyhunak/twitter-bootstrap-rails: Twitter Bootstrap for Rails 5 - 4.x Asset Pipeline
- decioferreira/bootstrap-generators · GitHub
- benjamincanac/bootstrap3-rails · GitHub
- bootstrap3-rails | RubyGems.org | your community gem host
ボタンを単独で使う。
<%= 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
- Twitter Bootstrap
- seyhunak/twitter-bootstrap-rails · GitHub
- Twitter bootstrap on rails
- 続『5分でRails3アプリ』をやってみた - 『Twitter Bootstrap』で見た目をサクッと変えてみた - 牌語備忘録 - pygo
- #328 Twitter Bootstrap Basics - RailsCasts
- thomaspark/bootswatch · GitHub
Bootstrap2
- Gemfileに追加
gem "twitter-bootstrap-rails", :group => :assets
- Terminal
- 後始末
ナビバーがページと重なっているときは、
bootstrap_and_overrides.css.lessにpadding-top:60px;を追加して記載。
body { padding-top:60px; }
$ 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
will_paginateを使う
will_paginateをインストールしてから、bootstrap-will_paginateをインストールします。
<%= will_paginate @collection, renderer: BootstrapPagination::Rails %>
と書くようにありますが、<%= will_paginate @collection %>
のみで動作しました。
- mislav/will_paginate · GitHub
- yrgoldteeth/bootstrap-will_paginate · GitHub
- Home · mislav/will_paginate Wiki · GitHub
表示を整える
- 属性セレクタで、スタイルシートを柔軟に! [ホームページ作成 All About]
RSSフィードを実装する
文字化けへの対応
rails Mysql2::Error: Incorrect string value:
文字列に絵文字が使われていると発生するようです。
database.yml
を
encoding: utf8mb4 collation: utf8mb4_unicode_ci
として回避できました。
encoding: utf8mb4 collation: utf8mb4_unicode_ci