Active AdminのCSSの影響を取り除く 現在RailsでWebアプリを作成しています。 Bootstrapの表示が正常にできないと思ったら、ActiveAdminのCSSと競合しているということがわかりました。そのときの解決の備忘録を書いておきます。 前提 react-bootstrapにてフロントでbootstrapとreactを利用 devise, active adminは既に導入済み rails 6.x ruby 2.7.2 で動かしています。 作業 config/initializers/active_admin.rbに追記する。 config/initializers/active_admin.rb config.clear_stylesheets! config.register_stylesheet 'active_admin' config.clear_javascripts! config.register_javascript 'active_admin' 2.app/assets/stylesheets/application.cssから、 *= require_tree . を取り除く app/assets/stylesheets/application.css /* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's * vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. *= require bootstrap/dist/css/bootstrap.min.css *= require_self */ ハマった所 The asset "active_admin.scss.css" is not present in the asset pipeline のエラーが発生した。 config/initializers/active_admin.rbの設定に拡張子(.scss)を追加して書いていたため、.scss.cssを参照してしまっていた。 *=require tree .を外すことでbootstrapとactive_adminのcssの競合を排除できることに気が付かなかった。 以上です。

My Profile プログラミング学習歴②ヶ月目のアカウントです！ プログラミングスクールで学んだ内容や自分が躓いた箇所等のアウトプットの為に発信しています。 また、プログラミング初学者の方にわかりやすく、簡潔にまとめて情報共有できればと考えています。 もし、投稿した記事の中に誤り等ございましたら、コメント欄でご教授いただけると幸いです。　 対象者 HTTPメソッドについて知りたい方 目的 HTPPメソッドの種類を知る PATCHとPUTの違いを知る 実際の手順と実例 1.HTTPメソッドのまとめ メソッド名 　　よく使うアクション 　　　意味 GET 　　　　　Read/new/show/edit 　　 リソースの取得 POST 　　　 　Create 　　　 　　　　　 子リソースの作成、　リソースへのデータ追加、その他処理 PUT 　　　　　Create/Update 　　　　　リソースの更新、リソースの作成 DELETE 　　　Delete 　　　　　　　　　リソースの削除 HEAD 　　　　　　　　　　　　　　　　 リソースのヘッダ (メタデータの取得) OPTIONS 　　　　　　　　　　　　　　 リソースがサポートしているメソッドの取得 TRACE 　　　　　　　　　　　　　　　 プロキシ動作の確認 CONNECT 　　　　　　　　　　　　　 プロキシ動作のトンネル接続への変更 PATCH 　　　　Update 2.PATCHとPUTの違い ほとんどの更新処理はPATCHメソッド！ PATCHメソッドは箱の中身（一部）を入れ替える PUTメソッドは箱ごと（全部）替えて置き換える

概要 Docker + Rails環境でSprocketsからWebpackerに移行作業時にWebpackerをインストールするまでのエラーにハマってしまったため、解決方法を紹介します。 暫定的対応のため、本来のエラー解決方法をご存知の方はコメント下さると幸いです。 環境 ruby 2.6.3 Rails 5.2.3 docker エラーが起こるまで Dockerfileにyarnを使用するための記述追加 Gemfileにgem 'webpacker' 追加 docker-compose run web bundleにてgemインストール \ エラー発生 / webpack binstubs not found. Have you run rails webpacker:install ? Make sure the bin directory or binstubs are not included in .gitignore Exiting! ERROR: 1 エラー文にある rails webpacker:install はwebpackerのインストール完了後に実行するつもりだったし、 .gitignore にbin/以下を無視するような記述を加えてないし。。。という感じでハマりました。 解決方法 ① bin/ にwebpackという名前で空のファイルを生成後にdocker-compose run --rm web bundle実行。（webpack binstubs not found.と言われているので） \ エラー文が変わった! / Configuration config/webpacker.yml file not found. Make sure webpacker:install is run successfully before running dependent tasks ERROR: 1 ②エラー文に従い、config/webpacker.yml作成 ファイルの中身はgithubからコピペで。 ③ docker-compose run --rm web bundle実行。 gemインストール完了！ ④docker-compose run --rm web bundle exec rails webpacker:install実行にて、Webpackerをインストール。 ①、②で作成したファイルを上書き出来ます。 以上が解決手順です。 終わりに 本来bin/webpackもwebpacker.ymlもwebpackerインストール時に自動生成されるもののため、何故手動生成する必要があったかモヤモヤしています。 もしわかる方いらっしゃいましたら教えてください！！ 参考情報 https://qiita.com/junara/items/28fbc5e4d2ba6a162d24 Rails5.2 + Docker環境にVue.js (Webpacker) を導入する

はじめに オリジナルアプリの完成が近づいてきました。もっともっと盛り込みたい機能が山ほどあるのですが、転職活動のほうも疎かにできないので、とりあえずAWSにはデプロイしようということで作業を進めていました。 AWSにデプロイするにあたって、アプリの改修などをした際に、結構たくさんのコマンドを打たなければならなくて、大変なので自動デプロイを導入しました。 Capistranoという自動デプロイツールを使って導入したのですが、完成後、手動デプロイしていた時にはしっかり表示されていたアプリ内で使われている画像たちが表示されなくなってしまいました。 明確な理由はわからないまま、自分なりに仮説を立てて解決できましたので記事に残しておきます。 よろしくお願いします。 画像が表示されなくなった 私の画像はapp/assets/imagesの配下に置いていて、img_tagで呼び出していました。 手動でデプロイを行なっていた時は、ちゃんと呼び出されていたのですが、自動デプロイをした後に小さな画像が壊れたようなマークだけが表示されて、目的の画像が表示されていなくなりました。 確実に自動デプロイの過程で問題が生じたとしか考えられませんでしたので、その辺を振り返っていたところ、そういえばアプリのファイルたちの階層を一段階深くしたために、パスを書き換えた作業を思い出し、これが怪しいんじゃないかと思いました。 解決 もしかするとパスが変わっているのかもと思い、その周辺をネットで嗅ぎ回っていたところ、やはり自動デプロイの際に画像がコンパイルされ、パスが変わるのだとおっしゃっている方がいました。あまり意味はわかっていませんが。。。 その方が言うには↓（下記のコードは私のコードをもとに作成しています） <%= image_tag "Textbook student.png" %> このようなコードを <%= image_tag asset_path("Textbook student.png"%> というふうに書き換えることで解決できるそうなので試してみました。 しかし、私の場合うまくいきませんでした。。。 パスが悪いのかどうかわからないですが、他にパスを書き換えるとしたら、、、と考えていたら一つ思い浮かびました。 もしpublicフォルダの配下に置いたらどうなるのかな、と思いまして、画像たちをpublicフォルダ配下へお引越しさせ、パスを下記のように書き換えました。 <%= image_tag "/Textbook student.png" %> public配下の時は相対パスで/を置いてあげるだけで場所を示せるのですね。 初めて知りました。 これでどうだと言わんばかりにデプロイしてリロード押したら、見事に画像の表示に成功しました！ 本当の解決 実はこの記事を書いた後に、理由が判明しました。 自動デプロイをした際にいじっていたNginxの設定に記述ミスがありました。 こちらその設定画面↓ 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; } コメントアウトで「assetsファイル(CSSやJavaScriptのファイルなど)にアクセスが来た際に適用される設定」と書かれている中の、リポジトリ名に置き換えるところを、置き換え忘れていました。 通りでpublicだったら反映されたわけですね。。。 今後気をつけたいと思います。 最後に assetsの配下に置いていた画像も実は一部ちゃんと表示はできていたので、パスはあまり関係なかったと思います。画像の容量が大きかったのかなと言う気もします。わかる方がいればコメントお願いします。 ネットを徘徊していた時に思ったことは、本来publicの使い方とassets/imagesの使い方はそれぞれ特徴があり、どこに画像をおくべきかはいろんな意見があるように感じました。 またちゃんと理解した時に記事書けたらなと思います。

前提 ECサイトを作成しています。 商品登録ページで以下のようなルーティングエラーが発生しました。 今回、namespaceを使い管理者側(admin)、顧客側でルーティングをわけていました。 エラーの内容 createアクションはあるし、POSTになっている。 解決方法 <%= form_with model:@item, local:true do |f| %>を、以下の通り書き換え。 <%= form_with model:@item,url:admin_items_path,local:true do |f| %> データが、form_withの判断で/itemsに送られていました。 namespaceを使っており、本来飛ばすべき先は、admin_items_pathでした。 エラーの原因はform_with namespace使用時には注意！ <%= form_with model:@item, local:true do |f| %> 商品の新規登録画面でform_withを用いてフォームを作成していました。 <%= form_with model:@item, url:'admin_items_path', local:true do |f| %> このようにフォームで入力したデータの送信先をurlで指定することもできるというのは知っていましたが、 resoucesを使用してルーティングしていたので、urlの指定は不要という認識でいました。

はじめに 突然ですが、ご自身の声は好きですか？嫌いですか？ ちなみに私自身は後者です。理由は男なのに声が高くて電話でよく女性に間違われるからです笑 ふとそんな話を通っているスクールで話したところ男性・女性問わず「自分の声」が嫌い・苦手と思っている方が意外と多いことが分かりました。調べてみると、下記の一般向けに行われた調査データのように自分の声が好きと答えた人は約3割なのに対して、自分の声が嫌いと答えた人は約7割と圧倒的に多いということが分かります。（データ情報古いですが・・・） 参考: あなたは「自分の声」が好き？ 嫌い？ 声は生まれ持ったもので変えることはできません。その為、今「自分の声」が嫌い・苦手だと感じている人に向けて声を好きになれるきっかけを与えられるサービスを提供できないかと思ったのが作成のきっかけです。 サービス概要 PC（IEは不可）・タブレット・スマホでご利用いただけます。 簡単5秒でユーザーの声を分析し、その声に似た有名人を表示してくれるサービスです。 使い方 簡単２ステップです。 トップページより １.　”さっそく声の成分をチェック”ボタンをクリックし、５秒間声を録音 ２.　”分析結果を確認する”ボタンをクリックする デモ動画 Q.このサービスを利用して本当に「自分の声」を好きになるの？ A.必ず好きになります 下記がその理由です。 分析結果が期待以上だった場合（例.福◯雅治とか新◯結衣が出る） → 周囲に自慢していただき承認欲求を満たすことができます。 分析結果が期待にそぐわない場合（例.ク◯ちゃんとかマツ◯ばっかり出るとか） → 開き直ってネタにできます。笑い話にすることでそのユーザーにとって新たな道が開けます。 要するにどっちの結果に転んでも自分の声がネタになるので、なんか自分の声悪くないかもー!と思えてきていつの間にか自分の声が好きになる！！という未来が確約されるも同然な訳です。 （なお異論は大いに認めます） 主な使用技術 Ruby 3.0.0 Rails 6.1.3 Vue.js 2.6.1 Highcharts Capistrano AWS(VPC,EC2,RDS,ALB,Route53,ACM) 外部API Microsoft Speaker Recognition 「話者識別」 このサービスのメイン部分といっても過言ではありません。使っていただいたユーザーの方より声ってどういうロジックで処理しているのか知りたいという意見がちらほらあったのですが、すみません、私もそこの詳しい処理は分かりません笑 というのも、このAPIに声のデータを事前に登録しておいて、判別させたい声のデータを送ると、レスポンスとして声成分の一致度が高い順にデータを返してくれるという処理を行なってくれている為です。とても便利・・・ 参考: Speaker Recognition　とは ちなみにこのAPI、実装記事がほとんどなく、ドキュメント頼みでした。（基本的にはドキュメント見て進めるとは思うので当たり前なのですが）　しかしドキュメント通りにやっても上手くいかないこともあり（開発者ページの質問回答にドキュメントの修正内容が書いてあることもありました）、かつ外部APIを使うのが初めてだったので使いこなすまでに１ヶ月近くかかったのはここだけの話・・・ 工夫した点 直感ですぐ使えるデザインを意識 ユーザーが直感ですぐ使えるよう、トップページでほぼ完結できるようなデザインを心掛けました。また現状の仕様ではユーザー登録・ログイン機能は必要ないと判断し、実装しませんでした。 分析結果の表示 ユーザーに繰り返し使ってほしいという思いから、使う都度結果がある程度異なるよう、APIに登録している音声データは推奨時間よりも短くしています（あえて精度を落としてます）。 １回目 2回目 現状の使用したユーザーからの改善・要望案（随時対応予定） 録音中に何喋っていいのか分からない 現状はただ５秒間声を録音するという指定だけなので、録音中に「あー」とか適当に喋ってしまうことがあると思うので、特定のワードを指定して喋ってもらうなどの実装を考えたいと思います。 分析結果で出てきた名前をクリックするとGoogle検索画面に飛んで検索できるようにして欲しい 使用しているユーザーの方で分析結果で出てきた人を知らないという意見があったので、分析結果の名前をクリックするとGoogle検索でその名前の人物を検索できるなどの実装を考えたいと思います。 分析結果をツイートした際に分析結果を画像で表示にしてほしい 現状は分析結果を文字でツイートできるようにしています。ただ他の診断系のサービスの場合、画像で診断結果をツイートできることが多いと思うので将来的には分析結果を画像でツイートできるように実装考えたいと思います。 　　　　　　　　　　　　　　　　　　　　　　　 　　　　　　　　　 今後追加してみたい機能 分析結果で表示される人物のレパートリーを増やす 現状は30人弱登録しているのですが、50人程度には増やしたいと考えています。 真似したい有名人の声を選択してどれだけ似てるか数値で表示させる ユーザーから要望があり、サービスの幅が広がりそうだと思いましたので実装方法考えます。 終わりに 昨年の11月から本格的にRailsの学習を始め、このサービスが私にとって初めてのアプリ制作でした。内容はシンプルだと思いますが、作れるアプリではなく、自分が作りたいアプリを作り、リリースするという目標を達成出来たことにまずはほっとしています。ありがたいことにリリースしてから既に様々なユーザーの方に使っていただき、フィードバックも多くいただいております。今後はユーザーにリピートして使っていただくということが最大の課題になるかと思うのでユーザーに飽きられないような機能の実装に努めたいと思います。 twitterアカウント https://twitter.com/yama2_0506 私が通っていたスクール（現場を意識したカリキュラムの難易度・運営側の手厚いサポート・コミュニティの活発さ　どれをとってもオススメしたいスクールです。未経験でこれからスクール入学を検討されている方は是非！） https://runteq.jp/

はじめに ローカルで機能開発中に、最新のリモートブランチの動作確認をしようと、git pull をしました。 しかし、develop ブランチに切り替えるのを忘れており、作業中のブランチにpullしてしまったため、pullを取り消す方法についての備忘録です。 前提 branchAで作業中 まだコミットしていないファイルがある状態でpullしてしまった 対応方法 git pull はgit fetch でリモートの最新状態のブランチを持ってきて、ローカルの現在いるブランチにマージするコマンドなので、pull してきたリモートブランチのマージを取り消しすればよいだけです。 つまりマージする前の位置にHEADを移動させればいいことになります。 1. HEADの移動履歴を確認 まずは、現在のHEADの位置を確認しましょう。 % git reflog # 現在のHEADの位置 e6ec135b (HEAD -> feature/branchA) HEAD@{0}: pull origin HEAD: Merge made by the 'recursive' strategy. # ここに戻したい eea24d80 HEAD@{1}: commit: branchA での作業内容 d4352211 (develop) HEAD@{2}: checkout: moving from develop to branchA これでマージ前のHEADの位置がHEAD@{1} で有ることがわかりました。 後はgit reset --hard を利用して、強制的にHEADを移動するだけです。 git reset --hard は、HEAD，作業ツリー、インデックスのすべてを指定したコミットに書き換えるコマンドになります。 注意点 ここで１つ注意しておくことは、現在のブランチで作業中の場合は、変更をコミットするか退避させておかないと、現在の作業内容が消えてしまうことです。 今回はgit stash を使って退避させる方法を取ります。 2. 作業中ブランチの変更を退避 現在branchAで作業中の内容を退避させます。 ※今回はまだ修正中でコミットしたくないため、この方法を適用 git stash save "コメント" -u 3. git pullの取り消し git reset --hard HEAD@{1} これで上手くHEADの位置が元に戻っていれば完了です。 さいごに 間違えてしまっても焦らずに対処できるように、これからもどんどん気づいたことをかいていきます。

背景 Rspec初心者の自分がテストを書いていて「ActionController::UrlGenerationError: No route matches」というエラーに遭遇しました。これでちょっとハマってしまったので同じように悩む人がいたらと思いメモとしてまとめておきます。 原因 超初歩的なところでparamsにURLのパスパラメーターを設定していないのが原因でした。 例えばoffices/:office_id/user/:user_idのURLに設定したコントローラーアクション（show）をテストするためには以下のようにパスパラメーターをparamsに設定しないといけません。 get :show, params: { office_id: 1, user_id: 1}

はじめに ポリモーフィック関連先の項目の検索方法を時間をかけて調べたのですが、なかなか出てこなかったためまとめておこうかなと思います。 ポリモーフィック関連の作成方法などはやりません。 関連リンクを下記に載せておくので、必要であれば参考にしてください。。 Railsガイド - ポリモーフィック関連付け https://railsguides.jp/association_basics.html#%E3%83%9D%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E9%96%A2%E9%80%A3%E4%BB%98%E3%81%91 関連性 以下のようなAnimalモデル、Pandaモデル、Catモデルの構成を作成します。 animal.rb class Animal < ApplicationRecord belongs_to :animalable, polymorphic: true end panda.rb class Panda < ApplicationRecord has_many :animal, as: :animalable, dependent: :destroy end cat.rb class Cat < ApplicationRecord has_many :animal, as: :animalable, dependent: :destroy end ポリモーフィック関連先の項目の検索方法 手順としては、以下となります。 AnimalモデルにPandaモデルをJOIN where句で検索を実行 まずは、Pandaモデルの例を見ていきます。 # join SQL join_sql = <<-"EOS" JOIN pandas ON pandas.id = animals.animalable_id AND animals.animalable_type = 'Panda' EOS animals = Animal.joins(join_sql) # search SQL animals.where("pandas.name LIKE '%ran%'") 次にCatモデルです。まぁ同じですが。。 # join SQL join_sql = <<-"EOS" JOIN cats ON cats.id = animals.animalable_id AND animals.animalable_type = 'Cat' EOS animals = Animal.joins(join_sql) # search SQL animals.where("cats.name LIKE '%dora%'") まとめ ActiveRecord を使っていろいろと試してみたのですが、期待する動作をしてくれませんでした。 力技であまり良くないんだろうなぁと思いましたが、SQLを直接書きました。 もっといいやり方をご存知の方がいれば、教えていただきたいです。 参考 Rails4: ActiveRecord polymorphicのjoins検索？ https://smallmakeprgnote.wordpress.com/2014/09/11/rails4-activerecord-polymorphic%E3%81%AEjoins%E6%A4%9C%E7%B4%A2%EF%BC%9F%EF%BC%88%E3%83%A1%E3%83%A2%EF%BC%89/

ページトップ機能はいろんな実装方法があると思いますが、今回はJavaScript（jQuery)とFontAwesomeを使ったページトップへ戻るボタンの実装をしていきます。 スクロールが多いページだとページトップボタンは必須かなと考えます。 ただスマホの場合は指でスクロールが簡単にできるので、スマホのみのサービスの場合は必須とまではいかないかなと。（スマホではあまりページトップボタンクリックされてないみたいなデータがあったような、、、） 完成イメージはこちらです。(右下のボタン) 実際の動作を確認したい方は、ぼくのポートフォリオを確認してみてください。 ある程度スクロールしたら右下に出てくるので、クリックしてみてください。 サーッと１番上まで戻ります。 それではいってみましょう！ 開発環境 ruby 2.6.3 Rails 5.2.6 前提 jQueryが使える状態 FontAwesomeが使える状態 手順 ページトップ機能を実装する手順は3ステップです！ ビューでボタンを配置 CSSを追加 動きをつける ビューでボタンを配置 まずは、ビューにFontAwesomeを使ってボタンと要素を配置しています。 ボタンは全ビューで共通したものを使うのでapplication.html.erbのmainタグの中に記述していきます。 そのまま記述するとごちゃごちゃするので、部分テンプレート化しています。 views/layouts/_pagetop.html.erb <div class="container"> <div class="row"> <div class="col-12"> <!-- ページトップへ戻るボタン --> <p class="pagetop" style="display: none;"> <a href="#"> <!--ボタンの表示にはFontAwesomeを使用--> <i class="fas fa-chevron-up"></i> </a> </p> </div> </div> </div> <%= yield %>の下に配置 views/layouts/application.html.erb : <main> <%= yield %> <%= render 'layouts/pagetop' %> </main> : CSSを追加 CSSでは、 ①ボタンの配置場所 ②ボタンのデザイン ③FontAwesomeアイコンのデザイン に関する記述をしていきます。 assets/stylesheets/homes.scss /* ページTOPに戻る */ // ボタンの配置場所 .pagetop{ display: block; position: fixed; right: 18px; bottom: 10px; } // ボタンのデザイン .pagetop a{ display: block; font-size: 0; width: 50px; height: 50px; text-align: center; background: gray; border-radius: 50%; line-height: 50px; } // FontAwesomeアイコンのデザイン .pagetop a i{ font-size: 20px; color:#fff; line-height: 50px; } 動きをつける JavaScriptでは２種類の処理を記述します。 ①ページトップボタンの表示の処理 ②ページの１番上まで戻る処理 別々に見ていきます。 ①ページトップボタンの表示の処理 どれだけスクロールしたかによって、ボタンを表示非表示させます。 解説 // ページトップボタン表示、非表示 // Turbolinks無効化(詳しくは過去記事参照) $(document).on('turbolinks:load', function() { // 画面をスクロールを起点 $(window).scroll(function () { // ページのトップの位置をnowに代入 var now = $(window).scrollTop(); // ページトップから1000pxスクロールしたら以下を実行 if (now > 1000) { // ボタンがふわっと現れる $('.pagetop').fadeIn("slow"); } else { // ボタンがふわっと消える $('.pagetop').fadeOut('slow'); } }); }); ②ページの１番上まで戻る処理 表示されたボタンをクリックするとサーっとページの１番上まで戻っていきます。 解説 // ページトップへ戻るクリックで、スクロールして１番上に戻る // Turbolinks無効化(詳しくは過去記事参照) $(document).on('turbolinks:load', function() { $(function(){ // ボタンクリックで発火 $('.pagetop').click(function(){ // アニメーションで速さを指定してサーっとページトップまで戻ります $('body,html').animate({ scrollTop: 0},500); return false; }); }); }); Turbolinksに関する記事はこちら [Rails]リロードしないとJavaScript(jQuery)が動かない問題 最後にこの処理をまとめて記載しておきます。 assets/javascripts/application.js // ページトップボタン表示 $(document).on('turbolinks:load', function() { $(window).scroll(function () { var now = $(window).scrollTop(); if (now > 2500) { $('.pagetop').fadeIn("slow"); } else { $('.pagetop').fadeOut('slow'); } }); }); // ページトップへ戻るクリックで、スクロールして１番上に戻る $(document).on('turbolinks:load', function() { $(function(){ $('.pagetop').click(function(){ $('body,html').animate({ scrollTop: 0},500); return false; }); }); }); これで、ページトップ機能が実装できました。 まとめ ページトップ機能を実装する手順は3ステップです！ ビューでボタンを配置 CSSを追加 動きをつける 今回は、かなりかんたんにページトップへ戻る機能を実装しました。 基本的なページトップ機能の実装方法が理解できたと思いますので、デザインを変更してみたり、スクロールする範囲を変えてみたり、１番上まで戻るスピードを変えてみたりと、いろいろ試してみてください。 自分で考えて試してみることで、もっと理解が深まって考えて実装できるようになるはずです！ 頑張ってください！ 最後まで見ていただきありがとうございました。

はじめに rails初学者の私的にrails generateがややこしく感じたので、まとめる事にしました。 参考になることがあれば、幸いです。 rails generateについて rails generateとは簡単に言うと、いろんなファイルなどをテンプレートとして作ってくれるものです。 rails generateで作ったファイルなどは、rails destoryを使って削除することが出来ます。 generateで作れるファイルにはmodel,controller,migration,view,asset,root,test,helperがあります。 generateの後ろにいれる単語によって作られるファイルが変わります。 scaffold $ rails generate scaffold NAME　... 上記のように入力すると、generateで作れるファイルを全て作ることができます。 scaffold_controller $ rails generate scaffold_controller NAME　... 上記のように入力すると、controller,view,test,helperを作ることができます。 controller $ rails generate controller NAME　... 上記のように入力すると、controller,view,asset,root,test,helperを作ることができます。 model $ rails generate model NAME　... 上記のように入力すると、model,migration,testを作ることができます。 migration $ rails generate migration NAME　... 上記のように入力すると、migration,testを作ることができます。 終わりに 間違いがあれば教えてくだい。

はじめに これからプログラミングを学習するにあたって、学ぶ言語について以下にまとめました。 （間違いがありましたら、ご指摘を頂けますと幸いです） HTML 言語の正式名称　 　ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の略 　 ハイパーテキスト 　文書・画像・図表・音声・動画などのリンクを貼ったり、埋め込むことができる仕組み 　 マークアップ 　サイト内の文書に意味づけをしていく作業。 　HTMLでは文書をタグで囲むことで意味をつけていくことで、 　コンピューターが正しく認識できるようにする。 　 ランゲージ 　言語 開発された経緯　 　WEBページを作成するために開発された言語である 主にどのように利用されているのか 　ほとんどのWEBページにおける基本的な骨組みはHTMLで構成されている メモ 　SEO「検索エンジン最適化（Search Engine Optimization）」を意識しタグを使うことで、 　検索エンジンが、より正確に文書の中身を理解できるようになる。 　 　 CSS　 言語の正式名称 　カスケーティング・スタイル・シート（Cascading Style Sheets） カスケーティング 　カスケードとは、何段も連なった小さな滝のこと。 　転じて、同じものがいくつも数珠つなぎに連結された構造や、 　連鎖的あるいは段階的に物事が生じる様子を表す。 スタイルシート 　構造化文書などにおける表示形式を制御する仕組み。 　・・・WEBページのデザインやレイアウトなどの見栄えを変更できる 開発された経緯 　WEBページの見た目の部分を編集するために開発された 主にどのように利用されているのか 　文字のサイズや色、レイアウトなどのWEBページ上で表現される部分を 　細かく編集する際に用いられる。 メモ 　HTMLとセットで使用されることが多い。 　HTMLは「ページの構造」cssは「ページの装飾」を指定する言語といえる。 JavaScript（JS） 言語の正式名称 　ジャバスクリプト（JavaScript ）  開発された経緯 　元々はWEBページに動作をつけるために開発された 主にどのように利用されているのか　 　・ポップアップウィンドウを出現させる 　・ブラウザ上で画像を拡大表示してWebページを見やすくする 　・メッセージ送付フォームやパスワードの入力フォームなどを設置する　等 　 メモ 　クライアントサイドの言語である。（反対＝サーバーサイド言語） 　プログラミング言語のJAVAとは、全くの別物。メロンとメロンパンくらいの違う。 Ruby 言語の正式名称 　ルビー（Ruby） 開発された経緯 　まつもとひろゆき氏により開発されたオブジェクト指向言語・スクリプト言語である。 　全てのデータがオブジェクトとして扱う純粋なオブジェクト指向スクリプト言語であり 　可読性を重視した構文が特徴。 主にどのように利用されているのか 　Ruby on Railsというフレームワークを使うことで 　効率よくWEBサイトやWEBベースの業務システムを開発することができる メモ 　フリーソフトウェアであるため、無料で利用でき、コピー・変更・再配布が自由である。 　 Ruby on Rails 言語の正式名称 　ルビー・オン・レールズ 開発された経緯 　Rubyを使用したフレームワークの一つ。 　Rubyを使って簡単なコードでWEBアプリケーションの開発ができるように作られた 主にどのように利用されているのか 　クックパッド（お料理レシピサイト） 　グノシー（ニュースアプリ） 　食べログ（グルメサイト）　等 メモ 　Ruby on RailsはMVCアーキテクチャ（アーキテクチャ＝構造）で構成されており 　Model（データを扱う箇所） 　View（ユーザーが直接目にする箇所） 　Controller（ModelとViewの連携を行う箇所）の要素に分解し、開発を行う。 　 調べていて気になった単語 クライアントサイドとサーバーサイド ・クライアントサイド言語 　（JavaScript・CSSなど） 　WEBサーバーから結果がプラウザに返ってきて 　プラウザ側で処理するときに動作する言語 ・サーバーサイド言語 　（Ruby・PHPなど） 　サーバー内部で動く言語でデータベースの処理を行う仕組みを作る言語 　 コンパイラ言語とインタプリンタ型言語 　前提として 　・プログラムを実行するには、 　　機械で理解するように言語を翻訳（コンパイル）する必要がある 　・翻訳の方法の違いにより呼び方が異なる 　 ・コンパイラ言語 　記述したプログラムをコンピューターが理解可能な形式に事前に一括でコンパイルする言語 ・インタプリンタ型言語 　記述したプログラムを１行ずつコンパイルする言語 ＊気をつける点 　 インタプリンタ型言語≠スクリプト言語 　 スクリプト型言語とは 　開発で使用されるコードの内、読みやすく簡易的に記述できるプログラミング言語の汎称

検索機能をransackで導入してみた 作っているサイトの検索機能にransackを使ってみたので、備忘録 ほぼ参考資料の通りに行っています。 Gemfile gem 'ransack' ターミナル bundle install routing routes.rbにcollectionでsearchを加える routes.rb resources :institutions do collection do get 'search' end end ターミナル search_institutions GET /institutions/search(.:format) institutions#search 普通にgetしてもルーティングはできた rb.routes.rb get "institutions/search" ターミナル institutions_search GET /institutions/search(.:format) institutions#search controller controller.rb before_action :set_q, only: [:index, :search] def search @results = @q.result end private def set_q @q = Institution.ransack(params[:q]) end view index.html.erb <h1>医療機関検索</h1> <%= search_form_for @q, url: search_institutions_path do |f| %> <%= f.label :name_cont, '医療機関名' %> <%= f.search_field :name_cont %> <br> <%= f.submit '検索' %> <% end %> search.html.erb <% @results.each do |institution| %> <!-- 検索結果を@resultsで受け取る --> <tr> <td> <% if institution.image? %> <%= image_tag institution.image.url, alt: "クリニック画像", class: "image" %> <% else %> <%= image_tag "default_institution_image.png", class: "image" %> <% end %> </td> <td><%= institution.name %></td> <td><%= institution.postcode %></td> <td><%= institution.address %></td> <td><%= institution.introduction%></td> <td><%= link_to "編集", edit_institution_path(institution.id) %></td> <td><%= link_to "削除", institution, method: :delete, data: {confirm: "本当に削除しますか"} %></td> </tr> <% end %> メソッド よく使いそうなものを抜粋しました。 メソッド _eq _start _end _cont _lt _lteq _gt _gteq 説明 完全一致 前方一致 後方一致 部分一致 未満 以下 大きい 以上 参考資料 【Rails】 ransackを使って検索機能がついたアプリを作ろう！

概要 新規投稿（photo）に複数タグ(tags)を付けられるように実装していきます。 ※タグは別途、ユーザーによる新規登録機能が実装済みとして考えます。 解決方法 ①中間テーブル（photo_tags）を生成して、各テーブルとのアソシエーションを記述する。 ②複数のタグ選択時にプルダウンのデザインを良くするためにselect2を導入する。 ③新規投稿時にタグが紐づくように、photosコントローラー内のパラメーターの記述を編集する。 ④タグの複数選択ができるように、ビューファイルを編集する。 ※前提として、すでにusersテーブルとphotosテーブル、tagsテーブルの生成が完了しているとします。 それぞれのテーブルのカラムとアソシエションは下記の通りです。 README ### users table | Column | Type | Options | | ------------ | --------------| ----------- | | first_name | string | null: false | | last_name | string | null: false | | nickname | string | null: false | | email | string | null: false | | password | string | null: false | | introduction | string | | | profile_image | ActiveStorage | | ### Association - has_many :photos ### photos table | Column | Type | Options | | ----------- | ------------- | ------------------------------ | | snap | ActiveStorage | null: false | | title | string | null: false | | description | string | null: false | | price_id | integer | null: false | | user_id | references | null: false, foreign_key: true | ### Association - belongs_to :user ### tags table | Column | Type | Options | | ------ | ------- | ----------- | | name | integer | null: false | 中間テーブル（photo_tags）を生成して、各テーブルとのアソシエーションを記述する まず、ターミナルで下記コマンドを実行します。 terminal $rails g model photo_tag マイグレーションファイルを下記のように編集します。 20210604172740_create_photo_tags.rb class CreatePhotoTags < ActiveRecord::Migration[6.0] def change create_table :photo_tags do |t| t.references :photo, foreign_key: true t.references :tag, foreign_key: true t.timestamps end end end マイグレーションファイルを編集したら、下記コマンドを実行します。 terminal $rails db:migrate $rails s #サーバー再起動 各モデルに対して、アソシエーションを記述します。 app/models/photo.rb class Photo < ApplicationRecord --中略-- has_many :photo_tags, dependent: :destroy has_many :tags, through: :photo_tags --中略-- end app/models/tag.rb class Tag < ApplicationRecord has_many :photo_tags, dependent: :destroy has_many :photos, through: :photo_tags --中略-- end app/photo_tag.rb class PhotoTag < ApplicationRecord belongs_to :photo belongs_to :tag end dependent: :destroy それぞれphoto、tagが削除されるとphoto_tagsテーブルのレコードも削除されます。 through: :photo_tags 中間テーブルを介して、多対多のアソシエーションを記述しています。 複数のタグ選択ができるように、select2を導入する 複数タグ選択が可能なプラグイン”select2”をCDN経由で導入します。 https://select2.org/getting-started/installation リンクからコードをコピペして、下記ファイルを編集します。 app/views/layouts/application.html.erb <!DOCTYPE html> <html> <head> --中略-- 　　　　　　　　<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> 　　　　<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" type="text/javascript"></script> 　　　　<script type="text/javascript"> 　　　　$(document).ready(function() { 　　　　$('.js-example-basic-multiple').select2(); 　　　　}); 　　　　</script> 　　</head> 　　<body> 　　<%= yield %> 　　</body> </html>　　 新規投稿時にタグが紐づくように、photosコントローラー内のパラメーターの記述を編集する。 photosコントローラーを下記のように記述します。 app/controllers/photos_controller.rb class PhotosController < ApplicationController before_action :authenticate_user!, except: [:index, :show] before_action :set_photo, only: [:show, :edit, :update, :destroy] before_action :set_tags, only: :index before_action :move_to_index, only: [:edit, :update, :destroy] --中略-- def new @photo = Photo.new @photo.photo_tags.build end def create @photo = Photo.new(photo_params) if @photo.valid? @photo.save redirect_to root_path else render :new end end --中略-- private def photo_params params.require(:photo).permit(:snap, :title, :gender_id, :price_id, :description, { tag_ids: [] }).merge(user_id: current_user.id) end --中略-- end @photo.photo_tags.build newアクション内に photoに紐づく中間テーブルのインスタンスが生成されます。 def photo_params params.require(:photo).permit(:snap, :title, :gender_id, :price_id, :description, { tag_ids: [] }).merge(user_id: current_user.id) end その後createアクションのストロングパラメーターで tag_idsを受け取って登録処理が行われるようにします。 タグの複数選択ができるように、ビューファイルを編集する collection_select文を使用して下記のように記述します。 app/views/photos/new.html.erb <%= form_with model: @photo, url: photos_path, local: true do |f| %> --中略-- <div class="form-group"> <%= f.label :names, "タグ" %> <%= f.collection_select(:tag_ids, Tag.all, :id, :name, {}, {class:"form-control js-example-basic-multiple",multiple: true, include_hidden: false}) %> </div> --中略-- <% end %> f.collection_select(保存されるカラム名, オブジェクトの配列, カラムに保存される項目, 選択肢に表示されるカラム名, { オプション }, { htmlオプション }) multiple: true htmlオプションに記述することで、複数選択できるようになリます。 参考

with_options 「with_options 〇〇 」と書くことで、 複数の情報に対して共通したオプションを付けることが可能となる 記述例 「nickname, last_name, first_name それぞれのカラムが空だと保存できない」というバリデーションを設定する場合 class User < ApplicationRecord validates :nickname, presence: true validates :last_name, presence: true validates :first_name, presence: true end 上記のようにカラムひとつひとつにpresence: true（カラムが空だと保存できない）というバリデーションを記述することになる with_options使用した場合 class User < ApplicationRecord with_options presence: true do validates :nickname validates :last_name validates :first_name end end with_options presence:true do 〜 endの記述により、do 〜 endの情報に対して、値が存在 presence しなければならないという制限を一括で設けることができました。