20210729のRubyに関する記事は17件です。

[Rails]基本的なエラーを知ろう

はじめに 本記事では、 私が体験したエラーや、 調べた結果、おそらく基本的なエラーを共有します。 エラーの一覧 Name Error 定義されていない変数名を利用した場合に発生。 このエラーが発生したら、変数名を打ち間違えていないか、 変数を定義し忘れていないか確認する。 No Method Error メソッドを定義していないことで生じるエラー。 メソッドを定義している場所は、コントローラーであるため、 まず、各アクションのコードをみて、メソッドを定義しているかを確認する。 コントローラーにメソッドが定義されていた場合は、 コントローラアクションに関連したデータベース上のテーブルカラムを確認する。 カラムがなければ、カラムを追加する。 Argument Error メソッドの引数の数が合っていないときや、引数が空であるときに発生するエラー。 Argumentは、引数という意味。 Routing Error 「受け取ったURL」と「コントローラー内のアクション」が関係していないためのエラー。 原因として、config/routes.rbにてコードの書き間違いであることが多い印象。 Template is missing コントローラーで設定しているアクションの ビューが設定されていない場合に発生するエラー。 Railsでは、 「コントローラーのアクション名」と「ビューのファイル名」が 同名称になる事が基本で、 コントローラーのアクションとビューのファイル名に違いがある場合は コントローラーで明示的に記載する必要がある。 終わりに 自分が体験し、 おそらく基本的なエラーはこの辺かと思い、 アウトプットとして記事にしました。 エラーが出たらとにかく調べることが大切だと思いますが、 基本的なエラーは知っておく方が対処が早くできるのではないかと思いました。 エラーは出ないのが、一番ですが、 エラーはいつになっても付き纏うものです。 逃げずに積極的にエラーに向き合いましょう!!!
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

[Rails] Capistranoを使って自動デプロイできるようにする

はじめに Capistranoを使って、アプリを改修や変更を加えたときに、コマンド一つで自動でデプロイできるようにしましたので、行った方法を残しておきます。 前回の続きとして捉えていただければ大丈夫です。 よろしくお願いします。 Capistrano導入 まずはCapistranoを導入するために必要なGemを追加します。 Gemfileのgroup :development, :test do ~ endの中に下記の記述を記入します。 Gemfile (省略) group :development, :test do gem 'capistrano' gem 'capistrano-rbenv' gem 'capistrano-bundler' gem 'capistrano-rails' gem 'capistrano3-unicorn' end (省略) 記述できたら、bundle install その後、下記のコマンドも実行します。 ターミナル # アプリケーションのディレクトリで実行しましょう % bundle exec cap install するといくつかのファイルが自動で生成されます。 Capfileを編集 Capfileとは先程のコマンドで生成されたファイルのうちの一つです。 capistranoは複数のライブラリ(Gem)から成り立っているので、このCapfileでどのライブラリを読み込むかの指定をします。 Capfileを下記のように編集します。 Capfile require "capistrano/setup" require "capistrano/deploy" require 'capistrano/rbenv' require 'capistrano/bundler' require 'capistrano/rails/assets' require 'capistrano/rails/migrations' require 'capistrano3/unicorn' Dir.glob("lib/capistrano/tasks/*.rake").each { |r| import r } production.rbを編集 続いて、コマンドで生成されたファイルの一つであるproduction.rbを編集します。 このファイルはconfig/deploy/production.rbにあります。 このファイルの一番下に下記の記述を追記します。 config/deploy/production.rb server '自分のElastic IP', user: 'ec2-user', roles: %w{app db web} Elastic IPは自分のものに置き換えてください。 deploy.rbを編集 config/deploy.rbの記述を全て削除し、下記を貼り付け、さらに自分の使用している各々のツールのバージョンや情報を置き換えます。 config/deploy.rb # capistranoのバージョンを記載。固定のバージョンを利用し続け、バージョン変更によるトラブルを防止する lock 'Capistranoのバージョン' # Capistranoのログの表示に利用する set :application, 'ご自身のアプリケーション名' # どのリポジトリからアプリをpullするかを指定する set :repo_url, 'git@github.com:Githubのユーザー名/レポジトリ名.git' # バージョンが変わっても共通で参照するディレクトリを指定 set :linked_dirs, fetch(:linked_dirs, []).push('log', 'tmp/pids', 'tmp/cache', 'tmp/sockets', 'vendor/bundle', 'public/system', 'public/uploads') set :rbenv_type, :user set :rbenv_ruby, 'このアプリで使用しているrubyのバージョン' #カリキュラム通りに進めた場合、’2.6.5’ です # どの公開鍵を利用してデプロイするか set :ssh_options, auth_methods: ['publickey'], keys: ['~/.ssh/ご自身のキーペア名.pem'] # プロセス番号を記載したファイルの場所 set :unicorn_pid, -> { "#{shared_path}/tmp/pids/unicorn.pid" } # Unicornの設定ファイルの場所 set :unicorn_config_path, -> { "#{current_path}/config/unicorn.rb" } set :keep_releases, 5 # デプロイ処理が終わった後、Unicornを再起動するための記述 after 'deploy:publishing', 'deploy:restart' namespace :deploy do task :restart do invoke 'unicorn:restart' end end 置き換える箇所は、2, 5, 8, 14, 18行目です。 二行目のCapistranoのバージョンはGemfile.lockに記載されています。 例↓ Gemfile.lock (省略) capistrano (3.11.0) (省略) 上記のように書かれていた場合は、2行目に「3.11.0」と記載します。 unicorn.rbを編集する 続いて、自動デプロイの場合Railsアプリのディレクトリが一段階深くなるため、少しunicorn.rbの記述を編集します。 config/unicorn.rb #サーバ上でのアプリケーションコードが設置されているディレクトリを変数に入れておく app_path = File.expand_path('../../../', __FILE__) # 「../」が一つ増えている #アプリケーションサーバの性能を決定する worker_processes 1 #アプリケーションの設置されているディレクトリを指定 working_directory "#{app_path}/current" # 「current」を指定 #Unicornの起動に必要なファイルの設置場所を指定 pid "#{app_path}/shared/tmp/pids/unicorn.pid" # 「shared」の中を参照するよう変更 #ポート番号を指定 listen "#{app_path}/shared/tmp/sockets/unicorn.sock" # 「shared」の中を参照するよう変更 #エラーのログを記録するファイルを指定 stderr_path "#{app_path}/shared/log/unicorn.stderr.log" # 「shared」の中を参照するよう変更 #通常のログを記録するファイルを指定 stdout_path "#{app_path}/shared/log/unicorn.stdout.log" # 「shared」の中を参照するよう変更 (省略) Nginxの設定ファイルを編集 unicornの設定ファイルを編集した理由と同じ理由でNginxのファイルも編集します。 まずはEC2にログインした状態のターミナルで下記のコマンドを実行してエディタを立ち上げます。 ターミナル $ sudo vim /etc/nginx/conf.d/rails.conf その後「iキー」で入力できるよにしたら、下記のように変更します。 /etc/nginx/conf.d/rails.conf upstream app_server { # Unicornと連携させるための設定 server unix:/var/www/リポジトリ名/shared/tmp/sockets/unicorn.sock; } # {}で囲った部分をブロックと呼ぶ。サーバの設定ができる server { # このプログラムが接続を受け付けるポート番号 listen 80; # 接続を受け付けるリクエストURL ここに書いていないURLではアクセスできない server_name Elastic IP; # クライアントからアップロードされてくるファイルの容量の上限を2ギガに設定。デフォルトは1メガなので大きめにしておく client_max_body_size 2g; # 接続が来た際のrootディレクトリ root /var/www/リポジトリ名/current/public; # assetsファイル(CSSやJavaScriptのファイルなど)にアクセスが来た際に適用される設定 location ^~ /assets/ { gzip_static on; expires max; add_header Cache-Control public; root /var/www/リポジトリ名/current/public; } try_files $uri/index.html $uri @unicorn; location @unicorn { proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_redirect off; proxy_pass http://app_server; } error_page 500 502 503 504 /500.html; } 3行目の「リポジトリ名」は自分のものに置き換えます。 17, 24行目は完全に新しい記述のため、気をつけてください。 入力を終えたら「escキー」→「:wq」の順で実行し、保存します。 Nginxの設定を変更したら、再読み込み、再起動を下記のコマンドで行います。 ターミナル [ec2-user@ip-172-31-25-189 ~]$ sudo systemctl reload nginx [ec2-user@ip-172-31-25-189 ~]$ sudo systemctl restart nginx これでNginxの編集は以上です。 データベースの起動の確認 下記コマンドでデータベースが立ち上がっているか確認します。 ターミナル [ec2-user@ip-172-31-25-189 ~]$ sudo systemctl status mariadb 緑色で「active」の文字が表示されていれば正常に起動しています。 もしactiveになっていない場合はsudo systemctl start mariadbを実行します。 Unicornのプロセスをkill 最後に自動デプロイをする前に、二重にサーバーを立ち上げることを防ぐために、プロセスをkillしておきます。 まずはプロセスを確認します。 ターミナル [ec2-user@ip-172-31-23-189 <リポジトリ名>]$ ps aux | grep unicorn ec2-user 17877 0.4 18.1 588472 182840 ? Sl 01:55 0:02 unicorn_rails master -c config/unicorn.rb -E production -D ec2-user 17881 0.0 17.3 589088 175164 ? Sl 01:55 0:00 unicorn_rails worker[0] -c config/unicorn.rb -E production -D ec2-user 17911 0.0 0.2 110532 2180 pts/0 S+ 02:05 0:00 grep --color=auto unicorn 続いてプロセスをkill ターミナル # 上記の例だと「17877」 [ec2-user@ip-172-31-23-189 <リポジトリ名>]$ kill プロセス番号 完了したらローカルで修正を全てmasterにプッシュします。 自動デプロイ ローカルのターミナルで自動デプロイは行います。 下記のコマンドをアプリのディレクトリで行います。 ターミナル # アプリケーションのディレクトリで実行しましょう % bundle exec cap production deploy これで自動デプロイ完了です。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Vue.js プロジェクトを作成

はじめに 初めてVue.jsを使用したアプリを開発しているので、 そこで構築手順をアウトプットとして記載して行きたいと思います。^^ 流れ ・vue-cliのコマンドでVue.jsのプロジェクトを作成する    ・プロジェクトの設定を聞かれるので一つずつ答えていく ・Vue.jsのサーバを起動してブラウザでウェルカム画面を表示する プロジェクトの作成 ターミナル上で次のコマンドを実装 ターミナル vue create  フォルダ名 するとターミナル上に、プリセットを利用するかどうかの質問が表示されます。 ? Please pick a preset: memo (babel, eslint) default (babel, eslint) ❯ Manually select features 今回は自分で設定を選択していきたいので「Manually select features」を選択してEnterを押します。 次に、プロジェクトで使用するライブラリを聞かれます。 ? Please pick a preset: Manually select features ? Check the features needed for your project: ◯ Choose Vue version ◯ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◯ Router ◉ Vuex ◯ CSS Pre-processors ❯◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing 今回は「Vuex」と「Linter / Formatter」を選択します。 スペースキーで選択/解除できますので、その2つを選択した状態でEnterを押します。 次に、linter / formatterの設定を聞かれます。 ? Please pick a preset: Manually select features ? Check the features needed for your project: Vuex, Linter ? Pick a linter / formatter config: ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ❯ ESLint + Prettier 今回は「ESLint + Prettier」を選択してEnterを押します。 次に、Lintを実行するタイミングを聞かれます。 ? Please pick a preset: Manually select features ? Check the features needed for your project: Vuex, Linter ? Pick a linter / formatter config: Prettier ? Pick additional lint features: ❯◉ Lint on save ◯ Lint and fix on commit 今回は「Lint on save」を選択してEnterを押します。 次に、ESLintなどの設定ファイルを集約するか各設定ファイルで分けて書くかを聞かれます。 ? Please pick a preset: Manually select features ? Check the features needed for your project: Vuex, Linter ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? ❯ In dedicated config files In package.json 今回は「In dedicated config files」を選択してEnterを押します。 次に、パッケージ管理をnpmコマンドかyarnコマンドのどちらを使うかを聞かれます。 ? Pick the package manager to use when installing dependencies: (Use arrow keys) Use Yarn ❯ Use NPM 今回は「Use NPM」を選択してEnterを押します。 最後に、今回選択した設定をプリセットとして保存しておくかどうかを聞かれます。 ? Please pick a preset: Manually select features ? Check the features needed for your project: Vuex, Linter ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Pick the package manager to use when installing dependencies: Use NPM ? Save this as a preset for future projects? (y/N) 今回は「N」を入力してEnterを押します。 これで設定の選択は完了です。 その設定に沿ってプロジェクトの作成処理が走ります。 作成が完了すると次のように表示されます。 Vue CLI v4.5.3 ✨ Creating project in /Users/username/workspace/vue-calendar/frontend. ? Initializing git repository... ⚙️ Installing CLI plugins. This might take a while... > fsevents@1.2.13 install /Users/username/workspace/vue-calendar/frontend/node_modules/watchpack-chokidar2/node_modules/fsevents > node install.js SOLINK_MODULE(target) Release/.node CXX(target) Release/obj.target/fse/fsevents.o SOLINK_MODULE(target) Release/fse.node ... ⚓ Running completion hooks... ? Generating README.md... ? Successfully created project frontend. ? Get started with the following commands: 作成されたディレクトリに移動します。 $ cd 作成したフォルダ名 nodeのバージョンを改めて設定します。 次のコマンドを実行して、今のディレクトリで使用するnodeのバージョンを指定します。 $ nodenv local 14.8.0 nodeのバージョンが14.8.0になっているかを確認します。 $ node -v v14.8.0 次のコマンドでサーバーを起動します。 $ npm run serve 処理が完了すると次のように表示されます。 DONE Compiled successfully in 1977ms 21:29:28 App running at: - Local: http://localhost:8080/ - Network: http://192.168.2.110:8080/ Note that the development build is not optimized. To create a production build, run npm run build. そうしたら、ブラウザでhttp://localhost:8080/ を開いてください。 次の画面が表示されれば成功です。 ここまでで詰まったポイント 全ての設定を終えて作成処理が始まった後に、、 Vue CLI v4.5.3 ✨ Creating project in /Users/username/workspace/vue-calendar/frontend. ⚙️ Installing CLI plugins. This might take a while... added 1193 packages in 2m ? Invoking generators... ? Installing additional dependencies... npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! Found: vue@2.6.14 npm ERR! node_modules/vue npm ERR! vue@"^2.6.11" from the root project npm ERR! peer vue@"^2.0.0" from vuex@3.6.2 npm ERR! node_modules/vuex npm ERR! vuex@"^3.4.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer vue@"3.1.5" from @vue/compiler-sfc@3.1.5 { npm ERR! node_modules/@vue/compiler-sfc npm ERR! peer @vue/compiler-sfc@"^3.0.0-beta.14" from @vue/cli-service@4.5.13 npm ERR! node_modules/@vue/cli-service npm ERR! dev @vue/cli-service@"~4.5.0" from the root project npm ERR! 3 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, @vue/cli-plugin-vuex) npm ERR! peer @vue/compiler-sfc@"^3.0.8" from vue-loader-v16@16.3.3 { npm ERR! node_modules/vue-loader-v16 npm ERR! optional vue-loader-v16@"npm:vue-loader@^16.1.0" from @vue/cli-service@4.5.13 npm ERR! node_modules/@vue/cli-service npm ERR! dev @vue/cli-service@"~4.5.0" from the root project npm ERR! 3 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, @vue/cli-plugin-vuex) npm ERR! . . ERROR command failed: npm install --loglevel error 無数のエラーが発生してしまいました^^; エラー内容で調べると この記事にたどり着きなんとか作成できました! https://qiita.com/saken649/items/ccabb2f34cdac784b383 正直内容は理解できていませんが、 解決に至った流れを記載しておきます? $ vi ~/.vuerc { "useTaobaoRegistry": true, ⇦ false 変更 "latestVersion": "4.5.13", "lastChecked": 1627541270361, "packageManager": "npm" } trueをfalseに変更してあげる "useTaobaoRegistry": false 再度実行するといけました! vue create フォルダ名 おわりに Vue.jsやりたてほやほやです。 感じたこと大事だと思ったことはしっかりアウトプットして行きたいと思います^^
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

[Rails→Vue]一対多の関係にある親子オブジェクトをネストさせた状態で取得する

[Vue→Rails]ネストされた状態の親子孫オブジェクト(一対多の関係あり)を全て同時にデータベースに保存するでは、Vue側で作ったネストされたデータを複数のテーブルに保存した。 この記事では、別々のテーブルに保存されたそれらのデータを再びネストされた形でVueコンポーネント側で取得する。 前提条件 モデル 親:School 子:Student school.rb # 親 class School has_many :students student.rb # 子 class Student belongs_to :school 保存されているレコード School { id: 1, school_name: 'first' } { id: 2, school_name: 'second'} Student { id: 1, student_name: 'Suzuki', age: 13, school_id: 1 } { id: 2, student_name: 'Hirano', age: 14, school_id: 1 } { id: 3, student_name: 'Nagai', age: 15, school_id: 1 } { id: 4, student_name: 'Sato', age: 13, school_id: 2 } { id: 5, student_name: 'Iguchi', age: 14, school_id: 2 } { id: 6, student_name: 'Arai', age: 15, school_id: 2 } axios.getによるデータの取得 $axiosはインスタンスプロパティに追加済み schools#indexにgetリクエストを送りデータを取得する <script> ... this.$axios.get('schools') .then(res => { console.log(res) }) .catch(err => { console.log(err) }) ... </script> コントローラ to_jsonメソッドの使用 includeオプションでstudentsを指定する。school.studentsで取得されるstudentの配列をschoolにネストさせることができる。 schools_controller.rb def index schools = School.all string = schools.map.to_json(include: :students) render json: string end 取得できるデータ to_jsonのincludeオプションで指定した'students'がそのままキー名になる。 data: [ { schoolName: 'first', students: [ { studentName: 'Suzuki', age: 13 }, { studentName: 'Hirano', age: 14 }, { studentName: 'Nagai', age: 15 } ] }, { schoolName: 'second', students: [ { studentName: 'Sato', age: 13 }, { studentName: 'Iguchi', age: 14 }, { studentName: 'Arai', age: 15 } ] } ] 【追記】 キー名を変えたいとき students以外のキー名にしたいとき(例:studentDataなど) モデル アソシエーションを取得するメソッドを親側に新しく定義し、目的のキー名をメソッド名にする。 school.rb class School < ApplicationRecord has_many :students def studentData # 目的のキー名 self.students end end コントローラ to_jsonメソッドのmethodsオプションでそのメソッド名を指定する。 メソッド名がそのままキー名になる。 schools_controller.rb def index schools = School.all string = schools.map.to_json(methods: :studentData) render json: string end 取得できるデータ data: [ { schoolName: 'first', studentData: [ { studentName: 'Suzuki', age: 13 }, { studentName: 'Hirano', age: 14 }, { studentName: 'Nagai', age: 15 } ] }, { schoolName: 'second', studentData: [ { studentName: 'Sato', age: 13 }, { studentName: 'Iguchi', age: 14 }, { studentName: 'Arai', age: 15 } ] } ] 参考文献
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【個人開発】リモートワーク時代なので、デスク周りに特化した写真投稿サービスを作りました

こんにちは、Barry(ばりゅー)と申します。 いきなりですが言わせてください。 このサービスは今読んでいるあなたのために作ったサービスです! はじめに リモートワークが当たり前になった今、みなさんはどんなデスクで作業してますか? 「もっと快適にしたい。」「もっとオシャレにしたい。」 デスクワーカーなら一度、いや、二度三度思ったことがあると思います。 そんなとき、他人のデスクが参考になったりしますよね。 そこでこんなサービスを開発しました。 どんなサービス? デスク周りに特化した写真投稿サービス「Buildesk(ビルデスク)」です。 【サービスURL】https://buildesk.app 【GitHub】https://github.com/en-Barry/buildesk Buildeskの一番の特徴は、使ってるアイテムも登録できること。投稿者がどんなアイテムを使っているのか瞬時に分かるようになっています。 投稿デモ 投稿詳細ページ 投稿詳細ページ 参考にしたい投稿を保存しておくことも可能です。気になったデスク、アイテムの型番や名前を忘れる心配がありません。 投稿保存ページ シェアするときもいい感じで表示されるようになってます。 どうして作った? プログラミングの勉強を始めたときに抱えた悩み。 それは、「身体が痛くて集中できない!」ということでした。 デスクワークに慣れていなかった自分は作業環境を整える必要があり、暇さえあればTwitterやインスタで参考になるデスク写真を探す日々。 ただ、Twitterやインスタで見かけるのは写真のみの投稿が多く、見た目しか参考になりません。 何のアイテムを使ってるんだろう?使い心地はどんなもんだろう? 実際に知りたいことが分からないもどかしさがありました。 そこで、みんながデスク周りに使ってるアイテムを瞬時に分かるサービスを開発しました。 使用技術 Rails '6.0.3.5' Ruby '2.6.6' 主なGem rakuten_web_service 商品価格ナビ製品検索API sorcery carrierwave ransack enum_help meta-tags hanmoto フロント jQuery Swiper Bulma インフラ AWS EC2, S3, CloudFront, RDS puma Nginx 工夫 ・ 苦労した点 jQuery x FormObject x 楽天APIで実装したアイテム登録機能 サービスの肝であり、一番苦労したのもこの部分。 スクールの講師にも実装が難しいと判断され、「Amazonのリンクを貼ればいいんじゃない?」と提案を受けていました。 ただ、世に出ているサービスとの違いはここ!といったこだわりがあったため、どうしても提案を受け入れられず。 現にjsonファイルの扱い、jQueryのDOM操作、複数モデルのデータ保存など分からないことが次々に待ち受けており実装にも1~2ヶ月かかってしまいましたが、理想に近い機能を実装できました。 デザイン 一度使ったら終わりのアプリではなく、ユーザーが長く滞在するのを想定しているアプリなので見た目にはこだわりました。 ただ、デザイン知識やCSSの知識が乏しかったためCSSフレームワークのBulmaに頼って何とか仕上げました。フレームワーク様様です。 また、投稿するとなるとスマホからの利用が多いと思ったので、スマホで操作しやすいように画面下にナビゲーションバーを自作で作りました。 TOPページ 投稿一覧ページ マネタイズ マネタイズと言えるほどでもないですが、一応収益が出る仕組みになっています。 楽天APIの利用ではアフィリエイトIDが必要になり、商品情報取得時点で自動的にアフィリンクが作成されます。 これを利用して、アイテム詳細ページにアフィリンクを設置し、自然な形で収益につながる設計ができました。 今読んでるあなたに使ってもらいたい Qiitaを読んでいるあなたこそBuildeskの対象者です。 デスクワーカーである、あなたのために作ったサービスと言っても過言ではありません! 「自慢できるほどのデスクじゃないしな。。」 そんな方も現時点のデスクを登録するメリットがあります。 デスク遍歴がひと目で分かるので、エモさを感じれる デスク周りでオススメを聞かれたときに、使ってるアイテムを思い出す手間が省ける 他人にデスクを見られると思うと、自然に片付け始める などなど.. もちろん、ガチガチにこだわってる人も大いに自慢してください! 今後のアップデートで人気の投稿はトップページで紹介する予定です。 イケてるデスクを投稿した際にはぜひTwitterでシェアしてくださいね。必ずいいねしに行きます。 記事は以上となります、ここまで読んでくださってありがとうございました!! Special Thanks プログラミングに関しての知識が全くの0だった自分が開発、リリースできるまでになったのはRUNTEQのサポートがあったから他なりません。 また@aiandroxさんをはじめとした@sho171さんや@krpk1900さんなど、RUNTEQコミュニティで出会えた方々のサポートもすごく大きかったです。 この場を借りて御礼申し上げます。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

マイグレーションをロールバックエラーの対処

実行したマイグレーションをロールバックする際に、 NOFILEが存在しエラーが起きてしまう対処法。 下記手順で1度DBを吹き飛ばして、再度実行する bundle exec rake db:drop bundle exec rake db:create bundle exec rake db:migrate bundle exec rake db:migrate:status
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Bootstrapでの文字、背景色の変更方法

Bootstrap公式サイトの Documentation→Utilities→Colorsで使用できる文字色と背景色を確認することができる。 Color 「text-primary」や「text-secondary」などのクラスを指定してすることで対応した文字色に設定することができる。 <p class="text-primary">.text-primary</p> <p class="text-secondary">.text-secondary</p> <p class="text-success">.text-success</p> <p class="text-danger">.text-danger</p> <p class="text-warning">.text-warning</p> <p class="text-info">.text-info</p> <p class="text-light bg-dark">.text-light</p> <p class="text-dark">.text-dark</p> <p class="text-body">.text-body</p> <p class="text-muted">.text-muted</p> <p class="text-white bg-dark">.text-white</p> <p class="text-black-50">.text-black-50</p> <p class="text-white-50 bg-dark">.text-white-50</p> Background color <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div> <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div> <div class="p-3 mb-2 bg-success text-white">.bg-success</div> <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div> <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div> <div class="p-3 mb-2 bg-info text-dark">.bg-info</div> <div class="p-3 mb-2 bg-light text-dark">.bg-light</div> <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div> <div class="p-3 mb-2 bg-white text-dark">.bg-white</div> <div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

[Vue→Rails]一対多の関係にある親子孫のデータがネストされたオブジェクトを全て同時にデータベースに保存する

前提条件 モデル 親:City 子:School 孫:Student 一つの市に複数の学校があり、それぞれの学校に複数の生徒がいるという想定 city.rb # 親 class City has_many :school school.rb # 子 class School has_many :students belongs_to :city student.rb # 孫 class Student belongs_to :school Vue(フロントエンド側)で生成されるオブジェクト // the city has 2 schools // each school has 3 students { city: { cityName: 'tokyo', schools: [ { schoolName: 'first', students: [ { studentName: 'Suzuki', age: 13 }, { studentName: 'Hirano', age: 14 }, { studentName: 'Nagai', age: 15 } ] }, { schoolName: 'second', students: [ { studentName: 'Sato', age: 13 }, { studentName: 'Iguchi', age: 14 }, { studentName: 'Arai', age: 15 } ] }, ] } } axiosのpostメソッドでバックエンドに送る。 コントローラ cities,schools,studentsコントローラで個別にレコードを保存するのではなく、citiesコントローラで一括で保存を行う。 ストロングパラメータの記述 cityの一つの属性としてschoolsを指定する。配列データであるschoolsは[]で表し、中にschoolsのパラメータを記述する。 さらに、schoolsの一つのパラメータとしてstudentsを指定する。同様に配列データであるstudentsを[]で表し、中にstudentsのパラメータを記述する。 createアクションの記述 CityObjectインスタンス(次章で解説)をビルドし、パラメータを渡す(2行目)。 CityObjectのインスタンスメソッド'save'(次章で解説:ActiveRecordのsaveメソッドではない)内で親子孫それぞれのモデルにおいてレコードの保存を行う(4行目)。 cities_controller.rb def create city = CityObject.new(city_params) if city.save render json: city else render json: city.errors.full_messages, status: :unprocessable_entity end end private def city_params params.require(:city).permit(:cityName, schools: [:schoolName, students: [:studentName, :age]]) end 子孫オブジェクトを包含したインスタンスの利用 City,School,Studentのパラメータを持つ非ActiveRecordクラス'CityObject'を定義する。 コントローラでCityObjectのインスタンスにパラメータが渡されているので、インスタンスメソッド'save'内でそのパラメータにアクセスし、City,School,Studentそれぞれのインスタンスに渡して保存を行う。 ActiveModelモジュールの利用 CityObjectクラスを定義し、ActiveModel::ModelをインクルードすることでActiveRecordモデルと同様の処理を可能にする(1,2行目)。 それとともにActiveModel::Attributesをインクルードし、attributeメソッドによりCityObjectに渡されたパラメータを参照できるようにする(3-5行目)。親オブジェクトの各属性を指定する。 CityObjectのインスタンスメソッド'save'の定義 CityObjectの属性値'cityName'にアクセスし、新しいCityインスタンスの属性値'city_name'としてセットし、それを保存する(10-11行目)。 schools(selfは省略可)でschoolオブジェクトの配列を取得し、一つ一つのオブジェクトについて以下のループ処理を行う(14行目)。 schoolオブジェクトの'schoolName'の値をSchoolインスタンスの属性値'school_name'としてセットし、先程保存したCityインスタンスの子オブジェクトとして保存する(15行目)。 sc[:students]でschoolオブジェクトが持つstudentオブジェクトの配列を取得し、一つ一つのオブジェクトについて以下のループ処理を行う(16行目)。 studentオブジェクトの'studentName','age'の値をStudentインスタンスの属性値'student_name','age'として渡し、先程保存したSchoolインスタンスの子として保存する(18行目)。 app/models/city_object.rb class CityObject include ActiveModel::Model include ActiveModel::Attributes attribute :cityName attribute :schools def save # Cityインスタンスの保存 city = City.new(city_name: self.cityName) city.save # Schoolインスタンスの保存 self.schools.each do |sc| school = city.schools.create(school_name: sc[:schoolName]) sc[:students].each do |st| # Studentインスタンスの保存 school.students.create(student_name: st[:studentName], age: st[:age]) end end end end 保存されるレコード City { id: 1, city_name: 'tokyo' } School { id: 1, school_name: 'first', city_id: 1 } { id: 2, school_name: 'second', city_id: 1 } Student { id: 1, student_name: 'Suzuki', age: 13, school_id: 1 } { id: 2, student_name: 'Hirano', age: 14, school_id: 1 } { id: 3, student_name: 'Nagai', age: 15, school_id: 1 } { id: 4, student_name: 'Sato', age: 13, school_id: 2 } { id: 5, student_name: 'Iguchi', age: 14, school_id: 2 } { id: 6, student_name: 'Arai', age: 15, school_id: 2 }
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

[Vue→Rails]ネストされた状態の親子孫オブジェクト(一対多の関係あり)を全て同時にデータベースに保存する

前提条件 モデル 親:City 子:School 孫:Student 一つの市に複数の学校があり、それぞれの学校に複数の生徒がいるという想定 city.rb # 親 class City has_many :school school.rb # 子 class School has_many :students belongs_to :city student.rb # 孫 class Student belongs_to :school Vue(フロントエンド側)で生成されるオブジェクト // the city has 2 schools // each school has 3 students { city: { cityName: 'tokyo', schools: [ { schoolName: 'first', students: [ { studentName: 'Suzuki', age: 13 }, { studentName: 'Hirano', age: 14 }, { studentName: 'Nagai', age: 15 } ] }, { schoolName: 'second', students: [ { studentName: 'Sato', age: 13 }, { studentName: 'Iguchi', age: 14 }, { studentName: 'Arai', age: 15 } ] }, ] } } axiosのpostメソッドでバックエンドに送る。 コントローラ cities,schools,studentsコントローラで個別にレコードを保存するのではなく、citiesコントローラで一括で保存を行う。 ストロングパラメータの記述 cityの一つの属性としてschoolsを指定する。配列データであるschoolsは[]で表し、中にschoolsのパラメータを記述する。 さらに、schoolsの一つのパラメータとしてstudentsを指定する。同様に配列データであるstudentsを[]で表し、中にstudentsのパラメータを記述する。 createアクションの記述 CityObjectインスタンス(次章で解説)をビルドし、パラメータを渡す(2行目)。 CityObjectのインスタンスメソッド'save'(次章で解説:ActiveRecordのsaveメソッドではない)内で親子孫それぞれのモデルにおいてレコードの保存を行う(4行目)。 cities_controller.rb def create city = CityObject.new(city_params) if city.save render json: city else render json: city.errors.full_messages, status: :unprocessable_entity end end private def city_params params.require(:city).permit(:cityName, schools: [:schoolName, students: [:studentName, :age]]) end 子孫オブジェクトを包含したインスタンスの利用 City,School,Studentのパラメータを持つ非ActiveRecordクラス'CityObject'を定義する。 コントローラでCityObjectのインスタンスにパラメータが渡されているので、インスタンスメソッド'save'内でそのパラメータにアクセスし、City,School,Studentそれぞれのインスタンスに渡して保存を行う。 ActiveModelモジュールの利用 CityObjectクラスを定義し、ActiveModel::ModelをインクルードすることでActiveRecordモデルと同様の処理を可能にする(1,2行目)。 それとともにActiveModel::Attributesをインクルードし、attributeメソッドによりCityObjectに渡されたパラメータを参照できるようにする(3-5行目)。親オブジェクトの各属性を指定する。 CityObjectのインスタンスメソッド'save'の定義 CityObjectの属性値'cityName'にアクセスし、新しいCityインスタンスの属性値'city_name'としてセットし、それを保存する(10-11行目)。 schools(selfは省略可)でschoolオブジェクトの配列を取得し、一つ一つのオブジェクトについて以下のループ処理を行う(14行目)。 schoolオブジェクトの'schoolName'の値をSchoolインスタンスの属性値'school_name'としてセットし、先程保存したCityインスタンスの子オブジェクトとして保存する(15行目)。 sc[:students]でschoolオブジェクトが持つstudentオブジェクトの配列を取得し、一つ一つのオブジェクトについて以下のループ処理を行う(16行目)。 studentオブジェクトの'studentName','age'の値をStudentインスタンスの属性値'student_name','age'として渡し、先程保存したSchoolインスタンスの子として保存する(18行目)。 app/models/city_object.rb class CityObject include ActiveModel::Model include ActiveModel::Attributes attribute :cityName attribute :schools def save # Cityインスタンスの保存 city = City.new(city_name: self.cityName) city.save # Schoolインスタンスの保存 self.schools.each do |sc| school = city.schools.create(school_name: sc[:schoolName]) sc[:students].each do |st| # Studentインスタンスの保存 school.students.create(student_name: st[:studentName], age: st[:age]) end end end end 保存されるレコード City { id: 1, city_name: 'tokyo' } School { id: 1, school_name: 'first', city_id: 1 } { id: 2, school_name: 'second', city_id: 1 } Student { id: 1, student_name: 'Suzuki', age: 13, school_id: 1 } { id: 2, student_name: 'Hirano', age: 14, school_id: 1 } { id: 3, student_name: 'Nagai', age: 15, school_id: 1 } { id: 4, student_name: 'Sato', age: 13, school_id: 2 } { id: 5, student_name: 'Iguchi', age: 14, school_id: 2 } { id: 6, student_name: 'Arai', age: 15, school_id: 2 }
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

[Vue→Rails]一対多の関係にある親、子、孫オブジェクトを全て同時にデータベースに保存する

前提条件 モデル 親:City 子:School 孫:Student 一つの市に複数の学校があり、それぞれの学校に複数の生徒がいるという想定 city.rb # 親 class City has_many :school school.rb # 子 class School has_many :students belongs_to :city student.rb # 孫 class Student belongs_to :school Vue(フロントエンド側)で生成されるオブジェクト // the city has 2 schools // each school has 3 students { city: { cityName: 'tokyo', schools: [ { schoolName: 'first', students: [ { studentName: 'Suzuki', age: 13 }, { studentName: 'Hirano', age: 14 }, { studentName: 'Nagai', age: 15 } ] }, { schoolName: 'second', students: [ { studentName: 'Sato', age: 13 }, { studentName: 'Iguchi', age: 14 }, { studentName: 'Arai', age: 15 } ] }, ] } } axiosのpostメソッドでバックエンドに送る。 コントローラ cities,schools,studentsコントローラで個別にレコードを保存するのではなく、citiesコントローラで一括で保存を行う。 ストロングパラメータの記述 cityの一つの属性としてschoolsを指定する。配列データであるschoolsは[]で表し、中にschoolsのパラメータを記述する。 さらに、schoolsの一つのパラメータとしてstudentsを指定する。同様に配列データであるstudentsを[]で表し、中にstudentsのパラメータを記述する。 createアクションの記述 CityObjectインスタンス(次章で解説)をビルドし、パラメータを渡す(2行目)。 CityObjectのインスタンスメソッド'save'(次章で解説:ActiveRecordのsaveメソッドではない)内で親子孫それぞれのモデルにおいてレコードの保存を行う(4行目)。 cities_controller.rb def create city = CityObject.new(city_params) if city.save render json: city else render json: city.errors.full_messages, status: :unprocessable_entity end end private def city_params params.require(:city).permit(:cityName, schools: [:schoolName, students: [:studentName, :age]]) end 子孫オブジェクトを包含したインスタンスの利用 City,School,Studentのパラメータを持つ非ActiveRecordクラス'CityObject'を定義する。 コントローラでCityObjectのインスタンスにパラメータが渡されているので、インスタンスメソッド'save'内でそのパラメータにアクセスし、City,School,Studentそれぞれのインスタンスに渡して保存を行う。 ActiveModelモジュールの利用 CityObjectクラスを定義し、ActiveModel::ModelをインクルードすることでActiveRecordモデルと同様の処理を可能にする(1,2行目)。 それとともにActiveModel::Attributesをインクルードし、attributeメソッドによりCityObjectに渡されたパラメータを参照できるようにする(3-5行目)。親オブジェクトの各属性を指定する。 CityObjectのインスタンスメソッド'save'の定義 CityObjectの属性値'cityName'にアクセスし、新しいCityインスタンスの属性値'city_name'としてセットし、それを保存する(10-11行目)。 schools(selfは省略可)でschoolオブジェクトの配列を取得し、一つ一つのオブジェクトについて以下のループ処理を行う(14行目)。 schoolオブジェクトの'schoolName'の値をSchoolインスタンスの属性値'school_name'としてセットし、先程保存したCityインスタンスの子オブジェクトとして保存する(15行目)。 sc[:students]でschoolオブジェクトが持つstudentオブジェクトの配列を取得し、一つ一つのオブジェクトについて以下のループ処理を行う(16行目)。 studentオブジェクトの'studentName','age'の値をStudentインスタンスの属性値'student_name','age'として渡し、先程保存したSchoolインスタンスの子として保存する(18行目)。 app/models/city_object.rb class CityObject include ActiveModel::Model include ActiveModel::Attributes attribute :cityName attribute :schools def save # Cityインスタンスの保存 city = City.new(city_name: self.cityName) city.save # Schoolインスタンスの保存 self.schools.each do |sc| school = city.schools.create(school_name: sc[:schoolName]) sc[:students].each do |st| # Studentインスタンスの保存 school.students.create(student_name: st[:studentName], age: st[:age]) end end end end 保存されるレコード City { id: 1, city_name: 'tokyo' } School { id: 1, school_name: 'first', city_id: 1 } { id: 2, school_name: 'second', city_id: 1 } Student { id: 1, student_name: 'Suzuki', age: 13, school_id: 1 } { id: 2, student_name: 'Hirano', age: 14, school_id: 1 } { id: 3, student_name: 'Nagai', age: 15, school_id: 1 } { id: 4, student_name: 'Sato', age: 13, school_id: 2 } { id: 5, student_name: 'Iguchi', age: 14, school_id: 2 } { id: 6, student_name: 'Arai', age: 15, school_id: 2 }
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ゾロ目を判定したい

はじめに 入力された値がゾロ目かどうかを判定したい。 2021.7.30 コメントを頂き、空白文字が入力された際の対策を追加しました。 条件 ruby 2.6.5 実際の記述 最終的な記述は以下となる。 n = gets.gsub(/ | /){""} if n.length > 1 puts n.chomp.split("").uniq.size == 1 else puts "少なくとも2文字以上入力してください" end 1. 空白を除外 入力された値に空白が含まれている場合を考慮。 n = gets.gsub(/ | /){""} 以下のようにgsubで、「全角空白」と「半角空白」が含まれていれば「空白なし」に置換している。 gsub(/ | /){""} # ① (/ | /) :  全角・半角を含むものを判定 # ② {""}  : 全角・半角を "" に置換する # 【例1】 : n に 1 1 1 1 が入力された場合(間に半角空白を入力) n = gets.gsub(/ | /){""} # => 1111 # 【例2】 : n に 1 1 1 1 が入力された場合(間に全角空白を入力) n = gets.gsub(/ | /){""} # => 1111 # 【例3】 : n に 1111 が入力された場合(先頭にに半角空白3つ入力) n = gets.gsub(/ | /){""} # => 1111 2. uniq uniqで入力された値に被りがあるか確認。 被り(重複)がある場合は、その要素を取り除き、新しい配列を結果として出力してくれる。 n = gets.gsub(/ | /){""} n.chomp.split("").uniq # 【例1】 : 渡ってきた値に被りがある時① n = gets.gsub(/ | /){""} # n に 1111 が入力された場合 n.chomp.split("").uniq # => 1 # 【例2】 : 渡ってきた値に被りがある時② n = gets.gsub(/ | /){""} # n に 1122 が入力された場合 n.chomp.split("").uniq # => 1 # 2 # 【例3】 : 渡ってきた値に被りがない時 n = gets.gsub(/ | /){""} # n に 1234 が入力された場合 n.chomp.split("").uniq # => 1 # 2 # 3 # 4 3. size uniqで被りが含まれていない配列を作成した次に、sizeを使いその配列の要素数を数える n = gets.gsub(/ | /){""} n.chomp.split("").uniq.size # 【例1】 n = gets.gsub(/ | /){""} # n に 1111 が入力された場合 n.chomp.split("").uniq.size # => 1 # 【例2】 n = gets.gsub(/ | /){""} # n に 1122 が入力された場合 n.chomp.split("").uniq.size # => 2 # 【例3】 n = gets.gsub(/ | /){""} # n に 1234 が入力された場合 n.chomp.split("").uniq.size # => 4 先程のuniqで生成された配列の要素数を出力してくれている。 4. ゾロ目の判定 「ゾロ目」ということは、入力された全ての値が同じであると言える。 なので、最終的にsizeで出力された値が1であれば入力された値は同じ数であると言える。 そのため、以下のように ==の条件演算子を用いる事で結果をtrueまたはfalseで出力してくれる。 n = gets.gsub(/ | /){""} n.chomp.split("").uniq.size == 1 # sizeの値が1と等しいかどうか判定 # 【例1】 n = gets.gsub(/ | /){""} # n に 1111 が入力された場合 n.chomp.split("").uniq.size == 1 # => true # 【例2】 n = gets.gsub(/ | /){""} # n に 1122 が入力された場合 n.chomp.split("").uniq.size == 1 # => false # 【例3】 n = gets.gsub(/ | /){""} # n に 1234 が入力された場合 n.chomp.split("").uniq.size == 1 # => false もし、結果をtrue falseでなくYes Noで出力したければ、以下のように記述することで出力できる。 n.chomp.split("").uniq.size == 1 ? "Yes" : "No" おわり true falseの判定を1行でできるのはいいですね! ifとうまく使い分けていこうと思います。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

投稿にタグ、カテゴリー付け タグで検索できるようにする(単数タグ)ジャンル検索 タグ検索

やりたいこと ①投稿時にカテゴリータグ追加。 ②カテゴリーのリンク押すと、同じカテゴリーの投稿を取り出せる ("プログラミング"押すと、同じくプログラミングというタグで投稿されてる記事一覧を見れる) まずはカテゴリーを追加できるようにする マイグレーションファイル記述 カテゴリーカラムを追加しました。 class CreateBooks < ActiveRecord::Migration[5.2] def change create_table :books do |t| t.text :title t.text :body t.string :category t.references :user,foreign_key:true t.timestamps end end end Viewファイル form_withで受け取る <%= form_with model:@book,url:books_path,local:true do |f| %> <label>Title</label> <p><%= f.text_field:title %></p> <label>Opinion</label> <p><%= f.text_area:body %></p> <label>カテゴリー</label> <p><%= f.text_field:category %></p> コントローラー修正 カテゴリーも保存できるように修正。 private def book_params params.require(:book).permit(:title,:body,:category) end View 一覧画面にカテゴリー表示する。 <% @books.each do |book| %> <td><%= link_to user_path(book.user.id) do %> <%= attachment_image_tag book.user, :profile_image,format: 'jpeg',size: "40x40", fallback: "no_image.jpg" %> <% end %></td> <td><%= link_to book_path(book.id) do %><%= book.title %></td> <td><%= book.body %></td> <td><%= book.category%></td> ここまではカラムを追加するだけなので、なんてこともなくできました。 タグのリンクで検索できるようにする コントローラー/ルーティング記述 books_controller.rb def search_book @book=Book.new @books = Book.search(params[:keyword]) end routes.rb get "search_book" => "books#search_book" Viewファイル記載 検索ワードを受け取る viewを以下の通りに書き換えます。 <td> <%= link_to book.category, search_book_path(keyword: book.category) %> </td> book.categoryを、search_book_pathにkeywordとして送っています。 そのキーワードをコントローラーで受け取っています。 モデルファイルに検索方法記述 book.rb def self.search(search_word) Book.where(['category LIKE ?', "#{search_word}"]) end 完全一致で検索しています。 self.searchは、Book.searchですね。これはコントローラーから、(search_word)に入る値を送っています。 Viewの記述:検索結果の表示 views/books/search_book.html.erb 省略 <tr> <% @books.each do |book| %> <td><%= link_to user_path(book.user.id) do %> <%= attachment_image_tag book.user, :profile_image,format: 'jpeg',size: "40x40", fallback: "no_image.jpg" %> <% end %></td> <td><%= link_to book_path(book.id) do %><%= book.title %></td> <td><%= book.body %></td> <td><%= link_to book.category, search_book_path(keyword: book.category) %></td> 省略 次回は、複数タグ付けれるようにする!!!!!!
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

rails_admin管理者画面の日本語化

今回は、下記記事で解説した管理者画面が英語表記なので、日本語化していきます。 rails_adminとcancancanを使った実装に関しては、当記事では一切触れませんので、下記記事参照ください。 rails_admin+cancancanで管理者機能実装を5ステップで解説! 手順 gemをインストール デフォルトの言語を日本語に設定 ymlに日本語の設定をする gemをインストール 日本語化するのにまずは、rails-i18というgemをインストールします。 他のエラーメッセージやdeviseの日本語化をしたときに、インストールしている場合は、飛ばしてください。 gem 'rails-i18n' で、 $ bundle install デフォルトの言語を日本語に設定 次に、デフォルトの言語を日本語に設定します。 config/application.rbに以下を追加します。 追加する場所に注意してください。 class Application < Rails::Applicationの中に記述 config/application.rb : module SampleApp class Application < Rails::Application : # 以下1行を追加 config.i18n.default_locale = :ja end end これを記述することで、デフォルトの言語を日本語にできました。 ymlに日本語の設定をする railsで日本語化したいときには、ja.ymlファイルに設定を書いていけばいいので、記述していきます。 config/locales直下にja.ymlファイルを作成してください。 以下、記述をコピペしていきます。 だいたい、テンプレートがあるので、そのままコピーしてきます。(今回のはどこからコピーしたか覚えていないので、コピー先は省略します) config/locales/ja.yml # 日本語化テンプレ ja: activerecord: # 全てのモデル記載 models: user: ユーザー post: 投稿 comment: コメント like: いいね contact: お問い合わせ attributes: # 各モデルのカラム名を記載 user: name: 名前 email: メールアドレス password: パスワード post: content: 説明 image: 画像 comment: comment: コメント内容 contact: name: 名前 email: メールアドレス content: お問い合わせ内容 errors: messages: record_invalid: 'バリデーションに失敗しました: %{errors}' restrict_dependent_destroy: has_one: "%{record}が存在しているので削除できません" has_many: "%{record}が存在しているので削除できません" date: abbr_day_names: - 日 - 月 - 火 - 水 - 木 - 金 - 土 abbr_month_names: - - 1月 - 2月 - 3月 - 4月 - 5月 - 6月 - 7月 - 8月 - 9月 - 10月 - 11月 - 12月 day_names: - 日曜日 - 月曜日 - 火曜日 - 水曜日 - 木曜日 - 金曜日 - 土曜日 formats: default: "%Y/%m/%d" long: "%Y年%m月%d日(%a)" short: "%m/%d" month_names: - - 1月 - 2月 - 3月 - 4月 - 5月 - 6月 - 7月 - 8月 - 9月 - 10月 - 11月 - 12月 order: - :year - :month - :day datetime: distance_in_words: about_x_hours: one: 約1時間 other: 約%{count}時間 about_x_months: one: 約1ヶ月 other: 約%{count}ヶ月 about_x_years: one: 約1年 other: 約%{count}年 almost_x_years: one: 1年弱 other: "%{count}年弱" half_a_minute: 30秒前後 less_than_x_seconds: one: 1秒以内 other: "%{count}秒未満" less_than_x_minutes: one: 1分以内 other: "%{count}分未満" over_x_years: one: 1年以上 other: "%{count}年以上" x_seconds: one: 1秒 other: "%{count}秒" x_minutes: one: 1分 other: "%{count}分" x_days: one: 1日 other: "%{count}日" x_months: one: 1ヶ月 other: "%{count}ヶ月" x_years: one: 1年 other: "%{count}年" prompts: second: 秒 minute: 分 hour: 時 day: 日 month: 月 year: 年 errors: format: "%{attribute}%{message}" messages: accepted: を受諾してください blank: を入力してください confirmation: と%{attribute}の入力が一致しません empty: を入力してください equal_to: は%{count}にしてください even: は偶数にしてください exclusion: は予約されています greater_than: は%{count}より大きい値にしてください greater_than_or_equal_to: は%{count}以上の値にしてください inclusion: は一覧にありません invalid: は不正な値です less_than: は%{count}より小さい値にしてください less_than_or_equal_to: は%{count}以下の値にしてください model_invalid: 'バリデーションに失敗しました: %{errors}' not_a_number: は数値で入力してください not_an_integer: は整数で入力してください odd: は奇数にしてください other_than: は%{count}以外の値にしてください present: は入力しないでください required: を入力してください taken: はすでに存在します too_long: は%{count}文字以内で入力してください too_short: は%{count}文字以上で入力してください wrong_length: は%{count}文字で入力してください template: body: 次の項目を確認してください header: one: "%{model}にエラーが発生しました" other: "%{model}に%{count}個のエラーが発生しました" helpers: select: prompt: 選択してください submit: create: 登録する submit: 保存する update: 更新する number: currency: format: delimiter: "," format: "%n%u" precision: 0 separator: "." significant: false strip_insignificant_zeros: false unit: 円 format: delimiter: "," precision: 3 separator: "." significant: false strip_insignificant_zeros: false human: decimal_units: format: "%n %u" units: billion: 十億 million: 百万 quadrillion: 千兆 thousand: 千 trillion: 兆 unit: '' format: delimiter: '' precision: 3 significant: true strip_insignificant_zeros: true storage_units: format: "%n%u" units: byte: バイト eb: EB gb: GB kb: KB mb: MB pb: PB tb: TB percentage: format: delimiter: '' format: "%n%" precision: format: delimiter: '' support: array: last_word_connector: "、" two_words_connector: "、" words_connector: "、" time: am: 午前 formats: default: "%Y年%m月%d日(%a) %H時%M分%S秒 %z" long: "%Y/%m/%d %H:%M" short: "%m/%d %H:%M" pm: 午後 # rails_admin日本語化 admin: js: true: True false: False is_present: 存在する is_blank: 空白 date: 日付 ... between_and_: ... から ... today: 今日 yesterday: 昨日 this_week: 今週 last_week: 先週 number: 数字 ... contains: 含む is_exactly: 完全に一致 starts_with: で始まる ends_with: で終わる too_many_objects: "対象が多すぎます、上の検索ボックスを使用してください" no_objects: "対象が見つかりません" loading: "読み込み中..." toggle_navigation: ナビゲーション切り替え home: name: "ホーム" pagination: previous: "&laquo; 前" next: "次 &raquo;" truncate: "…" misc: search: "検索" filter: "検索" refresh: "更新" show_all: "すべて表示" add_filter: "絞り込む..." bulk_menu_title: "選択項目を..." remove: "削除" add_new: "新規作成" chosen: "選択された%{name}" chose_all: "すべて選択" clear_all: "選択解除" up: "上" down: "下" navigation: "ナビゲーション" root_navigation: "アクション" navigation_static_label: "リンク" log_out: "ログアウト" time_ago: "%{time}前" ago: "前" more: "さらに %{count} 個以上の %{models_name}" flash: successful: "%{name}の%{action}に成功しました" error: "%{name}の%{action}に失敗しました" noaction: "操作を取り消しました" model_not_found: "モデル'%{model}'はありません" object_not_found: "'ID:%{id}'の%{model}はありません" table_headers: model_name: "モデル名" last_used: "最終アクセス日" records: "レコード数" username: "ユーザ" changes: "変更" created_at: "日時" item: "アイテム" message: "メッセージ" actions: dashboard: title: "サイト管理" menu: "ダッシュボード" breadcrumb: "ダッシュボード" index: title: "%{model_label_plural}の一覧" menu: "一覧" breadcrumb: "%{model_label_plural}" show: title: "%{model_label} '%{object_label}'の詳細" menu: "詳細" breadcrumb: "%{object_label}" show_in_app: menu: "表示" new: title: "新規%{model_label}" menu: "新規作成" breadcrumb: "新規" link: "新規%{model_label}追加" done: "作成" edit: title: "%{model_label} '%{object_label}'を編集" menu: "編集" breadcrumb: "編集" link: "この%{model_label}を編集" done: "更新" delete: title: "%{model_label} '%{object_label}'を削除" menu: "削除" breadcrumb: "削除" link: "'%{object_label}'削除" done: "削除" bulk_delete: title: "%{model_label_plural}を一括削除" menu: "一括削除" breadcrumb: "一括削除" bulk_link: "選択した%{model_label_plural}を削除" export: title: "%{model_label}をエクスポート" menu: "エクスポート" breadcrumb: "エクスポート" link: "%{model_label_plural}をエクスポート" bulk_link: "選択した%{model_label_plural}をエクスポート" done: "エクスポート" history_index: title: "%{model_label_plural}の更新履歴" menu: "履歴" breadcrumb: "履歴" history_show: title: "%{model_label} '%{object_label}'の履歴" menu: "履歴" breadcrumb: "履歴" form: cancel: "キャンセル" basic_info: "基本情報" required: "必須" optional: "オプション" one_char: "文字" char_length_up_to: "最大文字数:" char_length_of: "文字数:" save: "保存" save_and_add_another: "保存して次へ" save_and_edit: "保存して編集" all_of_the_following_related_items_will_be_deleted: "を削除してよろしいですか? 以下の項目が削除され、もしくは関係を失います:" are_you_sure_you_want_to_delete_the_object: "%{model_name}の項目" confirmation: "実行する" bulk_delete: "以下の項目が削除され、それによって関連する項目が削除され、もしくは関係を失います:" new_model: "%{name} (新規)" export: confirmation: "%{name}としてエクスポート" select: "エクスポートするフィールドを選択してください" select_all_fields: "全フィールドを選択" fields_from: "%{name}のフィールド" fields_from_associated: "関連する%{name}のフィールド" display: "カラム:%{name} 型:%{type}" options_for: "%{name}の出力オプション" empty_value_for_associated_objects: "<empty>" click_to_reverse_selection: 'クリックで選択を反転します' csv: header_for_root_methods: "%{name}" # 'model' is available header_for_association_methods: "%{name} [%{association}]" encoding_to: "文字コード" encoding_to_help: "空白の場合は%{name}になります" skip_header: "ヘッダなし" skip_header_help: "チェックすると出力にヘッダ行を含めません" default_col_sep: "," col_sep: "区切り文字" col_sep_help: "空白の場合は'%{value}'区切りです" # value is default_col_sep あ、、めっちゃ長いですねww だいたいはコピペのままでいいのですが、上の方のモデルのところだけ各自変更してください。 コメントアウトで「全てのモデル記載」と書いてあるところに、全てのモデルをモデル名と日本語変換両方書いて、 「各モデルのカラム名を記載」と書いてあるところに、モデル名、カラム名、日本語変換を記載してください。 自由に好きな日本語変換を設定できます。 たとえば、userを「最高のユーザー」なんかにも設定できますw 以上で日本語化できているはずなので、管理者画面に遷移して確認してみてください。 まとめ 日本語化手順は3ステップです! gemをインストール デフォルトの言語を日本語に設定 ymlに日本語の設定をする これで、rails_adminとcancancanを使った管理者機能が完成しました。 rails_adminはカスタマイズ性があまりないので、ここからは特にいじることもありません。 実際に使ってみて、かなりシンプルで直感的に使えるので、操作感になれていきましょう! こちらで実装方法については、5ステップでかんたんに解説してますので、こちらもどうぞ! rails_admin+cancancanで管理者機能実装を5ステップで解説!
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Rails】Bootstrapを導入する方法

My Profile プログラミング学習歴②ヶ月目のアカウントです! プログラミングスクールで学んだ内容や自分が躓いた箇所等のアウトプットの為に発信しています。 また、プログラミング初学者の方にわかりやすく、簡潔にまとめて情報共有できればと考えています。 もし、投稿した記事の中に誤り等ございましたら、コメント欄でご教授いただけると幸いです。  対象者 Bootstrapを導入してレイアウトを整えたい方 目的 bootstrapを導入して、使える状態にする 実際の手順と実例 1.Bootstrapとは 「Bootstrap:ブートストラップ」は、Twitter社が開発したCSSの「フレームワーク」 RailsにはCSSのデザインテンプレートが準備されていないので、ページデザインも各自で設計しなければなりません。 Bootstrapを利用することで、整ったデザインを効率的に作れるようになります。 2.Bootstrap導入方法 Gemfileを編集 gemを入れていきます。 下記の「jquery-rails」はBootstrapがjQueryというライブラリに依存しているため、導入します。 最終行に追記 Gemfile : : gem 'bootstrap', '~> 4.5' gem 'jquery-rails' 2.bootstrapファイルを読み込む 直接編集、もしくは下記のコマンドでファイル名を変更します。 $ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss 3.bootstrapをSCSSに読み込ませる こちらも最終行に追記 app/assets/stylesheets/application.scss : : @import "bootstrap"; 4.application.jsファイルを編集する app/assets/javascripts/application.js //= require jquery3 //= require popper //= require bootstrap-sprockets これで準備完了です。 3.実際にBootstrapを使ってみる 良く下記のサイトを参考にBootstrapを使っています。 Bootstrap4なので少し古いですが 使えるものばかりなのでぜひ参考にしてみてください
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

初学者による復習[エラー文nil:NilClassを解決しよう]

今回はよく見るエラー文に関しての復習。 私が実装しているアプリで以下のエラー文が。。。 注目したいのはnil:NilClassという文章。 これはどういうことかというと何も存在しないという意味。 例えば「ボールをバットで打とうとバッターボックスに入ったけどバット持ってないよ!」 みたいな例え。(著者の学の無さが比喩に出ているのはお許しください。伝われ!!) ここで怒られているのは <% @messages.reverse_each do |message| %> <p><%= message.text %></p> <% end %> 上記のように記述しているが 「メッセージ持ってないじゃん!」と怒られている。 なのでコントローラーの方に以下のように記述。 def show @messages = Message.all @message = Message.new end これでメッセージを持たせたのでエラー解消! 比喩で例えたバットを持ってバッターボックスに入れたということ。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

paiza POH steins_gate #paizaシュタゲ

正則表現のエントリーポイント 1.sh #!/bin/sh sed -z 's/\n/;/' 性能解析のタイプセーフ 経験値、振り分け時は分割できるのか(サンプルが丁寧だったので助かった) 2.rb #!/usr/bin/ruby n,k,*a=$<.read.tr('.','').split.map &:to_i #p a.map{|e|(e+k-1)/k}.sum # 分割できないならこっちの式になる p (a.sum+k-1)/k 例外処理のタブーサーチ 3.rb n,_,l=gets.split.map &:to_i a=n.times.map{gets.split.map &:to_i} p *l.times.map{ gets.split.map &:to_i }.each_cons(2).map{|x,y| z=y.zip(x).map{|a,b|a-b} a.index(z)+1 } 進化戦略のプロシージャ 問題文に記載がないが、どの部屋にも直接移動できる。 連結成分がループならデッドロックあり。 4.rb #!/usr/bin/ruby n,m=gets.split.map &:to_i h=Hash[*m.times.flat_map{ gets.split.map &:to_i }] visited={} h.each{|k,v| next if visited[k] next if k==v s=k while h.has_key?(k) nxt=h[k] break if visited[nxt] if nxt==s puts :Yes exit end k=nxt visited[k]=true end } puts :No なお隣り合った部屋にしか移動できない場合は部屋の並び順が一致しているか見れば良い(はず)。 4_WA.rb #!/usr/bin/ruby n,m=gets.split.map &:to_i a,b=m.times.map{ gets.split.map &:to_i }.transpose.map{|e| f=Hash[*e.sort.each_with_index.flat_map{|e,i|[e,i]}] e.map{|x|f[x]} } puts a==b ? :No : :Yes 問題文、あかんと思います。。 ネット・ガーディアンの奮闘 (追々) ranking.rb
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Rails, Docker, Postgresql, Production】本番環境で起動させる

目標 本番環境(production)でdockerを用いてrailsを動かす 実行内容 docker-compose.prd.ymlの作成 database.ymlの変更 DBの作成 アセットのプリコンパイル ビルド、起動 1. docker-compose.prd.ymlの作成 docker-compose.prd.yml version: '3' services: db: image: postgres environment: POSTGRES_USER: postgres POSTGRES_PASSWORD: postgres POSTGRES_HOST_AUTH_METHOD: 'trust' #実際にデプロイする場合は使わない PGDATA: /var/lib/postgresql/data/pgdata volumes: - ./tmp/db:/var/lib/postgresql/data web: build: . command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'" environment: RAILS_ENV: production  #これを追加する。 volumes: - .:/app - gem_data:/usr/local/bundle ports: - "3000:3000" depends_on: - db volumes: gem_data: development環境で動かしていたdocker-compose.ymlとは別で、docker-compose.prd.ymlを作成しwebのenvironmentにはRAILS_ENV=productionを指定する。 また、productionとtestではdatabase.ymlのhost: dbを指定することができるがproductionではできないためとりあえずPOSTGRES_HOST_AUTH_METHOD: 'trust'を設定する。デプロイする際には環境変数を使って設定する。 2. database.ymlの変更 database.yml production: <<: *default adapter: postgresql encoding: unicode pool: 5 database: app_production username: postgres password: postgres username, passwordにはdocker-compose.prd.ymlのPOSTGRES_USER,POSTGRES_PASSWORDの値を設定する。(デプロイの際は環境変数を用いる)hostはdocker-compose.prd.ymlでPOSTGRES_HOST_AUTH_METHOD: 'trust'を設定しているため特に設定しない。 3. DBの作成 docker-compose -f docker-compose.prd.yml run web rails db:create RAILS_ENV=production -f docker-compose.prd.ymlをつけ忘れないように気を付ける。 docker-compose -f docker-compose.prd.yml run web rails db:migrate RAILS_ENV=production 4. アセットのプリコンパイル docker-compose run web rails assets:precompile RAILS_ENV=production 本番環境の場合、アセットのプリコンパイルをしておかないと起動しない。 5. ビルドして起動 docker-compose -f docker-compose.prd.yml build docker-compose -f docker-compose.prd.yml up 補足 development環境では読み込まれていた画像が表示されなかったりcssが適用されない,httpのメソッドがDELETEで指定しているのにGETでアクセスされているなどがあった場合 config/environments/production.rbで次のように変更する。 production.rb config.public_file_server.enabled = true 参考にしたサイト  Dockerでコンテナ化したrailsアプリをproductionモードで起動する  【初めての環境構築】Windows10にRails6+MySQL8.0+Dockerな環境を作ってみた まとめ 改善点や間違っているところがあればぜひ意見をお願いします!
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む