無料利用枠で作成する詳しくは
EC2の接続から例：の部分をコピーしてターミナルで行う。
ssh -i "EC2の秘密鍵.pem" ec2-user@自分のElasticIPアドレス
sudo adduser newuser sudo passwd newuser
sudo visudo root ALL=(ALL) ALL newuser ALL=(ALL) ALL
.graph-container {@extend .container-fluid;}
!optionalを追加する。
.graph-container {
@extend .container-fluid !optional;
}
mysql -h my-portfolio-web.c*********l.ap-northeast-1.rds.amazonaws.com -u admin -p
RDSのダッシュボードのデータベースを選択して、データベースが動作しているか(停止中でないか)確認します。
EC2ダッシュボードの「セキュリティーグループ」を選択して、「インバウンドルールを編集」をクリックします。
mysql -h my-portfolio-web.c*********l.ap-northeast-1.rds.amazonaws.com -u admin p
ERROR 1045 (28000): Access denied for user ‘admin’@’10.10.0.10’ (using password: NO)
とエラーが出てしまいました・・・
これは-u admin -pの部分が-u admin pになっていたためでした。
正しいコマンドをします。(****の部分は環境で変わる部分です)
mysql -h my-portfolio-web.c*********l.ap-northeast-1.rds.amazonaws.com -u admin -p
MySQLに接続できました！
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
:
(省略)
:
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
# 追加
gem 'rspec-rails', '~> 3.8'
gem 'factory_bot_rails', '~> 5.0'
end
group :development do
:
(省略)
:
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
Gemをインストールします。
bundle install
RSpecがインストールされているか確認します。
bundle exec rspec --version
上記のコマンドを実行するとターミナルに以下のような実行結果が表示されます。
bundle exec rspec --version RSpec 3.8 - rspec-core 3.8.2 - rspec-expectations 3.8.4 - rspec-mocks 3.8.1 - rspec-rails 3.8.2 - rspec-support 3.8.2
FactoryBotがインストールされているか確認します。
bundle exec gem list | grep factory_bot_rails
上記のコマンドを実行するとターミナルに以下のような実行結果が表示されます。
bundle exec gem list | grep factory_bot_rails factory_bot_rails (5.0.2)
サンプルアプリのプロジェクトにRSpecを導入します。
rails generate rspec:install
上記のコマンドを実行すると以下のファイルが生成されます。
アプリ名 └── spec ├── rails_helper.rb └── spec_helper.rb
テスト用のDBを最新の構成にします。
rails db:migrate:reset RAILS_ENV=test
テスト用のDBとは自動テストを実行するときに利用する専用のDBです。
例えば自動テストで「全データが消えること」を確認するとき、
開発中に利用しているデータが消えてしまっては困ります。
開発中のデータと自動テスト用のデータを分離して考えることで、双方が干渉しないようになります。
docker-compose run web bundle exec rails g model hiit user:references training_day:date training_time:integer
docker-compose exec web bundle exec rake db:migrate
docker-compose exec web rails g controller hiits new edit show index
<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' %>
<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に置き換えたほうが良いです
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アプリがライブラリを読み込めるように以下を記述します。
//= 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に変換します。
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環境でのコントローラを作成するコマンド
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
<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 = ["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]
“が"に変換されている！
原因は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と<%==%>は<%==%>のほうがパフォーマンス上のメリットが少々あるそうなので後者を選ぶことにした。
WARNING: UNPROTECTED PRIVATE KEY FILE!と怒られた
sudo chmod 600 ~/Desktop/〇〇.pem
↑秘密鍵の場所(各自置いているところで異なります)
※秘密鍵の場所と秘密鍵の名前は各自で異なりますのでご注意を
自分は秘密鍵をデスクトップに仮置していたのでDesktopとなっています。
heroku run console
で調べたところ次のようなエラーが出ました。
config.autoloader = :classicconfig/application.rbに追加する
〜〜
〜〜
#moduleから上は省略
module Api
classApplication < Rails::Application
# Initialize configuration defaults for originally generated Rails version.
config.load_defaults6.1
# Configuration for the application, engines, and railties goes here.
# These settings can be overridden in specific environments using the files
# in config/environments, which are processed later.
# config.time_zone = "Central Time (US & Canada)"
# config.eager_load_paths << Rails.root.join("extras")
# これを追加↓
config.autoloader = :classic
# Only loads a smaller set of middleware suitable for API only apps.
# Middleware like session, flash, cookies can be added back manually.
# Skip views, helpers and assets when generating a new resource.
config.api_only = true
end
end
追加して保存後に
bundle exec pumactl start↑をコマンドしたところpumaを起動することができました。