【Rails】Webpackerを使ってjQueryとBootstrapを管理する方法
![](https://autovice.s3.ap-northeast-1.amazonaws.com/uploads/article/picture/14/rails.jpg?X-Amz-Expires=600&X-Amz-Date=20240908T011950Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIASDZCAGFGH4Y2EDPG%2F20240908%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-SignedHeaders=host&X-Amz-Signature=12e82e6cb13b83789d6b9fe6d337be20ecb13e4622282a68ff7872ea34aa9a04)
はじめに
本記事では、Rails 6.0から導入された「Webpacker」を使ってjQueryとBootstrapを管理する方法を説明します。
WebpackerでjQueryとBootstrapを管理
Railsアプリの作成
以下のコマンドを実行して、新しいRailsアプリを作成します。コマンド引数に_6. ...
applicatioin.jsにJavaScriptのコードを書くときの注意点
![](https://autovice.s3.ap-northeast-1.amazonaws.com/uploads/article/picture/13/rails.jpg?X-Amz-Expires=600&X-Amz-Date=20240908T011950Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIASDZCAGFGH4Y2EDPG%2F20240908%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-SignedHeaders=host&X-Amz-Signature=94fb34d22c6f15666d7c66dad9787e6620d2f7aa774b3c268c24d02249e4280f)
jQueryを使ってページにちょっとした動きをつけたいと思い、初めはindex.html.erbのようなビューに直接JavaScriptのコードを書いていました。
しかし、JavaScriptのコードが各ビューに散らばっているのはドライなコードとは言えません。特にまったく同じ処理を各ビューに書くのはメンテナンス ...
ローカルで行った変更がサーバーに反映されない事象の対処法【Capistrano+Unicorn】
![](https://autovice.s3.ap-northeast-1.amazonaws.com/uploads/article/picture/12/rails.jpg?X-Amz-Expires=600&X-Amz-Date=20240908T011950Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIASDZCAGFGH4Y2EDPG%2F20240908%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-SignedHeaders=host&X-Amz-Signature=171aaf556284494752fae87d7954997fecfb340f4ff045324aa7757b4ff1c61b)
変更が反映されない
ローカルでRailsアプリの変更を行った後、サーバーへ反映させるためデプロイを行いました。
$ bundle exec cap production deploy無事、エラーが出ることもなくデプロイが完了。
しかし、いざWebサイトにアクセスしてみても変更が反映されていませんでした。
Un ...
Railsアプリのデプロイまとめ【Capistrano+Unicorn+Nginx】
![](https://autovice.s3.ap-northeast-1.amazonaws.com/uploads/article/picture/10/453062-PF8ULV-498.jpg?X-Amz-Expires=600&X-Amz-Date=20240908T011950Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIASDZCAGFGH4Y2EDPG%2F20240908%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-SignedHeaders=host&X-Amz-Signature=c9b2c94c262ab2a4ce41aaf0ef902ce47bb9f7a4e3f61715424e79027c3ecd38)
はじめに
当ポートフォリオサイトをVPSサーバーにデプロイしました。念願の独自ドメインも取得し、感無量という感じです。
Herokuにデプロイしていたときとは違い、様々なエラーが頻発してかなり大変な道のりではありましたが、一皮むけて成長できたと思っています。
手順は下記ページを参考にさせてもらいました。
...
RailsでのAjax処理
![](https://autovice.s3.ap-northeast-1.amazonaws.com/uploads/article/picture/9/rails.jpg?X-Amz-Expires=600&X-Amz-Date=20240908T011950Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIASDZCAGFGH4Y2EDPG%2F20240908%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-SignedHeaders=host&X-Amz-Signature=d78cda0623da9e835fd5592ceb150e3406166f2c1a80096486ed68d520237345)
Ajax on jQuery
jQueryでAjax処理を書くと以下のような感じになります。
<input type="textbox" id="sample" />
<script>
$(function() {
$('#sample').on('change', function() ...
画像への直リンクを貼る方法【Rails】
![](https://autovice.s3.ap-northeast-1.amazonaws.com/uploads/article/picture/8/rails.jpg?X-Amz-Expires=600&X-Amz-Date=20240908T011950Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIASDZCAGFGH4Y2EDPG%2F20240908%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-SignedHeaders=host&X-Amz-Signature=a936c82498c821f573731ebbc8784e59174576f3449f1a6b4fe2af0f946033b2)
小ネタですが備忘を兼ねて。
画像への直リンクを貼る方法
<%= link_to asset_url(画像のパス) do %>
<%= image_tag 画像のパス %>
<% end %>まずは結論から。以下、補足情報。
アセットパイプライン
そもそもRailsで普通に画像を貼る場合でも、通常はi ...
【勉強会】Rails Developers Beer Bash 〜Railsのトレンドとこれから〜
![](https://autovice.s3.ap-northeast-1.amazonaws.com/uploads/article/picture/7/rdbb.jpg?X-Amz-Expires=600&X-Amz-Date=20240908T011950Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIASDZCAGFGH4Y2EDPG%2F20240908%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-SignedHeaders=host&X-Amz-Signature=3b0af0ddd1cf69996e4bb84447ac60f1266901a6b631939a9c1c1dd61d61f880)
はじめに
2019.9.26に渋谷で行われた「Rails Developers Beer Bash 〜Railsのトレンドとこれから〜」という勉強会に参加してきました。
初めての勉強会(※)ということで初めは少し緊張してましたが、参加してよかったと思いました。
※正確に言うと、昔、内輪のみの勉強会に参加した ...
【Rails】お問い合わせフォーム(確認画面付き)の実装手順【完全版】
![](https://autovice.s3.ap-northeast-1.amazonaws.com/uploads/article/picture/5/rails.jpg?X-Amz-Expires=600&X-Amz-Date=20240908T011950Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIASDZCAGFGH4Y2EDPG%2F20240908%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-SignedHeaders=host&X-Amz-Signature=03a46a55c66b26db596106035f784b85ca2b603418b03afa4670e1097f898a4c)
はじめに
お問い合わせフォームの実装手順をいつも忘れてしまうので、完全な実装手順をまとめます。
メーラー作成
以下のコマンドを実行し、メーラーを作成します。
$ rails g mailer ContactMailer作成されたメーラー「app/mailers/contact_mailer.rb」を編集しま ...
【Rails】audiojs-railsの導入からオーディオファイル再生までの手順
![](https://autovice.s3.ap-northeast-1.amazonaws.com/uploads/article/picture/4/rails.jpg?X-Amz-Expires=600&X-Amz-Date=20240908T011950Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIASDZCAGFGH4Y2EDPG%2F20240908%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-SignedHeaders=host&X-Amz-Signature=b8536d4d66d39cce790b6ff9b5c8db6c9902bf300749c525a114305025816ef9)
はじめに
HTML5にはオーディオファイルを埋め込む専用のタグが用意されています。
<audio src="sample/sample.ogg" controls>
<p>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p>
</audio>このaudioタグをより便利にしたJav ...
【Rails】ヘルパーメソッドのリンクでアンカーを指定する方法
![](https://autovice.s3.ap-northeast-1.amazonaws.com/uploads/article/picture/3/rails.jpg?X-Amz-Expires=600&X-Amz-Date=20240908T011950Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIASDZCAGFGH4Y2EDPG%2F20240908%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-SignedHeaders=host&X-Amz-Signature=a6c57d666d85d35e42cd1b95e4232baf3f5a4fe8db64f5b6342ba06e67559cc9)
はじめに
アンカーリンクとは、例えば以下のようなタグのことです。
<a href="#comment">コメント</a>
...
<a name="comment"></a>通常のリンクはリンク先ページの先頭に遷移しますが、アンカー名(「#」付きの文字列)を指定することで、リンク先ページのさらに指定した箇 ...
![](/assets/profile-1055d2f9a1a248bf051584d3572c2f2d79d103e956e0fcee48f1cab5cd40472b.jpg)
坂井 光太郎 / Sakai Kotaro
Ruby on Rails を中心とした Web アプリ開発全般に関する技術情報をまとめています。業務に関するご依頼・ご相談、当サイトに対するご感想やメッセージはコンタクトフォームからお気軽にお問い合わせください。