【Rails】Webpackerを使ってjQueryとBootstrapを管理する方法

はじめに 本記事では、Rails 6.0から導入された「Webpacker」を使ってjQueryとBootstrapを管理する方法を説明します。 WebpackerでjQueryとBootstrapを管理 Railsアプリの作成 以下のコマンドを実行して、新しいRailsアプリを作成します。コマンド引数に_6. ...

applicatioin.jsにJavaScriptのコードを書くときの注意点

jQueryを使ってページにちょっとした動きをつけたいと思い、初めはindex.html.erbのようなビューに直接JavaScriptのコードを書いていました。 しかし、JavaScriptのコードが各ビューに散らばっているのはドライなコードとは言えません。特にまったく同じ処理を各ビューに書くのはメンテナンス ...

ローカルで行った変更がサーバーに反映されない事象の対処法【Capistrano+Unicorn】

変更が反映されない ローカルでRailsアプリの変更を行った後、サーバーへ反映させるためデプロイを行いました。 $ bundle exec cap production deploy無事、エラーが出ることもなくデプロイが完了。 しかし、いざWebサイトにアクセスしてみても変更が反映されていませんでした。 Un ...

Railsアプリのデプロイまとめ【Capistrano+Unicorn+Nginx】

はじめに 当ポートフォリオサイトをVPSサーバーにデプロイしました。念願の独自ドメインも取得し、感無量という感じです。 Herokuにデプロイしていたときとは違い、様々なエラーが頻発してかなり大変な道のりではありましたが、一皮むけて成長できたと思っています。 手順は下記ページを参考にさせてもらいました。 ...

RailsでのAjax処理

Ajax on jQuery jQueryでAjax処理を書くと以下のような感じになります。 <input type="textbox" id="sample" /> <script> $(function() { $('#sample').on('change', function() ...

画像への直リンクを貼る方法【Rails】

小ネタですが備忘を兼ねて。 画像への直リンクを貼る方法 <%= link_to asset_url(画像のパス) do %> <%= image_tag 画像のパス %> <% end %>まずは結論から。以下、補足情報。 アセットパイプライン そもそもRailsで普通に画像を貼る場合でも、通常はi ...

【勉強会】Rails Developers Beer Bash 〜Railsのトレンドとこれから〜

はじめに 2019.9.26に渋谷で行われた「Rails Developers Beer Bash 〜Railsのトレンドとこれから〜」という勉強会に参加してきました。 初めての勉強会(※)ということで初めは少し緊張してましたが、参加してよかったと思いました。 ※正確に言うと、昔、内輪のみの勉強会に参加した ...

【Rails】お問い合わせフォーム(確認画面付き)の実装手順【完全版】

はじめに お問い合わせフォームの実装手順をいつも忘れてしまうので、完全な実装手順をまとめます。 メーラー作成 以下のコマンドを実行し、メーラーを作成します。 $ rails g mailer ContactMailer作成されたメーラー「app/mailers/contact_mailer.rb」を編集しま ...

【Rails】audiojs-railsの導入からオーディオファイル再生までの手順

はじめに HTML5にはオーディオファイルを埋め込む専用のタグが用意されています。 <audio src="sample/sample.ogg" controls> <p>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p> </audio>このaudioタグをより便利にしたJav ...

【Rails】ヘルパーメソッドのリンクでアンカーを指定する方法

はじめに アンカーリンクとは、例えば以下のようなタグのことです。 <a href="#comment">コメント</a> ... <a name="comment"></a>通常のリンクはリンク先ページの先頭に遷移しますが、アンカー名(「#」付きの文字列)を指定することで、リンク先ページのさらに指定した箇 ...