Rails」カテゴリーアーカイブ

ポートフォリオについて備忘録

途中まで進めていたポートフォリオについて書き込み

scssの注意点aplication.scssにこのようにインポートする

このようなディレクトリ構造で開発する

このようにインポートして変数を使うようにする(でないとエラー)

jsファイルも記述して配置する

headerの作成

header.scssを以下の記述にする

@import "variables";
@import "mixin";
@import "base";
// headerの設定担当
.header {
// 画面の上部に固定
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: $navHeight;
// 背景色を透明に
  background-color: transparent;
  display: flex;
  align-items: center;
// ヘッダーを最前面にくるようにする
  z-index: 100;

&.triggered {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 10px 0 25px -10px rgba(0, 0, 0, 0.5);
}

// スマホ画面ではヘッダー表示しない
&__nav {
  display: none;
}

&__ul {
  display: flex;
// 上下中央揃えにする
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

&__li {
  margin-left: 20px;

& > a {
  color: $cBlack;
  text-decoration: none !important;
// すべて大文字にする
  text-transform: uppercase;
 }
}

& .logo {
  font-size: 38px;
  justify-content: center;
}

&__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
// navとコンテンツのラインを同じにする
  @extend .content-width;
 }
}

基本的にスタイルがおかしいと気づいたときは検証を使ったほうが

圧倒的に早く問題解決できるのですること!

jsのroot-marginの設定でうまくアニメーションされないことがあるので気をつけること!

スタイルで参考になりそうなサイトを見つけて使ったほうが良い

Railsの環境構築(エラー対処録)

Railsの環境設定で手こずったので解消するまでやったことを書き留めていきます。

MacのOSは Catalina10.15.7です。

バージョンは最終的に以下のようになります

rbenv 1.1.2
Bundler 2.0.2
Ruby 2.7.5
Rails 5.2.3

1:Homebrewをインストール

Homebrewは、ソフトウェアの導入を単純化するMac OSのパッケージ管理システムです。

下記のURLからHomebrewをインストールします。

Homebrew

2:rbenvをインストールする

rbenvをインストールします。rbenvをインストールすることでrubyのバージョンの切り替えが容易にできるようになります。

brew install rbenv
brew install ruby-build

ruby-buildをインストールすることで、rbenv installというコマンドを使うことができます。

上記のコマンドを実行したらrbenvがインストールされているか確認します。以下のコマンドを実行してバージョンの情報が表示されていればインストールされています。

rbenv --version
rbenv 1.1.2

3:rbenvにPATHを通す

rbenvコマンドを利用するために、rbenvにPATHを通します。PATHを通すとは、コマンド実行ファイルを探しに行くパスを追加することです。

echo 'export PATH="HOME/.rbenv/bin:PATH"' >> ~/.bash_profile
echo 'if which rbenv > /dev/null; then eval "(rbenv init -)"; fi' >> ~/.bash_profile
source ~/.bash_profile

4:Rubyをインストールする

下記のコマンドでRubyをインストールします。

 rbenv install 2.5.1

次にグローバルで利用するバージョンを設定します。

 rbenv global 2.5.1

次にRubyのバージョンの情報を確認します。

ruby -v
ruby 3.0.0    ←ここでグローバルに変わっていない

5:rbenvにPATHを通す

OSがCatalinaでzshなのでPathを変えてみました。

~/.zshenvに
export PATH="/usr/local/bin:$PATH"
export PATH="$HOME/.rbenv/bin:$HOME/.rbenv/shims:$PATH" # この一行を追加

↑最後の一行を追加し、~/.zshrcに

~/.zshrc
source $HOME/.zshenv

を追加しました。

またRubyのバージョンの情報を確認します。

ruby -v
ruby 3.0.0    ←グローバルに変わっていない

ここで↓のコマンドで.ruby-versionを確認したところ

vi /Users/ユーザー名/.ruby-version

3.0.0となっていたので
2.5.1に変更します。(iでINSERTモードにして、2.5.1に書き換えてからEscを押して、:wqで上書き保存する)

ruby -v
ruby 2.5.1 ←2.5.1に変わった

6:bundlerをインストールする

bundlerとはGem同士の互換性を保ちながらパッケージの種類やバージョンを管理してくれる仕組みのことです。

bundlerをインストールします。

gem install bundler

上記のコマンドを実行したらbundlerのバージョンを確認します。バージョン情報が表示されていればインストールされています。

bundler -v
Bundler version 2.0.2

7:Railsをインストールする

最後にRailsをインストールします。以下のコマンドを実行します。

gem install rails -v 5.2.3

実行ができたら以下のコマンドでRailsのバージョンを確認します。

rails -v

bin/rails:3:in `require_relative': cannot load such file -- /Users/caimユーザー名/Desktop/config/boot (LoadError)
from bin/rails:3:in `<main>'

エラーでrailsコマンドが使えない・・・

sudoをつけてもう1回試してみる

sudo gem install rails -v 5.2.3

次のようなエラーが出ました

ERROR: Error installing rails:
There are no versions of activesupport (= 7.0.2.2) compatible with your Ruby & RubyGems. Maybe try installing an older version of the gem you're looking for?
activesupport requires Ruby version >= 2.7.0. The current ruby version is 2.6.9.207.

rubyのバージョンを2.7.0以上にしろと言ってるので

rbenv install 2.7.5
vi /Users/ユーザー名/.ruby-version

2.7.5に変更します。(iでINSERTモードにして、2.7.5に書き換えてからEscを押して、:wqで上書き保存する)

rbenv global 2.7.5
ruby -v
ruby 2.7.5p203 (2021-11-24 revision f69aeb8314) [x86_64-darwin19]

2.7.5に変わったので、railsを再インストールします。

sudo gem install rails -v 5.2.3

インストールできているか確認します。

rails -v 

Rails is not currently installed on this system. 
To get the latest version, simply type:

   $ sudo gem install rails
You can then rerun your "rails" command.

↑のようなメッセージが出たので、↓のコマンドをします。

hash -r

確認します。

rails -v
Rails 5.2.3

長かったですがなんとか環境構築できました。

Better Errorsの使い方(エラーが起きた時見るもの Docker環境下)

Better Errorsとは?

Railsの場合、better_errors gemを使うと便利で高機能なエラー画面が表示されます。

Better Errorsの導入方法

Gemfileに以下を記述します↓

group :development do
  gem 'better_errors'      ←追加
  gem 'binding_of_caller'  ←追加
end

docker-compose buildでコンテナをビルド

docker-compose build

/config/environments/development.rbに以下を追加します↓

if Rails.env.development?
  BetterErrors::Middleware.allow_ip! "0.0.0.0/0"
end

docker-compose up などでコンテナを起動すると↓

いつもならこのような表示が

このようになる!

左のペインで処理の流れがわかりやすくなる

右にある情報で、デバッグの手がかりを探す事もできます。

その他デバッグに関しての心得

  • 開発環境であれば画面にエラーの発生箇所が表示されます。
  • 本番環境であればログを読みます。ログにもエラーの発生箇所が表示されます。
  • エラー画面やログを見て、エラーが起きたファイルと行番号を確認します。

実際にエラーが起きたのは自分が書いたコードではなく、gemやフレームワークのコードであることも多いです。Railsのエラー画面であれば Full trace リンクをクリックすると、gemやフレームワークのスタックトレース(バックトレース)が表示されます。

スタックトレースは下から上にメソッドが呼び出された順番が表示されます。スタックトレースを読むことで、エラーが発生するまでにどのファイルのどの行が呼ばれてきたのかを確認できます。

ActiveRecord::NoDatabaseError – Unknown database ‘xxx’:(エラーメッセージ対処法)

Docker + Railsで開発中の時に遭遇しました。

ActiveRecord::NoDatabaseError – Unknown database ‘xxx’:とは?

docker-compose upでコンテナを起動した時に発生

データベースが作成されていないためのエラーなのでデータベースを作成します。

$ docker-compose exec web bundle exec rake db:create

Created database ‘***’と出ていればOKです。

この状態でアクセスすると

Migrations are pending. To resolve this issue, run:というエラーが発生します。

マイグレートすれば解決するので、マイグレートします。

$ docker-compose exec web bundle exec rake db:migrate

docker-compose upでコンテナを起動してエラーが出なくなっているのを確認しました。

Migrationを保留しているというエラーだったのでMigrationを実行するとエラーが出なくなります。

ポートフォリオの修正の仕方(AWS+Rails)

ポートフォリオで修正や追加する時に見る(自分用)

Nginxがおかしい時にするコマンド

curl -IXGET http://IPアドレス

正常の場合このように表示されます。

HTTP/1.1 200 OK
Server: nginx/1.20.0
Date: Sat, 19 Mar 2022 06:41:17 GMT
Content-Type: text/html; charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
X-Content-Type-Options: nosniff
X-Download-Options: noopen
X-Permitted-Cross-Domain-Policies: none
Referrer-Policy: strict-origin-when-cross-origin
ETag: W/"919d450b157b488f0"
Cache-Control: max-age=0, private, must-revalidate
Set-Cookie: _todo_session=b2********R5Sy9mhX1RV1dWR01Hek1aR2JWcDNRPT0tLVdrNnp5dlhtaEFKRzBjUlhpMHhXbUE9PQ%3D%3D--cf3f8a4eaa2c6c53fc7b2f73f97a5cc2e9b7edcf; path=/; HttpOnly
X-Request-Id: 0de84a21-****-****-****-c4e2d
X-Runtime: 0.004671

nginxのエラーログを見るときは

sudo less /var/log/nginx/error.log

nginxの設定変更するには

sudo vi /etc/nginx/nginx.conf

cd /etc/nginx/conf.d/

sudo vim アプリ名.conf

sudo vi etc/nginx/conf.d/アプリ名.conf

#再起動して設定を反映するコマンド

sudo nginx -s reload

nginxのプロセスidを見るには

sudo lsof -i | grep nginx

アプリのエラーログを見るには

sudo less /var/www/アプリ名/log/nginx.error.log

EC2に接続したらアプリ直下に移動

cd /var/www/アプリ名/

nginxを再起動するには

sudo service nginx restart

pumaを停止するには

bundle exec pumactl stop

pumaを起動するには

bundle exec pumactl start

Pumaの設定変更するには

vim /var/www/アプリ名/config/puma.rb

②デプロイしてからJSやSCSSを直した後にすること

プリコンパイルするには

bundle exec rake assets:precompile RAILS_ENV=production

Pumaを再起動する

bundle exec pumactl stop

bundle exec pumactl start

Pumaを起動するコマンド/var/www/アプリ名/config/puma/productionに設定ファイルを書き込んでいる場合

bundle exec rails s -e production

Docker+Railsで開発するときのメモ(自分用メモ)

忘れた時用にDockerを用いた開発のやり方の手順を記載します。

前提:Docker Desktopをインストールしている(OSはMac)
Rubymineで開発している。(VScodeでもできました)
Dドライブ内に作業フォルダ(アプリ名)などを置いている。

  1. Docker.appを起動する(Docker desktop)
  2. RubyMineを起動する(VScodeでもOK)
  3. cdでアプリの作業用フォルダへ移動 例:cd /Volumes/D/アプリ名
  4. docker-compose buildでコンテナを構築する
  5. Could not find rake-13.0.1 in any of the sources Run `bundle install` to install missing gems.というエラーが出た時は↓
  6. docker-compose stopをしてからdocker-compose downでコンテナを削除
  7. Gemfile.lockの記述をすべて削除してから
  8. docker-compose buildでコンテナをまた構築する
  9. docker-compose upでサーバー起動します。
  10. Unknown databaseと出てしまったときは以下のコマンドでデータベースを作成します。
  11. docker-compose exec web bundle exec rake db:create
  12. docker-compose exec web bundle exec rake db:migrate

以上です。

chart.jsでグラフを作る

Docker環境下でグラフを作りたい

1:新しくモデルを追加する

docker-compose run web bundle exec rails g model hiit user:references training_day:date training_time:integer

2:マイグレートする

docker-compose exec web bundle exec rake db:migrate

3:user.rbに以下の記述を追加する

4:コントローラーの追加をする

docker-compose exec web rails g controller hiits new edit show index

5:ルーティングを追加するroutes.rbに以下の記述を追加

6:ビューを追加する

new.html.erbの中身

<section class="hiit-form">
  <div class="log-form">
    <div class="form-title tween-animate-title center-position">運動記録</div>
    <%= form_with model: @hiit, local: true do |f| %>
     <%= f.date_field :training_day, id: "date-form", type: "text", readonly: "",
         placeholder: 'クリックして運動した日をカレンダーで選択', class: "form-field btn" %>
     <% if @hiit.errors.include?(:training_day) %>
       <div class="alert alert-danger ">
      <%= @hiit.errors.messages[:training_day][0] %>
       </div>
      <% end %>
       <%= f.number_field :training_time, required: true, placeholder: '運動時間を分単位で選択' %>
        <% if @hiit.errors.include?(:training_time) %>
         <div class="alert alert-danger ">
        <%= @hiit.errors.messages[:training_time][0] %>
     <% end %>
      <%= f.label '運動メモ', class: "box center-position" %>
      <%= f.text_area :content, class: "form-area center-position", placeholder: '例: スクワットを〇〇分、腹筋を〇〇分、プランクを〇〇分など' %>
       </div>
      <%= f.submit yield(:button_text), class: "btn slide-wine center-position" %>
     <% end %>
   </section>
<%= render 'shared/datetime' %>

<%= render ‘shared/datetime’ %>の中身

<script>
 const today = new Date(new Date().setHours(0, 0, 0, 0))
 const a_month_ago = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate())

// ● カレンダー
// 選択できない日付データ(自由に変更できます。)
 const disable_dates = ['']

// カレンダーの日本語化
    flatpickr.localize(flatpickr.l10ns.ja);

// カレンダーの表示
    flatpickr('#date-form', {
// スマートフォンでもカレンダーに「flatpickr」を使用
     disableMobile: true,
// 1ヶ月前から本日まで選択可
     minDate: a_month_ago,
// 選択できない日付
     disable: disable_dates
});
</script>

なおflatpicker(カレンダー機能)を使わないときは無視していいです。できればjsに置き換えたほうが良いです

 

Gem chart.jsの導入方法(Docker+Rails)

Gemfileに記述します。↓

Gemfile

gem 'rails', '~> 5.1.7'
gem 'puma', '~> 3.7'
gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '3.3.7'
gem 'font-awesome-sass'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'
gem 'turbolinks', '~> 5'
gem 'bcrypt', '~> 3.1.7'
gem 'kaminari'
gem 'rails-i18n', '~> 5.1'
gem 'jbuilder', '~> 2.5'

gem 'chart-js-rails', '~> 0.1.4' ←追加

コンテナを作ります

docker-compose build

コンテナを起動します

docker-compose up -d

コントローラを作成(名前は任意でOKです。ここではsmall_stepsとしている)

docker-compose exec web rails g controller small_steps index

package.jsonに以下を記述します


{
  "name": "chart_js_sample",
  "private": true,
  "dependencies": {
    "chart.js": "^2.7.1" ←追加
  }
}

Railsアプリがライブラリを読み込めるように以下を記述します。

/app/assets/javascripts/application.js
//= require rails-ujs
//= require turbolinks
//= require jquery3
//= require jquery_ujs
//= require jquery
//= require Chart.min  ←追加
//= require bootstrap
//= require_tree .

ビューに以下を記述します。

small_steps/index.html.erb

<h1 class="text-center">スモールステップとビッグエリア</h1>
<canvas id="myChart" width="200" height="200"></canvas>
<script>draw_graph();</script>

Javascript部分はCoffeeScriptに変換します。

app/assets/javascripts/small_steps.coffee
window.draw_graph = ->
  ctx = document.getElementById("myChart").getContext('2d')
  myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero:true
          }
        }]
      }
    }
  })

http://localhost:3000/small_steps/indexにアクセスすると↓

グラフが描画された!

Docker環境で新規コントローラーの作成

Docker環境でのコントローラを作成するコマンド
tasksの部分は自分が作りたいコントローラー名にする
createとdestroyアクションを作成するという意味

docker-compose exec web rails g controller tasks create destroy --skip-template-engine

–skip-template-engine: ビューファイルをスキップする設定

docker-compose exec web rails g controller tasks create destroy --skip-template-engine

コントローラーを削除したいとき

docker-compose exec web rails destroy controller macs

エスケープ処理されてしまったときの対処(エラー対処録)

経緯: グラフ作成機能を開発していたときのこと

controllerの記述

def show
  @user = current_user
  @hiits = @user.hiits
  @graphdays = @hiits.order(:training_day).limit(1000)
  @dayline = Array.new
  @graphdays.each do |graphday|
    @dayline.push(graphday.training_day.strftime('%Y/%m/%d').to_s)
  end
  @graphtimes = @hiits.order(:training_day).limit(1000)
  @minuteline = Array.new
  @graphtimes.each do |graphtime|
    @minuteline.push(graphtime.training_time)
  end
end

show.html.erbの記述

<div class="chart-container" style="position: relative; width: 100%; height: 400px;">
  <canvas id="My_Chart"></canvas>
</div>
<script>
    var graphdays = <%= @dayline %>, graphminutes =
    <%= @minuteline %>
</script>
<script>draw_graph();</script>

 

グラフが表示されない・・・

検証してみてみると

var graphdays = [&quot;2021/03/11&quot;, &quot;2021/03/30&quot;, &quot;2021/04/07&quot;, &quot;2021/04/09&quot;, &quot;2021/04/10&quot;, &quot;2021/04/16&quot;, &quot;2021/04/16&quot;], graphminutes =
[22, 15, 20, 10, 10, 6, 10]

“が&quot;に変換されている!

原因はRails3から<%= ~ %>を使って出力を行う場合に自動的にエスケープ処理が行われるようになったため。

<script>
var graphdays = <%= raw @dayline %>, graphminutes =
<%= @minuteline %>
</script>
<script>draw_graph();</script>

または

<script>
var graphdays = <%== @dayline %>, graphminutes =
<%= @minuteline %>
</script>
<script>draw_graph();</script>

とするとエスケープされないように出力できる

var graphdays = ["2021/03/11", "2021/03/30", "2021/04/07", "2021/04/09", "2021/04/10", "2021/04/16", "2021/04/16"],
 graphminutes = [22, 15, 20, 10, 10, 6, 10]

グラフが描画された!

@dayline.html_safeで試した場合はエラーとなった。

rawと<%==%>は<%==%>のほうがパフォーマンス上のメリットが少々あるそうなので後者を選ぶことにした。